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.7 (80 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,094 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 110
  • Length 7.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2014 English

Course 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.

What are the requirements?

  • Windows users need to download a free copy of Notepad ++
  • Macintosh Users need to download a free copy of Text Wrangler
  • Several internet browsers to test your work

What am I going to get from this course?

  • 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

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welcome
05:00

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

08:13

Overview of how a web works

Section 2: Getting Started
04:06

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

02:29

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

03:23

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

Section 3: Handcoding HTML5
Downloads and Example Web Pages
Article
03:33

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

03:46

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

02:42

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

02:48

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

01:08

Add an HTML5 document title

01:11

Add an HTML5 Heading 1-6 and a paragraph tag

01:36

Create a block quote in HTML5

01:20

Add an HTML5 comment tag

02:28

Explore different inline tags like bold and italic.

02:59

Add HTML5 ordered, unordered, and definition lists.

01:37

Use HTML5 entities for copyright and bullets.

10: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.

02:34

Create links that point to pages within your site

05:36

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

Build Example Site Part A
04:36
Build Example Site Part B
08:30
Build Example Site Part C
02:25
03: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 Site
Article
03:31

In this video we will look at the requirements to create your own website.

06:44

In this video, we will show the process of signing up for a domain name and web hosting.

01:14

In this video you will learn what information is important to save when signing up for your own domain name and web hosting.

04:04

In this video we review the file manager for the back end of your new site.

02:43

In this video we show how to upload files to your site using the more difficult method of the file manager.

06:24

In this video we demonstrate how to upload a website using Cyberduck and FTP

Adding a Subdomain
08:19
04:29

In this video we cover setting up your own email in your new subdomain.

Section 4: Introduction to CSS
06:35

In this video we take a quick look at CSS

02:39

Creating a link to an external style sheet

03:26

In this video we create a very simple CSS reset.

02:28

Styling HTML5 tags like headings and paragraphs.

04:28

Styling ordered, unordered, and definition lists

02:27

Using CSS to style border width, color and style

01:34

Exploring padding, margin and the box model.

05:47

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

01:23

In this video we add color to a web page.

02:32

Adding an external font from the Google font servers.

10:26

In this video we style a horizontal navigation bar.

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
Article
Section 5: Adding Images
02:59

Overview of Images on the Web

04:30

A look at how image size effects page speed

03:04

Using Photoshop to create web graphics

03:29

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

07:38

Adding an image inside a figure tag.

04:03

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

06:02

Creating an image gallery

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
09:10
View the completed example site
Article
Section 6: HTML5 Forms for collecting user information
02:39

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

05:48

Adding a form input and submit button

06:06

Exploring the new HTML5 input types.

02:03

Appropiately using a field set.

03:56

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

02:14

In this video you will add checkboxes to your form.

01:27

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

02:59

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

01:51

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

05:35

Using required and pattern in your HTML5 form.

07:47

In this lesson you will use a PHP script to sent email to your own email box. This requires that you upload your files to a web hosting site that has PHP enabled.

Styling Your Form with CSS
09:19
Build the Example Site part A
03:07
Build the Example Site part B
06:06
Build the Example Site part C
01:31
Build the Example Site part D
08:24
Build the Example Site part E
12:00
Build the Example Site part F
03:55
View the completed example site
Article
Section 7: Advanced CSS
02:24

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

06:56

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

05:38

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

03:01

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

04:50

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

04:29

In this lesson, you will use CSS to create shadows

10:03

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

04:11

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

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
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Paul Cheney, Web Designer and Developer

Paul received his master's degree from Utah State University in Instructional Technology and worked as a civilian for the United States Air Force doing interactive computer-based firefighter training. He and his family then moved to Provo, Utah where he worked at Brigham Young University for five years in the Instructional Technology Center. While there, he was involved in authoring multimedia, digitizing video, training faculty in instructional technology. He then moved with his family to Buena Vista, VA where he joined the faculty at Southern Virginia University. While there he taught digital media courses. Ten years later he returned to Utah where he is now an Assistant Professor at Utah Valley University teaching courses in their Digital Media department in the Internet and Web Technologies degree.

Ready to start learning?
Take This Course