Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nicolasvauchenet/cours_orga2

Support de cours Fondamentaux du Développement Web Front-end
https://github.com/nicolasvauchenet/cours_orga2

course css git html web-development

Last synced: 11 days ago
JSON representation

Support de cours Fondamentaux du Développement Web Front-end

Awesome Lists containing this project

README 

        
# Cours : Introduction au Développement Web Front-End



## Vision globale :



Ce cours est conçu pour vous fournir une immersion complète dans le monde du développement web front-end. L'objectif est

de vous donner une compréhension solide et pratique des technologies, des outils, et des meilleures pratiques

actuellement utilisées dans l'industrie.



## Apprentissage par la Pratique :



Au cœur de ce cours se trouve un projet fil rouge, qui servira de plateforme d'application concrète pour les concepts

abordés. Ce projet vous permettra de mettre en œuvre immédiatement les compétences acquises, renforçant ainsi votre

compréhension par une pratique réelle et continue.



## Fondamentaux et Tendances actuelles :



Vous serez initiés aux fondamentaux du développement web, y compris l'HTML, le CSS, et une introduction légère au

JavaScript. Le cours abordera également des sujets essentiels tels que le responsive design, l'accessibilité, le SEO, et

les pratiques de sécurité web, vous préparant ainsi à répondre aux exigences actuelles du marché.



## Outils et Workflow modernes :



Une partie importante du cours sera dédiée à la familiarisation avec les outils de développement modernes et les

workflows. Cela inclut l'utilisation de VS Code, Git, Github, ainsi que des outils d'analyse et d'optimisation comme

Lighthouse et Wave. Ces compétences sont cruciales pour une intégration efficace dans un environnement de développement

professionnel.



## Objectif final :



À la fin du cours, vous aurez non seulement acquis des connaissances théoriques, mais aussi développé un projet web

fonctionnel que vous pourrez présenter comme preuve de vos compétences. Ce projet servira également de point de départ

pour votre exploration continue et votre apprentissage dans le domaine du développement web front-end.



----



## 01. Introduction au Web et bases du Développement Web Front-End



### Objectifs :



- Comprendre l'histoire et la structure du web

- Installer et configurer les outils de développement essentiels

- Démarrer le projet fil rouge avec HTML et CSS



### Première partie :



- Histoire et évolution du Web

- Architecture Client-Serveur

- Distinction Front-End / Back-End / DevOps



### Seconde partie :



- Présentation des outils de développement web front-end

- Installation et Configuration de VS Code, Prettier, Live Server

- Introduction à HTML et CSS

- Présentation et vote pour le Projet fil rouge

- Création de la Structure de Base du Projet fil rouge



## 02. Design Web et outils de développement avancés



### Objectifs :



- Comprendre et appliquer les principes de design web

- Initier les apprenants à SASS et Figma

- Intégrer les designs dans le projet fil rouge



### Première partie :



- Principes de Responsive Design et approche Mobile-First

- Introduction à SASS et ses avantages



### Seconde partie :



- Utilisation de Figma pour les Wireframes et les Maquettes graphiques

- Application des Styles avec CSS/SASS dans le Projet

- Revue de code et feedback



## 03. Gestion de Version et approfondissement du CSS



### Objectifs :



- Maîtriser les fondamentaux de Git et Github

- Approfondir les compétences en CSS et SASS

- Utiliser l'inspecteur web pour le débogage et l'exploration



### Première partie :



- Gestion des Issues et Versionnement du Projet

- Présentation de Git et Github, Gitlab, Bitbucket



### Seconde partie :



- Techniques avancées en CSS/SASS

- Exploration de l'Inspecteur Web pour le développement et le débogage

- Revue de code et feedback



## 04. Performance, Accessibilité, SEO, RGPD



### Objectifs :



- Optimiser le site pour la performance, l'accessibilité et le SEO

- Comprendre et appliquer les règles du RGPD



### Première partie :



- Utilisation de Lighthouse et Wave pour l'analyse de Performance

- Optimisation du Projet (Performance, Accessibilité, SEO)



### Seconde partie :



- Finalisation des implémentations pour le Projet

- Revue de code et feedback



## 05. Sécurité Web, Recettage et Déploiement



### Objectifs :



- Comprendre les bases de la Sécurité Web

- Comprendre les bases du recettage et du déploiement

- Déployer un Projet



### Première partie :



- Introduction aux concepts de Sécurité Web

- Application des pratiques de Sécurité au Projet

- Introduction au recettage et au déploiement

- Déploiement du Projet sur Github Pages



### Seconde partie :



- Présentation des Projets, discussion collective et feedback

- Quizz final