Semantic / Structural Elements | Make Apps Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Create Your First Website with HTML, CSS & JavaScript

1: Introduction

Introduction (1:13)
Install & Setup VSCode (1:40)

2: HTML

Create Page & Launch in Browser (2:46)
What is HTML? (2:26)
Head (1:18)
Body Tags & Elements (3:46)
Semantic / Structural Elements (1:26)
Header (4:08)
Product (6:29)
Footer (0:45)

3: CSS

What is CSS? (0:43)
Base Styles & Font (7:44)
Header - Background Color (2:50)
Header - Logo & Nav Positioning (1:15)
Header - Text Styles (1:43)
Header - Hover Effects & Animation (1:44)
Header - Nav Styles (1:07)
Header - Margin & Padding (3:45)
Header - Constrain the Content (3:37)
Header - Add a Logo (3:42)
Product - Text & Image Side By Side (3:12)
Product - Border, Padding and Positioning (2:38)
Product - Text Styles (3:06)
Buttons (5:30)
Add More Products (4:23)
Footer (1:45)
Move CSS to Separate File (2:34)

4: JavaScript

What is JavaScript? (1:08)
Add Script Tag (0:46)
Wait til Page Loaded (2:16)
Cookies Banner - HTML (1:16)
Cookies Banner - CSS (5:11)
Hide Cookies Banner with CSS (1:18)
Create a Class to Show Cookies Banner (1:59)
Put Banner into a JavaScript Variable (3:11)
Show Cookies Banner after 2 Seconds (3:29)
Break Up our Logic into Functions (1:38)
Put Close Button into a JavaScript Variable (1:45)
Hide Cookies Banner on Button Click (3:47)
Move JS to Separate File (1:41)

5: Finishing Touches

Responsive CSS (1:33)
Media Queries Explained (2:17)
Add a Media Query & Mobile Styles (4:31)
Add About Page (3:24)
Add a Doctype (1:27)

6: Finished Code

Download the Finished Code

Teach online with

Semantic / Structural Elements

Complete and Continue

Discussion

0 comments