Greetings!
This week we're releasing a new batch of videos in the "Front End Development" collection that tackle some of the nuances of SASS and CSS. For example, if you have two elements on a page with the same background color, should they share a class name? Or, what happens if you set a SASS variable in one selector and then use it in a different selector? If you're working towards becoming a front end expert, these are things you need to know.
Enjoy!
How to troubleshoot SASS nesting and prefixing conflicts New!
It's been a while since we've reviewed our template. In this video, we go back to the template and find a little problem with a header that can be traced to an inaccurate assumption how how we can structure our SASS.
Review of the typographic elements we have templated New!
Here we look through our mockup for typographical elements we've coded and identify a couple we still have left to tackle.
How to use a footer HTML tag and add a copyright symbol New!
In this video we start coding the site-wide footer for our page. While we could use a div or section HTML tag, we do a bit of quick research to see if there's maybe a different tag that might be better suited to the task. We also explore how to incorporate HTML entities like a copyright or trademark symbol in our HTML code.
Adding SASS scaffolding for the footer New!
Once we have the HTML code for our footer section, it's time to give it some style. Before we can do that, we have to figure out where our styles go and what selectors to use. Here we do just that.
Setting a default text color for the footer New!
When there are multiple colors competing for dominance in a component, it's tough to figure out what kinds of defaults you should user. In this video we evaluate what might be a good default color for the footer and talk through the process of capturing the hexadecimal value of the color.
Why to avoid creating classes for common CSS property values between elements New!
With CSS, there's a huge amount of freedom when it comes to organizing how properties apply to selectors. One pattern you'll begin to recognize is when multiple elements have the same variation of style. In those cases, does it make more sense to create a unique class name and associate styles with it, or to apply the style individually to the elements with those properties? In this video we explore the options.
Troubleshooting editing SASS partial styles with the browser inspector New!
Here we use the browser inspector to alter some of our CSS code, but find that when we do, something unexpected happens.
How to adjust spacing between paragraphs in CSS New!
(This one's FREE!)
In this video we cover a staple of CSS problem-solving: How to change the amount of space between paragraphs.
How variable scope works in SASS New!
(This one's FREE!)
If you've worked with a programming language before, the idea of variable scope will be familiar to you. If not, then this video will throughly explain the idea. Even if you are familiar with scope, this video might point out some differences between how SASS interprets scope and how you might be used to it working in other languages.
How to use HTML comments and preparing to code the footer menu New!
Here we comment out some of our HTML code to give us some visual room to begin building our footer menu.