About the course
This hands-on workshop will take you from the fundamentals of structuring web content with the latest HTML5 semantic elements to mastering the art of styling and layout with cutting-edge CSS3 techniques, including Flexbox and CSS Grid.
You'll learn how to create visually appealing, responsive, and interactive websites, and gain practical experience with key HTML5 APIs for enhanced functionality. Whether you're new to web development or looking to upgrade your skills to the latest standards, this course provides the essential knowledge and techniques to build modern, accessible, and engaging web experiences.
For those with specific needs, we also offer custom modules exploring scalable CSS architectures (like BEM) and the efficiency of CSS preprocessors (Sass and Less).
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Structure web content semantically using appropriate HTML5 elements to improve accessibility and SEO.
- Apply CSS3 to control the layout and design of web pages, including modern techniques like Flexbox and CSS Grid.
- Style web elements effectively using CSS3 properties for backgrounds, borders, colours, text, and web fonts.
- Create responsive web designs that adapt to different screen sizes using CSS3 media queries.
- Implement dynamic visual effects using CSS3 transitions, transformations, and keyframe animations.
- Utilise key HTML5 APIs for tasks such as form handling, local storage, and asynchronous communication (AJAX).
- Integrate multimedia content (audio and video) into web pages using HTML5 elements.
- Implement interactive features using HTML5 Canvas and SVG graphics.
- Understand the fundamentals of building mobile-friendly web interfaces with HTML5 and CSS3.
- (And for custom courses) Apply scalable CSS architecture principles (like BEM) and leverage CSS preprocessors (Sass/Less) for more maintainable and efficient stylesheets.
-
This course is ideal for aspiring web developers, front-end developers, web designers, and anyone looking to gain a solid foundation in the core technologies for building modern websites and web applications.
It's also beneficial for back-end developers who want a deeper understanding of front-end technologies and project managers who need to understand the technical landscape of web development.
-
To make the most of this practical HTML5 and CSS3 training, delegates should have a basic understanding of how the internet and web browsers work.
Familiarity with basic computer operations and file management is also expected. No prior experience with HTML or CSS is required, as the course starts with the fundamentals. However, a general comfort with technology and a desire to learn web development are beneficial.
For those interested in the optional modules on CSS architecture and preprocessors, a basic understanding of CSS would be helpful (or should be included in your custom course).
-
This web development course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Introduction to HTML5
Overview of HTML5 New Features
Background and purpose of HTML5
The W3C and WHATWG specifications
Feature detection using Modernizr
HTML5 examples
Creating HTML5 Pages
Semantic mark-up tags
Additional tags and attributes
Form handling
The Selector API
Accessibility and Aria
Layout and Design with CSS3
Setting out with CSS3
Controlling Page Layout
Flexbox
CSS Grid
Backgrounds, borders, colours, and text
CSS3 Selectors
Using Web Fonts
Media queries
CSS3 Transformations and Animations
Transitions
Transformations
Key-frame Animations
HTML5 Communications API
Key principles
Cross-document Messaging
AJAX essentials
Using XMLHttpRequest Level 2
HTML 5 Web Storage API
Overview of HTML5 Web Storage
Understanding the Web Storage API
Listening for storage events
Working Offline / Asynchronously
Graphics
HTML5 and Graphics
Introduction to Canvas
Using canvas
Using SVG
Web Workers
Overview of Web Workers
Using the Web Workers API
Examples
HTML5 Web Sockets
Introduction to HTML5 Web Sockets
Defining a Web Sockets Server
Defining a Web Sockets client
HTML5 Audio and Video
Overview of HTML5 rich media
Playing video files
Playing audio files
HTML5 File-Handling Methods
Drag-and-drop
HTML5 databases
Intro to Mobile Development with HTML5
Getting started with HTML5 Mobile
Creating a Mobile User Interface
Managing Data
UI behaviours and User eXperience Best Practices
==========================
Optional topics for custom courses
==========================CSS Architecture and Best Practices (Optional)
Introduction to CSS Methodologies: Understanding the challenges of maintaining large CSS codebases.
BEM (Block, Element, Modifier):
Concept: A naming convention for CSS classes to create modular, reusable, and maintainable components.
Blocks: Standalone entities that are meaningful on their own.
Elements: Parts of a block that have no standalone meaning and are semantically tied to their block.
Modifiers: Flags on blocks or elements used to change their appearance or behavior.
Benefits: Improved code readability, reusability, and reduced specificity issues.
Example: .button, .button__label, .button--primary.
Other Methodologies (Brief Overview):
SMACSS (Scalable Modular Architecture for CSS): Categorizing CSS rules to improve organization and maintainability.
OOCSS (Object-Oriented CSS): Writing CSS as reusable objects, separating structure and skin.
CSS Modules: Locally scoped CSS rules to avoid naming collisions in component-based architectures.
Choosing a Methodology: Considerations for selecting the right approach for different project sizes and team structures.
CSS Preprocessors (Sass & Less):
Concept: Tools that extend the basic CSS language, adding features like variables, nesting, mixins, and functions to make CSS more maintainable and efficient to write.
Sass (Syntactically Awesome Style Sheets):
Two syntax options: SCSS (Sassy CSS, a superset of CSS3) and the indented syntax.
Key features: Variables ($), nesting, mixins (@mixin, @include), inheritance (@extend), control directives (@if, @for, @each).
Compilation process to standard CSS.
Less:
A CSS preprocessor with a slightly different syntax.
Key features: Variables (@), nesting, mixins (using class selectors), parametric mixins, operations, functions.
Compilation process to standard CSS.
Benefits: Improved organisation, reusability, and maintainability of CSS; reduction in code duplication; easier implementation of complex styles.
Choosing a Preprocessor: Considerations based on project requirements and team preferences.
-
developer.mozilla.org/en-US/docs/Web/HTML - The official Mozilla Developer Network (MDN) Web Docs for HTML, a comprehensive and highly respected resource.
html.spec.whatwg.org/multipage/ - The official HTML Living Standard specification by WHATWG.
www.w3.org/TR/CSS/ - The official CSS specifications from the World Wide Web Consortium (W3C).
caniuse.com/ - A fantastic resource that provides up-to-date browser support tables for various HTML5, CSS3, and JavaScript features.
Trusted by
