Free Course – Practical CSS for Beginners

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)

1. Selectors and Units
2. Typography
3. Colors
4. The Box
5. Display
6. Positioning
7. Flex
8. Grid
9. 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

Selectors

Simply put

!important > inline > id > class > element

Learn more here Learn WordPress CSS in under an hour – Almost Inevitable Design

Units

Reference CSS Units

Absolute

• px

Relative

• em
• rem
• vw
• vh
• vmin
• vmax
• %
• ch

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

Talking about:
Color names
RGB
Hex
HSL stands for hue, saturation, and lightness.
HWB (Hue, Whiteness, Blackness)
currentcolor

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.

• Relative
• Absolute
• Fixed
• sticky

Most important is relative and absolute position.

note: For position sticky to work, there should be no ancestor overflow, and needs a threshold.

More reading
https://www.w3schools.com/Css/css_positioning.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/position

About sticky position
https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working

Lesson 07. Flex

Here’s the Google Drive link for the files used in Lesson 07

The container

To start, this is how you set a div as a flexbox.

display: flex;

and here are some of the extra stuff that we can add, starting from the most important ones:

justify-content
align-items
align-content
gap

flex-direction
row - left to right
column - top to bottom

flex-wrap
wrap / nowrap

flex-flow: column wrap;

Children

flex-shrink / flex-grow

References
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

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

grid-template-columns
grid-template-rows
grid-template-areas
justify-items
align-items

References
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Lesson 09. Pseudo Elements

Here’s the Google Drive link for the files used in Lesson 09

First, here’s the CSS variables link
https://almostinevitable.com/quick-intro-to-css-variables/

And as for pseudo elements, one of the most important things to remember that you need the content line.

Reference
Replaced elements – CSS: Cascading Style Sheets
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

CSS Pseudo-elements
https://www.w3schools.com/CSS/css_pseudo_elements.asp

Pseudo-classes and pseudo-elements
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements