Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Class Project 03 - Flexbox Header

This lesson is exclusive to members

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

Questions

1
1
1
1
1
1
2
1
2
3
2
2
2
2
2
2
2
2
2
2
3
3
2
2
4
3
2
2
2
2
2
2
2
2
2
2
1
1
1
1
1
2
2
2
2
1
1
2
1
1

Student class projects