Code a Responsive Website Using HTML5 and CSS for Beginners

Learn to hand code a responsive HTML5 site with beautiful CSS, scalable images and a functional web form.

Created byPaul Cheney

Last updated 10/2020

English

What you'll learn

By the end of this course you will be able to link documents and images together.
By the end of this course, you will be able to use media queries to create phone and desktop navigation.
By the end of this course you will be able to not only create a beautiful multiple page website but also explain what each line of HTML and CSS does

Course content

9 sections • 102 lectures • 7h 12m total length

Introduction5:00
In this video you will get an overview of this entire course.
How the Web Works8:13
Overview of how a web works

Downloads and Example Web Pages0:14
Markup Rules3:33
In this video, we look at the semantic meaning of tags.
HTML Semantics3:46
In this video, we look at setting up your workspace on a Macintosh Computer
Setting up your Workspace for Windows2:42
In this video, we look at setting up your workspace on a Windows Computer
Setting up your Workspace for Macintosh2:48
In this video, we look at setting up your workspace on a Macintosh Computer
Document Title1:08
Add an HTML5 document title
Heading and Paragraph1:11
Add an HTML5 Heading 1-6 and a paragraph tag
Block Quote and Break Tag1:36
Create a block quote in HTML5
HTML Comments1:20
Add an HTML5 comment tag
Inline Tags2:28
Explore different inline tags like bold and italic.
HTML Lists2:59
Add HTML5 ordered, unordered, and definition lists.
HTML5 Entities1:37
Use HTML5 entities for copyright and bullets.
Linking Documents10:27
In this video, we explore links to external sites, links within your site, and links that take yo too a specific part of a page.
Linking to Folders2:34
Create links that point to pages within your site
Four Parts of an HTML Page5:36
In this video, we look at the four main parts of a web page.
Build Example Site Part A4:36
Build Example Site Part B8:30
Build Example Site Part C2:25
Build Example Site Part D (INCLUDES subdomain for "sandbox")3:30
In this video you will see how to create a subdomain called "sandbox" and then how to upload your files to the subdomain. During the entire course, I will be uploading files to the "sandbox" subdomain.
View the Completed Example Site0:02

Introduction to CSS6:35
In this video we take a quick look at CSS
Linking to an External Style Sheet2:39
Creating a link to an external style sheet
CSS Reset3:26
In this video we create a very simple CSS reset.
Styling Built-in Selectors2:28
Styling HTML5 tags like headings and paragraphs.
Styling Lists4:28
Styling ordered, unordered, and definition lists
Styling Borders2:27
Using CSS to style border width, color and style
Setting Padding and Margin1:34
Exploring padding, margin and the box model.
Color Theory5:47
In this video we learn about color space and HEX values.
Colors1:23
In this video we add color to a web page.
Adding a Google Font Family8:44
Adding an external font from the Google font servers.
Navigation10:26
In this video we style a horizontal navigation bar.
Build Example Site Part A7:39
Build Example Site Part B8:10
Build Example Site Part C5:33
Build Example Site Part D6:54
View the completed example site0:02

Overview of Images for the Web2:57
Overview of Images on the Web
Web Page Speed and Images4:29
A look at how image size effects page speed
Using Photoshop to Prepare Images3:04
Using Photoshop to create web graphics
Using PIXLR to Prepare Images3:29
In this lesson you will start creating a responsive image gallery.
Add an Image to a Web Page7:38
Adding an image inside a figure tag.
Using a PNG Image4:03
Creating a png file and adding it to a web page.
Creating an Image Gallery6:02
Creating an image gallery
Image Gallery Using Flexbox7:05
In this video, we use the new flexbox to create an image gallery that works on different image sizes
Build the Example Site Part A4:25
Build the Example Site Part B3:44
Build the Example Site Part C2:12
Build the Example Site Part D12:03
View the completed example site0:02

Introduction to Forms2:42
In this video, you will explore the new HTML5 form tags and how they work.
Create a Basic Form5:48
Adding a form input and submit button
New HTML5 Input Types6:06
Exploring the new HTML5 input types.
Creating a Fieldset2:03
Appropiately using a field set.
Adding Radio Buttons3:56
In this video you will add radio buttons to your form.
Adding Checkboxes2:14
In this video you will add checkboxes to your form.
Adding a Textarea for Comments1:27
In this video you will add a text area to your form.
Implementing a Select with Dropdowns2:59
In this video you will add a drop down with options to your form.
Adding Hidden Inputs1:51
In this video you will add hidden inputs to your form.
Using HTML5 Required and Pattern5:35
Using required and pattern in your HTML5 form.
Styling Your Form with CSS9:19
Build the Example Site part A3:07
Build the Example Site part B5:54
Build the Example Site part C1:31
Build the Example Site part D7:11
Build the Example Site part E12:00
Build the Example Site part F3:38
View the completed example site0:02

Overview of Advanced CSS2:24
In this lesson you will explore media queries so you can implement mobile navigation.
Add a Gradient Image6:56
In this video, you will use CSS and an image to create a gradient in the background of your page.
Add a Background Image5:38
In this lesson, you will use CSS to load a background image.
Implement a CSS Gradient3:01
In this lesson, you will use CSS to create a graident.
Add a Graphic for Lists4:50
In this lesson, you will use a custom graphic to create a custom bullet for a list. I have provided several example below.
Creating Drop Shadows4:29
In this lesson, you will use CSS to create shadows
Building Navigation using Media Queries10:03
In this lesson you will use media queries to create phone navigation
Tell Phones Not to Lie4:11
In this lesson you will use a meta tag to get phone to display their proper width.
Build the Example Site Part A5:15
Build the Example Site Part B4:57
Build the Example Site Part C7:19
Build the Example Site Part D1:00
View the completed example site0:02

Overview of Media1:09
In this video we review iFrames.
Implementing iFrames6:57
In this lesson, you will see yow others use iframes in pages.
Recording with Audacity4:04
In this lesson, we make a recording using an audio recorder.
Adding an Audio File4:30
In this lesson, you will add two audio files to a web page.
Add a Table3:37
In this lesson, you will use a table the way it was intended.
Styling a Table with CSS5:48
In this lesson, you will style the table you created in the previous video.
Link to a PDF file4:13
IN this video we create PFD files and link them to a smart link.
Build the Example Site Part A2:26
Build the Example Site Part B4:50
Build the Example Site Part C7:42
Build the Example Site Part D2:22
Build the Example Site Part E3:15
Build the Example Site Part F2:44
Build the Example Site Part G4:32
View the completed example site0:02

Requirements

Students will need to download a free copy of VS Code free for Macintosh OR Windows.
Several internet browsers to test your work
Students will need an FTP client. I will demonstrate Cyberduck which is FREE for Macintosh and Windows.

Description

Course Overview

This course is the equivalent of a 3 semester-hour college course on Web Design, without all the nasty tests. This course will introduce you to the basics of HTML5 markup so you can create a website with forms, images, responsive navigation, etc. Because the course does not rely on a specific WYSIWYG code editor, you will also understand what each line of HTML markup and CSS does. This is essential so that later when you start using a WYSIWYG code editor and you need to make changes, you know what is going on under the hood.

Course Materials

In addition to the video screencasts, this course includes a start file for each unit and a completed example so you can see the code in action.

Course Structure

This course contains 8 units, each of which build on the previous unit. By the end you will have a fully functional website.

Who this course is for:

This course is designed for beginners who want to understand what the code does and how to solve problems.

Code a Responsive Website Using HTML5 and CSS for Beginners

What you'll learn

Explore related topics

Course content

Welcome2 lectures • 13min

Getting Started3 lectures • 10min

Handcoding HTML520 lectures • 1hr 3min

Introduction to CSS16 lectures • 1hr 18min

Adding Images13 lectures • 1hr 1min

HTML5 Forms for collecting user information18 lectures • 1hr 17min

Advanced CSS13 lectures • 1hr

Adding the final touches15 lectures • 58min

Web Analytics2 lectures • 12min

Requirements

Description

Who this course is for: