50 New Front End Development Videos Released Today!

Greetings!

As promised, I'm plunking down a solid 50 new videos today in the new Front End Development collection. We have a lot of ground to cover, and we're going to start by building a strong foundation in basic HTML and CSS. For the next several weeks, we'll continue on this track, with some deeper concepts and implications weaved gently throughout.

Instead of cramming 50 screenshots in a single newsletter, I'm going to split the video descriptions over two weeks. But, the full 50 videos are ready for the viewing right now. Enjoy!


Getting set up with our mockup and resource pack New!
(This one's FREE!)

Screenshot for Getting set up with our mockup and resource pack

In this video we get our source files set up and take a quick look at the mockup that we'll be working towards converting into a template through this series.

What HTML is and a simple HTML example New!
(This one's FREE!)

Screenshot for What HTML is and a simple HTML example

Here we talk briefly about how HTML works and review a simple example. As with most development work the best way to learn is to do, so we try to focus on a practical implementation right away. We'll come back around later and talk about the nuances of HTML structure and syntax.

A simple CSS example and what HTML attributes are New!
(This one's FREE!)

Screenshot for A simple CSS example and what HTML attributes are

You can accomplish a lot with straight-up HTML, but to get it to look a specific way you will need some CSS, or Cascading Style Sheets. Again, we're going to focus on practical examples now and we'll come back to the implications later.

How to structure an HTML document and how DOCTYPE works New!
(This one's FREE!)

Screenshot for How to structure an HTML document and how DOCTYPE works

Browsers have been around for a while, and they've lived through many versions of HTML. In this video we learn how to tell the browser which version we're using so that we don't end up with some difficult-to-troubleshoot issues down the road.

How CSS can be used to make any element look like any other element New!
(This one's FREE!)

Screenshot for How CSS can be used to make any element look like any other element

Nearly every bit of visual style we see in the browser boils down to CSS. Here we look at how we can strip existing elements of their default styles and give them our own, giving us the ultimate visual control. Mwa ha ha ha!

Why to use meaningful HTML tags, also known as semantic HTML New!
(This one's FREE!)

Screenshot for Why to use meaningful HTML tags, also known as semantic HTML

If you're not aware of the HTML structure of web pages you visit, then it's likely that you're not using assistive software to get around the web. There are millions of people who rely on HTML structure to navigate web sites, which is reason enough to focus on meaningful markup, but search engines and other developers also find it valuable.

How to choose an HTML tag that matches the meaning you want to convey New!
(This one's FREE!)

Screenshot for How to choose an HTML tag that matches the meaning you want to convey

Knowing what we know now about how CSS can be used to style any HTML element, we're no longer tied to using certain HTML just because of how it looks. So, how do we decide which element is the right one to use for a particular context? That's exactly what we start to explore here.

How every HTML element is a box New!
(This one's FREE!)

Screenshot for How every HTML element is a box

Even though the shapes of HTML elements appear on the surface to cover the entire geometric spectrum, you may find it a bit surprising to find out that they're all just rectangles of some kind. Knowing this will help us figure out how to control the nuances of layout and design as we move forward.

A review of our design, what typography means and how to choose a starting point New!
(This one's FREE!)

Screenshot for A review of our design, what typography means and how to choose a starting point

One of the hardest parts to those new to front end development of converting a design into a mockup is figuring out just where to start. In this video we talk about one approach, beginning with typography.

How to create an image from part of a Photoshop design New!
(This one's FREE!)

Screenshot for How to create an image from part of a Photoshop design

In this video we demonstrate one technique that will prove indispensable throughout your templatizing career, which is moving freely from Photoshop to flat image elements. Don't worry if you don't have Photoshop, you'll still be able to follow along.

A comparison of w3schools.com and developer.mozilla.org as HTML references New!
(This one's FREE!)

Screenshot for A comparison of w3schools.com and developer.mozilla.org as HTML references

As you learn HTML, you'll develop a sense of where to look when you need more information. Here we talk about an compare two useful sites that also happen to show up in the top of search engine result pages.

Why to use HTML and CSS instead of images New!
(This one's FREE!)

Screenshot for Why to use HTML and CSS instead of images

Knowing how to clip images from a Photoshop design is useful, but it's easy to use an image sometimes when there would be serious advantages to using HTML and CSS instead. In this video we talk about what these advantages are.

The advantages and disadvantages of spending the time to do things right New!
(This one's FREE!)

Screenshot for The advantages and disadvantages of spending the time to do things right

As soon as you have a deadline on your hands, you'll soon be faced with a conundrum: Spend the time to figure out how to do things the right way, or just get something done with the techniques you're already familiar with. Here we look at two schools of thought and why you'll find yourself borrowing from both.

How to choose an HTML heading level New!
(This one's FREE!)

Screenshot for How to choose an HTML heading level

Now that we're starting to covert our design over to a template, it's a good opportunity to discuss how we figure out what HTML element to use. Sometimes the solution isn't totally clear, so we'll come back to this question repeatedly as we bump into ambiguous possibilities.

How to use the font-family CSS property New!
(This one's FREE!)

Screenshot for How to use the font-family CSS property

Here we go! This is the start of becoming master manipulators of every visual component of a web page. But, we have to start with a single CSS property, and what a visually subtle yet powerful one it is.

How to measure parts of your screen and use the font-size and font-style CSS properties New!

Screenshot for How to measure parts of your screen and use the font-size and font-style CSS properties

Being able to measure elements on your screen is nearly as vital to your early work as the ability to grab clips from Photoshop, so we talk about a couple of tools you can use to get the job done and introduce you to a couple of new CSS properties while we're at it.

How to use the font-weight CSS property New!

Screenshot for How to use the font-weight CSS property

In this video we continue the journey of converting our first design element into HTML and discuss the implication of font weight.

How to select colors on your screen and use the CSS color property New!

Screenshot for How to select colors on your screen and use the CSS color property

Next to measuring your screen and grabbing image clips from Photshop, sampling colors from your screen is likely the third most valuable tool you'll use in the early stages of your work. Color plays a huge role in web interfaces, and getting the colors right is a big deal when it comes to having a template represent the original design.

How to hide the advertisements on w3schools.com New!

Screenshot for How to hide the advertisements on w3schools.com

While it's not critical to your success as a front end developer to avoid advertisements, it can help keep the distraction level down if you end up spending as much time on w3schools.org as I did when I was first learning HTML and CSS.

How to use text-transform to uppercase text New!

Screenshot for How to use text-transform to uppercase text

Using CSS to convert text to uppercase feels like a minor superpower, especially if you've found other ways to do the same thing without CSS.

How to use the text-indent and letter-spacing CSS properties New!

Screenshot for How to use the text-indent and letter-spacing CSS properties

In this video we explore a couple of new CSS properties, including the elusively named letter-spacing, and get our template even closer to our original design.

Why to use CSS selectors instead of adding styles inline New!
(This one's FREE!)

Screenshot for Why to use CSS selectors instead of adding styles inline

So far we've used the "style" HTML property to apply our CSS to specific elements. But, when we have multiple elements that share the same CSS, we can avoid the problems of copying and pasting identical code by using selectors. In this video we introduce you to selector basics.

How to resume from this point (part 1, step 7) New!
(This one's FREE!)

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

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

How to decide which element a CSS style should be applied to when there are multiple options New!
(This one's FREE!)

Screenshot for How to decide which element a CSS style should be applied to when there are multiple options

At this point in the series, we're looking at where to apply a nice thin CSS border. Does it belong to the heading it's under? Does it belong to its own element? Should that element contain the heading? Tricky questions, but here we try to address some principles to help you answer this question as it comes up.

How to work with border properties in CSS New!
(This one's FREE!)

Screenshot for How to work with border properties in CSS

Now that we know which element to add our border to, we look at the various controls we have around how borders look. Getting a grip on borders will prove valuable to you in much of your front-end work.

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.