Enjoy studying with me Online – Specialisation in Web designing

Learner Career Outcomes

Syllabus – What you will learn from this course

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

Hey,
Look at related course