Code a Responsive Website Using HTML5 and CSS for Beginners



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

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

Curriculum For This Course Expand All Collapse All 102 Lectures 07:06:17 + – Welcome 2 Lectures 13:13

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

Introductory Video Preview 05:00

Overview of how a web works

How the 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.

Planning a Website Preview 04:06

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

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

Build a Wireframe Preview 03:23 + – Handcoding HTML5 20 Lectures 01:03:06 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 + – 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
  • 自由时间安排
  • 免费:
  • 收费:
  • 证书:
  • MOOC:
  • 视频讲座:
  • 音频讲座:
  • Email-课程:
  • 语言: 英语 Gb



请注册, 为了写反馈

130168_49d1_6 HTML and CSS for Beginning Web Developers
HTML and CSS are like peanut butter and jelly for web designers and developers...
28295_6948_7 Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours
Convert Photoshop Designs into Stunning HTML5 & CSS3 websites with confidence...
18539_3412_4 Dreamweaver CS6 Build an HTML5 CSS3 website Getting Started
Learn how to Create, Design, Edit and FTP Publish a fully working SEO friendly...
80940_2664_8 Build Websites from Scratch with HTML & CSS
Learn Web Development Essentials and Become a Web Developer From Scratch in...
43347_f23c_5 How to make a website: Dreamweaver HTML CSS Intro Course
Learn Steps to Create a Website from a Blank Page and NO Hand Coding. So.....
Show?id=n3eliycplgk&bids=323058 Thousands of online courses for only $15
Most courses are dropped to $15 flat price!
Banner_ruby Ruby on Rails Tutorial: Learn From Scratch
This post is part of our “Getting Started” series of free text tutorials on...
Show?id=n3eliycplgk&bids=323058 $10 Sitewide Deal
$10 Fixed Price across the site!
64422_c6dd_6 1 Hour HTML
Learn how to code in HTML in 1 hour. This class is set up for complete beginners...
72262_60dc_6 1 hour jQuery
Have you ever wanted to learn to code. This course will show you the basics...

© 2013-2019