Github and Website Workshop/about-me-section: Difference between revisions
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 |
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.