Responsive Web Design Essentials – HTML5 CSS3 Bootstrap

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Introduction to Responsive Web Design Essentials Course

Lecture 2: How is this web design course structured

Lecture 3: What to download for the web design course

Chapter 2: Introduction to HTML & CSS

Lecture 1: Creating & testing our first HTML web page

Lecture 2: What is HTML5 & CSS3 in web design

Lecture 3: What is the head vs body vs html tag in a web design page

Lecture 4: What is the title and description for in the head of a web page

Lecture 5: What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets

Lecture 6: How to add structure to your website using Div Tags

Lecture 7: What is a CSS Class how do we color a background with it

Lecture 8: How to nested divs inside of each other in HTML & CSS

Lecture 9: Class Project 01 – Div Tags

Lecture 10: How to create a separate cascading style sheet in HTML & CSS

Chapter 3: Project 1: Restaurant Website

Lecture 1: How to create an index html & style css

Lecture 2: Test your website live using a Visual Studio Code extension

Lecture 3: How to check your code for errors in HTML using VS Code

Lecture 4: What is HTML5 tag header nav section article main footer

Lecture 5: How to add html5 structure elements to your html website

Lecture 6: How to color the background of a webpage using the body html tag

Lecture 7: How to add an images to a website using HTML what is alt

Lecture 8: How to center an image img in HTML using CSS

Lecture 9: How to change the font style size & color of h1 p in HTML CSS

Lecture 10: How to make a clickable link in html & change the color

Lecture 11: How to add a stretching background image to a website

Lecture 12: How make a div tag transparent using HTML & CSS in VS Code

Lecture 13: How to create a simple website text navigation in HTML & CSS

Lecture 14: How to css style more than one class tag at a time compound classes

Lecture 15: Class Project 02 – Footer

Lecture 16: Class Project 02 – Footer COMPLETE

Lecture 17: How to add a simple email button to a website using mailto in HTML

Lecture 18: How to add Google Maps to your website using embed codes

Lecture 19: How to put your website live on the internet with your own domain

Lecture 20: How to connect Visual Studio VS Code via sftp to host bluehost

Chapter 4: Project 2: Bike Repair Website

Lecture 1: Setting up our new web design project & discussing our topics

Lecture 2: What is a CSS reset zeroing eric meyers vs normalize

Lecture 3: What is a min-height compared to height for a div tag

Lecture 4: Getting div tags onto one line using Flexbox in HTML & CSS

Lecture 5: Add even space between div tags using flexbox with no outside margins

Lecture 6: How to have 2 div tags of different sizes in the same row html css flexbox

Lecture 7: How to vertically center content in a html div tag using flexbox css

Lecture 8: Class Project 3 – Flexbox Header

Lecture 9: Class Project 3 – Flexbox Header COMPLETE

Lecture 10: How to make a full background gradient on a website CSS

Lecture 11: How to change the default font type color size on a website using HTML & CSS

Lecture 12: How to choose & install google fonts on your HTML CSS website

Lecture 13: What is the difference between PX & EM & REM font sizes

Lecture 14: Line height space between paragraphs aka space after

Lecture 15: When would you use an svg image instead of jpg or png in web design

Lecture 16: How to export svg png jpg from XD Photoshop Illustrator for website design

Lecture 17: Block level images verses background images in HTML & CSS

Lecture 18: Finishing up our cards

Lecture 19: How to add icons to your website using font awesome VS Code

Lecture 20: How to make an entire DIV container box a clickable link

Lecture 21: How to use box-sizing border-box from Flexbox in VS Code & web design

Lecture 22: How to make a colored button in VS Code using HTML CSS

Lecture 23: Why cant I add margin or padding to the top bottom of my a tag Inline vs block

Lecture 24: How to add rounded corners to a button or div tag in HTML & CSS

Lecture 25: How to add a css drop shadow to a website button div tags and text fonts heading

Lecture 26: How to backup your website while you’re building

Lecture 27: Reusing a button class in the navigation

Lecture 28: Class Project 04 – Custom Button

Lecture 29: Class Project 04 – Custom Button COMPLETE

Lecture 30: How to add a horizontal rule using HTML5 & CSS3 in VS Code

Lecture 31: How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox

Lecture 32: How to change hover color & animate my button in HTML & CSS

Lecture 33: How to target specific tags in HTML to apply css to using Pseudo Classes

Lecture 34: How to create a simple dropdown navigation menu button HTML CSS

Lecture 35: Adding our CSS dropdown menu to the roar bikes website

Lecture 36: Useful shortcuts tips tricks to speed workflow in VS Code

Lecture 37: How to add a large background image to a website design

Lecture 38: How to connect link 2 pages in HTML web design

Lecture 39: How to make a simple php form work on your HTML website

Lecture 40: Adding placeholder text and labels to website form text fields in HTML

Lecture 41: How to add a large multi line text box in a HTML form

Lecture 42: How to add check mark tick box to a HTML form

Lecture 43: How to add a radio button round button with dot in middle to HTML form website

Lecture 44: How to you make a drop down form menu for a website in HTML

Lecture 45: How to style form text boxes & check boxes in a website HTML

Chapter 5: Project 3: Responsive Portfolio Website

Lecture 1: What does responsive website design mean

Lecture 2: How to change a website layout size color at different sizes using media queries

Lecture 3: How to test your website on a tablet or mobile phone from Visual Studio Code

Lecture 4: How to change the layout of a responsive website for mobile vs desktop

Lecture 5: How to turn things on and off for mobile tablet & desktop responsive websites

Lecture 6: What is pixel density responsive images pixel ratio dppx in webdesign

Lecture 7: How to export responsive images for website from XD Photoshop Illustrator

Lecture 8: How to add responsive images to website using 100% width in HTML & CSS

Lecture 9: How to use srcset to change images in HTML for responsive website

Lecture 10: How to add a css style to the first line of a p tag on a website

Lecture 11: How to make the header footer full width but the inside centered

Lecture 12: Class Project 05 – Header design

Lecture 13: Class Project 05 – Header design COMPLETE

Lecture 14: How to use a span tag or span class in HTML to change text

Lecture 15: How to pin the navigation to the top of a website fixed nav

Lecture 16: How to make a simple responsive mobile menu using CSS only

Lecture 17: What is Javascript vs Jquery in website web design