exercices-html-css-dwwm

Exercices HTML/CSS – Formation DWWM Réalisés par : Attar Latifa Dates : Mars & Avril 2023 Formation Développeur Web et Web Mobile (DWWM)

Contenu du dépôt Ce dépôt regroupe trois exercices pratiques réalisés pendant la formation DWWM, visant à explorer différentes techniques de structuration et de mise en page web en HTML et CSS (avec Bootstrap ou Sass).

Exercice 1 – Page structurée avec colonnes et menu

Exercice 2 – Istanbul avec Bootstrap

Exercice 3 – Fiche produit responsive avec Sass

Exercice 1 – Page structurée avec colonnes et menu Date : 09/04/2023 Objectif : Mise en page HTML/CSS modulaire sans framework

Description Mise en page complète d’un site statique comprenant :

Un header avec logo et pub

Une barre de navigation horizontale

Un main en trois colonnes : gauche (article), centre (texte/images), droite (actualité)

Un footer simple

Objectifs pédagogiques Structurer une page en HTML sémantique

Utiliser float, inline-block, flexbox, et box-sizing

Appliquer des styles CSS réutilisables avec des classes modulaires

Créer un menu horizontal et gérer l’alignement des images

Techniques utilisées float pour la mise en page

flexbox pour .main-content

Classes utilitaires : .clear, .article-title--bk, etc.

Centrage via un conteneur fixe #wrapper

Responsive design Mise en page fixe de 990px

Pas de media queries pour ce projet, mais une bonne base pour introduire le responsive design

Exercice 2 – Istanbul avec Bootstrap Date : 09/04/2023 Objectif : Créer une page responsive avec Bootstrap 5

Description Page dédiée à la ville d’Istanbul avec une structure responsive :

Un header avec titre + navigation

Un main composé :

D’une section à 3 médias (image + texte)

D’une grille de 4 cartes Bootstrap

Un footer simple centré avec fond gris

Technologies utilisées HTML5 / CSS3

Bootstrap 5.3 via CDN

Responsive mobile-first

Flexbox & Grid de Bootstrap

Images et performances Utilisation de img-fluid pour les images adaptatives

Versions redimensionnées pour mobile (ex: ist1-260.jpg)

Responsive design Mobile-first

Navigation verticale en mobile, horizontale à partir de 769px

Layout flex en ligne dès 769px

Optimisation des espacements à partir de 992px

Objectifs pédagogiques Appliquer Bootstrap pour structurer une page

Créer des composants avec card, nav, grid

Optimiser le rendu des images selon les tailles d’écran

Exercice 3 – Fiche produit responsive avec Sass Objectif : Créer une fiche produit responsive en utilisant Sass et Flexbox

Technologies utilisées HTML5

SCSS (Sass) compilé en CSS

Flexbox

Media Queries

Google Fonts (BenchNine)

Fonctionnalités clés Mise en page responsive avec flex-wrap, justify-content

Navigation horizontale et logo centralisé via Flexbox

Images responsives avec effets au survol (figcaption)

Sass utilisé pour :

Variables (couleurs, tailles)

@mixin, @extend pour éviter la répétition

Organisation modulaire possible

Objectifs pédagogiques Maîtriser les bases de Sass : variables, mixins, extend…

Créer une interface responsive avec Flexbox

Organiser proprement son CSS avec un préprocesseur

Ajouter des effets visuels simples (hover, figcaption)

Conclusion Ces trois exercices illustrent différents aspects de la création de sites web modernes :

Exercice Approche Technologies Objectif 1 Mise en page modulaire HTML, CSS Structuration manuelle 2 Responsive avec framework HTML, CSS, Bootstrap Design adaptatif 3 Préprocesseur CSS HTML, Sass, Flexbox Organisation & responsive