Complete Web Development: HTML5 and CSS3

Name: Complete Web Development: HTML5 and CSS3
Rating: 4.7 (56 reviews)

Companion to HTML5 CSS3 All in One for Dummies.

Created byAndy Harris

Last updated 8/2014

English

What you'll learn

How to build an HTML5 page from scratch: You will not need to purchase an expensive IDE, and you'll truly understand how your page is created and what the code does.
Learn to build valid code from the beginning. Learn how to test your code to find errors before your users do.
Separate meaning from layout. Build solid HTML structures, then learn how to add visual improvements
Use the new media elements in HTML5 to add audio and video to your pages
Managing data with tables and lists
Connecting pages with links
Creating forms - including new HTML5 and mobile form elements
How CSS works with HTML to add formatting
Working with colors - the standard RGB color model as well as new techniques like alpha and HSL color
Styling text - custom fonts, bold, italics, text size
Selecting elements to style with CSS using class and id selection
Using internal, inline, and external CSS styles
Adding borders and backgrounds to any element
New features of CSS3 including transparency, reflections, shadows, transformations, and animation.

Course content

3 sections • 27 lectures • 6h 41m total length

My First Web Page17:28
Build your first HTML page by hand with whatever computer and whatever editor you have handy. Learn the basic format of all HTML5 pages, and the first few tags. You will be able to build a basic standard page by the end of this first video.

Files used in this video:

myFirst.html
It's all about validation14:31
Getting in the habit of well-formed pages will pay off huge dividends as your code gets more complex. Learn how to use online validation tools to check your pages and find mistakes before your users find them.

Files used in this video:

oxWheels1.html

oxWheels2.html

oxWheels3.html

External links used in this video:

W3C validator

HTML Tidy
Choosing your tools23:08
The right tools can make any job easier. Learn about a number of powerful free tools that will help you begin your web development journey right.

Links mentioned in this video:

Notepad++

gedit

Vim

Emacs

Komodo Edit

Chrome
Using Lists8:04
Web pages are about information. Learn how to organize information into lists, including ordered lists, unordered lists, definition lists, and nested lists.

Files used in this video:

basicUL.html

basicOL.html

nestedList.html

basicDL.html
Working with tables10:51
Sometimes you'll have more complicated data to work with. Tables provide the structure you need. Learn to build a basic table as well as a more complex table with multi-row and multi-column data. (and build a calendar for an evil overlord.)

Files used in this video:

basicTable.html

tableBorder10.html

tableSpan.html
Connecting your pages with links15:51
Hyperlinks are one of the most powerful ideas in web development. Learn how links work, including both absolute and relative addressing.

Files used in this video:

basicLinks.html

listLinks.html

pigs.html (links to several other pages)
Adding Images17:15
Images are one of the most critical parts of web development. Learn how to add images to your pages, as well as the basic types of images you can use.

Files used in this video:

externalImage.html

embeddedImage.html

ship.jpg

shipSmall.jpg

ship.gif

statue.gif

irfanView Image editor mentioned in video

Gimp Image editor mentioned in video
Embedding Audio and Video7:36
The new Audio and Video elements are among the most anticipated features of HTML5. Learn how to put these wonderful new tags to use, adding great new capabilities to your web sites.

Files mentioned in this video:

audio.html

videoDemo.html

Allemande.mp3

Allemande.ogg

audacity terrific free audio editor
Creating forms with basic input16:38
Forms are a critical part of modern web development. Although we won't be able to do anything with form input until you've learned a programming language like JavaScript or PHP, it's still nice to see how forms work.

This video shows the most basic types of form elements.

Files featured in this video:

formDemo.html

basicForm.html

fieldsetDemo.html

textBox.html

password.html

essay.html
Adding selection elements and buttons to forms18:34
When you're presenting the user with input choices, you can use a number of interesting form input elements, including drop-down selection lists, radio button, check boxes, and buttons. Learn how easy it is to create these input elements.

Files used in this video:

basicSelect.html

checkboxes.html

radioButtons.html

buttons.html
New form elements in HTML516:09
HTML5 introduces a number of new form elements, particularly for mobile devices. Learn how these elements work and how easy they are to add to your pages.

Files used in this video:

newElements.html

Basic CSS7:08
Learn the basic mechanics of Cascading Style Sheets (CSS) and how they are added to a page.

Files mentioned in this video:

basicColors.html
Working with Colors22:22
Color is an important part of web development. Learn various ways of describing and picking colors.

Files mentioned in this video:

namedColors.html

colorChooser.html

webSafe.html

emptyCSS.html

hslChooser.html

HSLcolors.html
Using Fonts and Typefaces14:18
Text is still the predominant feature of web pages. Learn how to manipulate fonts, using generic fonts, fonts installed on the local machine, and custom fonts.

Files used in this video:

comicHead.html

genericFonts.html

embeddedFont.html

imageTitles.html
Manipulating Text13:11
Once you've settled on a typeface, there are still many ways you can modify a font. Learn how to manipulate the size of text, as well as how to add italics, bold, underlining, and more.

Files used in this video:

textManipulation.html

italics.html

bold.html

underline.html

strikethrough.html

center.html

fontTag.html

superSub.html
Selecting with Class and Style9:21
Now that you know a few style rules, it's time to get selective about what kind of element you're styling. CSS has a number of interesting ways to indicate what part of the page gets a particular set of style rules. Learn how to use these various selection tools.

Files used in this video:

quote.html

emphasis.html

classes.html

redScript.html

divSpan.html

divSpanStyled.html

linkStates.html

context-style.html

multiStyle.html

attribute.html

childSibling.html

not.html

nthChild.html
Working with Borders15:27
You can draw a border around any HTML element. The border techniques can be quite powerful, flexible, and easy to use. Learn to build various border types as well as special image borders.

Files used in this video:

borderProps.html

borderStyles.html

borderShortcut.html

subBorders.html

marginPadding.html

borderImage.html

center.html

corners.html

boxShadow.html
Using Background images11:35
Background images can really add a lot to a page, but they can bring a number of headaches. Learn how to add a background, how to choose a good background image, and how to control your image's repeating behavior.

Files used in this video:

backgroundImage.html

noRepeat.html

ropeBG.jpg

ropeBGLight.jpg
Working with Gradients and list images9:44
HTML5 includes a couple of really exciting new ways to work with images and pseudo-images to spruce up your page. Gradients are a form of procedurally-created image that you can have CSS build on the fly to create color patterns. Learn how to build linear and radial gradients with any number of colors.

Also. learn how to add your own custom images as bullet points in lists.

Files used in this video:

gradient.html

listImages.html

pepper.gif
Using Levels of CSS19:44
The "C" in CSS stands for "Cascading." This concept explains what happens when an element is defined with multiple styles. You also learn the important technique of external style sheets, which allows you to define a style for multiple pages in a single document.

Files used in this video:

localStyles.html

externalStyle.html

secondPage.html

myStyle.css

cascadingStyles.html

overRide.html

NOTE THE FOLLOWING EXAMPLES ONLY WORK FOR OLDER VERSIONS OF IE

IEorNot.html

whatBrowser.html
Special Effects with CSS315:27
CSS3 has some new emerging features. Take a look at some of these newer features.

Files used in this video:

opacity.html

reflection.html

textStroke.html

textShadow.html

caniuse.com Use this wonderful site to determine the support of any feature you might want to use.
Transformation and Animation21:33
Among the most anticipated features of CSS3 is the ability to transform and animate various parts of the page. These features are beginning to appear in modern browsers, and the potential is breathtaking. Learn how to translate, rotate, or scale any element in 2D and in 3D. Also learn how to animate elements - moving them around on the screen, animating color changes, and so on.

Files described in this video:

transform.html

transform3d.html

transition.html

animation.html

Fun with Float13:58
The key to modern CSS layout is a humble rule called "float." Learn how float is used in it's original context, with images, and then see how to use float to build a nice-looking two-column form.

Files used in this video:

imgNoFloat.html

imgFloatLeft.html

imgFloatRight.html

formNoStyle.html

floatForm.html

floatForm.css

styleBot Chrome plugin used for playing with CSS in real time
Creating Multi-column Layouts17:14
Most modern web sites use a multi-column design. Learn a number of variations of this layout technique with a variation of the float rule.

Files described in this video:

bg.html / bg.css

floated.html / floated.css

semantic.html

threeColumn.html / threeColumn.css

threeColumnMinHeight.html / threeColumnMinHeight.css

overflow.html / overflow.css

fixedWidth.html / fixedWidth.css

fixedWidthCentered.html / fixedWidthCentered.css
Styling Lists and Menus16:53
CSS techniques can be used to create interesting navigational tools, including custom buttons and menus.

Files demonstrated in this video:

buttonList.html / buttonList.css

buttonListHoriz.html / buttonListHoriz.css

nestedList.html

hiddenList.html / hiddenList.css

horizMenu.html / horizMenu.css

vertMenu.html / vertMenu.css
Alternative Layout Techniques21:07
While the floating layout technique is currently predominant, there are some other layout techniques in use. Learn how to use absolute and fixed positioning, and the upcoming flexbox layout technique.

Files described in this video:

boxes.html

absPosition.html

zindex.html

absLayout.html / absLayout.css

absPercent.html / absPercent.css

fixedRelative.html / fixedRelative.css

flexBox.html

flexTwoCol.html
Preview of JavaScript and jQuery5:54

Requirements

A reasonably modern computer, any operating system.

Description

Web development is complex, but it can be easy if you take it step by step. This course is the first in a series of courses by bestselling author Andy Harris. Throughout the series, he takes students through every single example of his massive book (the book is over 1000 pages of fun yet authoritative instruction.)

Each mini-book will be its own smaller course, so you can pick and choose the content you need without having to pay for content you already know.

This first course provides a solid understanding of HTML5 and CSS3, the underlying foundations of the Internet. You'll learn:

Who this course is for:

Beginners to web development
Folks with experience in older forms of HTML who want HTML5 exposure
People familiar with HTML who want to add modern CSS styling
Developers curious about the new features of CSS3

Complete Web Development: HTML5 and CSS3

What you'll learn

Explore related topics

Course content

Building the Structure with HTML11 lectures • 2hr 46min

Styling with CSS11 lectures • 2hr 40min

Using CSS for Page Layout5 lectures • 1hr 15min

Requirements

Description

Who this course is for: