It's time to learn about CSS!
We're going to learn some basics about the language & learn about the many ways to lay out our content! 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: How to CSS?
In the last lesson, we created a CSS naming convention to add classes to our FAQ page HTML. If you're just joining us in the course, that means you'll need to create an FAQ page (for any topic or fictional company) on CodePen and add CSS classes. Re-Read through the last lesson to understand the nuance behind a proper CSS naming convention.
In this lesson, we're going to add styles to our FAQ page. However, we're only going to work on the layout. This means that we'll only be focusing on arranging the blocks of content to conform to our design. Sidebar on the left, main content in the center, header on top (or fixed to the top of the viewport!), etc. We'll also want our content to collapse into a single column when the screen gets smaller (down to 320px wide) Don't add CSS in order to style anything else! There's enough to learn about layout for one week!
Take a look at the following codepen to help gain an understanding of how media queries work - https://codepen.io/tevko/pen/arZreQ
What you'll need to study
A few tips:
Don't use HTML tables for page layout! They're inflexible and outdated. We have other, more powerful modules for CSS layout!
Make sure you have the correct meta tags in your < head > for the viewport to respond properly when the screen size changes.
Make sure you have enough in your demo to properly experiment with your CSS layout. Ideally, you should have some sort of sidebar, middle column for main content, header, and footer.
Make sure you're using CSS media queries so that your FAQ page is responsive!
Homework:
Reply to the email with a link to the updated codepen and a brief summary of what you've learned about CSS layout. Also include your plans to continue studying CSS layout and how you'll keep this new skill sharp!
Extra points. This lesson will be tough! Take your time, read through all of the material, and triple check your work! When you get done, look through https://www.smashingmagazine.com/category/css and find a few articles to read. Write down your questions about what you've read and work through googling to answer them in your free time!
Top comments (0)