Responsive Web Design Essentials HTML5 CSS3 Bootstrap

Responsive Web Design Essentials – HTML5 CSS3 Bootstrap, available at $149.99, has an average rating of 4.61, with 126 lectures, based on 6198 reviews, and has 26423 subscribers.

You will learn about 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. This course is ideal for individuals who are This course is for people who want to start getting a well rounded understanding of website design or Entrepreneurs or This course is suited for people that want to learn the basics of website design or This course is suited for people that dont have any experience with coding a website It is particularly useful for This course is for people who want to start getting a well rounded understanding of website design or Entrepreneurs or This course is suited for people that want to learn the basics of website design or This course is suited for people that dont have any experience with coding a website.

Enroll now: Responsive Web Design Essentials – HTML5 CSS3 Bootstrap

Summary

Title: Responsive Web Design Essentials – HTML5 CSS3 Bootstrap

Price: $149.99

Average Rating: 4.61

Number of Lectures: 126

Number of Published Lectures: 126

Number of Curriculum Items: 126

Number of Published Curriculum Objects: 126

Original Price: $199.99

Quality Status: approved

Status: Live

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.

Who Should Attend

This course is for people who want to start getting a well rounded understanding of website design

Entrepreneurs

This course is suited for people that want to learn the basics of website design

This course is suited for people that dont have any experience with coding a website

Target Audiences

This course is for people who want to start getting a well rounded understanding of website design

Entrepreneurs

This course is suited for people that want to learn the basics of website design

This course is suited for people that dont have any experience with coding a website

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.

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Introduction to Responsive Web Design Essentials Course

Lecture 2: How is this web design course structured

Lecture 3: What to download for the web design course

Chapter 2: Introduction to HTML & CSS

Lecture 1: Creating & testing our first HTML web page

Lecture 2: What is HTML5 & CSS3 in web design

Lecture 3: What is the head vs body vs html tag in a web design page

Lecture 4: What is the title and description for in the head of a web page

Lecture 5: What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets

Lecture 6: How to add structure to your website using Div Tags

Lecture 7: What is a CSS Class how do we color a background with it

Lecture 8: How to nested divs inside of each other in HTML & CSS

Lecture 9: Class Project 01 – Div Tags

Lecture 10: How to create a separate cascading style sheet in HTML & CSS

Chapter 3: Project 1: Restaurant Website

Lecture 1: How to create an index html & style css

Lecture 2: Test your website live using a Visual Studio Code extension

Lecture 3: How to check your code for errors in HTML using VS Code

Lecture 4: What is HTML5 tag header nav section article main footer

Lecture 5: How to add html5 structure elements to your html website

Lecture 6: How to color the background of a webpage using the body html tag

Lecture 7: How to add an images to a website using HTML what is alt

Lecture 8: How to center an image img in HTML using CSS

Lecture 9: How to change the font style size & color of h1 p in HTML CSS

Lecture 10: How to make a clickable link in html & change the color

Lecture 11: How to add a stretching background image to a website

Lecture 12: How make a div tag transparent using HTML & CSS in VS Code

Lecture 13: How to create a simple website text navigation in HTML & CSS

Lecture 14: How to css style more than one class tag at a time compound classes

Lecture 15: Class Project 02 – Footer

Lecture 16: Class Project 02 – Footer COMPLETE

Lecture 17: How to add a simple email button to a website using mailto in HTML

Lecture 18: How to add Google Maps to your website using embed codes

Lecture 19: How to put your website live on the internet with your own domain

Lecture 20: How to connect Visual Studio VS Code via sftp to host bluehost

Chapter 4: Project 2: Bike Repair Website

Lecture 1: Setting up our new web design project & discussing our topics

Lecture 2: What is a CSS reset zeroing eric meyers vs normalize

Lecture 3: What is a min-height compared to height for a div tag

Lecture 4: Getting div tags onto one line using Flexbox in HTML & CSS

Lecture 5: Add even space between div tags using flexbox with no outside margins

Lecture 6: How to have 2 div tags of different sizes in the same row html css flexbox

Lecture 7: How to vertically center content in a html div tag using flexbox css

Lecture 8: Class Project 3 – Flexbox Header

Lecture 9: Class Project 3 – Flexbox Header COMPLETE

Lecture 10: How to make a full background gradient on a website CSS

Lecture 11: How to change the default font type color size on a website using HTML & CSS

Lecture 12: How to choose & install google fonts on your HTML CSS website

Lecture 13: What is the difference between PX & EM & REM font sizes

Lecture 14: Line height space between paragraphs aka space after

Lecture 15: When would you use an svg image instead of jpg or png in web design

Lecture 16: How to export svg png jpg from XD Photoshop Illustrator for website design

Lecture 17: Block level images verses background images in HTML & CSS

Lecture 18: Finishing up our cards

Lecture 19: How to add icons to your website using font awesome VS Code

Lecture 20: How to make an entire DIV container box a clickable link

Lecture 21: How to use box-sizing border-box from Flexbox in VS Code & web design

Lecture 22: How to make a colored button in VS Code using HTML CSS

Lecture 23: Why cant I add margin or padding to the top bottom of my a tag Inline vs block

Lecture 24: How to add rounded corners to a button or div tag in HTML & CSS

Lecture 25: How to add a css drop shadow to a website button div tags and text fonts heading

Lecture 26: How to backup your website while you’re building

Lecture 27: Reusing a button class in the navigation

Lecture 28: Class Project 04 – Custom Button

Lecture 29: Class Project 04 – Custom Button COMPLETE

Lecture 30: How to add a horizontal rule using HTML5 & CSS3 in VS Code

Lecture 31: How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox

Lecture 32: How to change hover color & animate my button in HTML & CSS

Lecture 33: How to target specific tags in HTML to apply css to using Pseudo Classes

Lecture 34: How to create a simple dropdown navigation menu button HTML CSS

Lecture 35: Adding our CSS dropdown menu to the roar bikes website

Lecture 36: Useful shortcuts tips tricks to speed workflow in VS Code

Lecture 37: How to add a large background image to a website design

Lecture 38: How to connect link 2 pages in HTML web design

Lecture 39: How to make a simple php form work on your HTML website

Lecture 40: Adding placeholder text and labels to website form text fields in HTML

Lecture 41: How to add a large multi line text box in a HTML form

Lecture 42: How to add check mark tick box to a HTML form

Lecture 43: How to add a radio button round button with dot in middle to HTML form website

Lecture 44: How to you make a drop down form menu for a website in HTML

Lecture 45: How to style form text boxes & check boxes in a website HTML

Chapter 5: Project 3: Responsive Portfolio Website

Lecture 1: What does responsive website design mean

Lecture 2: How to change a website layout size color at different sizes using media queries

Lecture 3: How to test your website on a tablet or mobile phone from Visual Studio Code

Lecture 4: How to change the layout of a responsive website for mobile vs desktop

Lecture 5: How to turn things on and off for mobile tablet & desktop responsive websites

Lecture 6: What is pixel density responsive images pixel ratio dppx in webdesign

Lecture 7: How to export responsive images for website from XD Photoshop Illustrator

Lecture 8: How to add responsive images to website using 100% width in HTML & CSS

Lecture 9: How to use srcset to change images in HTML for responsive website

Lecture 10: How to add a css style to the first line of a p tag on a website

Lecture 11: How to make the header footer full width but the inside centered

Lecture 12: Class Project 05 – Header design

Lecture 13: Class Project 05 – Header design COMPLETE

Lecture 14: How to use a span tag or span class in HTML to change text

Lecture 15: How to pin the navigation to the top of a website fixed nav

Lecture 16: How to make a simple responsive mobile menu using CSS only

Lecture 17: What is Javascript vs Jquery in website web design

Instructors

Daniel Walter Scott
Adobe Certified Instructor & Adobe Certified Expert

Rating Distribution

1 stars: 40 votes

2 stars: 45 votes

3 stars: 307 votes

4 stars: 1646 votes

5 stars: 4160 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!