Course Code: 813

HTML and CSS

Class Dates:
12/26/2018
Length:
3 Days
Cost:
$1095
Class Time:
Technology:
Developer
Delivery:

Overview

  • Course Overview
  • HTML (Hypertext Markup Language) and CSS (Cascading Stylesheets) are the core programming languages of web design. A working knowledge of these languages is an essential skill for all web developers.

    HTML5 is a revolutionary improvement over its predecessors. It introduces many powerful new features for structuring page content, adding multimedia, and creating specialized applications and web pages for smart phones and tables.

    The recently released CSS3 specification gives developers additional tools for creating and managing page layouts, element formatting, accessibility, and mobile device rendering.
  • Audience
  • HTML5 and CSS3 is an introductory 3-day course that is intended for aspiring web developers who wish to understand the basic programming principles used in web development, or for those who wish to update their HTML 4.0/XHTML skills.

Prerequisites

  • No web development experience is necessary, but basic computer skills and a familiarity with web browsing is strongly recommended.

    This couse is taught in a Windows 7 environment but is suitable for users of other operating systems.
  • Recommended Courses:

Course Details

  • Module 1: Webpage Building Blocks
  • Thinking in HTML
  • A Basic HTML Page
  • Markup: Elements, Attributes, Values, and More
  • A Webpage’s Text Content
  • Links, Images, and Other Non-Text Content
  • File and Folder Names
  • URLs
  • HTML: Markup with Meaning
  • A Browser’s Default Display of Webpages
  • Key Takeaways
  • Module 2: Working with Webpage Files
  • Planning Your Site
  • Creating a New Webpage
  • Saving Your Webpage
  • Specifying a Default Page or Homepage
  • Editing Webpages
  • Organizing Files
  • Viewing Your Page in a Browser
  • The Inspiration of Others
  • Module 3: Basic HTML Structure
  • Starting Your Webpage
  • Creating a Title and Headings
  • Creating a Header
  • Marking Navigation
  • Marking the Main Area of a Webpage
  • 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
  • Module 4: Text
  • Adding a Paragraph
  • Specifying Fine Print
  • Marking Important and Emphasized Text
  • Creating a Figure
  • Indicating a Citation or Reference
  • Quoting Text
  • Specifying Time
  • Explaining Abbreviations
  • Creating Superscripts and Subscripts
  • Adding Author Contact Information
  • Noting Edits and Inaccurate Text
  • Marking Up Code
  • Module 5: Images
  • Images for the Web
  • Getting Images
  • Choosing an Image Editor
  • Saving Your Images
  • Inserting Images on a Page
  • Offering Alternative Text
  • Specifying Image Sizes
  • Scaling Images with the Browser
  • Scaling Images with an Image Editor
  • Adding Icons for Your Website
  • Module 6: Links
  • Creating a Link to Another Webpage
  • Creating and Linking to Anchors
  • Creating Other Kinds of Links
  • Module 7: CSS Building Blocks
  • Constructing a Style Rule
  • Adding Comments to Style Rules
  • Understanding Inheritance
  • The Cascade: When Rules Collide
  • A Property’s Value
  • Creating an External Style Sheet
  • Linking to External Style Sheets
  • Creating an Embedded Style Sheet
  • Applying Inline Styles
  • The Cascade and the Order of Styles
  • Using Media-Specific Style Sheets
  • The Inspiration of Others: CSS
  • Module 9: Defining Selectors
  • Constructing Selectors
  • Selecting Elements by Name
  • Selecting Elements by Class or ID
  • Selecting Elements by Context
  • Selecting an Element That Is the First or Last Child
  • Selecting the First Letter or First Line of an Element
  • Selecting Links Based on Their State
  • Selecting Elements Based on Attributes
  • Specifying Groups of Elements
  • Combining Selectors
  • Module 10: Formatting Text with Styles
  • Before and After
  • Choosing a Font Family
  • Specifying Alternate Fonts
  • Creating Italics and Applying Bold Formatting
  • Setting the Font Size
  • Setting the Line Height and All Font Values at Once
  • Setting the Color and Background
  • Controlling Spacing
  • Adding Indents
  • Aligning Text
  • Decorating Text
  • Setting Whitespace Properties
  • Module 11: 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
  • Controlling the Display Type and Visibility
  • Setting the Height or Width for an Element
  • Adding Padding Around an Element
  • Setting the Border and Margins Around an Element
  • Making Elements Float and Controlling Where Elements Float
  • Positioning Elements Relatively, Absolutely, and in a Stack
  • Determining How to Treat Overflow
  • Module 12: Building Responsive Webpages
  • Responsive Web Design: An Overview
  • Making Images Flexible .
  • Creating a Flexible Layout Grid
  • Understanding and Implementing Media Queries
  • Putting It All Together
  • Accommodating Older Versions of Internet Explorer
  • Module 13: Working with Web Fonts
  • What Is a Web Font?
  • Where to Find Web Fonts
  • Downloading Your First Web Font
  • Understanding the @font-face Rule
  • Styling Text with a Web Font
  • Applying Italics and Bold with a Web Font
  • Using Web Fonts from Google Fonts
  • Module 14: Enhancements and Effects with CS
  • Browser Compatibility, Progressive Enhancement, and Polyfills
  • Understanding Vendor Prefixes
  • Rounding the Corners of Elements
  • Adding Drop Shadows to Text
  • Adding Drop Shadows to Elements
  • Applying Multiple Backgrounds
  • Using Gradient Backgrounds
  • Setting the Opacity of Elements
  • Effects with Generated Content
  • Combining Images with Sprites
  • Module 15: Lists
  • Creating Ordered and Unordered Lists
  • Choosing Your Markers
  • Using Custom Markers
  • Choosing Where to Start List Numbering
  • Controlling Where Markers Hang
  • Setting All List-Style Properties at Once
  • Styling Nested Lists
  • Creating Description Lists
  • Module 16: Forms
  • Improvements to Forms in HTML5
  • Creating and Processing Froms
  • Organizing the Form Elements
  • Creating Text Boxes
  • Labeling Form Parts
  • Creating Password Boxes
  • Creating Email, Search, Telephone, and  URL Boxes
  • Creating Radio Buttons, Checkboxes, Text Areas, and Select Boxes
  • Allowing Visitors to Upload Files
  • Creating Hidden Fields and a Submit Button
  • Disabling Form Elements
  • Styling Forms Based on Their State
  • Module 17: Video, Audio, and Other Multimedia
  • Third-Party Plugins and Going Native
  • Video File Formats and Adding to Your Webpage
  • 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 and  Text Fallback
  • Providing Accessibility
  • Audio File Formats and Adding Controls
  • Autoplaying, Looping, and Preloading Audio
  • Providing Multiple Audio Sources with a Fallback
  • Adding Video and Audio with a Flash Fallback
  • Advanced Multimedia
  • Module 18: Tables
  • Structuring Tables
  • Spanning Columns and Rows
  • Module 19: Adding JavaScript
  • Loading an External Script
  • Adding an Embedded Script
  • JavaScript Events
  • Module 20: Testing & Debugging Webpages
  • Validating Your Code
  • Testing Your Pages
  • Trying Some Debugging Techniques
  • Checking the Easy Stuff: General
  • Checking the Easy Stuff: HTML
  • Checking the Easy Stuff: CSS
  • When Images Don’t Display
  • Module 21: Publishing Your Pages on the Web
  • Getting Your Own Domain Name
  • Finding a Host for Your Site
  • Transferring Files to the Server