10 New Videos Released Today in "Front End Development"
Greetings!
This week we're releasing the next 10 videos in the "Front End Development" series, starting with a dive into SMACSS, a scalable system for organizing CSS (psst... it's more fun than it sounds).
Enjoy!
What SMACSS is and how we'll use it throughout this series New!
(This one's FREE!)
Given how flexible the CSS syntax is, it's easy to get trapped in analysis paralysis, trying to figure out the best way to name classes, create selectors, and apply your CSS styles. SMACSS, which stands for "Scalable, Modular Architecture for CSS" is one standard that can help clear the way. In this video, we talk about how we plan on applying SMACSS principles throughout the rest of the examples.
What a component (or module) is in CSS and HTML New!
In this video we identify what a "component" is, a concept we're borrowing from SMACSS that refers to structured chunks of the interface. In SMACSS, this is called a "module", but we're going to use the term "component" to disambiguate it from Drupal's use of the term.
How sub-components work and how to name their classes New!
Sometimes we'll want to reuse a certain HTML structure throughout our project, but with a slight variation. Sub-components or sub-modules is how we'll achieve this, and so in this video we'll explore the naming conventions and rules that govern how we'd use them.
Why we're focusing so much on HTML and CSS principles and standards New!
(This one's FREE!)
It may seem like we're working kind of slowly when you look at how much of the design we still have left to convert to a template, but you've actually come a long way. In this video we let you know why we're taking the time to cover subjects like SMACSS at the outset instead of waiting until we're knee-deep in code.
How to resume from this point (part 1, step 10) New!
In this video we demonstrate how to set up your file structure so you can hop into this series from this point without having to watch all of the previous videos.
Deciding what to do next and adding HTML for our next heading New!
Having knocked out another heading, we return to our design, rub our hands together eagerly, and figure out what we'll tackle next.
Adding styles for our H3 heading New!
In this video, we work through the process of styling our first H3 tags to match the design. Since we've already covered all of the CSS we'll need to finish the job, that task goes much quicker than our previous headings. Can you tell we're gaining some momentum?
Adding our last headings to our template New!
And... BAM! In this video we complete the process of templating our final headings. It's time to funnel the sheer power of your newly found skills into other typographical elements, let's go!
How the line-height CSS property works and converting our first paragraph New!
Now that are headings our complete, we look at our first paragraph. This element introduces a new factor that we didn't consider with our first elements: how to deal with the spacing between multiple lines. In this video, we answer this particular question by demonstrating how to use the CSS "line-height" property.
How to factor in line-height when determining margin New!
You thought we were done talking about spacing, weren't you? Well, not so fast. In this video we talk about how to deal with margin - something we covered in previous videos - but this time factoring the extra space that line height adds. Believe me, this is something that many aspiring front-end developers have scratched their heads over and it will be good to get it squared away before we move on.
