← Back to training
Training plan · Development · Beginner to Intermediate
Frontend Web Development (HTML, CSS, JS)
Intensive 3-day training to learn frontend web development: HTML5, CSS3 (Flexbox, Grid, Animations), JavaScript (DOM, Fetch API) and final project deployed online.
Duration
3 jours (21h)
Format
On-site
Prerequisites
None (basic computer skills)
Audience
Programming beginners, interns, comms officers
1
Day 1 — HTML: Structure & Semantics
1j- Introduction to web: client/server, HTTP, URL, DNS, hosting
- Editor: VS Code, extensions, Emmet, Live Server
- HTML structure: DOCTYPE, html, head, body, meta, title
- Semantic tags: header, nav, main, section, article, aside, footer
- Text: h1-h6, p, strong, em, span, br, hr
- Links: a href, anchors, target, title, rel
- Images: img src, alt, width, height, figure, figcaption
- Lists: ul, ol, li, dl, dt, dd
- Tables: table, thead, tbody, tr, th, td, colspan, rowspan
- Forms: form, input, textarea, select, button
- Intensive lab 1: create a complete web page: homepage + contact form + data table
2
Day 1 — CSS: Styling & Layout
- CSS intro: selectors, properties, values, cascade, specificity
- Colors: hex, rgb, rgba, hsl, linear/radial gradients
- Text: font-family, size, weight, style, line-height, text-align, decoration
- Box model: margin, padding, border, width, height, box-sizing
- Background: color, image, repeat, position, size, attachment
- Flexbox: display flex, direction, wrap, justify-content, align-items, gap
- Grid: display grid, template columns/rows, gap, areas
- Position: static, relative, absolute, fixed, sticky, z-index
- Responsive: media queries, mobile-first, breakpoints, viewport
- Intensive lab 2: reproduce a complete showcase site mockup (header, hero, services, footer) with Flexbox and Grid
3
Day 2 — Advanced CSS & Modern Design
1j- Pseudo-classes: hover, focus, active, nth-child, not, is, has
- Pseudo-elements: before, after, content, quotes
- Transitions: property, duration, timing, delay
- Transforms: rotate, scale, translate, skew, transform-origin
- Animations: @keyframes, animation-name, duration, iteration, direction
- CSS variables: custom properties, var(), inheritance, fallback
- CSS filters: blur, brightness, contrast, grayscale, sepia
- Shadows: box-shadow, text-shadow, drop-shadow
- Fonts: @font-face, Google Fonts, Font Awesome, SVG icons
- Intensive lab 3: create an animated landing page with CSS transitions, transforms and animations
4
Day 2 — JavaScript: The Basics
- JS intro: variables (var, let, const), types (string, number, boolean, null, undefined)
- Operators: arithmetic, comparison, logical, ternary
- Conditions: if/else, else if, switch, short-circuit
- Functions: declaration, expression, arrow, parameters, return
- Arrays: creation, push, pop, forEach, map, filter, find
- Objects: creation, properties, methods, this
- DOM: getElementById, querySelector, textContent, innerHTML, style
- Events: addEventListener, click, submit, mouseover, keydown, scroll
- Intensive lab 4: create an interactive page with DOM manipulation (burger menu, accordion, tabs, slider)
5
Day 3 — Advanced JavaScript & APIs
1j- Advanced functions: callbacks, closures, setTimeout, setInterval
- Promises and async/await: fetch(), then/catch, try/catch
- Fetch API: GET, POST, JSON, headers, error handling
- Storage: localStorage, sessionStorage, cookies
- Forms: validation, regex, preventDefault, FormData
- ES6+: destructuring, spread/rest, template literals, import/export modules
- Intensive lab 5: create a weather app with fetch API + localStorage + form validation
6
Day 3 — Final Project: Complete Website
- Specifications: define pages, features and design
- HTML structure: pages, navigation, forms
- CSS styling: responsive, animations, visual theme
- JS interactivity: menu, slider, form, API
- Testing: responsive, HTML/CSS validation, Lighthouse performance
- Deployment: GitHub Pages / Netlify / Vercel, domain name
- Presentation: demonstrate the site and explain technical choices
- Assessment and certification: frontend skills grid
This plan is customizable
Suitable for complete beginners as well as those with some basics. The final project can be your own website.