Beginning HTML5 and CSS3

(HTML5-CSS3)/ISBN:978-1-61691-444-8

This course includes
Lessons
TestPrep

Use the Beginning HTML5 and CSS3 course to enhance your coding skills. The course provides essential knowledge and skills in HTML5, CSS3, new structural elements, transformation, transition, animation, and many more. The HTML5 and CSS3 course and its study resources will help you learn all the basic and advanced concepts of coding in HTML5 and CSS3. The comprehensive course is designed to provide a complete understanding of all the aspects of HTML5 and CSS3.

Lessons

14+ Lessons | 101+ Exercises | 52+ Quizzes | 131+ Flashcards | 131+ Glossary of terms

TestPrep

15+ Pre Assessment Questions | 2+ Full Length Tests | 40+ Post Assessment Questions | 80+ Practice Test Questions

Here's what you will learn

Download Course Outline

Lessons 1: HTML5: Now, Not 2022

  • Basic tenets
  • How was HTML5 created?
  • HTML5 moving forward!
  • HTML5 design principles
  • A dozen myths about HTML5
  • Summary

Lessons 2: Your First Plunge into HTML5

  • Homework review
  • It's all in the head
  • A Hello World! journey
  • Supporting HTML5 cross-browser
  • An HTML5 boilerplate page
  • Validation
  • Revisiting Miss Baker
  • Summary
  • Homework

Lessons 3: New Structural Elements

  • Workflow practices, evolving?
  • A brave new semantic dawn
  • Structural building blocks: <div>, <section>, and <article>
  • Headings: <header>, <hgroup>, and <h1>-<h6>, plus <footer>
  • The HTML5 outlining algorithm
  • HTML5-style heading element levels
  • Even more structural elements: <nav>, <aside>, <figure> (and <figcaption>)
  • Putting it all together
  • Accessibility and HTML5
  • Summary
  • Homework
  • Further Reading

Lessons 4: A Richer Approach to Marking Up Content

  • Baking the best cake we possibly can
  • Ex-presentational elements and friends
  • Block-level links with the <a> element
  • Other elements with minor changes from HTML 4
  • New semantic elements
  • Extending HTML5
  • Summary

Lessons 5: Rich Media

  • The case for Flash
  • Video the HTML5 way
  • Audio
  • Canvas
  • SVG
  • Summary
  • Homework

Lessons 6: Paving the Way for Web Applications

  • HTML5 forms
  • Web applications
  • The glorious dawn of the age of the standards-ba...d of compliant browsers, on a variety of devices
  • Homework: Mark up the Join Gordo's Space Cadets form using the new markup covered

Lessons 7: CSS3, Here and Now

  • A Refresher on the importance of web standards
  • CSS 1, CSS 2.1, CSS3 ...
  • Is CSS3 ready?
  • The benefits of CSS3
  • CSS basics refresher
  • CSS shorthand
  • The cascade, specificity, and inheritance
  • CSS organization and maintenance
  • Browser support, vendor prefixes, polyfills, and progressive enhancement
  • Feature detection and polyfills
  • Summary
  • Homework
  • Appendix: CSS3 Module Status

Lessons 8: Keeping Your Markup Slim Using CSS Selectors

  • Selectors rundown
  • CSS3 selectors
  • Browser support
  • Selectors of the future
  • Summary
  • Homework
  • Appendix

Lessons 9: A Layout for Every Occasion

  • The web of many devices
  • The Visual Formatting Model of CSS it's boxes all the way down!
  • CSS3 layouts
  • Conclusion
  • Further reading
  • Homework

Lessons 10: Improving Web Typography

  • Typeface and fonts
  • Anatomy of type
  • A brief history of web type
  • Text as image
  • sIFR
  • Cufón
  • SVG fonts
  • @font-face
  • Finding web fonts
  • Baselines
  • Designing with a grid
  • Baseline grid in summary
  • Fun with web type
  • Control the quote glyphs
  • Summary
  • Further Reading

Lessons 11: Putting CSS3 Properties to Work

  • Color and transparency
  • Backgrounds
  • Borders
  • Drop shadows
  • Gradients
  • Detecting support and helping other browsers
  • Summary
  • Homework

Lessons 12: Transforms, Transitions, and Animation

  • Translate, rotate, scale, skew, transform: 2D and 3D CSS transforms
  • CSS transitions and CSS animations: compare and contrast
  • CSS transitions: bling in 4D!
  • Keyframin' with CSS animations
  • Further Reading

Lessons 13: The Future of CSS or, Awesome Stuff That's Coming

  • Hardware acceleration and CSS performance
  • Internationalization
  • Go forth and make awesome
  • Appendix: essential links

Lessons 14: Video Tutorials

  • Training Videos of HTML
  • Training Videos of CSS