HTML and CSS
CLASS DATE(s):
8/10/2020 - 8/12/2020
9/8/2020 - 9/10/2020
10/13/2020 - 10/15/2020
11/23/2020 - 11/25/2020

COURSE LENGTH: 3 Days

COURSE COST: $1095

COURSE TIMES: 9:00am - 4:30pm

Printable version of this course
print
Register for this course
register

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 AND PREREQUISITES

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.

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.

FOLLOW UP COURSES  

*Course Cost listed does not include the cost of courseware or lunch. Course is subject to minimum enrollment. Course may run virtually as a Virtual Instructor-Led (VILT) class if minimum enrollment is not met.

COURSE TOPICS:


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