Complex Selectors
CSS3 brought new selectors, opening a whole new world of opportunities and improvements to existing selectors.
Complex Selectors
- Common Selectors, Child Selectors
- Sibling Selectors
- Attribute Selectors: Attribute Present, Attribute Equals, etc
- Pseudo Classes - I: Link, Action, State Pseudo Classes
- Pseudo Classes - II: First Child, Last Child, Only Child, etc
- Pseudo Classes - III: Target, Empty, and Negation Pseudo Class
- Pseudo Elemets: Textual, Generated, and Fragment Pseudo Elements
Exercises / Projects
- TrackL - Track your learning processPRO
Preprocessor - Sass/SCSS
A preprocessor is a program that takes one type of data and converts it to another type of data. In the case of HTML and CSS, some of the more popular preprocessor languages include Haml and Sass. Haml is processed into HTML and Sass is processed into CSS.
Preprocessor - Sass/SCSS
- Understand Preprocessor - Sass and SCSS
- Nesting in SCSS
- Parent Selector
- Create Varialbles in SCSS
- Calculations - Mathematical operations in SCSS
- Color, Color Operations, Color Alterations
- Extends - share and reuse styles without repeating
- Mixins: Way to template properties and values, then share them amongst different selectors.
- Imports: import multiple .scss files and condense them into one single
- Loops & Conditionals
Exercises / Projects
- Unitech - Best business Servieces WebsitePRO
CSS Grid
CSS Grid is a brand new layout system in CSS! We can use it to place, size, align and architect designs that were previously difficult or even impossible with floats or flexbox.
CSS Grid
- Introduction to CSS Grid
- CSS Grid Property - Display
- Grid Template Columns and Grid Template Rows
- Grid Auto Rows, Grid Auto Columns, and Grid Auto Flow
- Grid Gap - Grid Line Width
- Auto-Fit, Auto-Fill, and minmax() functions
- Grid Template Areas and Grid Area
- Grid Alignments
- Sizing and Placing Grid Items
- Reordering Grid Items
- CSS Grid vs Flexbox
Exercises / Projects
- Create a card layout using grid properties
- Stimulus - A portfolioPRO
CSS Animation | Transition, Transforms, and Animation
One evolution with CSS3 was the ability to write behaviors for transitions and animations. Which allows us to design interactions within HTML and CSS, without the use of JavaScript or Flash.
CSS Transition
CSS Transforms
CSS Animation
CSS Animation - Exercise
Exercises / Projects
