If you find it useful, please consider sharing this tweet as it might help others too 🙏
🧵Thread 👇
![CSS Developer Roadmap with +60 [FREE] resources to learn from.
If you find it useful, please consid...](https://pbs.twimg.com/media/E-SixlPWQA8stFU.jpg)
1.1 [#parsing" target="_blank" rel="noopener" onclick="event.stopPropagation()">developer.mozilla.org]
1.2 [w3schools.com
1.3 [developer.mozilla.org]
1.4 [developer.mozilla.org]
1.4 [developer.mozilla.org 1.4[developer.mozilla.org]
1.4 [developer.mozilla.org]
1.4 [developer.mozilla.org]
Populating the page: how browsers work - Web performance | MDN
Users want web experiences with content that is fast to load and smooth to interact with. Therefore,...
HTML Styles CSS
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
Universal selectors - CSS: Cascading Style Sheets | MDN
The CSS universal selector (*) matches elements of any type.
Class selectors - CSS: Cascading Style Sheets | MDN
The CSS class selector matches elements based on the contents of their class attribute.
Attribute selectors - CSS: Cascading Style Sheets | MDN
The CSS attribute selector matches elements based on the presence or value of a given attribute.
1.6 [youtube.com]
1.6 [developer.mozilla.org]
Fundamentals 2.0:
2.1 [youtube.com]
2.1 [w3schools.com]
2.1 [css-tricks.com]
2.2 [developer.mozilla.org]
2.2 [youtube.com]
Inheritance - CSS: Cascading Style Sheets | MDN
In CSS, inheritance controls what happens when no value is specified for a property on an element.
CSS Box Model
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
Box Sizing | CSS-Tricks
The box-sizing property can make building CSS layouts easier and a lot more intuitive. It's such a b...
2.2 [w3schools.com]
2.2 [w3schools.com]
2.3 [youtube.com]
2.3 [tutorialrepublic.com]
2.4 [youtube.com]
2.4 [digitalocean.com]
2.4 [tutorialrepublic.com]
2.4 [youtube.com]
CSS Borders
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
CSS Padding
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
3.1 [youtube.com]
3.1 [w3schools.com]
3.2 [youtube.com]
3.2 [css-tricks.com]
3.2 [youtube.com]
3.2 [developer.mozilla.org]
3.3 Exercice: [developer.mozilla.org]
CSS Layout - The position Property
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox...
4.1 [developer.mozilla.org]
4.2 [developer.mozilla.org]
4.2 [youtube.com]
4.3 [youtube.com]
4.3 [developer.mozilla.org]
4.3 [youtube.com]
Combinators - Learn web development | MDN
This is the last section in our lessons on selectors. Next, we'll move on to another important part...
Pseudo-classes and pseudo-elements - Learn web development | MDN
In this article we've introduced CSS pseudo-classes and pseudo-elements, which are special types of...
5.1 [web.dev]
5.1 [youtube.com]
5.2 [emailonacid.com]
5.3 [youtube.com]
5.3 [smartbear.com].
5.4 [#breakpoints" target="_blank" rel="noopener" onclick="event.stopPropagation()">web.dev]
5.5 Exercise: [w3schools.com]
Responsive web design basics
How to create sites which respond to the needs and capabilities of the device they are viewed on.
CSS Media Min-Width & Max-Width Queries - How They Work
What are css media queries? Learn to use media max width and min width to develop responsive emails...
What is Mobile First?
We’ve Embraced Mobility and Expect Our Technology to do the Same. What is Mobile First? Learn how yo...
Responsive web design basics
How to create sites which respond to the needs and capabilities of the device they are viewed on.
How To Create a Responsive Top Navigation Menu
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
6.1 [youtube.com]
6.1 [w3schools.com]
6.2 [joshwcomeau.com]
6.3 [w3schools.com]
6.3 [youtube.com]
6.4 [youtube.com]
CSS Transitions
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
An Interactive Guide to CSS Transitions
This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental...
CSS 2D Transforms
W3Schools offers free online tutorials, references and exercises in all the major languages of the w...
BEM 101 | CSS-Tricks
The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-...
BEM — Block Element Modifier
BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and cod...
8.1 [youtube.com]
8.1 [sass-lang.com]
8.2 [w3schools.com]
8.3 [#topic-4" target="_blank" rel="noopener" onclick="event.stopPropagation()">sass-lang.com]
8.4 [sass-lang.com]
8.5 [sass-lang.com]
8.6 [sass-lang.com]
8.7 [sass-lang.com]
Sass: Variables
Syntactically Awesome Style Sheets
Sass: Sass Basics
Syntactically Awesome Style Sheets
Sass: @mixin and @include
Syntactically Awesome Style Sheets
Sass: @import
Syntactically Awesome Style Sheets
Sass: @function
Syntactically Awesome Style Sheets
9.1 [learnhowtoprogram.com]
9.2 [youtube.com]
Frameworks:
10.1 [youtube.com]
10.2 [youtube.com]
Loading suggestions...