This class is targeted towards the professional developer new to HTML, self-taught HTML developers, graphics designers and those new to HTML development.
Modern HTML and CSS
This five-day instructor led course is an in depth hands-on study of HTML5, CSS3 and modern web and mobile development.
The course includes detailed hands-on labs and Q&A labs. The labs include multiple projects, including one beginning to end web site.
Audience Profile
At Course Completion
After completing this course, students will be able to:
- Create HTML5 compliant web pages.
- Test and validate HTML and CSS code.
- Create CSS for style pages.
- Work with experimental vendor prefixes.
- Work with fonts and CSS font effects.
- Work with color and color tools.
- Layout pages and content using DIVs, iFrames and Tables.
- Add and format images and CSS sprites.
- Create HTML5 forms.
- Embed and manager video and audio content.
Module 1: A Brief History of HTML and the Web
- Welcome!
- Prerequisites
- Which Comes First? HTML, CSS or JavaScript?
- Versions?
- History
- Who “owns” HTML?
- History?
- Details, Details, Details…
- Modern Browsers and Compatibility
- Shims, Shivs, and Polyfills
- The Web Server
- Domain Names
- URL / Uniform Resource Locator
- Default Page
- Protocols
- Port Numbers
- The Life of a Web Page
- HTTP Status Code Definitions
- Most Important Things to Know as a Web Developer
Module 2: Core HTML Elements
- HTML and CSS Editors
- Editor Features
- Text, Spaces and Tabs
- Working with Tags
- Terminology
- Some tags have content.
- Some tags only have text as content.
- Some tags have no content.
- Some tags work in sets.
- Block-level vs. Inline Elements
- Context vs. Display
- HTML is not Case Sensitive
- Attributes
- Attribute Syntax
- Empty Attribute Syntax
- Global Attributes
- Custom Attributes
- Comments
- Internet Explorer Conditional Comments
- CSS Comments
- Non-Standard Tags
- Every Page Includes…
- Every page should include:
- A Simple, but Complete Page
- File Extensions
- Core Page Elements
- DOCTYPE
- Document Structure Elements
- Document Head Elements
- Nesting
- Testing HTML
- Browser Compatibility
- Validators
- Testing Tools
- Browser and Device Testing
- Sample Text
- HTML and Text
- File Encoding
- HTML Entities
- White space
Module 3: Cascading Style Sheets
- Before CSS
- With CSS
- Cascading Style Sheets (CSS)
- CSS Demonstration
- Adding CSS to a Page
- Order of CSS Processing
- Experimental Vendor Prefixes
- CSS Units
- Absolute Units
- Relative Units
- CSS Selectors
- Grouping Selectors
- Attribute Selectors
- Pseudo-class Selectors
- Media Queries
- The CSS Box Model
- CSS Border Tricks!
Module 4: Fonts and Text
- Fonts
- Fallback
- Images for Unusual Fonts
- CSS for Fonts
- CSS for Text
- CSS Text Tricks!
- Shadows
- Rotated Text
- Working with Lists
- Ordered and Unordered Lists
- List Styling
Module 5: Colors and Backgrounds
- Specifying Colors
- Color Names
- RGB Color Numbers
- HSL Colors
- The Future
- Color Tools
- Applying Colors
- Gradients
Module 6: Anchors and Hyperlinks
- <a> and CSS
- Changing the link style
- Changing the Mouse Pointer
- Hyperlinks with Images and Other Objects
- Buttons
- Buttons from Images
- Buttons from CSS
Module 7: Page Layout
- Page Layout Options
- Frames
- Tables
- DIVs
- Tables
- <table>
- <caption>
- Widths
- CSS Frequently used for Tables
- Merging Cells
- CSS to Control Wrapping
- CSS Pseudo-classes for Tables
- Table Sections
- DIVs
- Try it!
- Float
- Float options
- Clear
- Float with Images
- Float for Wrapping
- SPAN
- DIV vs. SPAN
- HTML 5 DIV-like Tags
- IFRAMEs
Module 8: Images
- Favicon
- Preparing Images
- Image Files
- File Size
- Compression
- Image Files Types and Features
- Browser Support
- The IMG Tag
- <img>
- Common Attributes
- File Paths
- Image Maps
- Background Images
- For a Page
- For a DIV or other Tag
- Image Best Practices
- CSS Sprites
Module 9: HTML Forms
- A Basic Form
- POST vs. GET
- name vs. id
- Basic Form Elements
- Basic Form Attributes
- Select
- Default
- optgroup
- Uploading Files
- Input Type=file Attributes
- Better File Upload Options
- HTML 5 Form Enhancements
- New HTML 5 INPUT Types
- New HTML 5 INPUT Attributes
- DataList
- Form Tools
Module 10 – Multimedia
- Video and Audio
- Video
- Video Formats and Browser Support
- HTML 5 Video
- Video Fallback
- CSS
- JavaScript
- Audio
- Audio Formats
- HTML 5 Audio
- Embedding YouTube Videos
- Working with Animated GIFs
Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com
Request a Date