20,00

Tuto Coder un site professionnel et responsive de A à Z avec HTML, CSS, JavaScript

20,00

  • Une formation vidéo de 3h19m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Coder un site professionnel et responsive de A à Z

ajouter ce cours aux favoris retirer ce cours des favoris

Bonjour et 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 en ligne, 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 ...

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 !
Rendez-vous de l'autre côté pour commencer à coder.

Je reste disponible si vous avez des questions.

Table des matières de cette formation HTML, CSS, JavaScript (durée : 3h19m)

  • Introduction
    • Introduction 00:02:46
    • Code source et conseils 00:06:12
  • Création de la partie "Desktop"
    • Vue d'ensemble du site 00:07:26
    • Mise en place du CSS 00:12:42
    • Explication de l'utilisation de l'unité REM 00:11:42
    • Coder l'HTML du Header, de la navbar et de la hero section 00:05:47
    • Coder l'HTML de la section About 00:07:04
    • Mise en place des classes utilitaires 00:07:17
    • CSS de la navbar et de la hero section 00:12:24
    • CSS de la section about 00:08:25
    • Coder le JavaScript du slideshow 00:12:11
    • Coder l'HTML de la section de services 00:04:49
    • CSS de la section de services 00:07:48
    • HTML de la section team 00:04:44
    • CSS de la section team 00:10:48
    • HTML & CSS de la section "testimonials" 00:08:12
    • Coder l'HTML de la section de contact et le footer 00:08:53
    • CSS de la section de contact 00:06:54
  • Création de la partie "mobile"
    • Requêtes média pour la navigation et la page d'accueil 00:13:24
    • Rajouter les fonctionnalités de smoothscroll et la navigation responsive 00:09:09
    • Codage des requêtes média pour le reste du site 00:13:09
    • Amélioration accessiblité 00:09:28
    • Amélioration SEO et audit 00:08:39



Formateur : Enzo Ustariz

Enzo Ustariz a publié 53 tutoriels et obtenu une note moyenne de 4,9/5 sur 2 057 tutoriels vendus. Voir les autres formations de Enzo Ustariz

4,5
note moyenne

8
avis laissés
5 étoiles
6
4 étoiles
1
3 étoiles
0
2 étoiles
1
1 étoile
0
  • 5
    avis de bruno laissé le 11/01/2021
    Très bon tuto ! Tu es rapide à la frappe sur le clavier, il suffit de faire pose c'est tout. Je pense pas être un débutant en html/css. Mais j'ai retenu des choses sympas. Le (nth-child, class^="col-"), avant je n'utilisait pas et ça rallongeait le code et je l'ai trouvé très sympas. Je vais bien l'utiliser. Je conseille cette formation.
    "Merci beaucoup pour ce retour et à bientôt."

  • 5
    avis de richardanctil laissé le 29/03/2020
    Tuto très complet, explication claire et précise, beaucoup aimé. Je vais suivre vos prochain tutos !

  • 4
    avis de besselbach laissé le 25/07/2020
    Voila un tuto qui, quelque part, remet les pendules à l'heure pour qui pense avoir atteint le niveau intermédiaire. Il a le mérite d'apporter certaines précisions dans l'utilisation des éléments de code CSS (nth-child, class^="col-", ::after, etc ....). Vivement d'autres tuto dans le même "<style>".

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    HTML , CSS , JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1462 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données