Videos on HTML5 in 24 Hours

Responsive Web Design LiveLessons

Wed, 01 Feb 2023 00:00:00 +0000

Do you want to learn RWD? Do you like video learning?

If you answered yes to both these questions, then you’ll be thrilled to learn that my latest video series “Learning Responsive Web Design LiveLessons” is available now. This is a 12-lesson video series based on my book Sams Teach Yourself Responsive Web Design in 24 Hours.

This has been a fun project for me to work on as it combines my love of web design with my driving desire to help people make web pages as responsive and accessible as possible.

What “Learning Responsive Web Design” will teach you

In this 12-lesson video series you will learn the basics of responsive web design including:

The history of RWD and what it is (and what it is not).
Why RWD is the best choice for building modern web pages.
How to use CSS, HTML, and JavaScript to create responsive sites
How to write CSS media queries to create breakpoints in your designs.
How to include images and video in responsive web pages and make them responsive too.
How to build responsive layouts, navigation, tables, forms, and more.

Skill Level

Beginner and Intermediate web developers and web designers

Course Requirements

Knowledge of basic HTML, CSS, and some JavaScript.

This course assumes you know the basics of how HTML, JavaScript, and CSS interact to build and design web pages. If you need additional help, see my first video course: “Learning HTML and CSS LiveLessons”.

Learn Responsive Web Design by Video

Learning Responsive Web Design LiveLessons

A quick, easy-to-understand video course for beginners on the fundamentals of responsive web design.

Description

Learning Responsive Web Design LiveLessons provides web designers and developers with a practical introduction to responsive web design, which is used to create websites that work across many different types of devices–from small screen cell phones to large- and multi-screen monitors.

ISBN-10: 0-13-419371-7
ISBN-13: 978-0-13-419371-7

HTML and CSS LiveLessons

Sun, 01 Jan 2023 00:00:00 +0000

Video Series Available Now

Plus free samples to get started

HTML5 Learning Kit

Thu, 01 Dec 2022 00:00:00 +0000

from: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours

Updated text and videos help you learn HTML5 more quickly

I am so pleased to announce that the latest edition of the book has finally come out. This version is a “learning kit” and includes videos as well as updated text to help you learn to write HTML5 for mobile application development as quickly as you can.

I did at least two videos for each hour of the book, and I also updated the text to make sure it had up-to-date content and links.

If you haven’t bought the book yet, you should really consider getting this digital edition.

You can view the first three chapters free online:

The learning kit is available as a ZIP file that will run in all modern browsers and includes full color images, video, and updated text to help you learn HTML5.

I think you’ll love this new edition of the book. I know I really like it.

Buy Now

If you don’t want the learning kit, you can also get the book in other formats, including print and ebook.

Comments:

April Morone - Sep 2, 2013

I love what you do for Web Designers an programmers. I appreciate it.

Jennifer Kyrnin - Sep 2, 2013

@April: Thanks!

Free Video Tutorial: How to Build Video Backgrounds

Mon, 10 Apr 2017 18:52:49 +0000

Your browser does not support the video tag.

This video is part of an entire course on learning responsive web design. In that video series I teach you how to take your basic web page and make it respond to the devices that view it, all without major changes to your HTML.

If you enjoyed this video, please let me know. You can get more lessons like this one at InformIT.com.

Responsive Web Design LiveLessons Outline

Thu, 23 Feb 2017 20:21:21 +0000

Introduction

Lesson 1: Introducing Responsive Web Design

Learning Objectives

1.1 Learn What Responsive Web Design Is
1.2 Learn the History of Responsive Web Design or RWD
1.3 Understand the Alternatives to RWD
1.4 Why RWD is the Best Choice for Modern Web Development
1.5 Understand How RWD Helps Design for Different Situations
- 1.5.1 Put Mobile First
- 1.5.2 Use Progressive Enhancement

Summary

Lesson 2: HTML, CSS, and JavaScript for RWD

Learning Objectives

2.1 Understand the Basics of HTML
2.2 Review JavaScript Basics
2.3 Get Started with Cascading Style Sheets

Summary

Lesson 3: CSS Media Queries

Learning Objectives

3.1 Get Started With Media Queries
- 3.1.1 Understand Media Types
- 3.1.2 Understand Media Features
3.2 How to Write Media Query Expressions

Summary

Lesson 4: Breakpoints

Learning Objectives

4.1 Understand Breakpoints
4.2 How to Define Breakpoints
- 4.2.1 Create Breakpoints for All Devices
- 4.2.2 Create Breakpoints for the Smallest Screens
- 4.2.3 Create Breakpoints for Medium Screens
- 4.2.4 Create Breakpoints for the Largest Screens
4.3 Optimal Breakpoints
- 4.3.1 Best Practices for Choosing Breakpoints
- 4.3.2 Retina Screen Breakpoints
4.4 My Favorite Breakpoints

Summary

Lesson 5: Creating Responsive Layouts

Learning Objectives

5.1 Understand Responsive Web Layouts
5.2 Types of Layouts
- 5.2.1 Fixed
- 5.2.2 Fluid
- 5.2.3 Hybrid
5.3 Using Columns in Responsive Layouts
5.4 Using Tables for Web Layouts—Pros and Cons

Summary

Learning Objectives

6.1 The Importance of Responsive Navigation
6.2 How to Make Mobile-Friendly Navigation
6.3 Pros and Cons of Standard RWD Navigation Patterns
- 6.3.1 How to Resize and Reposition Navigation
- 6.3.2 How to Make Responsive Select Menus
- 6.3.3 How to Build Hidden Navigation
- 6.3.4 Add Additional Links as Responsive Navigation

Summary

Lesson 7: Responsive Images

Learning Objectives

7.1 How to Make Images Responsive
- 7.1.1 Flexible Width Images
- 7.1.2 Change the Images That Are Used
7.2 Keep the Download Speeds Fast
7.3 Use Retina-Ready Images
- 7.3.1 Learn About Retina-Ready Images
- 7.3.2 Media Queries Can Serve Retina Images
- 7.3.3 Use Retina.js
- 7.3.4 Use SVG Images
- 7.3.5 Use @font-face for custom icons

Summary

Lesson 8: Responsive Video

Learning Objectives

8.1 How to Make Video Responsive
- 8.1.1 Use the Required HTML <Video> Element
- 8.1.2 Use CSS to Make the Video Responsive
- 8.1.3 Use Media Queries to Display Different Source Files to Different Devices
8.2 Make YouTube Videos Responsive
8.3 Make a Video Background

Summary

Lesson 9: Responsive Web Tables

Learning Objectives

9.1 Problems With Tables on Small Devices
9.2 How to Make Tables Responsive
- 9.2.1 Use Something Other Than a Table
- 9.2.2 Resize Table Cells
- 9.2.3 Rearrange the Table
- 9.2.4 Hide Content
9.3 Layout Tables Are Valid
- 9.3.1 But are they a good choice?
- 9.3.2 When to Use Tables for Layout

Summary

Lesson 10: Responsive Web Forms

Learning Objectives

10.1 Use Modern HTML
10.1.1 Input Fields
- 10.1.2 Other New Form Attributes
- 10.1.3 Validation Without Scripts
10.2 Make Web Forms Usable
- 10.2.1 Keep the Forms Simple
- 10.2.2 Remove Extraneous Page Elements
- 10.2.3 Remove or Combine Form Fields
- 10.2.4 Avoid Long Drop-Down Menus
- 10.2.5 Allow Customers to Type Answers
10.3 Build a Responsive Form

Summary

Lesson 11: Testing RWD Sites

Learning Objectives

11.1 Test in Your Favorite Browser, but Don’t Stop There
11.2 How to Use Google Developer Tools for Testing
11.3 Use Devices, if You Can
11.4 How to Test When You Don’t Have the Devices

Summary

Lesson 12: Best Practices for RWD

Learning Objectives

12.1 Make the Best Site You Can for the Most People
- 12.1.1 Give Everyone the Best Experience
- 12.1.2 Use the Best Breakpoints You Can
- 12.1.3 Be Flexible and Think Small
- 12.1.4 Don’t Forget the Content
- 12.1.5 Keep Costs In Line
12.2 Avoid the Common RWD Problems and Pitfalls
- 12.2.1 Responsive Designs Can Be Slow
- 12.2.2 RWD May Break Advertising
- 12.2.3 Not All Customers Like Responsive Sites
- 12.2.4 RWD Can Make More Work for Designers

Summary

HTML and CSS LiveLessons Outline

Fri, 14 Aug 2015 17:57:38 +0000

Introduction

Lesson 1: Introducing HTML

Learning Objectives

1.1 Understand the basics of HTML
1.2 Choose a tool for writing HTML
1.3 Post HTML to a hosting service
1.4 Define HTML5

Summary

Lesson 2: Building a Basic HTML Document

Learning Objectives
2.1 Build a simple web page
2.2 Recognize the standard HTML tags for every web page
2.3 Add paragraphs and line breaks
2.4 Create HTML headlines
2.5 Use semantic tags

Summary

Lesson 3: Introducing CSS

Learning Objectives

3.1 Define CSS
3.2 Use inline styles
3.3 Write a basic CSS style sheet
3.4 Use internal and external style sheets
3.5 Add CSS classes and IDs
3.6 Understand the basics of CSS3

Summary

Lesson 4: Building and Styling HTML Text

Learning Objectives

4.1 Align text
4.2 Write ordered and unordered lists
4.3 Create definition lists
4.4 Add two types of quotations

Summary

Lesson 5: Understanding HTML5 Semantic Elements

Learning Objectives

5.1 Recognize sectioning elements
5.2 Add figures
5.3 Include document headers and footers
5.4 Create HTML5 outlines

Summary

Lesson 6: Adjusting Fonts and Typography

Learning Objectives

6.1 Change text to bold and italics
6.2 Change the font size
6.3 Understand line-height, leading, and fancy typography
6.4 Use web fonts
6.5 Add special characters to pages

Summary

Lesson 7: Decorating Pages with Color

Learning Objectives

7.1 Choose colors for web designs
7.2 Understand color systems
7.3 Change the foreground color
7.4 Change the background color

Summary

Lesson 8: Adjusting the Borders of Elements

Learning Objectives

8.1 Understand the CSS box model
8.2 Adjust the margins and padding
8.3 Change the border with the border property
8.4 Create CSS3 rounded corners

Summary

Lesson 9: Adding Images and Multimedia

Learning Objectives

9.1 Add images to web pages
9.2 Position images
9.3 Use background images
9.4 Link to documents and PDFs
9.5 Add HTML5 video and audio
9.6 Make multimedia responsive

Summary

Lesson 10: Writing Tables

Learning Objectives

10.1 Build a simple HTML table
10.2 Add table headlines
10.3 Adjust table cell alignment and spanning
10.4 Dress up tables with CSS
10.5 Make tables responsive

Summary

Lesson 11: Building and Using HTML Forms

Learning Objectives

11.1 Create a basic form
11.2 Use HTML5 input fields
11.3 Add in other form input fields
11.4 Validate forms
11.5 Submit form data

Summary

Lesson 12: Creating Responsive Web Layouts

Learning Objectives

12.1 Understand how to pick a good layout
12.2 Define the difference between fixed-width and liquid layouts
12.3 Define mobile-first and understand why to use it
12.4 Use CSS media queries to create a responsive layout
12.5 Choose breakpoints
12.6 Know responsive design best practices

Summary

Learning Kit "far surpasses" standard ebook approach

Wed, 18 Dec 2013 18:30:16 +0000

I worked very hard on the Learning Kit version of the book Sams Teach Yourself HTML5 for Mobile Application Development in 24 Hours to add videos as well as interactive tests and practice. But it still might seem overwhelming to buy a book like that. I can tell you that it’s a great book, but I’m biased (after all, I wrote it!). :-)

But don’t just take my word for it. Marc Carson of Marc Carson Web Design read it and wrote a great review. Here are some of my favorite parts:

“Those who have used HTML in the past, but who are new to HTML5 will probably enjoy this Learning Kit. For example, it includes materials like a walkthrough video that shows how to quickly convert old-style HTML to HTML5. This was an unexpected but helpful addition to the text.”

“The inclusion of information on fonts and typography in HTML5, audio and video elements, HTML5 forms, microformats, canvas, WebSockets, geolocation, and so on will make for fascinating reading to those who are new to HTML5.”

“I enjoyed using the new Learning Kit format and found that it far surpasses the standard ebook (or paper book) approach. ”

“The author explained concepts very well within the videos, and has a voice that is very easy to listen to.”

Read the whole review here. Click on the “Reviews” tab if it isn’t showing right away.

Videos on HTML5 in 24 Hours

Responsive Web Design LiveLessons

Do you want to learn RWD? Do you like video learning?

What “Learning Responsive Web Design” will teach you

Skill Level

Course Requirements

Learn Responsive Web Design by Video

Learning Responsive Web Design LiveLessons

Description

HTML and CSS LiveLessons

Video Series Available Now

Plus free samples to get started

HTML5 Learning Kit

from: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours

If you don’t want the learning kit, you can also get the book in other formats, including print and ebook.

Comments:

Free Video Tutorial: How to Build Video Backgrounds

Responsive Web Design LiveLessons Outline

Introduction

Lesson 1: Introducing Responsive Web Design

Learning Objectives

Summary

Lesson 2: HTML, CSS, and JavaScript for RWD

Learning Objectives

Summary

Lesson 3: CSS Media Queries

Learning Objectives

Summary

Lesson 4: Breakpoints

Learning Objectives

Summary

Lesson 5: Creating Responsive Layouts

Learning Objectives

Summary

Lesson 6: Responsive Navigation

Learning Objectives

Summary

Lesson 7: Responsive Images

Learning Objectives

Summary

Lesson 8: Responsive Video

Learning Objectives

Summary

Lesson 9: Responsive Web Tables

Learning Objectives

Summary

Lesson 10: Responsive Web Forms

Learning Objectives

Summary

Lesson 11: Testing RWD Sites

Learning Objectives

Summary

Lesson 12: Best Practices for RWD

Learning Objectives

Summary

Summary

HTML and CSS LiveLessons Outline

Introduction

Lesson 1: Introducing HTML

Learning Objectives

Summary

Lesson 2: Building a Basic HTML Document

Summary

Lesson 3: Introducing CSS

Learning Objectives

Summary

Lesson 4: Building and Styling HTML Text

Learning Objectives

Summary

Lesson 5: Understanding HTML5 Semantic Elements

Learning Objectives

Summary

Lesson 6: Adjusting Fonts and Typography

Learning Objectives

Summary

Lesson 7: Decorating Pages with Color

Learning Objectives

Summary

Lesson 8: Adjusting the Borders of Elements

Learning Objectives