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