Autoplay
Autocomplete
Previous Lesson
Complete and Continue
HTML&CSS
Course Kickoff
Intro (2:15)
Course Resources
Useful Info
Discord Server
HTML Tutorial
HTML Intro (2:46)
Google Chrome and Visual Studio Code (0:48)
Download Google Chrome (3:10)
Download Visual Studio Code (1:49)
Visual Studio Code Overview (4:09)
Crafting Your New Project (2:24)
First Webpage (4:48)
Basic HTML Document Structure (2:34)
Implement HTML Document Structure (3:19)
Live Server Extension Setup (5:58)
Extra Settings and Emmet (7:19)
Heading Elements (4:09)
Paragraph Element (1:52)
White Space Collapsing (1:25)
Lorem Ipsum (3:14)
Image Basics (3:49)
Multiple Images (4:21)
External Images (3:25)
Nice Images (4:03)
Width and Height (3:21)
Crop Images (3:00)
Comments and Line Breaks (5:44)
External Links (5:15)
Internal Links (4:34)
Links - Within a Page (6:23)
Image Links and Empty Links (3:57)
Sup and Sub Elements (2:32)
STRONG and EM Elements (2:59)
Special Characters (3:23)
Unordered Lists (3:57)
Ordered Lists (1:04)
Nested Lists (1:44)
Table Element (2:52)
Forms - Input Elements and Submit Elements (13:36)
Forms - Textarea, Radio, Checkbox, Select Elements (11:36)
Install Prettier Code Formatter (5:53)
Keyboard Shortcuts (10:15)
Head Element and External Resources (4:49)
HTML Project
Intro (3:17)
Project Assets
Setup (3:12)
Download Images (2:30)
Logo, Heading and Navbar (3:02)
Home Page (13:10)
About Page (3:05)
Numbers Page (6:07)
Contact Page (5:03)
Complete Project
CSS Tutorial
CSS Intro (1:29)
Workspace Setup (3:00)
Text Editor Setup (5:13)
Inline CSS (4:05)
Internal CSS (2:22)
External CSS (9:58)
Power Struggle (6:26)
Basic CSS Syntax (7:35)
Element Selectors (2:39)
Grouping Selectors (2:01)
ID Selectors (4:40)
Class Selectors (4:41)
ID and Class Selector Summary (1:52)
ID and SPAN Elements (7:58)
Inheritance in CSS (5:33)
Inheritance - More Info (2:49)
Last Rule, Specificity and Universal Selector (9:39)
Combine Selectors - Descendant Selector (6:24)
All Projects Intro
All Projects Intro (1:43)
Fundamentals Project
First Project Intro (0:26)
Steps (4:48)
Complete Project (7:46)
Projects Folder (1:21)
CSS Colors
Colors Intro (0:27)
Color and Background-color Properties (4:16)
Color Names (2:47)
RGB (6:27)
RGBA (9:45)
HEX Values (6:08)
VS-Code Color Options (2:50)
External Resources (1:52)
Colors Project
Intro (0:39)
Steps (3:01)
Complete Project (7:15)
CSS Units
Units Intro (0:29)
Pixels, Font-Size, Width, Height (5:43)
Percent Units (4:58)
EM Units (5:45)
REM Units (3:01)
VH and VW (6:17)
Default Browser Styles and Chrome DevTools (12:04)
Calc Function (7:00)
Min-height, Max-height (10:31)
Units Project
Intro (0:58)
Steps (5:22)
Complete Project (8:37)
Typography
Typography Intro (0:22)
Font-family (2:36)
Font-Stack Generic Fonts (2:55)
Google Fonts (8:32)
System Fonts (3:40)
More Google Fonts (2:04)
Font-Weight and Font-Style (7:07)
Text-Align and Text-Indent (2:59)
More Text Properties (11:18)
Typography Project
Intro (0:10)
Steps (0:59)
Complete Project (4:25)
CSS Box Model
Box Model - Intro (0:15)
CSS Box Model - Padding (9:32)
CSS Box Model - Margin (6:48)
CSS Box Model - Border (6:28)
Border-Radius and Negative Margin (4:38)
Outline Property (9:11)
Border Hack (2:51)
CSS Box Model Project
Intro (0:33)
Steps (3:53)
Html Structure (3:37)
CSS Styling (16:59)
Display Property
Display Property Intro (0:16)
Display Property (7:40)
Basic Horizontal Centering (4:17)
Mobile Navbar Example (12:46)
Box-Sizing and Border-Box (7:29)
Display Inline-Block (3:34)
Display:None, Opacity, Visibility (8:34)
Display Property Project
Intro (0:52)
Steps (1:39)
Html Structure (3:26)
CSS Styling (12:19)
Most Common Questions (7:15)
Background Images
Intro (0:50)
Setup (2:50)
Background Image Basics (4:34)
Background-Repeat (7:24)
Background-Size (3:17)
Background-Position (4:33)
Background-Attachment (6:30)
Linear Gradients (12:54)
Background Image Overlay (10:27)
Colorzilla (3:38)
Background Images Project
Intro (0:32)
Steps (1:24)
Setup (2:13)
HTML Structure (3:23)
CSS Styling (15:07)
Positions, Float, Media Queries
Float, Positions, Media Queries, Z-Index Intro (0:40)
Float Property (5:31)
Float Property Column Layout Example (7:14)
Position - Static (3:36)
Position - Relative (3:40)
Position - Absolute (5:40)
Position - Fixed (4:05)
Position - Sticky (4:44)
Media Queries (16:35)
Z-Index (8:49)
::before and ::after Basics (7:42)
::before and ::after Example (15:48)
Inset Property (6:38)
Position Property Project
Intro (1:01)
Steps (2:57)
Complete Project (13:11)
Selectors Re-Visited
Selectors Intro (0:51)
Basic Selectors (3:02)
Descendant and Child Selectors (4:40)
First-Line and First-Letter (1:05)
:hover pseudo-class Selectors (3:46)
Link pseudo-class Selectors (4:32)
:root pseudo-class Selector (5:53)
Transform, Transition and Animation
Intro (1:09)
transform : translate() (6:14)
Translate Hero Example (5:03)
transform : scale() (2:37)
transform : rotate() (3:43)
transform : skew() (1:51)
Transition Property (3:27)
Multiple Transitions (2:21)
Transition - Delay, Shorthand, All Properties (5:14)
Transition-timing-function (9:54)
Animation (10:53)
Animation-fill-mode (5:42)
Animation Project
Intro (0:20)
Steps (1:19)
Complete Project (5:53)
CSS Tutorial Continued
Intro (0:41)
CSS Variables (18:14)
FontAwesome Icons - Intro (3:33)
FontAwesome Icons - Self Hosting Option (5:56)
FontAwesome Icons - CDN Link (2:55)
FontAwesome Icons - SVG Approach (1:56)
FontAwesome Icons - Versions (3:52)
Browser Prefixes (4:22)
Text-Shadow and Box-Shadow (6:21)
Semantic HTML (9:40)
Object-Fit (9:06)
Emmet Workflow (6:55)
:is() (3:10)
:not() (1:30)
HSL Color Values (11:06)
Five Server Extension (4:46)
Last Tutorial Project
Intro (0:42)
Setup (2:18)
Images and Icons (3:20)
HTML Structure (8:40)
Reset (0:39)
CSS Variables (10:42)
Body (3:28)
Blog Card (2:41)
Blog Image (4:50)
Complete Project (6:06)
Tea Station Project
Intro (4:44)
Setup Files and Finished Project
Setup (2:55)
Assets (5:28)
CSS Variables (10:43)
Global Styles (10:06)
Header HTML (4:20)
Useful Info
Header CSS (17:51)
Content Divider (2:05)
Skills HTML (6:34)
Skills CSS (8:54)
Skills Columns and Clearfix (8:49)
Class VS Descendant (4:08)
About HTML (7:29)
About CSS (15:36)
Product HTML (10:03)
Product CSS (13:31)
Services HTML (9:14)
Services CSS (15:14)
Services Icon (6:02)
Contact HTML (13:07)
Contact CSS (14:18)
Footer HTML (5:58)
Footer CSS (2:59)
Nav Button (5:41)
Navbar HTML (3:55)
Navbar CSS (11:41)
Navbar Functionality (5:35)
Animation (11:06)
Multiple Pages (7:26)
Form Submission (6:04)
Netlify - Intro (1:04)
Netlify - Drag and Drop (3:17)
Finished Project
Git And Github Setup
Useful Info
Intro (1:08)
Git Install (3:49)
Git Commands (4:26)
Setup Github (3:19)
Benefits (13:20)
CSS Flexbox
CSS Flexbox Intro (2:39)
Setup (9:04)
Naming Conventions (3:23)
Flex-Direction (4:08)
Flex-Wrap (5:25)
Justify-Content (6:37)
Align-Items (5:19)
Hero Project (10:23)
Align-Content (4:24)
Main Axis / Cross Axis (4:23)
Order Property (3:09)
Align-Self (3:10)
Flex-Grow (4:30)
Flex-Shrink (2:52)
Flex-Basis and Flex (8:54)
New Flexbox Features !!! (9:29)
Backroads Tour Company
Intro (6:21)
Setup File and Finished Project
Project Setup (8:03)
Color Shades (3:13)
Logo (0:54)
Favicon (3:10)
Hero HTML (3:55)
Hero CSS (13:07)
About HTML (5:57)
About CSS (4:36)
About Column Layout (11:14)
Services HTML (5:51)
Services CSS (10:14)
Tours HTML (9:16)
Tours CSS (9:59)
Additional Design (5:39)
Contact HTML (5:06)
Contact CSS (10:28)
Gallery HTML (5:02)
Gallery CSS (9:07)
Footer HTML (8:31)
Footer CSS (5:23)
Navbar HTML (8:53)
Navbar CSS - Small Screen (10:55)
Navbar Toggle (5:15)
Smooth Scroll (3:31)
Navbar CSS - Big Screen (8:37)
Autoprefixer (1:46)
Continuous Deployment (11:52)
Finished Project
CSS Grid Tutorial
CSS Grid - Intro (3:19)
Setup (7:05)
Basic Syntax - Grid-Template-Columns (3:12)
Implicit Grid (3:43)
General CSS Setup (3:04)
Units - Auto (2:38)
Grid-Template-Rows (4:34)
FR Units (3:58)
Gap Property (2:27)
Gap - New Syntax !!! (1:46)
FR VS % (3:38)
Firefox Developer Tools (6:28)
Grid Lines (9:23)
Naming Grid Lines (6:29)
Grid Template Areas (11:45)
Order Property (3:34)
Repeat Function (2:32)
Justify-Content (4:57)
Align-Content (3:11)
Align-Items, Justify-Items, Align-Self, Justify-Self (4:02)
Minmax() (3:57)
Auto-Fit and Auto-Fill (9:46)
Grid Mini Projects
Intro (5:40)
Setup Files and Finished Project
Setup (7:30)
Global Styles (11:27)
Navbar Mini Project (12:33)
Hero HTML (5:50)
Hero CSS (11:40)
Cards HTML (7:05)
Cards CSS - Small Screen (6:01)
Cards CSS - Big Screen with Media Queries (4:46)
Cards CSS - Big Screen with minmax(), auto-fit and auto-fill (16:26)
Cards CSS - Row Height (7:02)
Tiles HTML (4:14)
Tiles CSS (16:01)
Object-Fit Add-On (0:35)
Layout HTML (5:30)
Layout CSS - General (11:37)
Layout CSS - Grid Lines (12:25)
Complete Source Code and Live Project
Portfolio Project (CSS Grid)
Intro (3:33)
Starter Project
Setup (3:37)
Navbar HTML (5:12)
Navbar CSS - Small Screen (6:28)
Navbar CSS - Big Screen (9:25)
Sidebar HTML (4:45)
Sidebar CSS (12:11)
Sidebar Functionality (2:10)
Fixed Navbar (4:21)
Hero HTML (5:56)
Hero CSS - Small Screen (6:56)
Hero CSS - Big Screen (6:38)
About HTML (4:22)
About CSS - Small Screen (6:49)
About CSS - Big Screen (4:32)
Services HTML (5:14)
Services CSS - Small Screen (9:21)
Services - Big Screen (1:34)
Projects HTML (6:35)
Projects CSS - Small Screen (10:13)
Projects CSS - Big Screen (1:30)
Projects CSS - Custom Layout (7:58)
Connect HTML (6:04)
Connect CSS - Basic Video Setup (3:43)
Connect CSS - Overlay (3:34)
Connect - Banner (7:35)
Temporary Remove Video (2:15)
Connect Clip-Path (6:35)
External Video Resources (2:03)
Skills HTML (6:23)
Skills CSS (10:46)
Timeline HTML (4:18)
Timeline CSS (18:11)
Blog - Basic Setup (14:32)
Blog - Complete (10:19)
Footer (4:13)
About, Contact - HTML (7:17)
About, Contact - CSS (2:57)
Projects Page and Browser Prefixes (18:30)
Complete Project
Default Starter
Intro (1:39)
Useful Resources
Structure (3:51)
HTML (1:50)
Normalize (2:47)
Fonts (4:17)
Fonts - Overview and Tweaks (8:38)
Colors - General Setup (4:31)
Primary Shades (3:56)
Grey Shades (7:04)
Happy Hues (1:21)
Rest of the CSS Variables (6:20)
Image (7:02)
Buttons (7:14)
Alerts (3:47)
Form Setup (5:16)
Form CSS (9:10)
Loading (3:00)
Title (2:23)
Additional Projects
Intro (1:38)
Useful Resources
Setup (3:17)
Color Flipper - Intro (1:36)
Color Flipper - HTML (4:12)
Color Flipper - CSS (16:23)
Counter - Intro (0:17)
Counter - HTML (2:00)
Counter - CSS (3:37)
Task Manager - Intro (0:45)
Task Manager - Form HTML (2:55)
Task Manager - Form CSS (6:20)
Task Manager - List HTML (4:54)
Task Manager - List CSS (11:09)
Task Manager - Edit Form HTML (5:05)
Task Manager - Edit Form CSS (5:20)
Reviews - Intro (0:15)
Reviews - HTML (5:27)
Reviews - CSS (15:30)
Navbar - Intro (0:58)
Navbar - HTML (5:37)
Navbar - CSS (small screen) (10:17)
Navbar - CSS (big screen) (6:51)
Navbar - JS (toggle functionality) (5:53)
Sidebar - Intro (0:27)
Sidebar - HTML (6:04)
Sidebar - Toggle Button (3:58)
Sidebar - CSS (12:10)
Sidebar - Functionality (5:10)
Modal - Intro (0:40)
Modal - HTML (2:47)
Modal - Hero CSS (3:57)
Modal - CSS (13:19)
Questions - Intro (0:50)
Questions - HTML (6:06)
Questions - CSS (11:05)
Menu - Intro (0:33)
Menu - HTML (6:23)
Menu - CSS (14:09)
Grocery Bud - Intro (1:21)
Grocery Bud - HTML (6:31)
Grocery Bud - CSS (13:10)
Teach online with
Google Chrome and Visual Studio Code
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock