Islam Muhammad

Posted on Feb 9, 2019 • Edited on Mar 17, 2019

I built my own CSS curriculum to master it

#css #webdev #beginners #frontend

CSS Masterclass Curriculum

Or how to master CSS using available free content.

CSS is a very vast topic seems to be easy at first, but it becomes a pain in a head when you want to master it not for lack of tutorials but for lack of path or full curriculum to mastering it, here I am going to show you how to master CSS by following a curriculum contain very comprehensive resources from the internet, and sure it will be free.

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the structural content. (Source: Wikipedia)

How this curriculum work?

In each section you can find 📖 Contents and 📚 Resources, in contents I show to you what topics included in this section then in resources sections I list some of the big and most comprehensive ( articles, videos or courses ) resources covering this topic.
But before you start you need to learn the basics of HTML & CSS then follow the Curriculum to master CSS.

HTML&CSS Basics

html & css is hard - A friendly web development tutorial for complete beginners.
Introduction to HTML | Scrimba
Introduction to CSS | Scrimba
HTML Crash Course For Absolute Beginners - by Traversy Media on Youtube.
CSS Crash Course For Absolute Beginners - by Traversy Media on Youtube.

📆 Curriculum

CSS can be categorized into four main categories:

Syntax: includes selectors, properties, values, and specificity.
Visual: includes styling content, responsive web design, and animations.
Layout: includes box model, layout.
Management: includes CSS preprocessors, methodologies, and frameworks.

CSS Selectors
CSS Properties
CSS Values
CSS Specificity
CSS Box Model
Styling Content
CSS Layout
Responsive Web Design
CSS Animations and Drawing
CSS Preprocessors
CSS Methodologies
CSS Frameworks

Syntax

Photo taken from w3schools

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. (Source: w3schools)

CSS Selectors

In CSS, selectors are used to targeting the HTML elements on our web pages that we want to style.

📖 Contents

Simple Selectors:
- Element
- Class
- Id
- Universal Selector ( , ns|, |, |* )
Combinators & Multiple selectors:
- Group of selector [A, B].
- Descendant selector [A B].
- Child selector [A > B].
- Adjacent sibling selector [A + B].
- General sibling selector [A ~ B].
Attribute Selectors
Pseudo-class Selectors
Pseudo-element Selectors

📚 Resources

CSS Properties

Note: You will learn more about properties when you get into proper section but you can learn some generic concept like CSS variables.

📖 Contents

CSS Variables

📚 Resources

CSS Values

CSS values are set against CSS Properties and reside within CSS declaration block, which is a part of the CSS rule/statement.
Note: You will learn more about each value type when you get into proper section but you can learn some generic values like rem, colors, calc ...etc.

📖 Contents

There are 4 types of values in CSS
- Colors.
- Length, sizes and numbers.
- Pre-Defined Options.
- Functions.
How CSS values are processed.

📚 Resources

📜 Color | MDN web docs
📜 A Nerd’s Guide to Color on the Web | CSS Tricks
📜 CSS Gradients Guides | CSS Tricks
📜 A Couple of Use Cases for Calc() | CSS Tricks

CSS Specificity

At some point in your work, you'll find yourself in a situation where multiple CSS rules will have selectors matching the same element. In such cases, which CSS rule "wins", and ends up being the one that is finally applied to the element? This is controlled by a mechanism called the Cascade, One of the most important concepts to master as you start to dig into more advanced concepts is specificity, Specificity is basically a measure of how specific a selector is. (Source: MDN)

📖 Contents

Specificity hierarchy:
- Inline styles.
- IDs.
- Classes, attributes and pseudo-classes.
- Elements and pseudo-elements.

📚 Resources

📜 The “C” in CSS: The Cascade | CSS Tricks
📜 Cascading and Inheritance
📹 CSS Basics (Part2) — Cascades - by DevTips on Youtube.
📹 CSS Basics (Part6) — Specificity - by DevTips on Youtube.
📜 inheritance

CSS Box Model

Photo taken from w3.org

The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model. (source: MDN)

📖 Contents

Content (images, text …etc).
Padding (Transparent area around the content, inside of the box).
Borders (goes around the padding and content ).
Fill Area (the area that contains border, padding, content, and filling with background and background-image).
Margins (Space around elements, outside of any defined borders).
Box Sizing:
- content-box: Width and height only apply to the content of the element.
- border-box: Include padding and border in the element's total width and height.
Background:
- background-color.
- background-image.
- background-size.
- background-position.
- background-repeat.
- background-attachment.
- background-origin.
- background-clip.
- background-blend-mode.
- Multiple Background Images.
- Linear Gradients.
- Radial Gradients.
clip-path

📚 Resources

📜 The box model | MDN web docs

Styling Content

After you learn the box-model, learning styling content ( which is the part of box-model ) is the big core concept to master. In this section, you will learn how to style those content like images, text, lists, links ...etc.

📖 Contents

Typography.
Lists.
Links.
Media ( Image, Video, and Audio ).
Tables.
Forms.
Buttons.

📚 Resources

CSS Layout

Once you have the ability to target HTML elements for styling, the layout is the next core concept to master.
Layout involves manipulating how elements layout on the page, How much space do they take? Are they side by side or on top of each other?...etc.

📖 Contents

Normal flow
The display property:
- Block.
- Inline.
- Inline-Block.
- Flexbox.
- Grid.
- Table.
Floats
Positioning
- Default ( no property specified or Static ).
- Relative.
- Absoulte.
- Fixed.
- Sticky.
- Stacking Content ( Z-Index property ).
Multiple-column layout

📚 Resources

📜 Learn CSS Layout
📹 Building layouts with flexbox and CSS grids
📜 Centering in CSS: A Complete Guide | CSS Tricks
Flexbox
- 📀 CSS flexbox Course - by WesBos
- 📜 Flexbox Complete Guide | CSS Tricks
- 📜 The Complete Illustrated Flexbox Tutorial | Freecodecamp
- 📜 The Ultimate Guide to Flexbox | Freecodecamp
- 📜 Understanding Flexbox: Everything you need to know | Freecodecamp
Grid
- 📀 CSS Grid Course - by WesBos
- 📜 CSS Grid Complete Guide | CSS Tricks
- 📜 CSS Grid — The Beginner’s Guide | Freecodecamp
- 📜 How to create an image gallery with CSS Grid | Freecodecamp
Floats
- 📜 All About Floats | CSS Tricks
- 📹 CSS Floats Explained - by DevTips on Youtube.
- 📹 CSS Floats and Clears Explained - by DevTips on Youtube.
Positioning
- 📹 CSS Positioning - part1 - by DevTips on Youtube.
- 📹 CSS Positioning - part2 - by DevTips on Youtube.
Multiple-column layout
- 📜 When And How To Use CSS Multi-Column Layout | Smashing Magazine

Responsive Web Design

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices desktops, tablets, and phones. (Source: w3schools)

📖 Contents

Media Queries
Responsive Images
Common Responsive Patterns
- Mostly Fluid.
- Column Drop.
- Layout Shifter.
- Off Canvas.
Responsive Layout Methods:
- Mobile-First.
- Desktop-First.

📚 Resources

📀 Responsive Web Design Fundamentals
📀 Responsive Images

CSS Animations and Drawing

CSS Animations involves manipulating how elements should look like over the time by allowing you to specify how elements change from one style to another.

📖 Contents

CSS Animations - Transforms:
- Transform translate().
- Transform rotate() and Transform-Origin.
- Transform scale().
- Transform skew().
- Transform Shorthand.
CSS Animations - Transitions:
- Transition Duration.
- Transition Property.
- Transition Timing Function.
- Transition Delay.
- Transition Shorthand.
CSS Animations - Keyframes:
- CSS Animation Keyframes.
- CSS Animation Duration.
- CSS Animation Fil Mode.
- CSS Animation Iteration Count.
- CSS Animation Delay.
- CSS Animation Direction.
- CSS Animation Timing Function.
- CSS Animation Properties.
- CSS Animation Shorthand.
CSS Shapes:
- CSS Shapes: the inset() function.
- CSS Shapes: The circle() Function.
- CSS Shapes: The ellipse() Function.
- CSS Shapes: The polygon() function.
- CSS Shapes: Shapes from the Alpha Channel.
- CSS Shapes: Shapes from the Reference Box.

📚 Resources

CSS Preprocessors

The use of CSS preprocessors has become so important especially when you start working on a large project.
Learn about the most famous and common used preprocessor ( SASS ), Why I use it?, How to use it? and How to writing maintainable and scalable Sass.

📖 Contents

Common Preprocessors:
- SASS.
- LESS.
- Stylus.
- PostCSS.

📚 Resources

📜 Learn Sass In 15 Minutes | Tutorialzine
📀 SASS Tutorial - by The Net Ninja on Youtube.
📹 Sass Workflow & Dev Server From Scratch Using Gulp - by Traversy Media on Youtube.
📜 Sass Guidelines
📜 How to structure a Sass project
📜 PostCSS – A Comprehensive Introduction | Smashing Magazine

CSS Methodologies

If you're not careful, it is easy to write complex, confusing, and unmaintainable CSS. so there are many ways to manage that.

📖 Contents

Common naming conventions:
- BEM.
- OOCSS.
- SMACSS.
- SUITCSS.
- Atomic.

📚 Resources

📜 BEM For Beginners: Why You Need BEM | Smashing Magazine

CSS Frameworks

In this area, you can pick up any framework you want, but I will list here the most famous one.

📖 Contents

Bootstrap
Bulma
Tailwind CSS

📚 Resources

Bootstrap
Bulma
- 📀 learn Bulma Course | Scrimba
- 📀 Bulma Crash Course - by Traversy Media on Youtube.
Tailwind CSS

Where to go next?

In general, I found this blogs, newsletter or courses the best resources to learn CSS in specific and web development in general and for those who prefer paid courses I list for you the best-paid courses available on the web.

Blogs
Paid CSS Courses
- CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
- Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Closure

The links I listed here, in my opinion, is the most comprehensive I found or I use it during my learning journey, surely there is a better resource out there so I list the content before resources in each section so you can add your own links. Please let me know what you think on comment and if you like it please like and share it with your friends. I am planning to make another article about javascript following the same approach let me know what you think in the comment.