Front-end web development
HTML5 and CSS3: structure, layout and responsive
Build clean, accessible web pages adapted to every screen, from structure to design.
- Duration
- 21 h · 3 days
- Level
- Beginner
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program teaches how to build web pages from A to Z with HTML5 and CSS3. It starts from a page's semantic structure, styles it with style sheets, then makes everything adapt to phones, tablets and computers. The last day is devoted to responsive design, accessibility and the tools that let you check a site's quality before going live.
Who this program is for
- Future web developers and career changers
- Communication or marketing officers who edit web pages
- Students and self-taught learners who want to consolidate their basics
Prerequisites
- Knowing how to use a computer, a browser and a text editor
- No programming knowledge required
Learning objectives
- Structure a page with HTML5 semantic tags
- Insert text, lists, links, tables, images and media
- Create forms and control their input
- Style with selectors, the cascade, Flexbox and Grid
- Adapt a page to every screen with a mobile-first approach
- Check a site's accessibility and quality before publication
Detailed curriculum
6 modules · 21 h · 3 days
Day 1
Structure a page with HTML5
30% theory · 70% practice
- Anatomy of a page: doctype, head, body, metadata
- Semantic tags: header, nav, main, section, article, footer
- Headings, paragraphs, lists and links
- Responsive images, audio, video and SVG
- Code validation with W3C tools
🛠 Hands-on workshops
Presentation page1 h
Create the structure of a presentation page with its content.
✅ Deliverable : A valid, semantic HTML page
Tables and forms
30% theory · 70% practice
- Accessible data tables
- Fields, labels and HTML5 input types
- Native validation without JavaScript
- Grouping and organizing fields
- Help messages and form accessibility
🛠 Hands-on workshops
Contact form1 h
Build a complete form with native input checks.
✅ Deliverable : A form validated by the browser
Day 2
CSS3 basics
30% theory · 70% practice
- Linking a style sheet and writing a rule
- Selectors, pseudo-classes and specificity
- Cascade, inheritance and code organization
- Colors, typography and backgrounds
- CSS variables to centralize a theme
🛠 Hands-on workshops
Style the page1.5 h
Style the presentation page with a simple graphic charter.
✅ Deliverable : A styled page with CSS variables
Layout: boxes, Flexbox and Grid
30% theory · 70% practice
- Box model, margins, borders and display
- Positioning: static, relative, absolute, sticky
- Flexbox: aligning and distributing elements
- CSS Grid: composing a page as a grid
- Choosing between Flexbox and Grid
🛠 Hands-on workshops
Compose a page in a grid1.5 h
Build a complete layout with header, content and footer.
✅ Deliverable : A Grid + Flexbox layout
Day 3
Responsive design and mobile first
30% theory · 70% practice
- Principles of mobile first and the viewport
- Media queries and user preferences
- Fluid units, clamp() and image ratios
- Introduction to container queries
- Adapting menus, images and grids
🛠 Hands-on workshops
Make the site responsive1.5 h
Adapt the page to three screen sizes.
✅ Deliverable : A fluid site tested on mobile, tablet and desktop
Accessibility, frameworks and quality
30% theory · 70% practice
- Accessibility basics: contrast, ARIA, keyboard navigation
- Overview of Tailwind CSS and Bootstrap
- Control tools: DevTools, Lighthouse, validators
- Optimizing images and resources
- Organizing a project before going live
🛠 Hands-on workshops
Quality audit1 h
Audit a page and fix the main issues found.
✅ Deliverable : An audit report and the corrected page
Tools and technologies
BootstrapCSS3HTML5Visual Studio Code
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor (Visual Studio Code) and a recent browser
Resources provided
- Course materials and repository of corrected exercises
- HTML and CSS cheat sheet
- Bank of images and mockups for the exercises
Career outcomes
- A complete, responsive and accessible web page
- Autonomy to integrate a mockup
- A foundation to learn JavaScript
Related video courses
My video courses that go with this program, to get ready for the training or to review afterwards. Free with an account.
