Paths

CSS

Authors: Scott Allen, Aimee Booth, Ben Callahan, Dan Denney, Geoffrey Grosenbach, Barry Luijbregts, Jason Pamental, Susan Simkins, Lea Verou, Nick Walsh, Estelle Weyl, Shawn Wildermuth, Mark Zamoyta

Web browsers are extremely capable graphics platforms with the ability to manipulate fonts, colors, shapes and even animations. The file format that controls these is cascading... Read more

Beginner

These first CSS tutorials will provide you with the knowledge to start working with CSS and web design. You’ll learn CSS tricks, including layouts, the HTML box model, styling text and CSS selectors. You will also learn the art of typography and how to keep your web pages looking good across all types of devices.

HTML, CSS, and JavaScript: The Big Picture

by Barry Luijbregts

Apr 23, 2018 / 1h 28m

1h 28m

Start Course
Description

At the core of creating applications for the web is a thorough knowledge of HTML, CSS, and JavaScript. In this course, HTML, CSS, and JavaScript: The Big Picture, you’ll learn how to create applications for the web. First, you’ll learn to display content on the web with HTML. Next, you’ll explore styling the web with CSS. Finally, you’ll discover how to make the web interactive with JavaScript. When you’re finished with this course, you’ll have a foundational knowledge of HTML, CSS, and JavaScript that will help you as you move forward to create applications for the web.

Table of contents
  1. Course Overview1m
  2. Why You Should Care About How the Web Works13m
  3. Displaying the Web with HTML21m
  4. Styling the Web with CSS22m
  5. Interacting with the Web with JavaScript23m
  6. Where to Go from Here6m

Introduction to CSS

by Scott Allen

Jul 18, 2011 / 2h 9m

2h 9m

Start Course
Description

An Introduction to CSS will give you all the knowledge you need to start working with Cascading Style Sheets (CSS) and web design. During the course you'll see how to achieve 2 and 3 column layouts with CSS, and learn how to work with the HTML box model and CSS cascade feature. Along the way we'll also be styling text, changing colors, and using the flexibility and power of CSS selectors.

Table of contents
  1. An Introduction to CSS27m
  2. Cascading and Inheritance in CSS32m
  3. CSS and the Box Model22m
  4. Styling Text with CSS18m
  5. Layout with CSS28m

CSS Positioning

by Susan Simkins

Oct 26, 2014 / 50m

50m

Start Course
Description

Understanding CSS positioning can be tricky, especially for beginners to CSS. It is also essential to understand if you want to be able to build complex layouts. In this CSS tutorial we'll learn about different methods for using CSS to position HTML elements including fixed, absolute, relative positioning, and also how to float and clear elements. We'll also take a look at the ways each type of positioning affects the element it is applied to, and how it affects the behavior of elements around it. We'll finish up this CSS training by answering one of the most common CSS questions about positioning: How to center elements. Software required: Brackets, Google Chrome.

Table of contents
  1. Introduction and Project Overview0m
  2. CSS Positioning49m
Interactive

CSS: Specificity, the Box Model, and Best Practices

by Nick Walsh

May 18, 2018 / 4h 30m

4h 30m

Start Course
Description

Explore the fundamentals of CSS, and review all the web-styling tools needed for front-end efficiency. This course was formerly known as CSS Cross Country on Code School.

Table of contents
  1. Frost-Proof Fundamentals1 Video - 4 Challenges
  2. Clear Carving1 Video - 4 Challenges
  3. Box Bindings1 Video - 4 Challenges
  4. Grooming Your Code1 Video - 5 Challenges
  5. CSS Safety1 Video - 4 Challenges
  6. Image Issues1 Video - 5 Challenges
  7. Sprightly Slaloms1 Video - 3 Challenges
  8. Pseudo Sitzmark1 Video - 3 Challenges

Responsive Typography

by Jason Pamental

Apr 8, 2015 / 5h 55m

5h 55m

Start Course
Description

Web fonts have been around for a few years now, as has Responsive Web Design. But there are still lots of questions about performance, usability and consistency across browsers and devices. This course explores the world of web fonts and responsive type, what web fonts are, how they work and why you should be using them. Course materials can be found at https://github.com/jpamental/workshop-rt and http://frontendmasters.com/assets/resources/jasonpamental/ResponsiveTypographySlides.zip

Table of contents
  1. Responsive Typography: An Introduction1h 24m
  2. Typography Basics: Anatomy, Picking, and Pairing58m
  3. Performance & Progressive Enhancement: Getting it On-screen, Fast48m
  4. Proportion: One Size Won’t Rule Them All28m
  5. Polish: Sweating the Small Stuff41m
  6. A Perfect Page22m
  7. Q&A1h 11m

Intermediate

Now that you have a strong understanding of CSS and its capabilities, you will learn how to make your CSS more readable, maintainable and easier to write with LESS and SASS. You will also dive a little deeper into the world of responsive design, CSS gradients and even learn how responsive design can be made easier through Bootstrap.

A Better CSS: LESS and SASS

by Shawn Wildermuth

Mar 5, 2012 / 1h 56m

1h 56m

Start Course
Description

CSS is a great way to separate your design and markup during HTML development, but there are key pain points that make it more difficult than it should be. Dynamic stylesheet languages like LESS and SASS can make style sheets more readable, maintainable, and easier to write. This course dives into both LESS and SASS and shows you how powerful these languages can be.

Table of contents
  1. Why CSS is Painful13m
  2. LESS is More52m
  3. Using SASS50m

Responsive Web Design

by Ben Callahan

Apr 30, 2013 / 4h 31m

4h 31m

Start Course
Description

From smart phones to tablets and even 60″ HDTV sets, your site can be viewed everywhere on almost every device. But is your site built to respond for all the different size and display options? A pioneer in responsive web design, Ben Callahan, leads you through the process of what it means to build a web site in the 21st century. Ben tackles RWD process, prototyping and patterns down to specific coding tactics with media queries and responsive CSS.

Table of contents
  1. Introduction8m
  2. Responsive Web Design (RWD) 1011h 2m
  3. RWD Process27m
  4. Applying RWD Styles1h 1m
  5. RWD Retrofitting49m
  6. JS to the Rescue22m
  7. Lessons Learned24m
  8. What's Next in RWD?15m

Responsive Websites With Bootstrap 3

by Mark Zamoyta

Jan 20, 2015 / 2h 53m

2h 53m

Start Course
Description

Learn to create a modern, responsive website using Bootstrap 3. Major design patterns for responsive web pages will be covered along with Bootstrap's implementations of each one. We'll then create a trendy single page site with modern features. Some features include an animated navigation area, animated scrolling, fully responsive images, wallpaper images and video, and several animated elements used on many sites.

Table of contents
  1. Course Introduction6m
  2. Responsive Patterns Using Bootstrap47m
  3. Responsive Navigation28m
  4. Responsive Images and Video32m
  5. Scrolling Features33m
  6. Animated Page Elements24m

CSS3 In-Depth

by Estelle Weyl

Feb 19, 2013 / 6h 10m

6h 10m

Start Course
Description

Learn how deep the CSS3 rabbit hole goes in this jam-packed course with CSS luminary Estelle Weyl. Estelle dives deep into the various components of CSS3 including: selectors, specificity, generated content, media queries, debugging, colors, fonts, shadows, text-effects, borders, backgrounds, gradients, transforms, transitions, animations…and more! Exercise files available at: http://estelle.github.com/CSS-Workshop.

Table of contents
  1. Introduction6m
  2. Selectors1h 20m
  3. Specificity10m
  4. Generated Content54m
  5. Media Queries13m
  6. Debugging13m
  7. Colors15m
  8. Fonts, Shadows and Text Effects31m
  9. Borders and Backgrounds38m
  10. Gradients29m
  11. Transforms16m
  12. Transitions and Animations34m
  13. Other CSS Features24m
Interactive

CSS: Using Flexbox for Layout

by Dan Denney

May 18, 2018 / 4h 0m

4h 0m

Start Course
Description

Follow the clues behind each property of Flexbox and learn how to make modern layouts that are flexible across different screen sizes. This course was formerly known as Cracking the Case With Flexbox on Code School.

Table of contents
  1. Foreshadowing Flexbox2 Videos - 6 Challenges
  2. Justification and Order2 Videos - 6 Challenges
  3. Aligning Alibis1 Video - 3 Challenges
  4. Sizing Up the Properties2 Videos - 6 Challenges
  5. Property Plotting2 Videos - 6 Challenges

Advanced

Once you have some solid CSS experience and knowledge, you’re ready to go deep into the features of CSS3. In these tutorials, you’ll gain an understanding of CSS3 topics such as selectors, generated content, media queries, shadows, text-effects, transitions, animations and much more.

Play by Play: HTML, CSS, and JavaScript with Lea Verou

by Geoffrey Grosenbach

Jul 19, 2014 / 2h 15m

2h 15m

Start Course
Description

Watch a live coding session in which Lea Verou implements the classic Conway's Game of Life in the browser using HTML, CSS, and JavaScript. Play by Play is a series where you get a rare view into the workflows and thought processes of top admins, developers, and designers. This is not a planned or rehearsed presentation, but a live, unrehearsed problem solving and troubleshooting session where you see an expert think through issues and design solutions, as they do in the real world every day.

Table of contents
  1. Introduction2m
  2. Data Model and Game Mechanics33m
  3. HTML Game View51m
  4. Accessibility and Styling48m

What you will learn

  • Cascading and inheritance in CSS
  • Layouts with CSS
  • CSS positioning with complex layouts
  • Typography basics, performance and polish
  • LESS and SASS
  • RWD process, prototyping and responsive patterns
  • Bootstrap 3 design patterns and features
  • CSS3 components and features

Pre-requisites

You should be confident with the basics of HTML markup