Introduction to HTML5 / CSS3 and JavaScript

Introduction to HTML5/CSS3 and JavaScript is a three-day hands-on course geared for web developers beginning their journey in modern web design and coding. Over three days, you’ll explore the essentials of HTML5, CSS3, and JavaScript – the core trio that powers the internet. You’ll learn how to build visually appealing, responsive websites and applications, skills that are vital in today’s digital landscape. Whether you’re aiming to improve your daily tasks, enhance your organization’s online presence, or start personal web projects, mastering these tools will give you a competitive edge and open doors to creative opportunities.

You’ll delve into six key areas, starting with a refreshing look at HTML and XHTML, moving into the nuances of HTML5 with its advanced structures and media options, and tackling HTML5 forms. In the CSS segment, you’ll master styling, from basic declarations to advanced techniques in CSS3 like Flexbox layouts and visual effects. The JavaScript sessions will ground you in the essentials, from basic syntax to advanced concepts like Object-Oriented Programming and DOM manipulation. The 50% hands-on labs ensure you get practical experience, applying what you learn to real-world scenarios. These labs are crafted to encourage creative problem-solving and build confidence in applying new skills effectively.

By the end of the course, you’ll have a comprehensive understanding of how these technologies work together to create the web. More importantly, you’ll think like a web developer, equipped with both the technical skills and the innovative mindset needed to tackle web development tasks. Our industry expert instructor will guide you with practical advice and real-world examples, ensuring you leave the course not just with knowledge, but with the confidence to apply these skills in your daily work. This course isn’t just about learning; it’s about transforming you into a skilled, adaptable, and forward-thinking web developer.

Course Topics / Agenda

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most. Course agenda, topics and labs are subject to adjust during live delivery in response to student skill level, interests and participation.

1. HTML Quick Refresh
   • Define HTML and review its history
   • Look at XHTML and its relationship to HTML
   • Identify HTML limitations and improvements
   • Hands-On Lab
   • Prerequisites
2. Getting Started with HTML5
   • HTML5: Status and Support
   • Semantic Structure and Tags
   • Handling Complex Media Options
3. Working with HTML5 Forms
   • Working with Legacy Browsers
   • Forms, Input Types, and Data Qualification
   • Hands-On Lab
4. CSS Basics
   • Learn the basics of CSS
   • Meaning of cascading in CSS
   • Declaring CSS within your HTML page
   • Creating styles in an external CSS file
   • Control how to display and position HTML elements
   • Overriding standard tag behavior
   • Adding new classes
   • Using custom classes in your page
   • Hands-On Lab
5. Exploring CSS3
   • What is new in CSS3
   • The Advantages of CSS3
   • Layout of elements using the display property
   • CSS Flexbox
   • Hands-On Lab
6. CSS3 Advanced Selectors
   • Selecting Using DOM Structure
   • Selecting Using Attributes
   • Complex Selecting using Pseudo-Classes
   • Selecting Using UI Components and State
   • Hands-On Lab
7. CSS3 Visual Effects
   • Font Options, Opacity, and Color
   • Distributing Content Across Columns
   • Working with Borders and Boxes
   • Working with Vendor Prefixes
   • Functional Technique
   • Hands-On Lab
8. JavaScript Basics
   • JavaScript Defined
   • Variables and Operators
   • Flow Control and Conditionals
   • Hands-On Lab
9. Debugging Tools
   • Using the strict mode and setting breakpoints
   • Browser debugging tools
   • Monitoring resource usage and performance
   • Emulating devices Exceptions in JavaScript
   • Exceptions in JavaScript
   • Hands-On Lab
10. JavaScript Functions
    • Functions in JavaScript
    • Invoking Functions
    • Function Constructor
    • Function Scope and Closures
11. JavaScript Arrays, Math and Date
    • JavaScript Literals
    • JavaScript Literals
    • JavaScript Arrays
    • Working with Numbers and Dates
    • Hands-On Lab
12. JavaScript Event Handling and the DOM
    • Events and Event Handling
    • HTML Document Object Model
    • Accessing the DOMs
    • Dynamically Working with the DOM
    • DOM Challenges
    • Hands-On Lab
13. Object-Oriented JavaScript
    • JavaScript “Objects” and “Classes”
    • Constructors and Prototypes
    • Prototypes
    • Extending Classes with Prototype
    • Reusable, Flexible Classes
    • Hands-On Lab