Free Course – Practical CSS for Beginners

by PK
2023-01-23
No Comments

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
Typography
Colors
The Box
Display
Positioning
Flex
Grid
Variables

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 lin k f o r L e s s o n 0 1 f i l e s

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

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.

Why no ads?

Hi, my name is PK, and welcome to my website, almost inevitable design. I maintain and publish on this site for two reasons.

To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.
To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to product better content.

Any bit of interest helps. Even sharing with your feidns, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!