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
-
1.Course Overview2m 26sUP NEXT
-
2.Custom Elements4m 42s
-
3.The Shadow DOM4m 13s
-
4.HTML Templates5m 46s
-
5.Cross-Origin Resource Sharing3m 48s
-
6.Sass Setup and Installation5m 8s
-
7.Sass Variables and Nesting7m 3s
-
8.LESS Setup and Installation6m 6s
-
9.LESS Variables and Mixins5m 27s
-
10.LESS Scope, Operations, and Functions5m 13s
-
11.Stylus Setup and Configuration4m 15s
-
12.Stylus Basic Syntax5m 50s
-
13.Exercise: Mixins with LESS6m 18s
EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE
Skillsoft is providing you the opportunity to earn a digital badge upon successful completion of this course, which can be shared on any social network or business platform
Digital badges are yours to keep, forever.
