CSS Tutorial for Beginners

In this video, We'll dive into the world of web design with this comprehensive tutorial on the basics of CSS. Whether you're a beginner looking to embark on your web design journey or someone brushing up on the essentials, this guide has got you covered. Learn how CSS selectors can transform your webpage's look, delve into the vibrant world of colors and typography, and master the nuances of display types and positioning. By the end, you'll have the foundational knowledge to recreate the iconic look of Google's homepage. Elevate your design game and become the web designer everyone aspires to be

// TIMESTAMPS //

00:00 - Intro

02:09 - Start of Tutorial

03:09 - Adding CSS to HTML File

04:28 - Basic CSS Syntax

04:37 - Selectors

08:02 - CSS Properties

08:30 - Colors

10:20 - Typography

11:35 - Box Model

14:04 - Positioning

15:39 - The hardest thing you'll ever have to do

17:03 - Styling Google homepage

26:14 - Software engineer rant blah blah blah

27:41 - Back to styling the Google homepage

//ADDITIONAL LEARNING RESOURCES //

If you're feeling motivated and want to move on ahead or wanna learn some of these topics in a more in-depth way, or if I just didn't explain something good, here's some resources I recommend trying out:

CSS Colors: https://www.w3schools.com/cssref/css_...

The Odin Project: https://www.theodinproject.com/

CSS in 100 seconds:    • CSS in 100 Seconds

CSS in 5 Minutes:    • CSS in 5 minutes

Learn Flexbox in 5 minutes:    • Learn Flexbox CSS in 8 minutes

The additional topics I recommend learning:

Pseudo-classes and pseudo-elements

Understanding and using the main sizing units:

Pixels (px)

em and rem units

Percentages (%)

Viewport units (vh, vw)

Creating responsive designs:

Media Queries

Basic transitions and animations

Handling cross-browser compatibility issues

CSS Variables for maintainable stylesheets

// SOCIALS //

Twitter:   / thecodingsloth1

TikTok:   / thecodingsloth

Discord:   / discord