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!)

Screenshot for What SMACSS is and how we'll use it throughout this series

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!

Screenshot for What a component (or module) is in CSS and HTML

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!

Screenshot for How sub-components work and how to name their classes

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!)

Screenshot for Why we're focusing so much on HTML and CSS principles and standards

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!

Screenshot for How to resume from this point (part 1, step 10)

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!

Screenshot for Deciding what to do next and adding HTML for our next heading

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!

Screenshot for Adding styles for our H3 heading

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!

Screenshot for Adding our last headings to our template

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!

Screenshot for How the line-height CSS property works and converting our first paragraph

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!

Screenshot for How to factor in line-height when determining margin

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.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.