New BuildAModule videos on CSS preprocessors, resets, Node.js and more!

Greetings!

This week we're releasing 20 new videos, and boy do they cover a lot of ground. We talk a little bit about CSS preprocessors, CSS resets, package managers and even a bit of Node.js! We're introducing some critical concepts here that will weave compelling threads throughout the reset of the series.

I hope you're enjoying the series so far, and stay tuned next week for even more.


Adding our second styled paragraphs New!

Screenshot for Adding our second styled paragraphs

Now that we've conquered our first paragraph, it's it's time to move to the next. In this video we move down our design and tackle the next multi-lined typographical element.

Creating markup for our article snippet text New!

Screenshot for Creating markup for our article snippet text

Before we start to style our next paragraph, we need to set up our HTML structure. Here we follow suit with our approach so far using SMACSS.

How to style an anchor tag and use the same CSS with multiple selectors New!
(This one's FREE!)

Screenshot for How to style an anchor tag and use the same CSS with multiple selectors

An anchor tag (i.e. a link) is one of the most basic elements of the web, but styling it is more complicated than any other element we've tackled so far because it has multiple states. In this video we walk through styling an anchor tag and also how to use the same CSS rules on multiple selectors without repetition.

How we will soon reduce repetition with a CSS preprocessor called SASS New!

Screenshot for How we will soon reduce repetition with a CSS preprocessor called SASS

This video is a preview of coming attractions. As we go through our CSS, we will start to see places where we've repeated things like hexadecimal colors or selectors. While we can't do much about that in plain CSS, a CSS preprocessor will soon come to the rescue.

How to use the font-style CSS property and finishing the snippet text New!

Screenshot for How to use the font-style CSS property and finishing the snippet text

While we talked about the font-style property before, this is the first time we've actually had a chance to use it. In this video we wrap up the styling for our snippet text, including using this fairly common property.

How to override the browser's default styles with the 'body' selector New!

Screenshot for How to override the browser's default styles with the 'body' selector

One aspect of "cascading" in Cascading Stylesheets that we haven't addressed is that styles in an element cascade into its descendants. In this video we demonstrate one way to set default styles for all elements on a page (with some exceptions) with the "body" selector.

How to use the universal CSS selector and the problems with doing so New!
(This one's FREE!)

Screenshot for How to use the universal CSS selector and the problems with doing so

Using the "body" selector in the previous video resulted in us applying styles to many of the elements we wanted to adjust, but there were some that slipped through the cracks. In this video we talk about using the universal CSS selector (which is an asterisk - *) to override the browser's default styles, and then come back around to talk about the potentially troublesome implications of using it.

How to deal with slight color variations and the benefits of a standard color palette New!

Screenshot for How to deal with slight color variations and the benefits of a standard color palette

Imagine a painter in the throes of inspiration, casting his brush upon his palate, unknowingly meshing colors and creating slight variations that to the untrained eye have no decreeable difference, but can only be seen with those who possess a keen sensitivity to the spectrum. Thus is how designers often use a color picker to fetch these slight, imperceptible variations of color for their designs. Here we talk about why it makes sense to standardize on a smaller set of colors instead of following the design precisely.

How to set sensible default styles without a universal selector New!
(This one's FREE!)

Screenshot for How to set sensible default styles without a universal selector

Even though we've ruled out the universal selector as a tool for applying styles across all of our typographical elements, there are still options for overriding the browser's stylesheet with defaults that are more in tune with our design. In this video we illustrate these options.

Reviewing other typographical styles to determine if they should override the browser New!

Screenshot for Reviewing other typographical styles to determine if they should override the browser

In an earlier video we started exploring the idea of overriding the browser's default CSS, and in this video we continue the process by looking at various font-related properties and if we should make those properties more natural defaults for our headings and other typographical elements.

How to resume from this point (part 1, step 17) New!

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

If you want to hop into this video series from here, this video will show you how to get your examples squared away.

Why to consider cross-browser consistency with CSS early on New!

Screenshot for Why to consider cross-browser consistency with CSS early on

It's easy to put off cross-browser testing until later on in your development process, but it pays off to make some basic considerations early in the process. In this video we talk about why.

How the Universal Selector CSS Reset works New!

Screenshot for How the Universal Selector CSS Reset works

Earlier in this series we talked about the universal CSS selector and its potential dangers. Here we explore one way that the universal selector can be useful, and even though we won't ultimately use this solution, it's good to know what can be achieved with a couple lines of fairly simple CSS.

How the Eric Meyer's CSS Reset works New!

Screenshot for How the Eric Meyer's CSS Reset works

In this video we look through another approach to a CSS reset. This one is a little more detailed, but it avoids the universal selector and addresses some other issues with consistency across browsers.

Comparing the pros and cons of using a CSS reset New!
(This one's FREE!)

Screenshot for Comparing the pros and cons of using a CSS reset

Now that we've scoured the code of a couple of CSS resets, we step back and look at what they're helping us achieve, as well as discuss one of the major downsides of using a CSS reset.

How Normalize.css works New!

Screenshot for How Normalize.css works

Having explored the potential pitfalls of a CSS reset, we're in a position to appreciate the usefulness of normalizing. In this video, we look at a bit of the code and talk about why we're ultimately choosing this approach.

How to download and integrate Normalize.css New!

Screenshot for How to download and integrate Normalize.css

Now that we know that we want to use Normalize.css, we go through the (somewhat tedious) process of downloading and integrating it with our template.

What a package manager is and why we would want to use one New!

Screenshot for What a package manager is and why we would want to use one

Integrating a couple of third party libraries in our project and keeping them up to date manually isn't too much of a challenge, but it's error-prone and we'll start to really resent the process as the number of these libraries grow. So in this video we talk about how a package manager can help solve our problems and why it's work the trouble to get one installed and configured.

How to install Node.js and npm on a Mac New!

Screenshot for How to install Node.js and npm on a Mac

In a previous video we discussed how we were going to download and install the Bower package manager. In this video we set up Node.js, a requirement if we want to get Bower up and running.

How to install Node.js and npm on Windows New!

Screenshot for How to install Node.js and npm on Windows

The process for installing Node.js on Windows and a Mac are similar, but we walk through the steps on Windows in this video and show the uninitiated how to access the command line.

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.