Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Meditation Personal Transformation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 16.5 hours on-demand video
  • 123 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Design Web Design CSS

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.
Bestseller
Rating: 4.7 out of 54.7 (2,221 ratings)
9,359 students
Created by Daniel Walter Scott, Instructor HQ
Last updated 5/2020
English
English
30-Day Money-Back Guarantee

What you'll 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.
Curated for the Udemy for Business collection

Requirements

  • An internet connection is necessary
  • No Web Design or coding knowledge is necessary
  • A text/code editor (preferably Visual Studio Code which is free and made by Microsoft)
  • Having Google Chrome installed will be necessary

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.

Who this course is for:

  • 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 don't have any experience with coding a website

Featured review

Sandip Kumar
Sandip Kumar
97 courses
28 reviews
Rating: 5.0 out of 5a year ago
I am so happy that you made a wonderful course for us waiting for the advance version of this course. and i am now learning coding no doubt you are the king of multimedia world and no body can beat you in this position. god bless you and i recommend this course to all the students and dam sure everyone will get benefits from this course.

Course content

7 sections • 126 lectures • 16h 42m total length

  • Preview02:48
  • Preview01:41
  • Preview02:57

  • Preview05:55
  • Preview08:24
  • What is the head vs body vs html tag in a web design page
    09:01
  • What is the title and description for in the head of a web page
    05:54
  • What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets
    03:40
  • How to add structure to your website using Div Tags
    06:26
  • What is a CSS Class how do we color a background with it
    09:05
  • How to nested divs inside of each other in HTML & CSS
    05:03
  • Class Project 01 – Div Tags
    05:24
  • How to create a separate cascading style sheet in HTML & CSS
    09:07

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

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

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

  • Overview of what Bootstrap 4 is in website design
    07:57
  • How to install Bootstrap 4 on a website using Visual Studio Code
    06:27
  • Quick overview of how the Bootstrap Grid Layout works in VS Code
    10:49
  • Quick overview of how Bootstrap Components works in VS Code
    09:23
  • Quick overview of how Bootstrap CSS Styles works in VS Code
    08:20
  • How to customize the default Bootstrap 4 css styles
    13:51
  • How to use Bootstrap Layout Grid Experiment 1
    10:20
  • How to make 100% header & uneven widths in Bootstrap 4
    07:16
  • How to create uneven col widths in Bootstrap 4
    07:27
  • How to add padding & margins using Bootstrap 4 in VS Code
    12:03
  • How to change layout of Bootstrap depending on mobile or desktop
    15:46
  • How to turn things on & off on your website using Bootstrap 4
    05:30
  • How to re-create the Bootstrap media queries in your own CSS
    04:40
  • How to use Google Chrome Inspect - Removing Overriding Bootstrap styles
    12:40
  • How to add shadows to text & boxes in Bootstrap 4
    07:06
  • How to change the default Bootstrap 4 buttons size & color
    06:16
  • How to make images responsive stretchy in Bootstrap 4
    09:34
  • How to center text & div tags in a Bootstrap 4 website
    04:16
  • How to customize the website navbar in bootstrap 4
    07:29
  • Add your own logo to the bootstrap 4 website navigation menu
    03:58
  • How to change the default styles for Bootstrap 4 nav
    12:12
  • How to add a sticky fixed bootstrap 4 navigation to your website design
    04:41
  • Adding a full col image in bootstrap 4 & color the background of col
    07:56
  • How to add a border & rounded corners to a box in Bootstrap
    04:20
  • How to edit Bootstrap carousel off for mobile timing fade
    05:13
  • How to put Bootstrap cards on one line using card groups decks & columns
    03:29
  • How to add a drop shadow to a box or card in Bootstrap 4
    02:25
  • How to make a div tag a giant clickable link in Bootstrap 4
    04:02

  • What next in our web design essentials course
    06:32

Instructors

Daniel Walter Scott
Adobe Certified Instructor & Adobe Certified Expert
Daniel Walter Scott
  • 4.7 Instructor Rating
  • 108,954 Reviews
  • 356,273 Students
  • 28 Courses

Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.

I have a wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) – but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.

I'm a certified Adobe instructor (ACI) in Ireland. I'm also an Adobe Certified Expert (ACE) and have completed the Adobe Certified Associate training (ACA). And I don't just do Adobe. Remember, media is a very broad term – digital blew out the borders, so we are all constantly learning.

I've been teaching for 14+ years. I come from being a media designer and content creator – so I understand exactly where you're at now. I've been there. I love this stuff. Print, digital publishing, web and video. I can see how it all connects. And I can see how we can share those connections.

I built Bring Your Own Laptop in Ireland, New Zealand, Australia & online. I have a great team working with me to keep BYOL at the top of Adobe and digital media training. I understand business, I have one – so I know how important it is to get it right and make it work for you.

Now my focus is on Udemy. It's my mission to bring you the best training for digital media on Udemy.

Daniel Walter Scott

Instructor HQ
Streamline your online course creation processes
Instructor HQ
  • 4.7 Instructor Rating
  • 108,403 Reviews
  • 339,795 Students
  • 26 Courses

instructorHQ aims to deliver consistently high quality courses from a range of experienced trainers. 

We also offer courses detailing the production techniques necessary to begin and grow into a experienced and successful trainer. 

“You can teach a student a lesson for a day; but if you can teach him to learn by creating curiosity, he will continue the learning process as long as he lives." - Clay P. Bedford


  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.