Formation HTML et CSS : les bases du développement web

Que sont HTML et CSS ?

HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont les deux langages que tout navigateur utilise pour afficher une page web. HTML décrit la structure et le sens du contenu : titres, paragraphes, liens, images, formulaires. CSS décrit sa présentation : couleurs, typographie, espacements, mise en page et adaptation à chaque taille d’écran.

HTML n’est pas un langage de programmation mais un langage de balisage, et CSS un langage de feuilles de style. Le troisième langage du navigateur, JavaScript, ajoute l’interactivité ; il n’est pas traité dans cette formation. HTML est aujourd’hui un standard vivant, maintenu par le WHATWG, et CSS évolue module par module au W3C : Flexbox, Grid, variables, requêtes média.

Une première étape pour devenir développeur web

Devenir développeur web demande plusieurs compétences : HTML et CSS pour l’interface, JavaScript pour l’interactivité, puis un framework front-end, un langage côté serveur, une base de données et Git. Cette formation couvre la première marche, celle sur laquelle repose tout le reste : à la fin, vous savez construire un site responsive et le mettre en ligne, sans JavaScript.

Sur Dyma, elle ouvre le parcours « Devenir développeur front-end », qui continue avec la formation JavaScript, puis TypeScript, Tailwind et la formation React. Toutes les formations du domaine sont dans le catalogue des formations web.

Pour qui est cette formation ?

Pour les débutants qui veulent créer leurs premières pages web, pour les personnes en reconversion qui visent le développement web, pour les designers qui veulent passer de la maquette au code, et pour les développeurs back-end qui veulent maîtriser la mise en page en CSS. Aucune connaissance préalable n’est demandée : la formation commence par le fonctionnement d’Internet et l’installation de l’éditeur.

Ce n’est pas une formation complète de développeur web : elle ne traite ni JavaScript, ni les frameworks, ni le développement côté serveur.

Ce que vous saurez faire

• Structurer une page avec les éléments HTML sémantiques, les liens, les images, les listes, les tableaux et les formulaires.
• Cibler les éléments avec les sélecteurs, les classes, les pseudo-classes et les pseudo-éléments, et comprendre l’ordre d’application du CSS.
• Maîtriser le modèle de boîte, les unités (px, em, rem, unités de viewport), la position et la propriété display.
• Mettre en page avec Flexbox et avec CSS Grid, y compris les zones de grille et le placement automatique.
• Rendre un site responsive avec les requêtes média, du téléphone au grand écran.
• Ajouter des ombres, des dégradés, des filtres, des transitions, des transformations et des animations.
• Utiliser les variables CSS et la fonction calc().
• Organiser vos styles avec Sass : variables, partials, imbrication, héritage, mixins et fonctions.
• Déboguer une page avec l’inspecteur du navigateur.
• Versionner votre site avec Git, le publier sur GitHub, le déployer sur Netlify avec votre nom de domaine et recevoir les messages de son formulaire de contact.

Le programme

Après le fonctionnement d’Internet et la mise en place de l’environnement de travail avec Visual Studio Code, la formation pose les bases du HTML : structure d’une page, attributs et métadonnées, liens et images, listes et tableaux, formulaires, éléments sémantiques. Le chapitre sur les bases du CSS couvre les sélecteurs, l’inspecteur du navigateur, le texte, les unités, les couleurs, la cascade, les dimensions, le modèle de boîte, la position et l’empilement.

Chaque grande étape se termine par un projet. Café Florette, un site de trois pages avec une page de contact accessible, que vous rendez ensuite responsive. Agence Ledor, la page d’une agence immobilière construite avec Flexbox. Une page inspirée du site Medium, construite avec CSS Grid. Entre ces projets : le responsive design, les boîtes flexibles, le CSS avancé et les grilles.

La formation se termine par Sass, puis par un dernier projet : votre CV, avec des animations et une version responsive. Vous le versionnez avec Git, le publiez sur GitHub et le déployez sur Netlify, relié à un nom de domaine acheté chez OVHcloud, avec un formulaire de contact géré par Netlify Forms.