HTML & CSS
Web Development for absolute beginners.Learn HTML5 and CSS3 from scratch by building 20+ amazing real world projects.
Course Curriculum: 40 Hours of Content
Course Kickoff
Available in
days
days
after you enroll
HTML Tutorial
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
CSS Tutorial
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Fundamentals Project
Available in
days
days
after you enroll
CSS Colors
Available in
days
days
after you enroll
Colors Project
Available in
days
days
after you enroll
CSS Units
Available in
days
days
after you enroll
Units Project
Available in
days
days
after you enroll
Typography
Available in
days
days
after you enroll
Typography Project
Available in
days
days
after you enroll
CSS Box Model
Available in
days
days
after you enroll
CSS Box Model Project
Available in
days
days
after you enroll
Display Property
Available in
days
days
after you enroll
Display Property Project
Available in
days
days
after you enroll
Background Images
Available in
days
days
after you enroll
Background Images Project
Available in
days
days
after you enroll
Positions, Float, Media Queries
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Selectors Re-Visited
Available in
days
days
after you enroll
Transform, Transition and Animation
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
CSS Tutorial Continued
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Tea Station Project
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
CSS Flexbox
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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)
Check your inbox to confirm your subscription