Course Kickoff
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
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
Fundamentals Project
CSS Colors
Colors Project
CSS Units
Units Project
Typography
Typography Project
CSS Box Model
CSS Box Model Project
Display Property
Display Property Project
Background Images
Background Images Project
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
Selectors Re-Visited
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
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
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
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)
