Objectifs

• Acquérir les compétences nécessaires à la production d’un site web professionnel
• Maîtriser un environnement de développement web
• Respecter les normes et les bonnes pratiques de l’intégration web
• Automatiser la production de pages web à partir de données structurées
• Comprendre l’ensemble du processus de création d’un site web, de la conception graphique à la mise en ligne

Démarche

Pour cette SAE, l'objectif était de produire le maximum de composants issus d'un UI Kit sur Figma. Ensuite grâce à ceux la ils fallait produire un site One Page d'une Start up. Voici les étapes que j'ai suivies :

• Intégration
• Développement
• Hébergement

Intégration

J'ai utilisé un UI Kit Figma pour créer une mini maquette One Page. Ensuite, j'ai intégré les composants (header, nav, hero, footer, etc...) en HTML/CSS. J'ai organisé le projet en une structure particulière (dossiers components/css/etc...). Le développement a été progressif nous avons commencé par les composants de niveau L1, puis L2 et L3.

Développement

J'ai séparé le fond et la forme avec des templates HTML, des fichiers JSON contenant les données, et des scripts JS pour injecter les données dans les templates. J'ai généré dynamiquement la page One Page complète à partir des données.

Hébergement

J'ai mis en ligne le site en l’hébergeant avec PulseHeberg pour le rendre accessible en ligne.

Ressources utilisées

R2.11 : Intégration web
Cette ressource m'a aidé à coder de manière sementique et efficace le code html/css.

R2.12 : Développement web
Cette ressource m'a permis d'apprendre à bien utiliser JavaScript avant de débuter la SAE.

R1.13 : Hébergement web
Cette ressource m'a aidé à comprendre les protocoles SSH et SFTP ainsi que l'utilisation d'Apache pour l'hébergement, la ressource m'a aussi apppris à sécuriser notre propre site web.

Bilan

Cette SAE m'a permis d'avoir une mise en pratique du développement web de manière un plus professionnel. J'ai appris à travailler de manière structuré en organisant proprement mes fichiers dans chaque composants mais aussi en utilisant un UI kit comme le ferait un UI/UX dans le monde du travail. Cela m'a aidé à respecter une cohérence graphique et à mieux planifier mes composants. J'ai approfondi la logique d'automatisation via les templates et les fichiers JSON. J'ai également gagné en autonomie sur mon environnement de développement : j'ai appris à utiliser des outils comme Prettier, à faire des validations W3C, à corriger mes erreurs dans la console, et à penser mobile first dès le départ. Enfin, la phase d’hébergement m'a fait prendre conscience de l'importance de la mise en ligne et des aspects techniques qu'elle implique.