Code a Responsive Website Using HTML5 and CSS for Beginners
4.6 (410 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,198 students enrolled

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.
4.6 (410 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,198 students enrolled
Created by Paul Cheney
Last updated 3/2020
English
English
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 8 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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 send an email to yourself from a web form
  • 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
Expand all 102 lectures 07:06:46
+ Welcome
2 lectures 13:13

In this video you will get an overview of this entire course.

Preview 05:00

Overview of how a web works

Preview 08:13
+ Getting Started
3 lectures 09:58

In this video, you will see the steps to consider when planning a website.

Preview 04:06

In this video, you will learn about a web proposal.

Preview 02:29

In this video you will see the creation of a simple wireframe for desktop and phone using Photoshop using the template provided.

Preview 03:23
+ Handcoding HTML5
20 lectures 01:03:03
Downloads and Example Web Pages
00:14

In this video, we look at the semantic meaning of tags.

Markup Rules
03:33

In this video, we look at setting up your workspace on a Macintosh Computer

HTML Semantics
03:46

In this video, we look at setting up your workspace on a Windows Computer

Setting up your Workspace for Windows
02:42

In this video, we look at setting up your workspace on a Macintosh Computer

Setting up your Workspace for Macintosh
02:48

Add an HTML5 document title

Document Title
01:08

Add an HTML5 Heading 1-6 and a paragraph tag

Heading and Paragraph
01:11

Create a block quote in HTML5

Block Quote and Break Tag
01:36

Add an HTML5 comment tag

HTML Comments
01:20

Explore different inline tags like bold and italic.

Inline Tags
02:28

Add HTML5 ordered, unordered, and definition lists.

HTML Lists
02:59

Use HTML5 entities for copyright and bullets.

HTML5 Entities
01:37

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 Documents
10:27

Create links that point to pages within your site

Linking to Folders
02:34

In this video, we look at the four main parts of a web page.

Four Parts of an HTML Page
05:36
Build Example Site Part A
04:36
Build Example Site Part B
08:30
Build Example Site Part C
02:25

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.

Build Example Site Part D (INCLUDES subdomain for "sandbox")
03:30
View the Completed Example Site
00:02
+ Introduction to CSS
16 lectures 01:12:03

In this video we take a quick look at CSS

Introduction to CSS
06:35

Creating a link to an external style sheet

Linking to an External Style Sheet
02:39

In this video we create a very simple CSS reset.

CSS Reset
03:26

Styling HTML5 tags like headings and paragraphs.

Styling Built-in Selectors
02:28

Styling ordered, unordered, and definition lists

Styling Lists
04:28

Using CSS to style border width, color and style

Styling Borders
02:27

Exploring padding, margin and the box model.

Setting Padding and Margin
01:34

In this video we learn about color space and HEX values.

Color Theory
05:47

In this video we add color to a web page.

Colors
01:23

Adding an external font from the Google font servers.

Adding a Google Font Family
02:32

In this video we style a horizontal navigation bar.

Navigation
10:26
Build Example Site Part A
07:39
Build Example Site Part B
08:10
Build Example Site Part C
05:33
Build Example Site Part D
06:54
View the completed example site
00:02
+ Adding Images
13 lectures 01:01:13

Overview of Images on the Web

Overview of Images for the Web
02:57

A look at how image size effects page speed

Web Page Speed and Images
04:29

Using Photoshop to create web graphics

Using Photoshop to Prepare Images
03:04

In this lesson you will start creating a responsive image gallery.

Using PIXLR to Prepare Images
03:29

Adding an image inside a figure tag.

Add an Image to a Web Page
07:38

Creating a png file and adding it to a web page.

Using a PNG Image
04:03

Creating an image gallery

Creating an Image Gallery
06:02

In this video, we use the new flexbox to create an image gallery that works on different image sizes

Image Gallery Using Flexbox
07:05
Build the Example Site Part A
04:25
Build the Example Site Part B
03:44
Build the Example Site Part C
02:12
Build the Example Site Part D
12:03
View the completed example site
00:02
+ HTML5 Forms for collecting user information
18 lectures 01:17:23

In this video, you will explore the new HTML5 form tags and how they work.

Introduction to Forms
02:42

Adding a form input and submit button

Create a Basic Form
05:48

Exploring the new HTML5 input types.

New HTML5 Input Types
06:06

Appropiately using a field set.

Creating a Fieldset
02:03

In this video you will add radio buttons to your form.

Adding Radio Buttons
03:56

In this video you will add checkboxes to your form.

Adding Checkboxes
02:14

In this video you will add a text area to your form.

Adding a Textarea for Comments
01:27

In this video you will add a drop down with options to your form.

Implementing a Select with Dropdowns
02:59

In this video you will add hidden inputs to your form.

Adding Hidden Inputs
01:51

Using required and pattern in your HTML5 form.

Using HTML5 Required and Pattern
05:35
Styling Your Form with CSS
09:19
Build the Example Site part A
03:07
Build the Example Site part B
05:54
Build the Example Site part C
01:31
Build the Example Site part D
07:11
Build the Example Site part E
12:00
Build the Example Site part F
03:38
View the completed example site
00:02
+ Advanced CSS
13 lectures 01:00:05

In this lesson you will explore media queries so you can implement mobile navigation.

Overview of Advanced CSS
02:24

In this video, you will use CSS and an image to create a gradient in the background of your page.

Add a Gradient Image
06:56

In this lesson, you will use CSS to load a background image.

Add a Background Image
05:38

In this lesson, you will use CSS to create a graident.

Implement a CSS Gradient
03:01

In this lesson, you will use a custom graphic to create a custom bullet for a list. I have provided several example below.

Add a Graphic for Lists
04:50

In this lesson, you will use CSS to create shadows

Creating Drop Shadows
04:29

In this lesson you will use media queries to create phone navigation

Building Navigation using Media Queries
10:03

In this lesson you will use a meta tag to get phone to display their proper width.

Tell Phones Not to Lie
04:11
Build the Example Site Part A
05:15
Build the Example Site Part B
04:57
Build the Example Site Part C
07:19
Build the Example Site Part D
01:00
View the completed example site
00:02
+ Adding the final touches
15 lectures 58:11

In this video we review iFrames.

Overview of Media
01:09

In this lesson, you will see yow others use iframes in pages.

Implementing iFrames
06:57

In this lesson, we make a recording using an audio recorder.

Recording with Audacity
04:04

In this lesson, you will  add two audio files to a web page.

Adding an Audio File
04:30

In this lesson, you will use a table the way it was intended.

Add a Table
03:37

In this lesson, you will style the table you created in the previous video.

Styling a Table with CSS
05:48

IN this video we create PFD files and link them to a smart link.

Link to a PDF file
04:13
Build the Example Site Part A
02:26
Build the Example Site Part B
04:50
Build the Example Site Part C
07:42
Build the Example Site Part D
02:22
Build the Example Site Part E
03:15
Build the Example Site Part F
02:44
Build the Example Site Part G
04:32
View the completed example site
00:02
+ Web Analytics
2 lectures 11:33

In this video, students will learn what can be learned from web analytics and then see the backend of Google Analytics for free Sociology textbooks.

Web Analytics
11:08
What's Next?
00:25
Requirements
  • Students will need to download a free copy of Brackets 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.