Paths

CSS

Authors: Geoffrey Grosenbach, Lea Verou, Susan Simkins, Estelle Weyl, Jason Pamental, Scott Allen, Barry Luijbregts, Ben Callahan, 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.

1

HTML, CSS, and JavaScript: The Big Picture

by Barry Luijbregts

Apr 23, 2018 / 1h 28m

Beginner • 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 Overview
    1m 30s
  2. Why You Should Care About How the Web Works
    13m 39s
  3. Displaying the Web with HTML
    21m
  4. Styling the Web with CSS
    22m 20s
  5. Interacting with the Web with JavaScript
    23m 32s
  6. Where to Go from Here
    6m 20s
2

Introduction to CSS

by Scott Allen

Jul 18, 2011 / 2h 9m

Beginner • 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 CSS
    27m 5s
  2. Cascading and Inheritance in CSS
    32m 34s
  3. CSS and the Box Model
    22m 18s
  4. Styling Text with CSS
    18m 38s
  5. Layout with CSS
    28m 27s
3

CSS Positioning

by Susan Simkins

Oct 26, 2014 / 50m

Beginner • 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 Overview
    50s
  2. CSS Positioning
    49m 49s
4

Responsive Typography

by Jason Pamental

Apr 8, 2015 / 5h 55m

Beginner • 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 Introduction
    1h 24m 59s
  2. Typography Basics: Anatomy, Picking, and Pairing
    58m 56s
  3. Performance & Progressive Enhancement: Getting it On-screen, Fast
    48m 7s
  4. Proportion: One Size Won’t Rule Them All
    28m 23s
  5. Polish: Sweating the Small Stuff
    41m 36s
  6. A Perfect Page
    22m 13s
  7. Q&A
    1h 11m 23s

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.

5

A Better CSS: LESS and SASS

by Shawn Wildermuth

Mar 5, 2012 / 1h 56m

Intermediate • 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 Painful
    13m 19s
  2. LESS is More
    52m 39s
  3. Using SASS
    50m 39s
6

Responsive Web Design

by Ben Callahan

Apr 30, 2013 / 4h 31m

Intermediate • 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. Introduction
    8m 56s
  2. Responsive Web Design (RWD) 101
    1h 2m 3s
  3. RWD Process
    27m 8s
  4. Applying RWD Styles
    1h 1m
  5. RWD Retrofitting
    49m 13s
  6. JS to the Rescue
    22m 4s
  7. Lessons Learned
    24m 46s
  8. What's Next in RWD?
    15m 55s
7

Responsive Websites With Bootstrap 3

by Mark Zamoyta

Jan 20, 2015 / 2h 53m

Beginner • 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 Introduction
    6m 35s
  2. Responsive Patterns Using Bootstrap
    47m 28s
  3. Responsive Navigation
    28m 8s
  4. Responsive Images and Video
    32m 10s
  5. Scrolling Features
    33m 57s
  6. Animated Page Elements
    24m 55s
8

CSS3 In-Depth

by Estelle Weyl

Feb 19, 2013 / 6h 10m

Intermediate • 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. Introduction
    6m 31s
  2. Selectors
    1h 20m 33s
  3. Specificity
    10m 56s
  4. Generated Content
    54m 39s
  5. Media Queries
    13m 22s
  6. Debugging
    13m 51s
  7. Colors
    15m 12s
  8. Fonts, Shadows and Text Effects
    31m 4s
  9. Borders and Backgrounds
    38m 40s
  10. Gradients
    29m 4s
  11. Transforms
    16m 49s
  12. Transitions and Animations
    34m 58s
  13. Other CSS Features
    24m 37s

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.

9

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

by Geoffrey Grosenbach, Lea Verou

Jul 19, 2014 / 2h 15m

Advanced • 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. Introduction
    2m 17s
  2. Data Model and Game Mechanics
    33m 1s
  3. HTML Game View
    51m 2s
  4. Accessibility and Styling
    48m 45s

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

Register for FREE. Get your Pluralsight IQ.

You’ll get unlimited access to adaptive skill assessments that help you validate your skills in as little as 5 minutes, and you'll get to see the Pluralsight platform first-hand.

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