HTML5 and CSS3: understanding and mastering the fundamentals

Module 1: overview of HTML and HTML5

• Creating a Document Type Definition (DTD) file. XML syntax rules.
• The basic structure of an HTML page: image, CSS and JavaScript tags.
• Semantic HTML tags: headings, paragraphs, hyperlinks, tables, forms, etc.
• The Document Object Model (DOM).
• How HTTP (HyperText Transfer Protocol) works with HTML.
• Optimising Critical Rendering Path performance.
• HTML versions and the benefits of HTML5.
• HTML5 development tools.
• Compatibility testing and tools for checking HTML5 markup.

Practical exercises:

• Explore the possibilities offered by HTML5.
• Discover and get started with development tools.

Module 2: structuring an HTML5 web page

• The main tags in an HTML5 document: doctype, head, body, meta, script, etc.
• HTML5 metadata.
• The flex-flow property.
• HTML5 sectioning elements.
• Semantic HTML5 tags.
• Embedded external content elements.
• Interactive content elements.
• The importance of semantic tags for search engine optimisation (SEO).
• Nesting HTML5 elements and organising content.

Practical exercises:

• Create an HTML5 document and check its compliance using validation tools.

Module 3: using HTML5 tags and attributes

• HTML tags and attributes no longer used in HTML5.
• New HTML5 tags and attributes.
• Structured data and rich snippets: uses and SEO benefits.
• New HTML5 form fields and their attributes.

Module 4: formatting boxes and backgrounds in CSS3

• Shadow effects with box-shadow.
• Rounded corners with border-radius.
• Managing multiple backgrounds.
• Background colour gradients with webkit-gradient.
• Fitting backgrounds within containers.
• CSS3 transformation properties.
• CSS3 animation properties.
• SVG versus Canvas for CSS3 animation.
• Integrating media with CSS3: supported formats, codecs and multimedia APIs.
• Using CSS3 to control video and audio elements.

Practical exercises:

• Create an HTML5 and CSS3 template.
• Position elements using absolute values.
• Create a multimedia player.

Module 5: using CSS3 selectors

• CSS3 selector syntax and rules.
• Using repetition selectors.
• Using media queries for conditional stylesheet loading.

Practical exercises:

• Insert CSS3 code into a web application.
• Find specific elements in an HTML5 page's source code.

Module 6: formatting content in CSS3

• Transparency using RGB and RGBA.
• HSL and HSLA colour models.
• Opacity with the opacity property.
• Adding a font.
• Text formatting properties.
• Integrating an icon library.
• Overflow with text-overflow.
• Spacing with wrap-option and white-space.
• Colour effects and shadows with -webkit-text-fill-color and text-shadow.
• Columns with column-count and column-width.

Practical exercises:

• Format text with colours, bold, italics, etc.
• Use the CSS Multi-column Layout Module.

Module 7: page layout with CSS3 Flexbox

• Floating elements with float.
• Positioning sub-blocks within the main block.
• Arranging blocks by display order.
• Managing space allocated by parent blocks.
• Centring a block vertically.
• Positioning and sizing blocks for responsive design.

Practical exercises:

• Create a flexible, responsive layout.

Module 8: using CSS Grid Layout

• Introduction to grid-based layout.
• Designing a grid layout.
• Positioning grids on a page.
• Structuring and sizing parent grids for responsive design.

Practical exercises:

• Create a grid layout suitable for responsive design.

Module 9: selecting a CSS framework

• Overview of widely used CSS frameworks: Bootstrap, Foundation, Materialize, Pure, etc.
• Criteria for selecting a framework.
• Open-source CSS frameworks.
• Front-end frameworks.
• Frameworks for mobile development.

Practical exercises:

• Demonstration of several CSS frameworks.

Module 10: using SVG

• SVG syntax rules.
• SVG compatibility and image integration in HTML5 pages.
• Adding SVG fonts.
• Optimising SVG code.
• Animating SVG images.
• Overview of widely used SVG libraries: SVG.js, SNAP.svg, Raphaël, etc.

Practical exercises:

• Embed an animated SVG image in a web page.