CSS Modern Responsive Web Design Create 5 Different Sites

Course Curriculum

Chapter 1: Create 5 Websites From Scratch Modern Web Design HTML CSS JavaScript

Lecture 1: How to create 5 unique Websites from scratch Course introduction

Lecture 2: Tools and Resources for the course

Lecture 3: Resources and Links

Chapter 2: Modern Responsive Website using Floats and CSS to create reusable grids

Lecture 1: Single Pages Float Website with Grid Structure done with CSS

Lecture 2: How to setup your web development environment Web Dev Setup

Lecture 3: How to create a website wireframe to plan your site

Lecture 4: How to add Add HTML Main Structure

Lecture 5: How to update HTML with Styles.

Lecture 6: Source Code

Lecture 7: How to create a responsive navbar Create navBar for Site

Lecture 8: Source Code

Lecture 9: CSS Create Mobile Ready Responsive NavBar

Lecture 10: Add more content to your website Top Section Content

Lecture 11: Source Code

Lecture 12: How to create a CSS grid for your website using floats Create a Float Grid.

Lecture 13: Source Code Grid and Cards

Lecture 14: How to add an Image Gallery

Lecture 15: Source Code

Lecture 16: Create content areas multiple columns Content Area 2 Columns

Lecture 17: Source Code

Lecture 18: How to add single column in grid Single Content Area

Lecture 19: Source Code

Lecture 20: How to create a Contact Form using CSS and HTML

Lecture 21: Source Code

Lecture 22: How to add mailto to your contact form Mail to Contact Form

Lecture 23: Source Code Mailto Contact Form Code example

Lecture 24: Add styling to your website Website Footer.

Lecture 25: Source Code

Lecture 26: How to add and move sections for single page site Move Section Down

Lecture 27: Single Page Website Review.

Lecture 28: Final Source Code Single Page Website

Chapter 3: Single Page Flexbox website with auto Scroll JavaScript

Lecture 1: Single Page Flex Website Introduction.

Lecture 2: Flex website how to setup WebPage Setup

Lecture 3: Source Code Basic Setup

Lecture 4: How to create sections to single page website using Flexbox Create Sections

Lecture 5: Source Code Page Sections

Lecture 6: How to create a navbar using Flexbox NavBar

Lecture 7: Source Code NavBar Flex

Lecture 8: How to design and add content Home Screen Section

Lecture 9: Source Code Splash Page Cover

Lecture 10: Apply your own custom Grid 3 Columns with Flex.

Lecture 11: Source Code Columns and Rows with Flex

Lecture 12: How to create CSS Cards Flex box Page Cards with Flex

Lecture 13: Source Code Flex Box Cards Code Example

Lecture 14: How to create a CSS form using CSS flexbox

Lecture 15: Source Code Contact Form in Flex CSS

Lecture 16: How to create a footer CSS Flexbox CSS Page Footer.

Lecture 17: Source Code Pag Updates

Lecture 18: How to create a smooth scroll JavaScript Smooth Scroller.

Lecture 19: Add a JavaScript Smooth Scroller to your website 2

Lecture 20: Final Source Code Single Page Flex CSS Website

Lecture 21: Single Page Flex Website Review

Chapter 4: No JavaScript Checkbox Responsive Navbar Website from scratch CSS Grid Website

Lecture 1: CSS Grid Website Introduction

Lecture 2: Prepare your design CSS Grid Setup HTML

Lecture 3: Source Code start for CSS Grid Website

Lecture 4: Create website CSS Grid Website Sections

Lecture 5: Source Code Website CSS Grid Example

Lecture 6: How to create a CSS Grid responsive Nav Bar Responsive

Lecture 7: Add a Nav Bar Responsive to your website

Lecture 8: Create a fully responsive collapsible navabr Nav Bar Responsive

Lecture 9: CSS Grid Responsive Navbar Code Example

Lecture 10: How to add placeholder content Populate Content HTML

Lecture 11: Populate content create Card Components Code examples

Lecture 12: How to Update Page Footer CSS Grid Website

Lecture 13: Final Source Code – Website CSS Grid Example Code

Lecture 14: CSS Grid Website Review.

Chapter 5: JavaScript Collapsible menu Website Mobile Ready and Fully Responsive Float CSS

Lecture 1: Introduction Float Responsive Website

Lecture 2: Modern website Website Setup and planning

Lecture 3: Create a modern website Setup Main HTML

Lecture 4: Code Example Setup Basic HTML template

Lecture 5: How to make it collapse Responsive NavBar CSS Styling

Lecture 6: Dynamic Collapse menu Responsive NavBar CSS

Lecture 7: Mobile ready navbar menu Responsive NavBar CSS

Lecture 8: Source Code Responsive NavBar and Logo

Lecture 9: Add JavaScript Select and Toggle your nav menu items

Lecture 10: JavaScript Toggle Responsive Navbar Source Code Example

Lecture 11: Custom dynamic Grid Create Website and Columns

Lecture 12: Basic Website Template Source Code

Lecture 13: How to add Add PlaceHolder Content and resources

Lecture 14: Best resources for web design Add PlaceHolder Content

Lecture 15: Source Code Float website Code Example

Lecture 16: Website Tweaks and Adjustments

Lecture 17: Responsive Float Website Source Code

Lecture 18: Float Responsive Website Review

Chapter 6: CSS Flexbox website with responsive Nav sub menu items

Lecture 1: Complex Responsive NavBar Introduction

Lecture 2: Website Planning and Setup for modern website design flex structure website

Lecture 3: Create a website Apply CSS for Website using Flexbox

Lecture 4: Source Code CSS Flexbox for Basic Website Template and Color Palette

Lecture 5: Mobile First Website design Create Responsive NavBar.

Lecture 6: Mobile First design Create Responsive NavBar with menu items

Lecture 7: Flex Responsive NavBar Mobile First Design Source Code Example

Lecture 8: Add JavaScript create interaction JavaScript NavBar Toggler.

Lecture 9: JavaScript Responsive Menu Collapse and Open Toggle Code Examples

Lecture 10: More complex multiple layer menu with submenu items Add NavBar Submenu