Introduction to HTML5 / CSS3, and Responsive Design Basics

Course Objectives

Learning Objectives

This course combines engaging instructor-led presentations and useful demonstrations with valuable hands-on labs and engaging group activities. Working in a hands-on learning environment guided by our expert instructor you’ll explore:

• HTML5 Semantic Web Development: Learn to create accessible, SEO-friendly web content with HTML5's semantic and structural elements.
• Next-Level CSS3 Design: Develop skills in advanced CSS3 styling to craft visually compelling and responsive websites.
• Responsive Web Design Implementation: Master techniques to build websites that adjust fluidly across different screens and devices.
• Web Application Debugging: Acquire the ability to effectively identify and fix issues using browser-based and proxy-based debugging tools.
• Web Performance Optimization: Understand and apply HTML5 techniques, like web storage and application caching, to enhance web performance and user experience.

Course Prerequisites

Audience

This Introductory-level course is targeted for aspiring web developers who have software development experience or background. The course can also be adjusted for non-developers upon request.

Pre-Requisites

• Basic Computer Literacy and Text Editing: Comfort with using computers, basic software applications, and text editors for coding.
• Fundamentals of Web Development: General awareness of web development concepts and processes, including how web pages are structured and served. Basic understanding of HTML including elements, tags, and basic page structure and Introductory knowledge of CSS including styling text and layout basics would be helpful.

Course Agenda

1. HTML Quick Refresh

• Define HTML
• Look at XHTML and its relationship to HTML
• Identify HTML limitations and improvements
• Hands-on Lab

2. Getting Started with HTML5

• HTML5: Status and Support
• Semantic Structure and Tags
• Handling Complex Media Options
• Lab: Writing a Valid HTML5 Document

3. 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. Getting started with 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 Attributes
• Selecting Using DOM Structure
• 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 Techniques
• Hands-on Lab

8. Responsive Web Design

• Adapting to Varying Screen Sizes
• Scaling Page and Text Content
• Scaling and Adapting for Media
• Options for Adjusting Media
• Hands-on Lab

9. HTML5 JavaScript API

• Cross-Domain Messaging
• Working with Web Storage
• Geolocation: What, Why, and How
• Hands-on Lab

Course Materials

Student Materials: Each participant will receive a digital Student Guide and/or Course Notes, code samples, software tutorials, step-by-step written lab instructions (as applicable), diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work.

Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. In some cases we can also help you install this course locally if preferred. Please inquire for details and options.

Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Course Recordings, Live Instructor Follow-on Support, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.