CSS - The Guide from Beginner to Advanced

In this course, we learn how to style an HTML document. We start by exploring the basic styles...

Tsh 200,000/=

Level

Beginner

Sections

Videos

117

Duration

9h 17min 7s

In this course, we learn how to style an HTML document. We start by exploring the basic styles like text and background color then we dive deep.

All images are downloaded from

https://pexeles.com/

Course content

13 sections · 117 videos

Introduction

15 videos0h 59min 21s

1Text Editor Setup2min 35s 2Defining CSS3min 5s 3Inline CSS4min 30s 4Internal or Embedded CSS2min 57s 5Externally Linked CSS3min 50s 6Power Struggle2min 28s 7Basic CSS Syntax10min 16s 8Element Selectors3min 11s 9Group Selectors1min 38s 10ID Selector3min 32s 11Class Selector4min 15s 12ID and Class Selector Combined3min 41s 13DIV and SPAN element5min 15s 14Inheritance and Exceptions in CSS2min 13s 15Last Rule Principle, Specificity & Universal Selector5min 47s

Colors

7 videos0h 18min 57s

1Color and Background Color Properties2min 16s 2Color by name.1min 35s 3Color by RGB3min 12s 4Color by RGBA3min 30s 5Color By HEX3min 39s 6VS Code Color Picker1min 45s 7Color Resources2min 58s

Units

7 videos0h 29min 18s

1Pixels4min 10s 2Percentage Values3min 31s 3EM Values5min 14s 4REM Values2min 31s 5VH and VW3min 3s 6Default Browser Styles and the dev tools5min 58s 7The calc() function4min 48s

Typography

7 videos0h 25min 27s

1Font Family3min 10s 2Font stack3min 44s 3Google Fonts - Online5min 44s 4Google Fonts - Offline3min 43s 5Font weight and font style1min 39s 6Text align and Text Indent1min 31s 7Line-height, later-spacing, word-spacing, text-transform, and text-decoration5min 53s

CSS Box Model

7 videos0h 29min 25s

1Introduction4min 12s 2CSS Box Model - Padding5min 49s 3CSS Box Model – Margin3min 26s 4CSS Box Model – Border4min 56s 5Border Radius and Negative Margin4min 44s 6Center using margin2min 4s 7Outline4min 11s

The Display Property

5 videos0h 25min 0s

1Display Property7min 41s 2Example for Display Block5min 30s 3Box Sizing5min 7s 4Display inline Block1min 50s 5Display none, Opacity, and Visibility4min 51s

Background Images

9 videos0h 35min 57s

1Downloading Royalty Free Images2min 53s 2Setting background of a div for big and small image4min 7s 3Background repeat property2min 14s 4Background sizing3min 4s 5Background position3min 18s 6Background attachment4min 14s 7Linear gradient6min 11s 8Linear gradient and background image combined7min 19s 9Gradients from colorzilla2min 32s

Position Float and Media Queries

9 videos0h 53min 13s

1Float property9min 7s 2Float property with 3 column layout4min 30s 3Position static1min 45s 4Position Relative1min 44s 5Position absolute5min 2s 6Position fixed3min 21s 7Media queries8min 5s 8Z Index6min 13s 9Before and after pseudo elements13min 23s

CSS Selectors

6 videos0h 16min 21s

1Basic Selectors1min 59s 2Descendant and direct child selector3min 55s 3First-line and first-later pseudo selectors1min 37s 4Hover pseudo selector2min 37s 5Link pseudo class selectors2min 53s 6Root pseudo selector3min 17s

Transform, Transition and Animation

10 videos0h 40min 16s

1Transform translate4min 51s 2Transform scale1min 41s 3Transform rotate3min 4s 4Transform skew2min 16s 5Transition3min 14s 6Multiple transitions2min 24s 7Transition Delay2min 47s 8Transition timing function7min 2s 9Animation8min 50s 10Animation fill mode4min 3s

Variables, icons, prefixes, shadow, semantic and Emmet

6 videos0h 36min 1s

1CSS Variables9min 8s 2Font awesome icons6min 40s 3Text shadow5min 35s 4Browser prefixes6min 18s 5Semantic HTML3min 0s 6Emmet workflow5min 17s

CSS Flexbox

13 videos0h 49min 8s

1Display Flex and Inline-flex5min 13s 2Flex direction2min 10s 3Flex-wrap2min 54s 4Justify-content3min 43s 5Align Items4min 50s 6Center elements with Flexbox4min 52s 7Align content6min 23s 8Main axis4min 20s 9Order of elements3min 16s 10Align self1min 43s 11Flex grow2min 52s 12Flex-shrink2min 32s 13Flex-basis4min 13s

Final Project I

16 videos2h 18min 36s

1Final project introduction3min 54s 2Environment Setup5min 50s 3Header Section18min 17s 4Header Section animation5min 16s 5Divider3min 20s 6Huduma Section13min 52s 7Kuhusu Section9min 21s 8Bidhaa Section11min 50s 9Mawasiliano Section11min 48s 10Footer Section6min 56s 11Navigation9min 23s 12Navigation animation8min 55s 13Adding responsiveness19min 19s 14Sending Email4min 12s 15Hosting our site with Netlify4min 40s 16Final Message1min 36s