This course is focused on practical CSS for beginners
Here’s the video playlist
Structured practical bare bones CSS
(note: this playlist has videos being added on schedule. If you don’t see all the videos in the playlist, please come back in a couple of days, or subscribe to me on YouTube)
- Selectors and Units
- The Box
- Pseudo Elements
Software that helps
- Text editor Sublime Text – Text Editing, Done Right
- Install Emmet package Sublime Text 3 support
Set up the file
Loading CSS file
HTML Styles CSS
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="sample.css">
Lesson 1. Units and Selectors
Google Drive link for Lesson 01 files
!important > inline > id > class > element
Learn more here Learn WordPress CSS in under an hour – Almost Inevitable Design
Reference CSS Units
Lesson 02. Typography
Here’s the Google Drive link for the files used in Lesson 02
Best font sizing tutorial on the internet
Responsive Web Typography Crash Course – Almost Inevitable Design
So we can now focus on spacing
CSS word-spacing property
Lesson 03. Color
Here’s the Google Drive link for the files used in Lesson 03
HSL stands for hue, saturation, and lightness.
HWB (Hue, Whiteness, Blackness)
Lesson 04. The box
Box sizes: content-box, and border-box
Margins, borders, and padding
How do you align blocks?
How do you get the right spacing between blocks?
What’s the difference between margins and paddings?
Do they essentially do the same thing?
Some extra info on margin collapse https://www.w3.org/TR/CSS21/box.html#collapsing-margins
Lesson 05. Display
Here’s the Google Drive link for the files used in Lesson 05
This time, DISPLAY!
Again, really important basics that many people skip learning and then struggle with later.
We’ll be focusing on only three types of display in this video. Flex and Grid are scheduled for lesson 7 and 8.
block inline-block inline
Even knowing the difference between these, and knowing when to use which will save you hours of struggling.
Lesson 06. Position
Here’s the Google Drive link for the files used in Lesson 06
Again, really important basics that many people just don’t learn about and then struggle with later.
Most important is relative and absolute position.
note: For position sticky to work, there should be no ancestor overflow, and needs a threshold.
About sticky position
Lesson 07. Flex
Here’s the Google Drive link for the files used in Lesson 07
To start, this is how you set a div as a flexbox.
and here are some of the extra stuff that we can add, starting from the most important ones:
row - left to right
column - top to bottom
wrap / nowrap
flex-flow: column wrap;
flex-shrink / flex-grow
Lesson 08. Grid
Here’s the Google Drive link for the files used in Lesson 08
Real quick rundown on the most important properties of grid. Grid is really helpful in making layouts. I explain the differences between flex and grid as well.
It basically comes down to
Lesson 09. Pseudo Elements
Here’s the Google Drive link for the files used in Lesson 09
First, here’s the CSS variables link
And as for pseudo elements, one of the most important things to remember that you need the content line.
Replaced elements – CSS: Cascading Style Sheets
Pseudo-classes and pseudo-elements
Leave a Reply