Create a Responsive Website from Scratch

In this video series we use VS Code, HTML5, CSS3, and JavaScript to build a fully functional responsive website from scratch. No Bootstrap, no jQuery, no libaries or frameworks at all...just pure HTML5, CSS3, and JavaScript. I do use some PHP to share content across pages, because it's so very convenient to do so.

If you're following along and want to run the site without using a localhost server, you can download the no PHP version of that lesson. That you can use with View In Browser, but the highlighting the current folder link won't work, as that's based on a PHP file structure.

Download the Files As We Create Them

• Lesson 1: What This is About (No Files)
• Lesson 2: Start the Design
• Lesson 3: Choosing Fonts
• Lesson 4: Choosing a Color Scheme
• Lesson 5: Create your Nav Bar
• Lesson 6: Add a Page Footer
• Lesson 7: Style the Body Text and Links
• Lesson 8: Make it Responsive (for Phones)
• Lesson 9: Activate the Hamburger Menu
• Lesson 10: Add Animations using CSS
• Lesson 11: Share Content Across Pages (no files)
• Lesson 12: Install and Configure AMPPS in Windows (no files)
• Lesson 13: Install and Configure AMPPS on a Mac (no files)
• Lesson 14: Create your PHP Files
• Lesson 15: Externalize your JavaScript
• Lesson 15 (no PHP): Externalize Your JavaScript
• Lesson 16: Adding Pages to the Site
• Lesson 16 (no PHP):Adding Pages to the Site
• Lesson 17: Highlight the Current Page Link
• Lesson 17 (no PHP - highlighting doesn't work): Highlight the Current Page link
• Lesson 18: More Body Text Styling
• Lesson 18 (no PHP): More Body Text Styling
• Lesson 19: Designing Cards
• Lesson 19 (no PHP): Designing Cards
• Lesson 20: Styling Lists
• Lesson 20 (no PHP): Styling Lists
• Lesson 21: Styling Forms
• Lesson 21 (no PHP): Styling Forms