Course details

FSD Front-end Development: Advanced CSS Browser Features

FSD Front-end Development: Advanced CSS Browser Features


Overview/Description
Expected Duration
Lesson Objectives
Course Number
Expertise Level



Overview/Description

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.



Expected Duration (hours)
1.1

Lesson Objectives

FSD Front-end Development: Advanced CSS Browser Features

  • 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
  • Course Number:
    it_fsdhtcsdj_02_enus

    Expertise Level
    Intermediate