Scribd
Importer
15 vues10 pages

Formation HTML CSS Pro Dev Web

La formation couvre les bases et les techniques avancées de HTML et CSS, incluant la structure de pages web, le CSS pour la stylisation, et des concepts comme le Box Model, Flexbox, et CSS Grid. Les modules abordent également la création de formulaires, le design responsive avec media queries, ainsi que les transitions et animations CSS. Le projet final consiste à créer un site web responsive intégrant toutes ces compétences.

Transféré par

2vsktyy5zg
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
15 vues10 pages

Formation HTML CSS Pro Dev Web

La formation couvre les bases et les techniques avancées de HTML et CSS, incluant la structure de pages web, le CSS pour la stylisation, et des concepts comme le Box Model, Flexbox, et CSS Grid. Les modules abordent également la création de formulaires, le design responsive avec media queries, ainsi que les transitions et animations CSS. Le projet final consiste à créer un site web responsive intégrant toutes ces compétences.

Transféré par

2vsktyy5zg
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 10

Formation HTML & CSS - Devenez un As du Développement Web

Module 1 : Introduction à HTML

HTML (HyperText Markup Language) structure le contenu d'une page web.

Exemple :

<!DOCTYPE html>

<html>

<head><title>Page Test</title></head>

<body>

<h1>Titre</h1>

<p>Paragraphe</p>

</body>

</html>

Explications :

- <!DOCTYPE html> : déclaration du type de document (HTML5)

- <html> : balise racine

- <head> : contient les métadonnées

- <body> : contient le contenu visible


Formation HTML & CSS - Devenez un As du Développement Web

Module 2 : Structure avancée en HTML

HTML sémantique améliore l'accessibilité et la structure logique.

Balises : <header>, <nav>, <section>, <article>, <aside>, <footer>

Exemple :

<header>Mon site</header>

<nav><a href='#'>Accueil</a></nav>

<main><section><article>Contenu</article></section></main>

<footer>Pied</footer>
Formation HTML & CSS - Devenez un As du Développement Web

Module 3 : Introduction au CSS

CSS permet de styliser les balises HTML.

Exemple :

<style>

p { color: blue; font-size: 16px; }

</style>

Explications :

- color : définit la couleur du texte

- font-size : taille de police


Formation HTML & CSS - Devenez un As du Développement Web

Module 4 : Mise en forme CSS (box model)

Box Model : chaque élément HTML est une boîte composée de :

content, padding, border, margin

Exemple :

div {

margin: 10px;

padding: 20px;

border: 1px solid black;

Explications :

- margin : espace externe

- padding : espace interne

- border : bordure
Formation HTML & CSS - Devenez un As du Développement Web

Module 5 : Positionnement et Flexbox

Flexbox : système moderne d'alignement.

Exemple :

.container {

display: flex;

justify-content: space-between;

Explications :

- display: flex : active le mode flex

- justify-content : aligne horizontalement


Formation HTML & CSS - Devenez un As du Développement Web

Module 6 : CSS Grid Layout

Grid permet de créer des grilles complexes en 2D.

Exemple :

.container {

display: grid;

grid-template-columns: 1fr 1fr;

Explications :

- grid-template-columns : crée deux colonnes de taille égale


Formation HTML & CSS - Devenez un As du Développement Web

Module 7 : Formulaires HTML & CSS

Champs de formulaire :

<input>, <textarea>, <select>

Exemple :

<form>

<input type='text' placeholder='Votre nom'>

</form>

CSS :

input {

border: 1px solid #ccc;

padding: 10px;

Explication : styliser les champs pour les rendre lisibles et interactifs


Formation HTML & CSS - Devenez un As du Développement Web

Module 8 : Responsive Design & Media Queries

Design adaptable aux écrans.

Exemple :

@media (max-width: 600px) {

body {

background: lightgray;

Explication : si la largeur de l'écran est inférieure à 600px, appliquer un fond gris


Formation HTML & CSS - Devenez un As du Développement Web

Module 9 : Transitions et animations CSS

Apport d'interactivité visuelle.

Exemple :

.button {

transition: background 0.3s ease;

.button:hover {

background: blue;

Explication : le fond devient bleu avec une transition douce au survol


Formation HTML & CSS - Devenez un As du Développement Web

Module 10 : Projet final complet

Objectif : créer un site responsive avec HTML & CSS

Structure :

- Header avec logo et navigation

- Main avec section d'accueil et contenu

- Footer avec mentions légales

Utilisation combinée de Flexbox, Grid, Media Queries et styles avancés pour un rendu professionnel.

Vous aimerez peut-être aussi