Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CreativeLive

Build a Responsive Website Using HTML5 & CSS3

via CreativeLive

Overview

AFTER THIS CLASS YOU’LL 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 DANIEL'S CLASS:

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 class 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 class 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

WHO THIS CLASS IS 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

ABOUT YOUR INSTRUCTOR:

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.

Syllabus

  • How This Class is Structured
  • What to Download
  • Creating Our First Webpage
  • What is HTML5 & CSS3
  • Head vs. Body vs. Html Tag
  • Title & Description
  • What Code Editor Should I Use
  • Using Diy Tags
  • What is a CSS Class
  • How to Create Nested Divs
  • Class Project
  • External CSS
  • Creating Our Index Style Pages
  • Testing Your Website
  • Check Your Code For Errors
  • What are HTML5 Structure Tags
  • Add HTML5 structure elements
  • How to Set the Color of the Background
  • Adding Images to a Website
  • How to Center an Image
  • Change the Font Size & Color
  • Make a Clickable Link
  • Stretching Background Image
  • Making a Div Tag Transparent
  • Simple Website Text Navigation
  • CSS Compound Classes
  • Class Project 02
  • Class Project 02 - COMPLETE
  • Add an Email Button to a Website
  • Add Google Maps to Your Website
  • Making a Website Live
  • Uploading via SFTP
  • Setting Up Our New Project
  • CSS Reset
  • Min-height vs. Height
  • Div Tags Onto One Line
  • Getting div tags onto one line using Flexbox in HTML & CSS
  • Evenly Spaced Div Tags
  • Two Div Tags of Different Sizes
  • Vertically Center Content
  • Class Project 3
  • Class Project 3 - COMPLETE
  • Change Default Fonts
  • Installing Google Fonts
  • What are PX & EM & REM
  • Change Line Height
  • SVG vs. JPG vs. PNG
  • How to Create a SVG, JPG, or PNG
  • Block Images vs. Background Images
  • Finishing Up Our Cards
  • Icons via Font Awesome
  • Making a Div Container Clickable
  • Box-sizing & Border-box
  • How to Make A Colored Button
  • Why Can't I Add Margin or Paddding
  • Rounded Corners
  • Drop Shadows
  • Backup Your Website
  • Reusing a Button Class
  • Class Project 04
  • Class Project 04 -COMPLETE
  • Adding a Horizontal Rule
  • Make Divs Wrap Onto Separate Lines
  • Hover Color & Animating a Button
  • Pseudo Classes
  • Simple Dropdown Navigation
  • Adding Our Dropdown to the Website
  • Useful Shortcuts and Tips in VS Code
  • Large Background Image
  • How to Connect 2 Pages
  • Simple PHP Form Work
  • Placeholder Form Text
  • Multi Line Form Text Box
  • Form Check Marks
  • Form Radio Button
  • Form Drop Down Menu
  • How to Style Your Form
  • What does responsive website design mean
  • How to change a website layout size color when 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 dp px 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
  • 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
  • Google Chrome Inspect
  • Add Shadows to Text & Boxes
  • Change the Default Buttons
  • Responsive Images in Bootstrap 4
  • How to Center Text & Div Tags
  • Customize the Bootstrap Navbar
  • Add Your Own Logo
  • Change the Default Nav Styles
  • Fix the Navigation to the Top
  • Col Images & Col Background
  • Bootstrap Border & Rounded Corners
  • Bootstrap 4 Carousels
  • Card Groups
  • Drop Shadows On Bootstrap Cards
  • Clickable Boxes in Bootstrap 4
  • Final Quiz

Taught by

Daniel Walter Scott

Reviews

Start your review of Build a Responsive Website Using HTML5 & CSS3

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.