Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Learn HTML and CSS by Building a Cool Social Network
Introduction
Introduction (0:59)
HTML and CSS Requirements (0:54)
HTML (New)
What Is HTML? (1:59)
What Is An HTML Tag (6:29)
Major Resources For HTML (5:27)
How To Structure Your HTML (14:41)
Quick Intro To CSS (4:35)
Tags For Text (6:54)
List Tags (6:17)
Installing Live Server (3:27)
Image Tag (18:44)
Container Tags (10:10)
Anchor Links Tag (14:23)
Tables (13:23)
Forms (15:05)
Using IDs and Classes (16:05)
CSS(NEW)
What Is CSS? (1:19)
how to properly learn css (3:51)
How to write css (11:39)
CSS Comments (4:33)
CSS Selectors (19:42)
CSS Attribute Selectors (11:22)
Pseudo Elements and Pseudo Classes (13:56)
CSS RESETS (5:32)
CSS Measuring Units (22:59)
Typography Properties (22:26)
Box Model (11:59)
Changing the way elements display (10:47)
CSS Position (20:13)
CSS Variables (17:44)
How to use calculations in CSS (6:48)
Media Queries: Responsive Sites (19:53)
Writing Clean Code With BEM (28:36)
Build Facebook Clone (NEW)
Files You NEED!
Lets Jump Into The Final Project (4:15)
Setup Our Project (6:27)
Everything is a box (7:42)
Building The Header Part 1 (23:42)
Build The Header Part 2 (25:50)
Build The Header Part 3 (19:19)
Sidenav Part 1 (30:10)
Sidenav Part 2 (16:53)
Feed Stories Part 1 (24:52)
Feed Stories Part 2 (18:49)
Feed Newpost (19:46)
Feed Post Part 1 (25:01)
Feed Post Part 2 (26:54)
Floating Messenger (16:31)
Making Web Site Dark Mode Ready (10:59)
Make FB Clone Responsive
Make site responsive part 1 (15:53)
Make site responsive part 2 (28:24)
Old Facebook Project
Original Image
Break Down the Design (6:18)
BreakDown Image
Lets build the header (11:47)
Getting Icons (5:55)
setup the css files (6:13)
Styling the header part 1 (14:41)
Styling the header part 2 (25:29)
Lets build the top area (7:21)
Styling the top area (25:06)
Content Area (19:31)
Styling the side column (30:25)
Build the submenu (25:17)
Coding The post box (31:28)
Finalizing the post (56:44)
Project 2: Bonus Project
Intro to project plus header HTML (11:44)
Setup your css and colors (10:57)
style the header section (23:29)
Top-jumbo html breakdown (12:00)
Style the top-jumbow part 1 (10:43)
style the top Jumbo part 2 (35:28)
style the top jumbo part 3 (7:04)
design by html breakdown (13:51)
Design by styles part 1 (46:33)
style the design by part 2 (24:41)
Color collection html breakdown (8:00)
Color Collection styles (48:01)
Blue Print Html Break Down (10:40)
Blue-print styles (34:00)
Latest HTML Breakdown (12:32)
Latest Styles Part 1 (39:26)
Latest styles part 2 (29:40)
Footer html breakdown (6:35)
Footer styles (12:29)
OLD BONUS
making our site responsive (4:02)
Setting up our media queires (11:43)
Top Jumbo Responsive (17:52)
Desgin by Responsive (7:52)
color collection responsive (14:21)
BluePrint Responsive (13:49)
Latest Responsive (27:13)
Blue-print styles
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock