HTML-5 & CSS (Full Course)

Working with Web Page Files             

• Planning Your Site
• Creating a New Web Page
• Saving Your Web Page
• Specifying a Default Page or Homepage
• Editing Web Pages
• Organizing Files
• Viewing Your Page in a Browser
• The Inspiration of Others

Basic HTML Structure                   

• Starting Your Web Page
• Creating a Title
• Creating Headings
• Understanding HTML5’s Document Outline
• Grouping Headings
• Common Page Constructs
• Creating a Header
• Marking Navigation
• Creating an Article
• Defining a Section
• Specifying an Aside
• Creating a Footer
• Creating Generic Containers
• Improving Accessibility with ARIA
• Naming Elements with a Class or ID
• Adding the Title Attribute to Elements
• Adding Comments

Text                             

• Starting a New Paragraph
• Adding Author Contact Information
• Creating a Figure
• Specifying Time
• Marking Important and Emphasized Text
• Indicating a Citation or Reference
• Quoting Text
• Highlighting Text
• Explaining Abbreviations
• Defining a Term
• Creating Superscripts and Subscripts
• Noting Edits and Inaccurate Text
• Marking Up Code
• Using Preformatted Text
• Specifying Fine Print
• Creating a Line Break
• Creating Spans
• Other Elements

Images                            

• About Images for the Web
• Getting Images
• Choosing an Image Editor
• Saving Your Images
• Inserting Images on a Page
• Offering Alternate Text
• Specifying Image Size
• Scaling Images with the Browser
• Scaling Images with an Image Editor
• Adding Icons for Your Web Site

Links                              

• The Anatomy of a Link
• Creating a Link to Another Web Page
• Creating Anchors
• Linking to a Specific Anchor
• Creating Other Kinds of Links

CSS Building Blocks

• Constructing a Style Rule
• Adding Comments to Style Rules
• The Cascade: When Rules Collide
• A Property’s Value

Working with Style Sheets               

• Creating an External Style Sheet
• Linking to External Style Sheets
• Creating an Embedded Style Sheet
• Applying Inline Styles
• The Importance of Location
• Using Media-Specific Style Sheets
• Offering Alternate Style Sheets
• The Inspiration of Others: CSS

Defining Selectors                     

• Constructing Selectors
• Selecting Elements by Name
• Selecting Elements by Class or ID
• Selecting Elements by Context
• Selecting Part of an Element
• Selecting Links Based on Their State
• Selecting Elements Based on Attributes
• Specifying Groups of Elements
• Combining Selectors
• Selectors Recap

Formatting Text with Styles               

• Choosing a Font Family
• Specifying Alternate Fonts
• Creating Italics
• Applying Bold Formatting
• Setting the Font Size
• Setting the Line Height
• Setting All Font Values at Once
• Setting the Color
• Changing the Text’s Background
• Controlling Spacing
• Adding Indents
• Setting White Space Properties
• Aligning Text
• Changing the Text Case
• Using Small Caps
• Decorating Text

Layout with Styles                     

• Considerations When Beginning a Layout
• Structuring Your Pages
• Styling HTML5 Elements in Older Browsers
• Resetting or Normalizing Default Styles
• The Box Model
• Changing the Background
• Setting the Height or Width for an Element
• Setting the Margins around an Element
• Adding Padding around an Element
• Making Elements Float
• Controlling Where Elements Float
• Setting the Border
• Offsetting Elements in the Natural Flow
• Positioning Elements Absolutely
• Positioning Elements in 3D
• Determining How to Treat Overflow
• Aligning Elements Vertically
• Changing the Cursor
• Displaying and Hiding Elements

Style Sheets for Mobile to Desktop         

• Mobile Strategies and Considerations
• Understanding and Implementing Media Queries
• Building a Page that Adapts with Media Queries

Working with Web Fonts

• What Is a Web Font?
• Where to Find Web Fonts
• Downloading Your First Web Font
• Working with @font-face
• Styling Web Fonts and Managing File Size

Enhancements with CSS3                

• Understanding Vendor Prefixes
• A Quick Look at Browser Compatibility
• Using Polyfills for Progressive Enhancement
• Rounding the Corners of Elements
• Adding Drop Shadows to Text
• Adding Drop Shadows to Other Elements
• Applying Multiple Backgrounds
• Using Gradient Backgrounds
• Setting the Opacity of Elements

Lists                              

• Creating Ordered and Unordered Lists
• Choosing Your Markers
• Choosing Where to Start List Numbering
• Using Custom Markers
• Controlling Where Markers Hang
• Setting All List-Style Properties at Once
• Styling Nested Lists
• Creating Description Lists

Forms                             

• Creating Forms
• Processing Forms
• Sending Form Data via Email
• Organizing the Form Elements
• Creating Text Boxes
• Creating Password Boxes
• Creating Email, Telephone, and URL Boxes
• Labeling Form Parts
• Creating Radio Buttons
• Creating Select Boxes
• Creating Checkboxes
• Creating Text Areas
• Allowing Visitors to Upload Files
• Creating Hidden Fields
• Creating a Submit Button
• Using an Image to Submit a Form
• Disabling Form Elements
• New HTML5 Features and Browser Support

Video, Audio, and Other Multimedia         

• Third-Party Plugins and Going Native
• Video File Formats
• Adding a Single Video to Your Web Page
• Exploring Video Attributes
• Adding Controls and Autoplay to Your Video
• Looping a Video and Specifying a Poster Image
• Preventing a Video from Preloading
• Using Video with Multiple Sources
• Multiple Media Sources and the Source Element
• Adding Video with Hyperlink Fallbacks
• Adding Video with Flash Fallbacks
• Providing Accessibility
• Adding Audio File Formats
• Adding a Single Audio File to Your Web Page
• Adding a Single Audio File with Controls to Your
• Web Page
• Exploring Audio Attributes
• Adding Controls and Autoplay to Audio in a Loop
• Preloading an Audio File
• Providing Multiple Audio Sources
• Adding Audio with Hyperlink Fallbacks
• Adding Audio with Flash Fallbacks
• Adding Audio with Flash and a Hyperlink Fallback
• Getting Multimedia Files
• Considering Digital Rights Management (DRM)
• Embedding Flash Animation
• Embedding YouTube Video
• Using Video with Canvas
• Coupling Video with SVG
• Further Resources

Tables                                          

• Structuring Tables
• Spanning Columns and Rows

Working with Scripts                      

• Loading an External Script
• Adding an Embedded Script
• JavaScript Events

Testing & Debugging Web Pages      

• Trying Some Debugging Techniques
• Checking the Easy Stuff: General
• Checking the Easy Stuff: HTML
• Checking the Easy Stuff: CSS
• Validating Your Code
• Testing Your Page
• When Images Don’t Appear?
• Still Stuck?

Publishing Your Pages on the Web

• Getting Your Own Domain Name
• Finding a Host for Your Site
• Transferring Files to the Server