Complete Web Development: HTML5 and CSS3

Companion to HTML5 CSS3 All in One for Dummies.
0.0 (0 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.
22 students enrolled
$20
Take This Course
  • Lectures 27
  • Contents Video: 6.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 8/2014 English

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

What are the requirements?

  • A reasonably modern computer, any operating system.

What am I going to get from this course?

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

What is the target audience?

  • 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

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: Building the Structure with HTML
17: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

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

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

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

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

15: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)

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

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

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

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

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

Section 2: Styling with CSS
07: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

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

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

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

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

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

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

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

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

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

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

Section 3: Using CSS for Page Layout
13: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

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

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

21: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 jQuery
05:54

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andy Harris, Teacher, Author, Game Developer

  • Andy is the author of over a dozen books on various topics in computer programming, especially web, game, and mobile development.

His best-selling books include

  • HTML5 / CSS3 All in One for Dummies
  • HTML5 Game Programming for Dummies
  • HTML5 Quick Reference for Dummies
  • PHP6 / MySQL Programming for the Absolute Beginner
  • Game Programming - the L Line (using Python)
  • Flash Game Programming for Dummes

He teaches computer science at a major university teaching the following courses:

  • * Computer Science I - Introduction to computer science and programming with Python
  • * Computer Science II - Advanced computer programming in C, C++, Java, basic algorithms and Data Structures
  • * Game Development I and II - 2D and 3D game development from the ground up, including building game engines.
  • * Web and Mobile Development - Various classes in client-side, server-side, and AJAX programming, as well as mobile development.

Andy is also very active in homeschooling. He has taught math and programming classes to various homeschooling groups, and is a featured technology columnist in The Old Schoolhouse magazine, a leading magazine among homeschool families.

While Andy's technical depth is notable, it's his teaching style that makes the biggest difference. He has served as a special education teacher, and knows a little about how to help smart people become even smarter by learning new complicated tasks.

Andy is particularly interested in helping kids and adults who do not have access to computing instruction learn how to get started in this fun and lucrative field.

He has a great time teaching, and his courses are engaging and fun, while informative. A course with Andy is like having a friend who's written a lot of books come by in a sweater on a Saturday morning showing you how to do cool stuff. You'll learn a ton, and you'll have a great time doing it.

Ready to start learning?
Take This Course