$23
Buy Course
Free Preview
-
30-day money-back guarantee
Not satisfied?Reach out to our customer support team within 30 days to receive a full refund.
-
Unlimited access, anywhere, anytime
-
Learn from hand-vetted instructors, experts in their field
Build a responsive website using HTML5 & CSS3
Learn the fundamental principles of HTML and CSS in this responsive web building course that covers everything you need to build a professional site.
-
30-day money-back guarantee
Not satisfied?Reach out to our customer support team within 30 days to receive a full refund.
-
Unlimited access, anywhere, anytime
-
Learn from hand-vetted instructors, experts in their field
This badge will appear on your Fiverr profile upon completion, showcasing your expertise
Course Syllabus
Chapter 1 Getting Started
- 1. How This Course is Structured (1:41) Free
- 2. What to Download (2:58)
- Course Downloads
Introduction to HTML & CSS
- 3. Creating Our First Webpage (5:55)
- 4. What is HTML5 & CSS3 (8:23)
- 5. Head vs. Body vs. Html Tag (9:00)
- 6. Title & Description (5:52)
- 7. What Code Editor Should I Use (2:42)
- 8. Using Diy Tags (6:24)
- 9. What is a CSS Class (9:03)
- 10. How to Nested Divs (5:01)
- 11. Class Project (5:24)
- 12.External CSS (9:08)
- 13. Creating Our Index Style Pages (12:13)
Project 1: Restaurant Website
- 14. Testing Your Website
- 15. Check Your Code For Errors (11:02)
- 16. What are HTML5 Structure Tags (5:47)
- 17. Add Html5 structure elements (16:03)
- 18. How to Color the Background (5:11)
- 19. Adding Images to a Website (4:39)
- 20. How to Center an Image (1:14)
- 21. Change the Font Size & Color (14:10)
- 22. Make a Clickable Link (8:42)
- 23. Stretching Background Image (5:38)
- 24. Making a Div Tag Transparent (2:37)
- 25. Simple Website Text Navigation (6:43)
- 26. CSS Compound Classes (7:00)
- 27. Class Project 02 (2:05)
- 28. Class Project 02 - COMPLETE (4:48)
- 29. Add an Email Button to a Website (3:49)
- 30. Add Google Maps to Your Website (11:25)
- 31.Making a Website Live (16:50)
- 32. Uploading via SFTP (11:51)
- 33.Setting Up Our New Project (3:47)
Project 2: Bike Repair Website
- 34. CSS Reset (15:23)
- 35. Min-height vs. Height (7:00)
- 36. Div Tags Onto One Line (5:23)
- 37. Getting div tags onto one line using Flexbox in HTML & CSS (5:23)
- 38. Evenly Spaced Div Tags (4:43)
- 39. 2 Div Tags of Different Sizes (7:12)
- 40. Vertically Center Content (7:20)
- 41. Class Project 3 (2:51)
- 42. Class Project 3 - COMPLETE (5:39)
- 43. Change Default Fonts (4:20)
- 44. Installing Google Fonts (12:45)
- 45. What are PX & EM & REM (14:56)
- 46.Change Line Height (4:34)
- 47. SVG vs. JPG vs. PNG (7:05)
- 48. How to Create a SVG JPG PNG (11:01)
- 49. Block Images vs. Background Images (8:32)
- 50. Finishing Up Our Cards (9:10)
- 51. Icons via Font Awesome (16:31)
- 52. Making a Div Container Clickable (9:55)
- 53. Box-sizing & Border-box
- 54. How to Make A Colored Button (7:46)
- 55. Why Can't I Add Margin or Paddding (11:08)
- 56. Rounded Corners (4:17)
- 57. Drop Shadows (6:25)
- 58. Backup Your Website (5:01)
- 59. Reusing a Button Class (3:11)
- 60. Class Project 04 (2:58)
- 61. Class Project 04 -COMPLETE (5:46)
- 62. Adding a Horizontal Rule (3:52)
- 63. Make Divs Wrap Onto Separate Lines (12:14)
- 64. Hover Color & Animating a Button (3:33)
- 65. Pseudo Classes (9:29)
- 66. Simple Dropdown Navigation (20:04)
- 67. Adding Our Dropdown to the Website (14:51)
- 68. Useful Shortcuts and Tips in VS Code (13:26)
- 69. Large Background Image (9:25)
- 70. How to Connect 2 Pages (10:43)
- 71. Simple PHP Form Work (17:50)
- 72. Placeholder Form Text (5:46)
- 74. Form Check Marks (3:05)
- 73. Multi Line Form Text Box (2:18)
- 75. Form Radio Button (6:08)
- 76. Form Drop Down Menu (5:49)
- 77. How to Style Your Form (12:52)
Project 3: Responsive Portfolio Website
- 79. What does responsive website design mean (4:18)
- 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:04)
- 84. What is pixel density responsive images pixel ratio dp px in webdesign (14:48)
- 85. How to export responsive images for website from XD Photoshop Illustrator (5:12)
- 86. How to add responsive images to website using 100% width in HTML & CSS (6:09)
- 87. How to use srcset to change images in HTML for responsive website (11:19)
- 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 (5:36)
- 90. Class Project 05 – Header design (3:12)
- 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 (3:18)
- 94. How to make a simple responsive mobile menu using CSS only
- 95. What is Javascript vs Jquery in website web design (6:36)
- 96. How to make a burger menu 3 line mobile navigation for a website (15:12)
- 97. How to switch a menu nav from desktop to mobile phone (21:45)
Project 4: Bootstrap Yogurt Website
- 98. Overview of what Bootstrap 4 is in website design (7:58)
- 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 (10:49)
- 102. Quick overview of how Bootstrap CSS Styles works in VS Code (8:21)
- 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:28)
- 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:31)
- 110. Google Chrome Inspect (12:40)
- 111. Add Shadows to Text & Boxes (7:06)
- 112. Change the Default Buttons (6:17)
- 113. Responsive Images in Bootstrap 4 (9:34)
- 114. How to Center Text & Div Tags (4:17)
- 115. Customize the Bootstrap Navbar (7:29)
- 116. Add Your Own Logo (3:59)
- 117. Change the Default Nav Styles (12:13)
- 118. Fix the Navigation to the Top (4:41)
- 119. Col Images & Col Background (7:56)
- 120. Bootstrap Border & Rounded Corners (4:21)
- 121. Bootstrap 4 Carousels (5:13)
- 122. Card Groups (3:30)
- 123. Drop Shadows On Bootstrap Cards (2:26)
- 124. Clickable Boxes in Bootstrap 4 (4:03)
Final Quiz
- Final Quiz
Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.
After Completing This Course You Will Be Able To
-
Know basic, intermediate and advanced HTML5 and CSS3
-
Create a complete professional webpage from scratch using Visual Studio Code
-
Make your site completely responsive so it adjusts to different browsers and devices
-
Use the Bootstrap 4 framework to build sites quickly and efficiently
-
Test your website thoroughly and check your code for errors
-
Customize your website with images, fonts, colors and buttons
-
Make your website live and upload via SFTP
About This Course
With users taking only 0.05 seconds to form an opinion of a website, skilled web developers are some of the most in-demand professionals in the world. Now, with dedication and an expert by your side, you too can enter the world of web design and start creating responsive sites that will impress an audience right away.
This course covers all of the basics you need to know about working with HTML and CSS so that you’re able to create any layout you want and ensure that your site will support all devices across mobile and desktop.
From the basics of creating your first html file to intermediate and advanced skills around forms, text, navigation and using Bootstrap 4 like a pro, this in-depth course will transform your skill set and equip you with the techniques to start building your own sites confidently.
About This Course
With users taking only 0.05 seconds to form an opinion of a website, skilled web developers are some of the most in-demand professionals in the world. Now, with dedication and an expert by your side, you too can enter the world of web design and start creating responsive sites that will impress an audience right away.
This course covers all of the basics you need to know about working with HTML and CSS so that you’re able to create any layout you want and ensure that your site will support all devices across mobile and desktop.
From the basics of creating your first html file to intermediate and advanced skills around forms, text, navigation and using Bootstrap 4 like a pro, this in-depth course will transform your skill set and equip you with the techniques to start building your own sites confidently.
What You Will Learn
- How to set up a folder, create your first html page and test it in a browser
- How to work with html tags, titles, descriptions, and diy tags
- All about HTML5 structure tags and elements
- How to color the background and add background images to your website
- Simple website text navigation
- How to add email buttons and Google Maps to your site
- How to work with nested div tags and get div tags onto one line using Flexbox in HTML and CSS
- How to create an Index Style page
- How to change the layout of a responsive website fo mobile vs desktop
Why learn with Daniel Walter Scott?
An influential media designer, Advanced Adobe Certified Instructor and dedicated teacher to thousands of students for over 15 years. Daniel is a speaker and multi-award winner at the prestigious annual Adobe Max conference.
Who Is This Course For?
- Freelancers wanting to start offering website building services
- Web designers wanting to learn how to make a site responsive
- Business owners wanting to take their brand online
- Entrepreneurs wanting to enhance their website
- Web programmers, front end and full stack developers wanting to diversify and enhance their skills
- Anyone wanting to start a career in building websites using HTML and CSS
- All levels of experience
Requirements
- Access to Internet
- Computer / Laptop / Mobile Device
What Is Included?
-
Immediate unlimited access to course materials
-
30-day money-back guarantee
-
Exercises and quizzes to help you put theory into practice
-
English Closed Captions
-
Suitable for mobile or desktop
-
A badge to showcase your expertise on your profile page upon completion
This badge will appear on your Fiverr profile upon completion, showcasing your expertise
Course Syllabus
Chapter 1 Getting Started
- 1. How This Course is Structured (1:41) Free
- 2. What to Download (2:58)
- Course Downloads
Introduction to HTML & CSS
- 3. Creating Our First Webpage (5:55)
- 4. What is HTML5 & CSS3 (8:23)
- 5. Head vs. Body vs. Html Tag (9:00)
- 6. Title & Description (5:52)
- 7. What Code Editor Should I Use (2:42)
- 8. Using Diy Tags (6:24)
- 9. What is a CSS Class (9:03)
- 10. How to Nested Divs (5:01)
- 11. Class Project (5:24)
- 12.External CSS (9:08)
- 13. Creating Our Index Style Pages (12:13)
Project 1: Restaurant Website
- 14. Testing Your Website
- 15. Check Your Code For Errors (11:02)
- 16. What are HTML5 Structure Tags (5:47)
- 17. Add Html5 structure elements (16:03)
- 18. How to Color the Background (5:11)
- 19. Adding Images to a Website (4:39)
- 20. How to Center an Image (1:14)
- 21. Change the Font Size & Color (14:10)
- 22. Make a Clickable Link (8:42)
- 23. Stretching Background Image (5:38)
- 24. Making a Div Tag Transparent (2:37)
- 25. Simple Website Text Navigation (6:43)
- 26. CSS Compound Classes (7:00)
- 27. Class Project 02 (2:05)
- 28. Class Project 02 - COMPLETE (4:48)
- 29. Add an Email Button to a Website (3:49)
- 30. Add Google Maps to Your Website (11:25)
- 31.Making a Website Live (16:50)
- 32. Uploading via SFTP (11:51)
- 33.Setting Up Our New Project (3:47)
Project 2: Bike Repair Website
- 34. CSS Reset (15:23)
- 35. Min-height vs. Height (7:00)
- 36. Div Tags Onto One Line (5:23)
- 37. Getting div tags onto one line using Flexbox in HTML & CSS (5:23)
- 38. Evenly Spaced Div Tags (4:43)
- 39. 2 Div Tags of Different Sizes (7:12)
- 40. Vertically Center Content (7:20)
- 41. Class Project 3 (2:51)
- 42. Class Project 3 - COMPLETE (5:39)
- 43. Change Default Fonts (4:20)
- 44. Installing Google Fonts (12:45)
- 45. What are PX & EM & REM (14:56)
- 46.Change Line Height (4:34)
- 47. SVG vs. JPG vs. PNG (7:05)
- 48. How to Create a SVG JPG PNG (11:01)
- 49. Block Images vs. Background Images (8:32)
- 50. Finishing Up Our Cards (9:10)
- 51. Icons via Font Awesome (16:31)
- 52. Making a Div Container Clickable (9:55)
- 53. Box-sizing & Border-box
- 54. How to Make A Colored Button (7:46)
- 55. Why Can't I Add Margin or Paddding (11:08)
- 56. Rounded Corners (4:17)
- 57. Drop Shadows (6:25)
- 58. Backup Your Website (5:01)
- 59. Reusing a Button Class (3:11)
- 60. Class Project 04 (2:58)
- 61. Class Project 04 -COMPLETE (5:46)
- 62. Adding a Horizontal Rule (3:52)
- 63. Make Divs Wrap Onto Separate Lines (12:14)
- 64. Hover Color & Animating a Button (3:33)
- 65. Pseudo Classes (9:29)
- 66. Simple Dropdown Navigation (20:04)
- 67. Adding Our Dropdown to the Website (14:51)
- 68. Useful Shortcuts and Tips in VS Code (13:26)
- 69. Large Background Image (9:25)
- 70. How to Connect 2 Pages (10:43)
- 71. Simple PHP Form Work (17:50)
- 72. Placeholder Form Text (5:46)
- 74. Form Check Marks (3:05)
- 73. Multi Line Form Text Box (2:18)
- 75. Form Radio Button (6:08)
- 76. Form Drop Down Menu (5:49)
- 77. How to Style Your Form (12:52)
Project 3: Responsive Portfolio Website
- 79. What does responsive website design mean (4:18)
- 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:04)
- 84. What is pixel density responsive images pixel ratio dp px in webdesign (14:48)
- 85. How to export responsive images for website from XD Photoshop Illustrator (5:12)
- 86. How to add responsive images to website using 100% width in HTML & CSS (6:09)
- 87. How to use srcset to change images in HTML for responsive website (11:19)
- 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 (5:36)
- 90. Class Project 05 – Header design (3:12)
- 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 (3:18)
- 94. How to make a simple responsive mobile menu using CSS only
- 95. What is Javascript vs Jquery in website web design (6:36)
- 96. How to make a burger menu 3 line mobile navigation for a website (15:12)
- 97. How to switch a menu nav from desktop to mobile phone (21:45)
Project 4: Bootstrap Yogurt Website
- 98. Overview of what Bootstrap 4 is in website design (7:58)
- 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 (10:49)
- 102. Quick overview of how Bootstrap CSS Styles works in VS Code (8:21)
- 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:28)
- 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:31)
- 110. Google Chrome Inspect (12:40)
- 111. Add Shadows to Text & Boxes (7:06)
- 112. Change the Default Buttons (6:17)
- 113. Responsive Images in Bootstrap 4 (9:34)
- 114. How to Center Text & Div Tags (4:17)
- 115. Customize the Bootstrap Navbar (7:29)
- 116. Add Your Own Logo (3:59)
- 117. Change the Default Nav Styles (12:13)
- 118. Fix the Navigation to the Top (4:41)
- 119. Col Images & Col Background (7:56)
- 120. Bootstrap Border & Rounded Corners (4:21)
- 121. Bootstrap 4 Carousels (5:13)
- 122. Card Groups (3:30)
- 123. Drop Shadows On Bootstrap Cards (2:26)
- 124. Clickable Boxes in Bootstrap 4 (4:03)
Final Quiz
- Final Quiz
Sample lesson
1. How This Course is Structured (1:41)
This lesson can help you know the course from the inside.