Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
Getting Started
Introduction to Responsive Web Design Essentials Course (2:44)
How is this web design course structured (1:41)
What to download for the web design course (2:57)
Web Design Essential - Exercise Files
Web Design Essential - Completed Files
Introduction to HTML & CSS
Creating & testing our first HTML web page (5:55)
What is HTML5 & CSS3 in web design (8:24)
What is the head vs body vs html tag in a web design page (9:01)
What is the title and description for in the head of a web page (5:54)
What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets (3:39)
How to add structure to your website using Div Tags (6:26)
What is a CSS Class how do we color a background with it (9:05)
How to nested divs inside of each other in HTML & CSS (5:03)
Class Project 01 – Div Tags (5:24)
How to create a separate cascading style sheet in HTML & CSS (9:07)
Project 1: Restaurant Website
How to create an index html & style css (12:16)
Test your website live using a Visual Studio Code extension (8:47)
How to check your code for errors in HTML using VS Code (11:01)
What is HTML5 tag header nav section article main footer (5:47)
How to add html5 structure elements to your html website (16:02)
How to color the background of a webpage using the body html tag (5:10)
How to add an images to a website using HTML what is alt (4:38)
How to center an image img in HTML using CSS (1:14)
How to change the font style size & color of h1 p in HTML CSS (14:11)
How to make a clickable link in html & change the color (8:45)
How to add a stretching background image to a website (5:38)
How make a div tag transparent using HTML & CSS in VS Code (2:36)
How to create a simple website text navigation in HTML & CSS (6:43)
How to css style more than one class tag at a time compound classes (7:02)
Class Project 02 – Footer (2:05)
Class Project 02 - Footer COMPLETE (4:48)
How to add a simple email button to a website using mailto in HTML (3:49)
How to add Google Maps to your website using embed codes (11:25)
How to put your website live on the internet with your own domain (16:50)
How to connect Visual Studio VS Code via sftp to host bluehost (11:50)
Project 2: Bike Repair Website
Setting up our new web design project & discussing our topics (3:46)
What is a CSS reset zeroing eric meyers vs normalize (15:22)
What is a min-height compared to height for a div tag (7:01)
Getting div tags onto one line using Flexbox in HTML & CSS (5:23)
Add even space between div tags using flexbox with no outside margins (4:42)
How to have 2 div tags of different sizes in the same row html css flexbox (7:12)
How to vertically center content in a html div tag using flexbox css (7:20)
Class Project 3 - Flexbox Header (2:51)
Class Project 3 - Flexbox Header COMPLETE (5:38)
How to make a full background gradient on a website CSS (10:19)
How to change the default font type color size on a website using HTML & CSS (4:19)
How to choose & install google fonts on your HTML CSS website (12:44)
What is the difference between PX & EM & REM font sizes (14:56)
Line height space between paragraphs aka space after (4:33)
When would you use an svg image instead of jpg or png in web design (7:04)
How to export svg png jpg from XD Photoshop Illustrator for website design (11:00)
Block level images verses background images in HTML & CSS (8:32)
Finishing up our cards (9:10)
How to add icons to your website using font awesome VS Code (16:31)
How to make an entire DIV container box a clickable link (9:55)
How to use box-sizing border-box from Flexbox in VS Code & web design (6:19)
How to make a colored button in VS Code using HTML CSS (7:45)
Why can’t I add margin or padding to the top bottom of my a tag Inline vs block elements (11:08)
How to add rounded corners to a button or div tag in HTML & CSS (4:17)
How to add a css drop shadow to a website button div tags and text fonts headings (6:24)
How to backup your website while you’re building (5:00)
Reusing a button class in the navigation (3:10)
Class Project 04 - Custom Button (2:58)
Class Project 04 - Custom Button COMPLETE (5:45)
How to add a horizontal rule using HTML5 & CSS3 in VS Code (3:51)
How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox (12:14)
How to change hover color & animate my button in HTML & CSS (3:33)
How to target specific tags in HTML to apply css to using Pseudo Classes (9:31)
How to create a simple dropdown navigation menu button HTML CSS (20:04)
Adding our CSS dropdown menu to the roar bikes website (14:50)
Useful shortcuts tips tricks to speed workflow in VS Code (13:28)
How to add a large background image to a website design (9:24)
How to connect link 2 pages in HTML web design (10:42)
How to make a simple php form work on your HTML website (17:49)
Adding placeholder text and labels to website form text fields in HTML (5:46)
How to add a large multi line text box in a HTML form (2:18)
How to add check mark tick box to a HTML form (3:04)
How to add a radio button round button with dot in middle to HTML form website (6:07)
How to you make a drop down form menu for a website in HTML (5:48)
How to style form text boxes & check boxes in a website HTML (12:55)
Project 3: Responsive Portfolio Website
What does responsive website design mean (4:17)
How to change a website layout size color when at different sizes using media queries (11:28)
How to test your website on a tablet or mobile phone from Visual Studio Code (6:00)
How to change the layout of a responsive website for mobile vs desktop (16:02)
How to turn things on and off for mobile tablet & desktop responsive websites (6:03)
What is pixel density responsive images pixel ratio dppx in webdesign (14:47)
How to export responsive images for website from XD Photoshop Illustrator (5:11)
How to add responsive images to website using 100% width in HTML & CSS (6:08)
How to use srcset to change images in HTML for responsive website (10:15)
How to add a css style to the first line of a p tag on a website (11:18)
How to make the header footer full width but the inside centered (5:36)
Class Project 05 – Header design (3:12)
Class Project 05 – Header design COMPLETE (6:25)
How to use a span tag or span class in HTML to change text (10:32)
How to pin the navigation to the top of a website fixed nav (3:17)
How to make a simple responsive mobile menu using CSS only (8:20)
What is Javascript vs Jquery in website web design (6:35)
How to make a burger menu 3 line mobile navigation for a website (15:11)
How to switch a menu nav from desktop to mobile phone (21:45)
Project 4: Bootstrap Yogurt Website
Overview of what Bootstrap 4 is in website design (7:57)
How to install Bootstrap 4 on a website using Visual Studio Code (6:27)
Quick overview of how the Bootstrap Grid Layout works in VS Code (10:49)
Quick overview of how Bootstrap Components works in VS Code (9:22)
Quick overview of how Bootstrap CSS Styles works in VS Code (8:20)
How to customize the default Bootstrap 4 css styles (13:51)
How to use Bootstrap Layout Grid Experiment 1 (10:20)
How to make 100% header & uneven widths in Bootstrap 4 (7:16)
How to create uneven col widths in Bootstrap 4 (7:27)
How to add padding & margins using Bootstrap 4 in VS Code (12:03)
How to change layout of Bootstrap depending on mobile or desktop (15:46)
How to turn things on & off on your website using Bootstrap 4 (5:30)
How to re-create the Bootstrap media queries in your own CSS (4:40)
How to use Google Chrome Inspect - Removing Overriding Bootstrap styles (12:40)
How to add shadows to text & boxes in Bootstrap 4 (7:06)
How to change the default Bootstrap 4 buttons size & color (6:16)
How to make images responsive stretchy in Bootstrap 4 (9:34)
How to center text & div tags in a Bootstrap 4 website (4:16)
How to customize the website navbar in bootstrap 4 (7:29)
Add your own logo to the bootstrap 4 website navigation menu (3:58)
How to change the default styles for Bootstrap 4 nav (12:12)
How to add a sticky fixed bootstrap 4 navigation to your website design (4:41)
Adding a full col image in bootstrap 4 & color the background of col (7:56)
How to add a border & rounded corners to a box in Bootstrap (4:20)
How to edit Bootstrap carousel off for mobile timing fade (5:13)
How to put Bootstrap cards on one line using card groups decks & columns (3:29)
How to add a drop shadow to a box or card in Bootstrap 4 (2:25)
How to make a div tag a giant clickable link in Bootstrap 4 (4:02)
What Next
What next in our web design essentials course (6:33)
Why can’t I add margin or padding to the top bottom of my a tag Inline vs block elements
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock