{"id":21873204,"url":"https://github.com/nicolasvauchenet/cours_orga2","last_synced_at":"2026-04-12T09:44:48.283Z","repository":{"id":233891170,"uuid":"743427938","full_name":"nicolasvauchenet/cours_orga2","owner":"nicolasvauchenet","description":"Support de cours Fondamentaux du Développement Web Front-end","archived":false,"fork":false,"pushed_at":"2024-01-18T13:57:35.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T23:14:34.694Z","etag":null,"topics":["course","css","git","html","web-development"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicolasvauchenet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-15T08:07:43.000Z","updated_at":"2024-04-10T09:19:10.000Z","dependencies_parsed_at":"2024-04-19T13:31:36.623Z","dependency_job_id":null,"html_url":"https://github.com/nicolasvauchenet/cours_orga2","commit_stats":null,"previous_names":["nicolasvauchenet/cours_orga2"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nicolasvauchenet/cours_orga2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasvauchenet%2Fcours_orga2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasvauchenet%2Fcours_orga2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasvauchenet%2Fcours_orga2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasvauchenet%2Fcours_orga2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicolasvauchenet","download_url":"https://codeload.github.com/nicolasvauchenet/cours_orga2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasvauchenet%2Fcours_orga2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261828126,"owners_count":23215886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["course","css","git","html","web-development"],"created_at":"2024-11-28T07:07:05.164Z","updated_at":"2026-04-12T09:44:43.239Z","avatar_url":"https://github.com/nicolasvauchenet.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cours : Introduction au Développement Web Front-End\n\n## Vision globale :\n\nCe cours est conçu pour vous fournir une immersion complète dans le monde du développement web front-end. L'objectif est\nde vous donner une compréhension solide et pratique des technologies, des outils, et des meilleures pratiques\nactuellement utilisées dans l'industrie.\n\n## Apprentissage par la Pratique :\n\nAu cœur de ce cours se trouve un projet fil rouge, qui servira de plateforme d'application concrète pour les concepts\nabordés. Ce projet vous permettra de mettre en œuvre immédiatement les compétences acquises, renforçant ainsi votre\ncompréhension par une pratique réelle et continue.\n\n## Fondamentaux et Tendances actuelles :\n\nVous serez initiés aux fondamentaux du développement web, y compris l'HTML, le CSS, et une introduction légère au\nJavaScript. Le cours abordera également des sujets essentiels tels que le responsive design, l'accessibilité, le SEO, et\nles pratiques de sécurité web, vous préparant ainsi à répondre aux exigences actuelles du marché.\n\n## Outils et Workflow modernes :\n\nUne partie importante du cours sera dédiée à la familiarisation avec les outils de développement modernes et les\nworkflows. Cela inclut l'utilisation de VS Code, Git, Github, ainsi que des outils d'analyse et d'optimisation comme\nLighthouse et Wave. Ces compétences sont cruciales pour une intégration efficace dans un environnement de développement\nprofessionnel.\n\n## Objectif final :\n\nÀ la fin du cours, vous aurez non seulement acquis des connaissances théoriques, mais aussi développé un projet web\nfonctionnel que vous pourrez présenter comme preuve de vos compétences. Ce projet servira également de point de départ\npour votre exploration continue et votre apprentissage dans le domaine du développement web front-end.\n\n----\n\n## 01. Introduction au Web et bases du Développement Web Front-End\n\n### Objectifs :\n\n- Comprendre l'histoire et la structure du web\n- Installer et configurer les outils de développement essentiels\n- Démarrer le projet fil rouge avec HTML et CSS\n\n### Première partie :\n\n- Histoire et évolution du Web\n- Architecture Client-Serveur\n- Distinction Front-End / Back-End / DevOps\n\n### Seconde partie :\n\n- Présentation des outils de développement web front-end\n- Installation et Configuration de VS Code, Prettier, Live Server\n- Introduction à HTML et CSS\n- Présentation et vote pour le Projet fil rouge\n- Création de la Structure de Base du Projet fil rouge\n\n## 02. Design Web et outils de développement avancés\n\n### Objectifs :\n\n- Comprendre et appliquer les principes de design web\n- Initier les apprenants à SASS et Figma\n- Intégrer les designs dans le projet fil rouge\n\n### Première partie :\n\n- Principes de Responsive Design et approche Mobile-First\n- Introduction à SASS et ses avantages\n\n### Seconde partie :\n\n- Utilisation de Figma pour les Wireframes et les Maquettes graphiques\n- Application des Styles avec CSS/SASS dans le Projet\n- Revue de code et feedback\n\n## 03. Gestion de Version et approfondissement du CSS\n\n### Objectifs :\n\n- Maîtriser les fondamentaux de Git et Github\n- Approfondir les compétences en CSS et SASS\n- Utiliser l'inspecteur web pour le débogage et l'exploration\n\n### Première partie :\n\n- Gestion des Issues et Versionnement du Projet\n- Présentation de Git et Github, Gitlab, Bitbucket\n\n### Seconde partie :\n\n- Techniques avancées en CSS/SASS\n- Exploration de l'Inspecteur Web pour le développement et le débogage\n- Revue de code et feedback\n\n## 04. Performance, Accessibilité, SEO, RGPD\n\n### Objectifs :\n\n- Optimiser le site pour la performance, l'accessibilité et le SEO\n- Comprendre et appliquer les règles du RGPD\n\n### Première partie :\n\n- Utilisation de Lighthouse et Wave pour l'analyse de Performance\n- Optimisation du Projet (Performance, Accessibilité, SEO)\n\n### Seconde partie :\n\n- Finalisation des implémentations pour le Projet\n- Revue de code et feedback\n\n## 05. Sécurité Web, Recettage et Déploiement\n\n### Objectifs :\n\n- Comprendre les bases de la Sécurité Web\n- Comprendre les bases du recettage et du déploiement\n- Déployer un Projet\n\n### Première partie :\n\n- Introduction aux concepts de Sécurité Web\n- Application des pratiques de Sécurité au Projet\n- Introduction au recettage et au déploiement\n- Déploiement du Projet sur Github Pages\n\n### Seconde partie :\n\n- Présentation des Projets, discussion collective et feedback\n- Quizz final\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasvauchenet%2Fcours_orga2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolasvauchenet%2Fcours_orga2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasvauchenet%2Fcours_orga2/lists"}