Paths

CSS

Authors: Scott Allen, Tom Bell, Aimee Booth, Dan Denney, Geoffrey Grosenbach, Barry Luijbregts, Susan Simkins, Lea Verou, Nick Walsh, 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 / 2h 20m

2h 20m

Start Course
Description

Explore the fundamentals of CSS, and review all the web-styling tools needed for front-end efficiency. This interactive 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

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.

Less: Getting Started

by Shawn Wildermuth

Sep 19, 2018 / 1h 11m

1h 11m

Start Course
Description

Less can help you simplify your CSS and add programming-like constructs to CSS with very little effort required. In this course, Less: Getting Started, you will learn foundational knowledge and gain the ability to show you how to use and write extensions to Less. First, you will learn how to use Less with almost any back-end technology. Next, you will discover how to refactor your CSS into Less. Finally, you will explore how to use nested rules, functions, and variables in your CSS. When you’re finished with this course, you will have the skills and knowledge to implement Less in your own projects.

Table of contents
  1. Course Overview1m
  2. Why CSS Is Painful7m
  3. Introducing Less25m
  4. Simplifying CSS with Nested rules10m
  5. Defining Reusable Patterns with Mixins17m
  6. Using Extensions8m

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
Interactive

CSS: Using Flexbox for Layout

by Dan Denney

May 18, 2018 / 1h 40m

1h 40m

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 interactive 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
Project

Build a Rock Climbing Company Landing Page with HTML & CSS

by Tom Bell

Nov 27, 2018 / 2h 0m

2h 0m

Start Project
Description

CSS is great for styling a website. In this project, you'll use CSS to style an existing HTML landing page. This page includes several sections which include the header, navigation, hero, sales banner, categories, full banner, and footer.

Project overview
  1. Setup15m
  2. Utility Classes25m
  3. Header & Navigation20m
  4. Hero, Sales Banner, & Categories20m
  5. Full Banner20m
  6. Footer20m

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

Offer Code *
Email * First name * Last name *
Company
Title
Phone
Country *

* Required field

Opt in for the latest promotions and events. You may unsubscribe at any time. Privacy Policy

By activating this benefit, you agree to abide by Pluralsight's terms of use and privacy policy.

I agree, activate benefit