Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
42 Lessons (4h 45m)
    • 1. The Course Overview

    • 2. The Anatomy of a Rule Set and the Three Types of Style Sheets

    • 3. The Box Model and Block versus Inline Elements

    • 4. Text Editors

    • 5. CSS Reset

    • 6. Chrome Dev Tools

    • 7. Renaming Elements: Classes and IDs

    • 8. Descendant Selectors

    • 9. Floats Introduction – Flowing Text around Images

    • 10. Creating a Multicolumn Layout

    • 11. Solving the Problems of Floats

    • 12. Creating Buttons with Modular CSS

    • 13. Multiple Classes

    • 14. Specificity Rules

    • 15. Transitions

    • 16. Transforms

    • 17. Styling a Call to Action Button

    • 18. Gradients

    • 19. Starting the Navigation

    • 20. Using Pseudo Classes

    • 21. Absolute Positioning

    • 22. Building the Drop-down

    • 23. CSS Animations (Part 1)

    • 24. CSS Animations (Part 2)

    • 25. Finalizing the Navigation

    • 26. Fluid Grid

    • 27. Flexible Images

    • 28. Media Queries

    • 29. Mobile Menu

    • 30. Viewport Meta Tag

    • 31. The @font-face Property

    • 32. Font Kits and Font Services

    • 33. Google Web Fonts

    • 34. Subscription Font Foundries

    • 35. Icon Fonts

    • 36. 2x Images

    • 37. The JavaScript Approach

    • 38. 1.5x Images

    • 39. Background Images

    • 40. SVG

    • 41. Next Steps

    • 42. Conclusion and Links


Project Description

Section 1: CSS Foundations

This first section will introduce the course and refamiliarize the viewer with CSS foundations that are necessary to understand before they can master CSS.

  • The Course Overview
  • The Anatomy of a Rule Set and the Three Types of Style Sheets
  • The Box Model and Block versus Inline Elements

1.1 The Course Overview

The course needs a summary that describes what will be learned over the course of each section, provide a course overview, and describe what will be learned.

  • Understand what CSS is and what we are going to learn
  • Know the expected prerequisite knowledge, such as how to write basic HTML and even some basic CSS, which is required to follow along with this course
  • Go over different software we are using, such as Sublime Text, Mac, Live Reload, and the basics to move along the course

1.2 The Anatomy of a Rule Set and the Three Types of Style Sheets

In order to style websites with CSS, you must understand the syntax for writing CSS rules.

  • Review a sample rule set and see how it affects a web page
  • View the rule set in an embedded style sheet and an external style sheet
  • View an inline rule set

1.3 The Box Model and Block versus Inline Elements

All CSS elements conform to a box model. If the box model isn’t understood completely, CSS cannot be mastered. The same goes with block and inline elements.

  • A review of the box model and using box-sizing border box to change the box model
  • Block-level elements
  • Inline elements

  Section 2: Ramping Up

Before we deep dive into CSS, we need to think about where we’re going to write our CSS; in this section, we will understand the design/build process and set up a reset style sheet. Once these items are in place, we can start styling the text, using classes to rename elements, and learning about compound selectors.

  • Text Editors
  • CSS Reset
  • Chrome Dev Tools
  • Renaming Elements: Classes and IDs
  • Descendant Selectors

2.1 Text Editors

Writing code is error-prone and hard; a good text editor like Sublime Text 3 solves this problem.

  • Snippets
  • Syntax highlighting
  • Code completion and other cool features

2.2 CSS Reset

Browsers add a lot of default styling, especially margins and padding. A nice CSS reset can solve this and allow you to provide the styling.

  • Add the reset
  • Check out what the reset is doing
  • Customize the reset to fit our needs

2.3 Chrome Dev Tools

CSS doesn’t always work without failing. Usually, it’s a tiny overlooked mistake that causes something not to work and is hard to find and fix. Enter the Chrome Dev Tools.

  • Open up the Element Inspector
  • Change the CSS inside the Dev Tools
  • Check whether there are any errors in the console

  2.4 Renaming Elements: Classes and IDs

CSS allows you to position, style, and control elements on a page. What if you want to style one div differently than another? You can name an element with a class.

  • Renaming with classes
  • Renaming with IDs

2.5 Descendant Selectors

Renaming elements with classes is an extremely powerful feature in CSS. However, this is not the only way to target a specific type of element. Descendant selectors allow you to target elements on a page based on their parent element.

  • Find out what a parent and child element is
  • Create a descendant selector
  • Calculate the weight of descendant selectors

Section 3: Creating a Page Layout with Floats

Floats are the core of building a layout using CSS. On the surface, they are easy, but like an onion, they have a few layers of complexity, which can cause frustration. This section goes into the intricacies about floats and solves the issues that arise from floats as well as offering an alter-native—grid systems.

  • Floats Introduction – Flowing Text around Images
  • Creating a Multicolumn Layout
  • Solving the Problems of Floats

3.1 Floats Introduction – Flowing Text around Images

How to have text flow around an image? The origin of floats.

  • Have an image floated to the left with text on the right
  • Clear the floats
  • The problem with floats

  3.2 Creating a Multicolumn Layout

How do we create a page layout without abusing tables? Using Floats.

  • Creating a page layout
  • Floating elements next to each other
  • Collapsed elements caused by floats

3.3 Solving the Problems of Floats

When all elements inside a container are floated, the container "collapses." We’ll go over three methods of fixing this.

  • Floating the container
  • Overflow: hidden
  • Clearfix

Section 4: Creating Buttons with Modular, Reusable CSS Classes, and CSS3

In this section, we will discuss how to create reusable CSS that helps you eliminate the style sheet “bloat” and allows you to create sites faster without duplicating styles that have already been written. To help you keep an organized style sheet, modular classes will be introduced, which are sometimes referred to as ‘Object-oriented CSS’. We will explore CSS3 properties, such as transforms, transi-tions, and gradients. We will also get familiarized with the CSS specificity, which is the precedence of how certain CSS selectors override others.

  • Creating Buttons with Modular CSS
  • Multiple Classes
  • Specificity Rules
  • Transitions
  • Transforms
  • Styling a Call to Action button
  • Gradients

   4.1 Creating Buttons with Modular CSS

Buttons appear all over a site (Go Premium, Learn More, Submit, and so on) and usually have the same general style but vary in things such as color, width, and position. Creating modular lightweight classes to handle this variation can be very efficient.

  • Explore the different button types we are going to create throughout the final site
  • Create Button variation 1
  • Create Button variation 2

4.2 Multiple Classes

Buttons vary throughout the site, but a good portion of the button style remains the same. Multiple classes on an element will allow variation in our style with an object-oriented approach.

  • Create multiple classes to vary our buttons
  • Add the desired classes to our HTML

4.3 Specificity Rules

Understanding which selectors overrule other selectors can be confusing. Throughout a site, overriding styles tends to be common, so understanding specificity and weight is important.

  • An explanation of the various weights and point systems
  • Discuss the universal selector and important declaration

4.4 Transitions

Creating an added experience layer, transitioning elements from the default to hover state and vice versa.

  • Create a hover state
  • Create a transition
  • Discuss vendor prefixes

4.5 Transforms

CSS3 allows us to transform elements like never before.

  • Scale
  • Translate
  • Rotate

 4.6 Styling a Call to Action Button

Most sites need a call to action button to drive users toward a desired result.

  • Adding the HTML
  • Styling the button
  • Adding the hover effect

 4.7 Gradients

Writing gradient syntax by hand is lengthy and difficult. Use an online tool to automate it.

  • Plug in start and stop colors to the gradient generator tool
  • Copy the output to the CSS file
  • Explanation of the output

Section 5: Creating the Main Navigation and Drop

Navigation is a critical component of any website and can be a very tricky thing to build with CSS. Throw in a drop-down menu, and the difficulty level increases. This section simplifies building the navigation and reinforcing the use of floats while introducing pseudo classes, absolute, relative, and fixed positioning, as well as a few more CSS3 properties, such as animations.

  • Starting the Navigation
  • Using Pseudo Classes
  • Absolute Positioning
  • Building the Drop-down
  • CSS Animations (Part 1)
  • CSS Animations (Part 2)
  • Finalizing the Navigation

5.1 Starting the Navigation

How to build a site’s primary navigation.

  • Create an unordered list in the HTML to be used as the navigation
  • Add in the CSS to make it look like the final product

 5.2 Using Pseudo Classes

How to target elements based on their order of appearance without adding a class to the HTML.

  • The first child
  • The last child
  • The nth child

5.3 Absolute Positioning

How to get the shark positioned properly, and how to get the menu to be “sticky” to the top and always visible.

  • Warm up by absolutely positioning the shark
  • Use fixed positioning for the navigation bar

5.4 Building the Drop-down

How do we build the drop-down menu?

  • Create a UL inside an LI
  • Add the CSS for the drop-down menu

5.5 CSS Animations (Part 1)

Need to smoothly animate the drop-down menu sliding down.

  • Define the animation name, duration, timing, and function
  • Add in keyframes
  • Create more robust animation for the shark logo and add in all necessary vendor prefixes

5.6 CSS Animations (Part 2)

In the previous video, we explained the surface of animations, in this video; we will take a deeper dive into what animations can do.

  • Explore animation-delay, animation-iteration-count, and animation-fill-mode
  • Combine and simplify all animation properties into a shorthand
  • Add in all vendor prefixes and non-prefixed versions of the animation properties

  5.7 Finalizing the Navigation

We have a z-index bug, and we need the box shadow and the nav on all pages.

  • Fix the z-index bug
  • Add the drop shadow using the box-shadow property
  • Copy the navigation HTML to all other pages

Section 6: Becoming Responsive

Responsive Web Design allows you to provide a great experience on all device sizes. This section explains the three foundations: fluid grids, flexible images, and media queries. As mobiles are such a big part of responsive web design, we’ll go a step further and really account for some of the differences between mobile and desktop experiences.

  • Fluid Grid
  • Flexible Images
  • Media Queries
  • Mobile Menu
  • Viewport Meta Tag

6.1 Fluid Grid

Creating a fluid percentage-based layout.

  • Learn the formula
  • Apply the formula to widths
  • Apply the formula to margins and padding

6.2 Flexible Images

How to make images squishy like our content.

  • Wrap an image in a container
  • Make the container fluid
  • Add a 100 percent max-width to the image

6.3 Media Queries

How to fix remaining issues with the site at narrower widths.

  • Add a media query discuss anatomy
  • Fix obvious design problems at narrower widths inside the media query

6.4 Mobile Menu

The navigation really is terrible looking at mobile widths, and we need a design pattern that will withstand adding more menu items.

  • Create the mobile menu layout
  • Hide the mobile menu for the desktop and add the mobile menu icon
  • Add jQuery to activate the mobile menu on a click or touch

6.5 Viewport Meta Tag

Need to test a device on a phone.

  • Use Chrome’s emulator
  • Add the viewport meta tag
  • Discuss the anatomy of the viewport tag

Section 7: Web Fonts

For a very long time, the Web was limited to a small number of web-safe fonts. The alternative was to use images to achieve a more unique font family. Over the last few years, web fonts have changed the game. This section provides a number of different methods to obtain and add web fonts to your site. This section also covers icon fonts as an alternative to images.

  • The @font-face Property
  • Font Kits and Font Services
  • Google Web Fonts
  • Subscription Font Foundries
  • Icon Fonts

7.1 The @font-face Property

There were only so many “web safe” fonts out there until Web Fonts came along.

  • Add the OTF file to the site folder
  • Define new fonts in CSS
  • Apply the font to elements

  7.2 Font Kits and Font Services

It's kind of hard to make Web Fonts work in all browsers by yourself. Here’s how font kits solve this when hosting your own web fonts.

  • Download a font kit
  • Implement CSS to make it work

7.3 Google Web Fonts

Where can you get free quality web fonts?

  • Find the fonts we want from Google fonts
  • Add link to the font in the of the document
  • Add the font to different parts of our website

7.4 Subscription Font Foundries

How do you obtain fonts that aren’t free? Through subscription font foundries.

  • Select a font from Typekit
  • Add JavaScript to our site
  • Apply the font to different parts of our website

7.5 Icon Fonts

Have a lot of solid color images or icons on your site and want to reduce the number of http requests? Icon Fonts can help.

  • Build the footer in the HTML where the icons will go
  • Download Zurb Icon fonts and add the font files to our website
  • Add the icon CSS file and an icon hover state to our website and apply the icons to our footer

    Section 8: The Workflow of HiDPI Devices

With the introduction of Apple’s “Retina” screens that cram twice the number of pixels in the same amount of space as web develop-ers, we need to account for these HiDPI displays when it comes to serving images. This section explains how to display “2x” images to HiDPI devices and other techniques to tackle Retina.

  • 2x Images
  • The JavaScript Approach
  • 1.5x Images
  • Background Images
  • SVG

8.1 2x Images

Retina devices make our images look blurry. We need to supply larger images.

  • Create an image that is twice the size
  • Add the image to our HTML
  • Update the CSS to size the 2x image down to the intended display size

8.2 The JavaScript Approach

Non-retina devices get a huge retina-sized image when they don’t need it. JavaScript can help serve the appropriately sized image based on the devices' capabilities.

  • Check out retina.js and what it can do, and grab the script
  • Add the script to the js folder and add a script tag that links to it in our HTML
  • Test to make sure it’s working using Chrome’s Developer Tools

8.3 1.5x Images

Double-sized images can be 3-4 times as large as their regular sized counterpart. Creating two images to account for retina and non-retina is a lot of work. There is a middle ground: 1.5x images.

  • Create an image that is 1.5 times the size it will be displayed at
  • Add the image to the HTML
  • Test to make sure it works

  8.4 Background Images

How do we account for background images on retina?

  • Create a special media query to determine the device’s pixel ratio
  • Update the background image inside the media query to serve the 2x image only to retina devices

8.5 SVG

We don’t have a perfect solution to the retina trials and tribulations, but SVG is pretty darn good.

  • Save an Illustrator file as SVG
  • Add the SVG file as a background image and as a regular image
  • Create an inline SVG and use it instead of an image

Section 9: Wrapping Up

In this section, we will see what the next steps are and what the conclusion is.

  • Next Steps
  • Conclusion and Links

9.1 Next Steps

We’re done learning CSS, what do we do next?

    • CSS Preprocessors
    • JavaScript and jQuery

9.2 Conclusion and Links

A recap of site and recommended links for further learning.

    • A recap of the website

Links to my favorite learning resources that have helped me learn web development

Student Projects