Coder un site de A à Z
Créer un site professionnel et responsive
Bienvenue dans ce cours "Coder un site professionnel et responsive de A à Z".
La théorie, c'est bien, mais il faut aussi mettre la main à la patte et construire de vrais projets afin de parfaire son apprentissage du web.
Dans ce cours, nous allons coder ensemble un site pour un barbier(coiffeur).
Le but est de pratiquer les trois piliers du web, l'HTML, le CSS et le JavaScript.
Rien ne va être laissé au hasard, des performances à la compatibilité, en passant par la réactivité(responsive) et l'accessibilité.
Voici quelques sujets importants que nous allons aborder :
- Flexbox
- La sémantique
- Création d'un slider en CSS et en JavaScript
- Les bonnes pratiques en terme de SEO
- La création d'une navigation responsive
- La mise en place d'un "smooth scroll"
- Bien gérer un fichier CSS
- L'utilisation de variables CSS
- L'utilisation de media queries
- Etc ...
Quels sont les prérequis ?
Ce cours est fait pour les développeurs ayant un niveau débutant à intermédiaire, de simple bases vous permettent de suivre ce cours qui vous apportera beaucoup.
Et pour finir, le code source sera à vous, vous pourrez le réutiliser comme bon vous semble dans votre carrière pro, que ce soit une section, une animation, ou la maquette entière !
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
- Mise en place et explication de REM (12:47)
- Coder l'HTML du Header (8:07)
- Coder le CSS de la navigation (14:41)
- Coder le JavaScript de la navbar (8:05)
- Coder le style de la "Hero section" (20:27)
- Coder la partie responsive de la "Hero section" (11:48)
- Coder le contenu de la section "Nos valeurs" (11:02)
- Gérer les classes utilitaires (8:10)
- Coder le style de la section "nos valeurs" (10:37)
- Coder le slider en JavaScript (10:08)
- Coder le contenu de la section "Préstations" (7:28)
- Coder le style de la section "Préstations" (12:40)
- Coder le contenu de la section "Team" (4:26)
- Coder le style de la section "Team" (8:40)
- Coder un slider en pur CSS (13:43)
- Coder le contenu de la section Contact (4:35)
- Coder le CSS de la section Contact (9:27)
- Footer et retouches (2:22)
- Ajouter la fonctionnalité de Smooth Scroll (8:32)
- Faire un audit d'accessiblité (15:15)
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants