FSD Front-end Development: Advanced CSS Browser Features
HTML5/CSS3
| Intermediate
- 13 videos | 1h 6m 15s
- Includes Assessment
- Earns a Badge
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 42sIn this video, you will learn how to create new HTML tags. FREE ACCESS
-
3. The Shadow DOM4m 13sIn this video, you will avoid conflict by creating separate DOM elements. FREE ACCESS
-
4. HTML Templates5m 46sIn this video, find out how to write markup that is not rendered. FREE ACCESS
-
5. Cross-Origin Resource Sharing3m 48sIn this video, you will learn how to prevent CORS errors. FREE ACCESS
-
6. Sass Setup and Installation5m 8sIn this video, learn how to set up and install the Sass preprocessor. FREE ACCESS
-
7. Sass Variables and Nesting7m 3sLearn how to use variables and nesting to speed up CSS development. FREE ACCESS
-
8. LESS Setup and Installation6m 6sIn this video, learn how to set up and install the LESS preprocessor. FREE ACCESS
-
9. LESS Variables and Mixins5m 27sIn this video, you will learn how variables and mixins work. FREE ACCESS
-
10. LESS Scope, Operations, and Functions5m 13sIn this video, find out how to use scope to confine variables, add an operation, and implement a function. FREE ACCESS
-
11. Stylus Setup and Configuration4m 15sIn this video, you will learn how to install Stylus using Node.js. FREE ACCESS
-
12. Stylus Basic Syntax5m 50sLearn how to write simple markup with Stylus. FREE ACCESS
-
13. Exercise: Mixins with LESS6m 18sIn 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.
