Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

The best course for learning the basics of HTML5 and CSS3 from scratch. Including 5 projects, perfect for beginners.

4.69 (6032 reviews)
Udemy
platform
English
language
Web Design
category
25,493
students
16.5 hours
content
Dec 2021
last update
$149.99
regular price

What you will learn

Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.

Learn how to create forms and to choose great fonts for your website.

Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.

Setup a domain name with hosting so that your website is live on the internet for others to see.

Description

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...

  • a simple but elegant restaurant website.

  • a bike repair website.

  • a responsive portfolio website.

  • a Bootstrap website.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery.

You will...

  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.

  • Learn how to create forms and to choose great fonts for your website.

  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.

  • Setup a domain name with hosting so that your website is live on the internet for others to see.

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step.

Who am I?

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?

Sign up for the course and let’s learn how to build responsive websites.

Content

Getting Started

Introduction to Responsive Web Design Essentials Course
How is this web design course structured
What to download for the web design course

Introduction to HTML & CSS

Creating & testing our first HTML web page
What is HTML5 & CSS3 in web design
What is the head vs body vs html tag in a web design page
What is the title and description for in the head of a web page
What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets
How to add structure to your website using Div Tags
What is a CSS Class how do we color a background with it
How to nested divs inside of each other in HTML & CSS
Class Project 01 – Div Tags
How to create a separate cascading style sheet in HTML & CSS

Project 1: Restaurant Website

How to create an index html & style css
Test your website live using a Visual Studio Code extension
How to check your code for errors in HTML using VS Code
What is HTML5 tag header nav section article main footer
How to add html5 structure elements to your html website
How to color the background of a webpage using the body html tag
How to add an images to a website using HTML what is alt
How to center an image img in HTML using CSS
How to change the font style size & color of h1 p in HTML CSS
How to make a clickable link in html & change the color
How to add a stretching background image to a website
How make a div tag transparent using HTML & CSS in VS Code
How to create a simple website text navigation in HTML & CSS
How to css style more than one class tag at a time compound classes
Class Project 02 – Footer
Class Project 02 - Footer COMPLETE
How to add a simple email button to a website using mailto in HTML
How to add Google Maps to your website using embed codes
How to put your website live on the internet with your own domain
How to connect Visual Studio VS Code via sftp to host bluehost

Project 2: Bike Repair Website

Setting up our new web design project & discussing our topics
What is a CSS reset zeroing eric meyers vs normalize
What is a min-height compared to height for a div tag
Getting div tags onto one line using Flexbox in HTML & CSS
Add even space between div tags using flexbox with no outside margins
How to have 2 div tags of different sizes in the same row html css flexbox
How to vertically center content in a html div tag using flexbox css
Class Project 3 - Flexbox Header
Class Project 3 - Flexbox Header COMPLETE
How to make a full background gradient on a website CSS
How to change the default font type color size on a website using HTML & CSS
How to choose & install google fonts on your HTML CSS website
What is the difference between PX & EM & REM font sizes
Line height space between paragraphs aka space after
When would you use an svg image instead of jpg or png in web design
How to export svg png jpg from XD Photoshop Illustrator for website design
Block level images verses background images in HTML & CSS
Finishing up our cards
How to add icons to your website using font awesome VS Code
How to make an entire DIV container box a clickable link
How to use box-sizing border-box from Flexbox in VS Code & web design
How to make a colored button in VS Code using HTML CSS
Why cant I add margin or padding to the top bottom of my a tag Inline vs block
How to add rounded corners to a button or div tag in HTML & CSS
How to add a css drop shadow to a website button div tags and text fonts heading
How to backup your website while you’re building
Reusing a button class in the navigation
Class Project 04 - Custom Button
Class Project 04 - Custom Button COMPLETE
How to add a horizontal rule using HTML5 & CSS3 in VS Code
How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox
How to change hover color & animate my button in HTML & CSS
How to target specific tags in HTML to apply css to using Pseudo Classes
How to create a simple dropdown navigation menu button HTML CSS
Adding our CSS dropdown menu to the roar bikes website
Useful shortcuts tips tricks to speed workflow in VS Code
How to add a large background image to a website design
How to connect link 2 pages in HTML web design
How to make a simple php form work on your HTML website
Adding placeholder text and labels to website form text fields in HTML
How to add a large multi line text box in a HTML form
How to add check mark tick box to a HTML form
How to add a radio button round button with dot in middle to HTML form website
How to you make a drop down form menu for a website in HTML
How to style form text boxes & check boxes in a website HTML

Project 3: Responsive Portfolio Website

What does responsive website design mean
How to change a website layout size color at different sizes using media queries
How to test your website on a tablet or mobile phone from Visual Studio Code
How to change the layout of a responsive website for mobile vs desktop
How to turn things on and off for mobile tablet & desktop responsive websites
What is pixel density responsive images pixel ratio dppx in webdesign
How to export responsive images for website from XD Photoshop Illustrator
How to add responsive images to website using 100% width in HTML & CSS
How to use srcset to change images in HTML for responsive website
How to add a css style to the first line of a p tag on a website
How to make the header footer full width but the inside centered
Class Project 05 – Header design
Class Project 05 – Header design COMPLETE
How to use a span tag or span class in HTML to change text
How to pin the navigation to the top of a website fixed nav
How to make a simple responsive mobile menu using CSS only
What is Javascript vs Jquery in website web design
How to make a burger menu 3 line mobile navigation for a website
How to switch a menu nav from desktop to mobile phone

Project 4: Bootstrap Yogurt Website

Overview of what Bootstrap 4 is in website design
How to install Bootstrap 4 on a website using Visual Studio Code
Quick overview of how the Bootstrap Grid Layout works in VS Code
Quick overview of how Bootstrap Components works in VS Code
Quick overview of how Bootstrap CSS Styles works in VS Code
How to customize the default Bootstrap 4 css styles
How to use Bootstrap Layout Grid Experiment 1
How to make 100% header & uneven widths in Bootstrap 4
How to create uneven col widths in Bootstrap 4
How to add padding & margins using Bootstrap 4 in VS Code
How to change layout of Bootstrap depending on mobile or desktop
How to turn things on & off on your website using Bootstrap 4
How to re-create the Bootstrap media queries in your own CSS
How to use Google Chrome Inspect - Removing Overriding Bootstrap styles
How to add shadows to text & boxes in Bootstrap 4
How to change the default Bootstrap 4 buttons size & color
How to make images responsive stretchy in Bootstrap 4
How to center text & div tags in a Bootstrap 4 website
How to customize the website navbar in bootstrap 4
Add your own logo to the bootstrap 4 website navigation menu
How to change the default styles for Bootstrap 4 nav
How to add a sticky fixed bootstrap 4 navigation to your website design
Adding a full col image in bootstrap 4 & color the background of col
How to add a border & rounded corners to a box in Bootstrap
How to edit Bootstrap carousel off for mobile timing fade
How to put Bootstrap cards on one line using card groups decks & columns
How to add a drop shadow to a box or card in Bootstrap 4
How to make a div tag a giant clickable link in Bootstrap 4

What Next

What next in our web design essentials course

Screenshots

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap - Screenshot_01Responsive Web Design Essentials - HTML5 CSS3 Bootstrap - Screenshot_02Responsive Web Design Essentials - HTML5 CSS3 Bootstrap - Screenshot_03Responsive Web Design Essentials - HTML5 CSS3 Bootstrap - Screenshot_04

Reviews

Danny
November 9, 2023
I really enjoyed this class and Mr. Scott's approach to teaching. The one downside is that some of the Bootstrap content is for an earlier version of the framework, so you have to play around a little to get it right; however, part of what Mr. Scott teaches is how to dig around to find what you are looking for, so it wasn't too hard to modify the code. Looking forward to taking another course created by Mr. Scott.
Bronwyn
November 6, 2023
its fun and straightforward. i like that they have a preview of one of the lessons before you but this course.
Cortney
October 24, 2023
I love Dan's classes. I take them often. He has a great sense of humor about making mistakes and he is a very talented designer. I highly recommend all of his classes. - please note: video 72 is a bit hard to follow, at least for me.
KISHAN
September 21, 2023
I was really excited to learn this web development.And now my dream has come true,and i am enjoying it.
Joseph
September 10, 2023
I've seen many of Daniel's videos over the years. He is by far the best of the best instructors and professors. Clear and thorough his style helps anchor the point and provides triggers to recall "ah ha" moments later with needed
Agneta
August 30, 2023
Dan is great! Love his little "mistakes" (probably on purpose :-)) as it makes you remember how to do it the right way!
Swapnil
August 16, 2023
The course was comprehensive and covered all the significant aspects of HTML & CSS. I would recommend this course to anyone interested in web design.
SABARIGIRI
August 7, 2023
I am a beginner for web development and this course definitely helped me. I had a great practical experience going through this course.
Christina
April 22, 2023
This is a great course. I enjoyed the instructor so much. He is very interesting, relatable and funny. I also really love his accent. I'm from the center of the US and a Kiwi accent is so much more interesting for me to listen to. I have been doing HTML and web design since 1995 and only needed to learn more about Bootstrap and so I signed up for this course with the intention of only following along the Bootstrap section. I decided to watch all of the intro videos as well (I'm so happy for the 2x speed option), in case there was some new material that I could learn too. I'm self-taught in web design and I have been using Textpad for all of my development. I really learned a lot about VS Code and all of its time saving features. I really got a great impression of Daniel Scott and will definitely sign up for more of his courses. Finally, I've never heard an American pronounce "rem" so I will probably just pronounce it the same way that Daniel Scott does, and it will start a trend here in the US of pronouncing it the Kiwi way.
Omar
April 10, 2023
Always meet my expections , You are a very good and talented instructor , i finished with you Adobe XD and now this course. Looking for the next course :) Keep going the good work Dan :) :)
Tumelo
April 2, 2023
He made the coarse easy for me to learn as someone who has zero experience in programming of any sort. GOOD teacher!
Mohammed
March 26, 2023
Amazing course, Daniel is one of the most dedicated teachers, who enjoy teaching more than other things, and I quite appreciate that.
Vardan
March 17, 2023
amazing tutor and very good and easy explanations along with mini projects in between which helps to build the much needed practice
Numan
March 5, 2023
Dan is great teacher. I started my web design/development journey with him when I watched some of his free videos on this course on YouTube. I loved how basic it was, explaining from the minutest point and building up on it. I veered off to learn some intermediate/advanced concepts that weren't covered here but always knew I'd have to find this and finish it. Still have loads to learn but I'm much better with the basics from this. Thanks Dan and crew at BYOL.
Armetis9
February 28, 2023
Enjoying every second of this course, it is fun, it's well explained, a lot to learn! But most importantly I don't get bored :)

Coupons

DateDiscountStatus
11/27/201995% OFF
expired

Charts

Price

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap - Price chart

Rating

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap - Ratings chart

Enrollment distribution

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap - Distribution chart
2459618
udemy ID
7/15/2019
course created date
7/27/2019
course indexed date
Bot
course submited by