Formation Développement Web - Niveau 1 : Créez vos premières pages interactives

Activités préparatoires

Un test de positionnement : il permet d'évaluer vos compétences en début de formation.

Pour les formations à distance :

• Une formation de prise en main à notre outil de classe à distance.
• Présentation des ressources pédagogiques qui seront utilisées pendant la formation.

Découvrir les fondations du HTML

• Comprendre la structure d’une page HTML.
• Ajouter un titre de page.
• Insérer des titres de section pour hiérarchiser l’information.
• Écrire un paragraphe clair et lisible.

Manipuler les éléments de base

• Utiliser des éléments imbriqués pour organiser le contenu.
• Ajouter des attributs simples (langue, identifiant, classe…).
• Insérer des commentaires pour documenter le code.

Enrichir et mettre en forme le contenu

• Ajouter une image avec son titre/attribut alt.
• Créer un lien hypertexte avec href.
• Utiliser un élément conteneur en ligne (span).
• Appliquer des éléments de mise en forme (strong, em…).

Interagir avec l’utilisateur

• Créer un formulaire simple dans une page.
• Ajouter des champs de saisie (texte, email, mot de passe, bouton).
• Soumettre un formulaire et comprendre le rôle de l’attribut action.

Logique et contrôle du code

• Utiliser des opérateurs booléens (&&, ||, !).
• Créer un workflow conditionnel avec if, else if, else.
• Créer des boucles simples (for, while) pour automatiser des répétitions.

Construire et organiser son propre code

• Créer sa propre fonction pour réutiliser du code.
• Comprendre la portée des variables dans une fonction.

Manipuler les données en JavaScript

• Appliquer des opérations simples aux chaînes de caractères (length, toUpperCase, substring).
• Appliquer des opérations simples aux tableaux (push, pop, indexOf, length).
• Reconnaître et écrire des documents JSON pour représenter des données structurées.

Interagir avec la page web

• Réagir à des événements DOM de base (onclick, onchange, onmouseover).
• Exemple pratique : déclencher une action au clic d’un bouton.

Styliser le texte

• Changer la taille de police (font-size).
• Modifier la couleur du texte (color).
• Exemple pratique : créer une hiérarchie visuelle claire entre titres et paragraphes.

Personnaliser les arrière-plans

• Appliquer une image de fond (background-image).
• Utiliser un dégradé de couleurs (gradient) (linear-gradient, radial-gradient).
• Ajuster l’affichage (background-repeat, background-size, background-position).
• Exemple pratique : ajouter un bandeau avec un fond personnalisé.

Mettre en valeur avec des bordures

• Ajouter une bordure à un élément (border-width, border-style, border-color).
• Créer des styles variés (pleine, pointillée, en relief).
• Exercice : encadrer un bloc de contenu pour le faire ressortir.

Gérer les espaces d’un élément

• Paramétrer les marges externes (margin) pour espacer les éléments entre eux.
• Paramétrer la zone de remplissage interne (padding) pour aérer le contenu.
• Comprendre la logique du box model (contenu, padding, bordure, margin).
• Exercice pratique : créer une carte de contenu (bloc texte + image) avec un design équilibré.

Importer des fichiers CSS et JavaScript

• Différencier le code interne et les fichiers externes.
• Importer un fichier CSS externe avec link.
• Importer un fichier JavaScript externe.
• Bonnes pratiques d’organisation : séparer le style, la structure et les interactions.
• Exercice pratique : créer une page HTML connectée à un fichier style.css et script.js.

Modifier dynamiquement le DOM

• Sélectionner un élément avec getElementById et querySelector.
• Modifier son contenu (innerText, innerHTML).
• Modifier ses styles directement depuis JavaScript.
• Ajouter ou supprimer des classes avec classList.
• Exercice pratique : changer la couleur et le texte d’un bouton lorsqu’on clique dessus.

Détecter et corriger des erreurs simples

• Comprendre les messages d’erreur dans la console du navigateur.
• Identifier une erreur de syntaxe (point-virgule, accolades, parenthèses).
• Identifier une erreur de logique simple (mauvais sélecteur, variable non définie).
• Outils pratiques : console.log() pour tester et vérifier ses valeurs.
• Exercice pratique : analyser un petit code erroné, trouver et corriger l’erreur.

Passage de la certification TOSA® en ligne

asbéo est centre agréé TOSA
Reconnue dans toute l'Europe, la certification TOSA® atteste d'un niveau de compétences sur le logiciel étudié. Elle délivre un score sur 1000 exploitable sur un CV.

Faut-il savoir coder auparavant ?

Non, cette formation part de zéro.

Quel matériel est nécessaire ?

Un ordinateur avec navigateur, éditeur de texte, connexion internet.

Puis-je financer cela via le CPF / formation professionnelle ?

Oui, selon votre situation.

Puis-je faire cette formation en soirée / week-end ?

Oui, nous disposons d'une offre Soir & Week-end.