Github and Website Workshop/about-me-section

From OpenHatch wiki
Jump to navigation Jump to search

Welcome to Challenge 8 of the Github and Website Workshop - creating an about me section

The goal of this challenge is to create an about me section (below the previous section) which we can link to the navigation bar.

GH-Website-Mockup1.png

HTML[edit]

<main>
   <section id="welcome">
      <!-- section for welcome component -->
   </section>
   <section id=”about”>
      <h1>About</h1>
         About me stuff here
   </section>
</main>

Challenge: what link would we put in <a href="[some link]">About</a> ?

  • Hint: think about what page we’re on and what id we want to link to
  • We can link to an object with id "blah" with href=#blah

CSS[edit]

Challenge: design a style for section#about and the h1 inside of it

  • Tip: we want the style for h1 to be distinctive from the text below it (think about color, font-size, or text-transform)

Challenge: add a background image to section#about

  • Tip: Subtle Patterns is a great resource to find subtle backgrounds where text can be easily read on top of

Save the changes and reload index.html. When you’re satisfied, commit and push the changes.

Next: Challenge 9