FSD Front-end Development: Advanced CSS Browser Features

HTML5/CSS3    |    Intermediate
  • 13 videos | 1h 6m 15s
  • Includes Assessment
  • Earns a Badge
Rating 4.3 of 22 users Rating 4.3 of 22 users (22)
In this 13-video course, discover the browser features that are important to full stack developers and how CSS (Cascading Style Sheet) preprocessors make adding styles to a web page and web site easier, especially when the site becomes large. Begin with custom elements and creating new HTML tags. Then take a look at the Shadow DOM (Document Object Model), and avoid conflict by creating separate DOM elements. Next, explore HTML templates, and writing markup that is not rendered. Learn about Cross-Origin Resources Sharing (CORS), which leads to setting up and installing Sass preprocessor, and using variables and nesting to speed up CSS development. Learn how to set up and install LESS, a CSS preprocessor, and then examine workings of LESS variables and mixins (functions allowing reuse of properties). Discover how to use LESS Scope to confine variables, add an operation, and implement a function. Then learn how to install Stylus by using Node.js, and then write simple markup with Stylus. Close the course with an exercise on using LESS mixins to combine styles into a nest pattern.

WHAT YOU WILL LEARN

  • Identify the role of the browser in web development and use css without actual css markup
    Create new html tags
    Avoid conflict by creating separate dom elements
    Write markup that is not rendered
    Prevent cors errors
    Set up and install sass preprocessor
    Use variables and nesting to speed up css development
  • Set up and install less preprocessor
    Demonstrate how variables and mixins work
    Use scope to confine variables, add an operation, and implement a function
    Install stylus using node.js
    Write simple markup with stylus
    Use less mixins to combine styles into a nest pattern

IN THIS COURSE

  • 2m 26s
  • 4m 42s
    In this video, you will learn how to create new HTML tags. FREE ACCESS
  • Locked
    3.  The Shadow DOM
    4m 13s
    In this video, you will avoid conflict by creating separate DOM elements. FREE ACCESS
  • Locked
    4.  HTML Templates
    5m 46s
    In this video, find out how to write markup that is not rendered. FREE ACCESS
  • Locked
    5.  Cross-Origin Resource Sharing
    3m 48s
    In this video, you will learn how to prevent CORS errors. FREE ACCESS
  • Locked
    6.  Sass Setup and Installation
    5m 8s
    In this video, learn how to set up and install the Sass preprocessor. FREE ACCESS
  • Locked
    7.  Sass Variables and Nesting
    7m 3s
    Learn how to use variables and nesting to speed up CSS development. FREE ACCESS
  • Locked
    8.  LESS Setup and Installation
    6m 6s
    In this video, learn how to set up and install the LESS preprocessor. FREE ACCESS
  • Locked
    9.  LESS Variables and Mixins
    5m 27s
    In this video, you will learn how variables and mixins work. FREE ACCESS
  • Locked
    10.  LESS Scope, Operations, and Functions
    5m 13s
    In this video, find out how to use scope to confine variables, add an operation, and implement a function. FREE ACCESS
  • Locked
    11.  Stylus Setup and Configuration
    4m 15s
    In this video, you will learn how to install Stylus using Node.js. FREE ACCESS
  • Locked
    12.  Stylus Basic Syntax
    5m 50s
    Learn how to write simple markup with Stylus. FREE ACCESS
  • Locked
    13.  Exercise: Mixins with LESS
    6m 18s
    In this video, find out how to use LESS mixins to combine styles into a nested pattern. FREE ACCESS

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

Rating 4.1 of 10 users Rating 4.1 of 10 users (10)
Rating 4.5 of 771 users Rating 4.5 of 771 users (771)
Rating 4.5 of 51 users Rating 4.5 of 51 users (51)

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Rating 4.5 of 35 users Rating 4.5 of 35 users (35)
Rating 4.2 of 12 users Rating 4.2 of 12 users (12)
Rating 3.7 of 20 users Rating 3.7 of 20 users (20)