# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code
git merge starter --no-edit

# code and enjoy!

# do all your coding on `main`!

# switch to gh-pages to publish
git checkout gh-pages

# merge the changes from main
git merge main

# push to GitHub to publish
git push origin gh-pages

# switch back to main branch for more coding
git checkout main

# remember to push your souce code for grading
git push origin main

/* A rule with many properties */
h1 {
  font-family: 'Helvetica';
  color: white;
  background-color: #333; /*dark gray*/
}

/* CSS */
.highlighted { 
  background-color: yellow;
}

<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>

p { /* applies to all paragraphs */
  font-family: 'Helvetica'
}

.alert { /* applies to all elements with class="alert" */
  font-size: larger;
}

.success { /* applies to all elements with class="success" */
  color: #28a745; /* a pleasant green */
}

<p class="alert success">
  This paragraph will be in Helvetica font, a larger
  font-size, and green color, because all 3 of the above
  rules apply to it.
</p>

<!-- HTML -->
<p>This text has <i>emphasis!</i></p>

<!-- Do this! -->
<img src="puppy_picture.jpg" alt="a cute puppy">

<div class="green-rect" aria-label="a giant green rectangle">
</div>

<!-- Don't do this -->
<h2>I want this text to be big</h2>

<!-- Do this -->
<p>I want this text to be big</p>

/* use CSS to make things bigger or bolder */
p {
  font-size: 1.75em;
  font-weight: bold;
}

<h1>My Hobbies</h1>
<p>These all are activities I love to do on a regular basis.</p>

  <h2>Physical Activities</h2>

    <h3>Playing Soccer</h3>
    <p>Soccer is a team sport played between two teams of eleven players with a spherical ball.</p>

    <h3>Dancing</h3>
    <p>Dance is a performing art form consisting of purposefully selected sequences of human movement.</p>

      <h4>Salsa</h4>
      <p>Salsa is a popular form of social dance that originated in the Caribbean.</p>
     
      <h4>Rock'n'Roll</h4>
      <p>Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.</p>

    <h3>Gardening</h3>
    <p>Gardening is the practice of growing and cultivating plants as part of horticulture.</p>

  <h2>Relaxing Activities</h2>

    <h3>Watching Movies</h3>
    <p>A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.</p>

    <h3>Meditate</h3>
    <p>Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.</p>

<!-- these three paragraphs will all have the same 
     "parent" which can be styled on its own -->
<div>
  <p>Lorem ipsum dolor</p>
  <p>sit amet consectetur</p>
  <p>Adipisicing elit</p>
</div>

<!-- these paragraphs are in a different "group" -->
<div>
  <p>Lorem ipsum dolor</p>
  <p>sit amet consectetur</p>
</div>

<!-- A collection of "cards" on a page -->
<div class="card-group">
  <div class="card">
    <div class="card-header">Featured</div>
    <div class="card-body">
      <h2>Card 1</h2>
      <p>An information card</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <h2>Card 2</h2>
      <p>Another information card</p>
    </div>
  </div>
</div>

<!-- Don't do this -->
<button>Click here to view info!</button>

<!-- Do this -->
<a href="info.html">Click here to view info!</a>

/* use CSS to make links look like buttons if desired */
a {
  font-weight: 400;
  text-align: center;
  color: #fff;
  background-color: #007bff;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
}