The CSS Mastery Course 2024 is our offering to new and intermediate developers who are interested in front-end development. Before going further, I will explain CSS and give you basic lessons to prepare you for the more difficult material. Responsive design principles will be taught so your websites will look good on any device. In addition, you’ll be learning about more advanced layout appliances such as Flexbox and Grid, and we’ll teach you about media queries so you’ll be able to optimize your layouts for different screens.
We will also explain to you the CSS preprocessors that include extended features to CSS, such as SASS. Again, you will master how to write Sass mixins and improve your productivity. Thus, the practical outcome of this course is the creation of several representative designs within the context of project-based learning. The course will also incorporate Figma to help you create precise design replicas.
This CSS Mastery Course 2024 takes you through various CSS methodologies of writing code that can easily be maintained and scaled. You will be studying theming for creating desirable web apps and mastering techniques for placing dynamic transitions & animations. By the end of the course, you will be equipped with the tools to design highly rich, appealing web layouts fluidly. Come to the course and boost your CSS powers to a new level!
CSS Mastery Course 2024 Table of Contents:
- Introduction (00:33)
- What to install? (05:18)
- Set up a project (05:20)
- How does CSS actually work? (03:57)
- Box model (07:31)
- Display properties (07:51)
- Position properties (28:02)
- Combinators (10:08)
- Selectors (18:26)
- Pseudo elements (08:52)
- Pseudo classes (06:21)
- Your first quiz! (10 questions)
- Block Element Modifier (BEM) (09:12)
- Object-Oriented CSS (OOCSS) (04:09)
- Atomic CSS (05:50)
- Scalable and Modular Architecture for CSS (SMACSS) (10:46)
- Reasonable System for CSS Stylesheet Structure (RSCSS) (04:35)
- Inverted Triangle CSS (ITCSS) (04:29)
- Conclusion (00:31)
- Yay, quiz! (5 questions)
- Figma overview and tips (20:23)
- Responsive design (00:35)
- Media Queries (04:51)
- Container Queries (01:57)
- Flexbox (26:06)
- Grid (12:45)
- Quiz! (5 questions)
- What is SASS? (00:08)
- Nesting (01:23)
- Variables (01:14)
- Partials & Modules (02:00)
- Mixins (04:14)
- Inheritance (01:38)
- Operators (00:44)
- Functions (02:16)
- Light/Dark mode using CSS (02:36)
- Transitions and animations (05:28)
- Truncate Strings in CSS (02:31)
- Full Height Containers (01:20)
- New Color Models (04:02)
- Handy Color Functions (02:35)
- Variable Fonts and Typography Innovations (00:57)
- New Value for text-wrap: balance (00:54)
- Viewport Units (02:56)
- Books that I highly recommend you to read in order to become a better developer (00:25)
- Not a goodbye but a see you later! (00:41)
Who is this course for?
- It is ideal for any developer who aspires to become a CSS guru and enhance his/her frontend abilities.
- What is good for middle-line developers who still feel slightly shaky about CSS?
- This is perfect for people with CSS issues, such as those who have it complicated, full of bugs, or those who find it hard to understand.
