Github and Website Workshop/about-me-section: Difference between revisions

From OpenHatch wiki
Content added Content deleted
imported>Auria
(Created page with "Welcome to Challenge 8 of the [https://openhatch.org/wiki/Github_and_Website_Workshop Github and Website Workshop] - creating a welcome section The goal of this challenge is ...")
 
imported>Auria
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Welcome to Challenge 8 of the [https://openhatch.org/wiki/Github_and_Website_Workshop Github and Website Workshop] - creating a welcome section
Welcome to Challenge 8 of the [https://openhatch.org/wiki/Github_and_Website_Workshop 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.
The goal of this challenge is to create an about me section (below the previous section) which we can link to the navigation bar.

[[File:GH-Website-Mockup1.png]]


==HTML==
==HTML==
Line 30: Line 32:


Save the changes and reload index.html. When you’re satisfied, [https://openhatch.org/wiki/Github_and_Website_Workshop/git-commit-changes commit and push the changes].
Save the changes and reload index.html. When you’re satisfied, [https://openhatch.org/wiki/Github_and_Website_Workshop/git-commit-changes commit and push the changes].

[https://openhatch.org/wiki/Github_and_Website_Workshop/three-column-section Next: Challenge 9]

Latest revision as of 15:12, 6 March 2015

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.

HTML

<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

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