AP-M1: HTML-CSS

Création de pages web statiques avec HTML et CSS

Création de pages web statiques avec HTML et CSS

HTML et CSS
calendar_today Septembre 2023
folder AP

Compte-rendu : AP-M1 HTML & CSS

Introduction

L'AP-M1 HTML & CSS avait pour objectif principal de me familiariser avec les bases des langages de structuration et de mise en forme web, HTML5 et CSS3. Cette activité individuelle, réalisée en début de première année de BTS SIO, s'est appuyée sur le MOOC Créez votre site web avec HTML5 et CSS3 d'OpenClassrooms. Elle m'a permis de développer mon autonomie et mes compétences en auto-apprentissage tout en consolidant les fondamentaux du développement web.

À l'issue de cette activité, j'ai acquis la capacité de créer et d'améliorer des pages web statiques en utilisant HTML5 et CSS3, tout en utilisant des ressources externes pour approfondir certains aspects techniques.

Outils et Méthodes

Pour mener à bien cette activité, j'ai utilisé plusieurs outils :

  • Navigateur web : pour suivre le MOOC et tester mes réalisations.
  • Visual Studio Code : environnement de développement pour coder et tester le rendu des pages.
  • CodePen.io : plateforme en ligne permettant d'expérimenter et de visualiser du code en temps réel.
  • GitHub : gestionnaire de versions pour suivre l'évolution de mes projets.
  • Tableur collaboratif : utilisé pour tracer et partager l'avancement de mon activité avec mes enseignants et camarades.

Le cours était structuré en plusieurs modules combinant vidéos explicatives, exercices pratiques et quiz d'évaluation.

Réalisations et Résultats

Partie 1 : Maîtriser les bases de HTML5

Application pratique des concepts appris :

  • Création d'une page web simple avec les balises de base : <html>, <head>, <body>.
  • Structuration correcte du contenu avec des titres, paragraphes et listes.
  • Mise en place de liens hypertextes et d'éléments multimédias.

Résumé des concepts clés :

  • Structure d'une page HTML5.
  • Différence entre HTML et CSS.
  • Organisation du texte et gestion des liens hypertextes.
Partie 2 : Mise en forme avec CSS3

Application pratique des concepts appris :

  • Application de styles CSS via un fichier externe (<link>).
  • Expérimentation avec les propriétés de texte, bordures et ombres.

Résumé des concepts clés :

  • Organisation du code CSS externe.
  • Techniques de stylisation : couleurs, polices, bordures.
  • Introduction aux transitions CSS.
Partie 3 : Agencement du contenu avec CSS

Application pratique des concepts appris :

  • Utilisation de Flexbox et CSS Grid pour structurer une page web.
  • Mise en page responsive grâce aux Media Queries.

Résumé des concepts clés :

  • Utilisation des balises <header>, <nav>, <main>, <footer>.
  • Modèle de boîtes CSS.
  • Introduction aux systèmes de mise en page Flexbox et Grid.
Partie 4 : Fonctionnalités avancées de HTML & CSS

Application pratique des concepts appris :

  • Création de formulaires interactifs.
  • Utilisation avancée des Media Queries pour adapter le site aux écrans mobiles.

Résumé des concepts clés :

  • Création et manipulation de tableaux.
  • Gestion des formulaires HTML avec boutons d'envoi.
  • Approfondissement du responsive design.

Galerie du projet

Voici quelques captures d'écran des pages web réalisées pendant ce projet:

Capture d'écran du projet HTML-CSS
Capture d'écran du projet HTML-CSS
Capture d'écran du projet HTML-CSS
Capture d'écran du projet HTML-CSS
Capture d'écran du projet HTML-CSS
Capture d'écran du projet HTML-CSS
Capture d'écran du projet HTML-CSS

Conclusion

Cette activité m'a permis de consolider mes compétences en HTML et CSS, en me donnant les bases nécessaires pour structurer et styliser un site web de manière professionnelle. J'ai appris à organiser mon code, à appliquer des styles cohérents et à rendre mes pages adaptables aux différents supports.

De plus, cette première approche m'a aidé à gagner en autonomie et en méthode pour l'apprentissage de nouveaux langages web.

HTML5 CSS3 Responsive Design Flexbox CSS Grid Media Queries Formulaires