It's time to take the next step! There's a LOT to learn here. Don't forget to use the hashtag #TimTeachesCode to chat about the course, help each other out, or brag about your new skills! Remember, you can all contact me whenever you'd like, 24/7 and I'll respond ASAP.
** LESSON 4 **
Hello Friends! In the last lesson, we used all of our knowledge of HTML to create a well structured FAQ page. This week we'll be working in the same codepen as we learn about CSS and class attributes. We won't be adding CSS in this lesson, but there's plenty to do in order to prepare!
Study:
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
http://getbem.com/introduction/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Complete: Add class attributes to your HTML source in order to style your FAQ page and contact form. You will want to have a design in mind for your contact form, so search through the web to find something inspiring! We won't be adding any actual CSS to our codepen just yet. While this might seem annoying and tedious, it is important that we learn about properly naming CSS classes, adding style LINK tags into our HEAD, and CSS specificity BEFORE we start actually writing any CSS at all.
This lesson includes more reading than actual coding, and it may very well take a few weeks to get through all of the material. The way in which you name your CSS classes has an enormous effect on the structure and further maintenance of your project.
A few tips:
- Don't use ID attributes for CSS. Stick to classes for specificity reasons.
- Think of your CSS classes as a system. You'll want to have an organized naming convention that accurately reflects your styling goals.
- Don't worry about getting it perfect. This exercise may require multiple rounds as we learn how to create a good naming convention with our CSS classes.
BONUS: Did you know there are preprocessors you can use to add more functionality and utility to CSS? Check out https://sass-lang.com/documentation/syntax and look into how you can configure it with CodePen.
Respond: Reply to the email with a link to the updated codepen and a brief summary of what you've learned about CSS and BEM. Also include your plans to continue studying CSS and how you'll keep this new skill sharp!
Notes: This lesson will be tough! Take your time, read through all of the material, and triple check your work! When you get done, read through https://csswizardry.com/2018/11/css-and-network-performance/ to learn more about working with CSS. Write down your questions about the article and work through googling to answer them in your free time!
Web link to course: https://dev.to/tevko/web-development-part-1c-html-can-do-stuff-bnp
Lesson 5 will go out next week
--
Tim Evko
Top comments (0)