It's time to do some work!
We're going to learn how to make a nav bar look nice! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.
This course is completely free and will be free forever. It takes a bit of time to prepare and support, so if you'd like to contribute, you can do so at https://paypal.me/tevko. Any contribution helps!
This week: Using our new skills to make something.
In the last lesson, we added some CSS to our FAQ page to make it look great!
In this lesson, we're going to take a break from the FAQ page and apply our new skills to a new challenge. We're going to take some raw HTML for a nav item and apply some CSS to make it functional and nice looking.
Copy (or Fork) the content in this codepen to get started.
The Rules:
- No Javascript
- You can add HTML, but you can't remove any
- On small screens, a button should appear. Clicking the button should cause the nav to fly out from the left (like this)
- On large screens, the nav should stick to the top of the screen
- Use the "checkbox hack" to enable the fly out nav when the button is clicked.
- Add CSS to not only make it functional, but look nice as well!
A few tips:
- Don't overdesign. Focus on making the nav work on small screens and with the checkbox hack before anything else!
- This exercise is hard. Take your time and make sure you understand the exercise before you get started. Reach out if you have questions!
- While you may be tempted to add two navs and hide one on small / large screen sizes, don't do it! Duplicate navigations are bad for accessibility!
Homework:
Reply to the email with a link to the redesigned nav and a brief summary of what you've learned about CSS design. Also include your plans to continue studying CSS and what else you think is possible with the checkbox hack!
Extra points.
Add transitions and keyframe animations to the nav interactions!
Top comments (0)