Build a Responsive Website Using HTML5 & CSS3

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