Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Daniel Scott, Adobe Certified Trainer & UI/UX Expert

127 Lessons (16h 47m)

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

111 students are watching this class

Project Description

Click here to download the Completed Files

Click here to download the Exercise Files

Class Project 01 – Div Tags

There are 2 separate div structures you need to make on your own.
Homework 1:
2. Create a new HTML document called: class-project-1a.html
  1. Add all the HTML we need e.g. DOCTYPE, HTML, HEAD, BODY, TITLE ETC.
3. Create & nest 4 boxes as shown in the image above.
  1. Sky Blue Box: 550x450px.
  2. Green Box: 450x150px.
  3. Amber Box: 300x250px.
  4. Blue Box: 100x70px.
Homework 2:
2. Create a new HTML document called: class-project-1b.html
  1. Add all the HTML we need e.g. DOCTYPE, HTML, HEAD, BODY, TITLE ETC.
3. Create & nest 2 boxes as shown in the image above.
  1. Grey Box: 680x500px
  2. Yellow Box: 450x300px.
4. Add an <h1> tag inside the yellow box that reads: WHEN I SAY DIV…
5. Add a second <h1> tag inside the grey box BUT after the yellow box that reads: YOU SAY TAG!
  1. This is a tricky one ☺
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments of the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb

Class Project 02 – Footer

Make the HTML footer match the mockup in your exercise files:
1. Exercise Files > Project 1 > Mockup Example - Project 1.jpg
It doesn’t have to be pixel perfect. Just guess the sizes and spacing.
Requirements
1. Ignore the map in the middle (we’ll do that later together).
2. Have spacing above and below the footer.
3. The footer text is: Main St, Blackabbey, Adare, Co. Limerick - Copyright 2017©
4. Put the text in a <p> tag and style the text to match the mockup.
5. Background color is black which is transparent.
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments on the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb

Class Project 03 – Flexbox Header

Add the logo & nav to the header of our website using your new flexbox skills.
Your page will look like this when you are finished:

Exercise Files > Project 2 > Class Project 3.png
Requirements:
1. Add a background color to the entire site of: #FC5E55
2. Create a logo & nav box inside the header tag.
3. Add the logo to the logo box.
  1. Image is in: Exercise Files > Project 2 > logo-roar-bikes.png
4. Add text to the <nav> box but don’t make them links or buttons yet, Just plain old text:
  1. Book Online About Contact
5. Make the nav right aligned.
6. Remove the background color & height of the header.
7. Add padding to the top & bottom of the header.
8. Make sure both the logo & nav are centered vertically.
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments on the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb

Class Project 04 – Nav Button

Goal: to create your own button class which looks like this:

bafd7de7

You’ll leave ‘mybutton’ applied to the hero box but create a new style called ‘navbutton’ and apply it to your navigation.
Requirements
1. They are all <a> tags.
2. Create your own custom class called ‘navbutton’.
3. White border around the button.
4. Text is Playfair Display.
5. Text is white
6. No underline.
7. No background color.
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments of the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb

Class Project 05 – Header Design

Goal: to recreate this header:

5b5a840f

Requirements:
1. Text should be white.
2. Span Tag & Span Class
  1. Research & implement a ‘span tag’ to make the first part of the logo bold i.e - DANIEL WALTER SCOTT – LOGO DESIGN
3. Logo should be left aligned & Nav right aligned.
4. Logo & Nav should be centred vertically in the header.
5. Nav should have working buttons styled as per the first image.
6. Set the entire background of the website to: #EBEBEB.
Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in any or all of the following:
1. Assignments section of this website
2. Add to comments on the page.
3. Social media & tag Dan
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook group here. #byolweb