Chapter 3: Navbars
Beautiful CSS always starts with great HTML markup... still! In this chapter, we'll mark up a navbar correctly and make it display horizontally. Next, we'll give ourselves a logo and an icon and make sure those icons are accessible. We'll add a "call to action" button for our resume. And finally, of course, we'll make it all responsive.
Part 1: Marking up the HTML
Create the correct markup for a navbar in the HTML block of the CodePen exercises.
Part 2: Styling a horizontal navbar
We start with basic text-based navigation styling for our site. Let's style the navbar to go horizontal across the page. The text should be white. Your name should have the Oxygen font, while the rest of the navbar should have the Oxygen Mono font. We'll work on icons and buttons later. For now, style this as all text and for a mobile/tablet screen.
Part 3: Adding Accessible Icons
Let's add an accessible icon to go by our name, and let's swap out icons for Github and LinkedIn in the navbar. We'll use Font Awesome for the icons, to keep things easy for us. However, you can always use SVG's instead of Font Awesome for your icons.
Part 4: Creating a call to action button and make it responsive
It's recommended for every website to have a strong call to action. In this case, we want visitors to download your resume so you can get a job. Let's turn the "Resume" link into a button. Finally, make the navbar responsive, so it looks like the images shown for tablet/mobile and desktop.
Part 5: You try it: Footer layout
Let's review everything you've done so far and create a footer for this website.
- Start with the markup. Make sure it's good quality and reflects the content. What's most important? What's navigation? What's extra information? Get your links in place.
- Set up LinkedIn, Github, and email as icon links.
- The entire footer is about 400px wide at all dimensions. (You don't need any responsive design.)
- Refer to the screenshot below for how your text should look.
