Code a Responsive Website Using HTML5 and CSS for Beginners
4.4 (108 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,196 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Code a Responsive Website Using HTML5 and CSS for Beginners to your Wishlist.

Add to Wishlist

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.4 (108 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,196 students enrolled
Created by Paul Cheney
Last updated 7/2016
English
Current price: $10 Original price: $50 Discount: 80% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 8 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I 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
View Curriculum
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 is the target audience?
  • This course is designed for beginners who want to understand what the code does and how to solve problems.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 110 Lectures Collapse All 110 Lectures 07:43:45
+
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
28 Lectures 01:40:34
Downloads and Example Web Pages
00:17

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:03

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

Introduction to Web Hosting and File Transfer
03:31

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

Purchasing a Domain
06:44

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

Saving information from the Email
01:14

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

Using the File Manager
04:04

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

Using File Manager to Upload Files
02:43

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

Uploading Files using Cyberduck
06:24

Adding a Subdomain
08:19

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

Setting Up Your Email
04:29
+
Introduction to CSS
16 Lectures 01:12:07

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:06
+
Adding Images
12 Lectures 51:22

Overview of Images on the Web

Overview of Images for the Web
02:59

A look at how image size effects page speed

Web Page Speed and Images
04:30

Using Photoshop to create web graphics

Using the Photoshop to Prepare Images
03:04

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

Using the 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

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
00:06
+
HTML5 Forms for collecting user information
19 Lectures 01:26:53

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

Introduction to Forms
02:39

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

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.

Sending Email Using FormToEmail.php
07:47

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
00:06
+
Advanced CSS
13 Lectures 01:00:09

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:06
+
Adding the final touches
15 Lectures 58:15

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:06
+
Web Analytics
2 Lectures 11:26

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:18
About the Instructor
Paul Cheney
4.5 Average rating
372 Reviews
3,607 Students
7 Courses
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.