CSS Shorts

Go to class
Write Review

Free Online Course: CSS Shorts provided by LinkedIn Learning is a comprehensive online course, which lasts for 10 hours worth of material. The course is taught in English and is free of charge. Upon completion of the course, you can receive an e-certificate from LinkedIn Learning. CSS Shorts is taught by Chris Converse.

Overview
  • Take more control over the style, layout, and even the user experience of your web designs. Get tips for creating more beautiful websites with CSS.

Syllabus
  • Introduction

    • Welcome
    February 2019
    • Multiple background images
    • OpenType swashes
    • Photo gallery, part 1
    • Photo gallery, part 2
    January 2019
    • Accordion panels
    • Border image
    • Aspect ratio
    • Shadow for a PNG file
    • Style by download type
    December 2018
    • Every nth element
    • Layout patterns
    • Style placeholder text
    July 2018
    • Diamond-shaped image crop
    • Add perspective to an element
    • Responsive iframes
    • Create a star
    • Color SVG with CSS
    • Style a progress bar
    • Indicating required form fields
    • 3D product box: Create the box sides
    • 3D product box: Add graphics to sides
    • 3D product box: Resize and position box
    • Curve your header
    • Add content from attribute values
    • Striped pattern with CSS
    June 2018
    • Blur and focus rollover effects
    • Clip an image
    • Vertically aligned columns
    • Gradient text
    May 2018
    • Span flex columns
    • Combine gradients and blend modes
    • Create a speech bubble
    • Animate SVG elements
    • See more links
    April 2018
    • Create a vignette
    • Create variables
    • CSS not selector
    • Parallax scroll effect
    March 2018
    • Filter a list
    • 3D shadow text
    • Show URLs when printing
    • Style breadcrumb links
    February 2018
    • Box sizing to the rescue
    • Set text on an angle
    • Triangle bullets
    • Force text to wrap
    January 2018
    • Add images with pseudo-elements
    • A transition for your mobile menu
    • Animate a sprite sheet
    • Style telephone links
    • Circular text wrap with CSS
    December 2017
    • Create a grid of images
    • Sticky footers
    • Selection colors
    November 2017
    • Detect screen resolution
    • Continue a numbered list
    • Add a QR code for print
    • Interactive tab panels
    October 2017
    • Outline your text
    • Create polka dots
    • Gradient horizontal rule
    • Embed SVG art in CSS
    • Style big list numbers
    September 2017
    • Text indents
    • Flex a column with a pseudo-element
    • Display images as grayscale
    • Customized radio buttons
    August 2017
    • Indicating off-site links
    • Creating a pie chart
    • Numbering items
    • Animating backgrounds
    • Angled headers
    July 2017
    • Checkboxes to switches
    • Blurring images
    • Overlapping heading rule
    June 2017
    • Center A positioned element
    • Put your best footer forward
    • Mixin' it up with SASS
    • Mixin' it up with LESS
    May 2017
    • Drop the cap
    • Get nestled with SASS
    • Get nestled with LESS
    • Flex your columns
    • Let’s focus on the focus
    April 2017
    • Expand your mobile menu
    • Vertical and center
    • Column divider lines
    • Creating a grid
    March 2017
    • Get your links in a row
    • Give me a few tips
    • Setting a stylish table
    • Color functions in Sass and LESS
    February 2017
    • First things first and last things last
    • Setting colors with Less and Sass
    • Calc it, fix it, and forget it
    • Hover in a hover
    January 2017
    • A button for your link
    • Visiting the visited link
    • You can quote me
    • A glowing property
    • Dress up that link
    December 2016
    • Give me some background
    • What’s your position?
    • Let me float this by you