5. Passer à l’étape supérieure

Maintenant que vous avez des bases solides, vous devriez pouvoir suivre quelques tutos pour peaufiner vos compétences.

Je vous propose de travailler en autodidacte sur les tutos de vos choix ; voici une petite sélection des études que je vous propose :

TP avancé HTML + CSS

Voici le lien vers un tuto plutôt costaud que j’ai traduis depuis pour apprendre à créer une page de type CV de A à Z avec quelques effets d’animation : https://docs.google.com/document/d/1CaigW0bKrptg2YBaOQXlxJurqXZUBhnjH9KPNNBuQjk/edit?usp=sharing

Suivre des tutos « live coding » sur Scrimba

Scrimba est une plateforme de cours en ligne qui permet d’apprendre le code tout en manipulant directement les éléments dans l’interface vidéo de l’auteur. Voici une petite sélection de cours intéressants en rapport avec le html/CSS :

Extra :

  • Apprendre à coder avec ChatGPT : un domaine qui est plein d’avenir, je vous encourage à jeter un oeil si les aspects techniques vous intéressent (attention ça va plus loin que le html/css !)

Créer votre boîte à outils

Voici quelques sites avec des composants UI que vous pouvez utiliser sur vos projets persos.

Je vous propose d’installer un petit « laboratoire de test » pour les essayer et constituer votre toolbox personnelle pour vos projets futurs :

  • Uiverse : grosse bibliothèque de composants UI à copier/coller
  • html5up : templates HTML modernes pour tout type de projets
  • Web Code Tools : un générateur HTML / CSS à la demande pour créer des éléments ponctuels à insérer dans vos pages web

Apprendre à utiliser un framework

La prochaine étape si vous voulez percer dans l’intégration est d’apprendre à utiliser un framework.

Utiliser un framework CSS présente plusieurs avantages :

  1. Gain de temps : Les frameworks CSS fournissent des styles et des composants préconstruits, permettant de démarrer rapidement et d’éviter de réécrire du code pour des éléments courants.
  2. Cohérence : Ils assurent une cohérence visuelle à travers le site grâce à des styles uniformes et bien définis.
  3. Responsive design : La plupart des frameworks CSS incluent des grilles et des styles adaptatifs qui facilitent la création de sites web responsives.
  4. Bonne pratique : Les frameworks suivent généralement les bonnes pratiques de développement web, ce qui aide à maintenir un code propre et organisé.
  5. Support communautaire : Les frameworks populaires disposent d’une large communauté de développeurs qui fournissent support, documentation, et plugins supplémentaires.

Pour démarrer en douceur je vous propose de regarder l’un des 2 frameworks les plus simples à utiliser (sachant que Bootstrap est l’un des plus utilisé au monde)

1. Bootstrap

  • Avantages :
    • Très populaire avec une large communauté et une documentation complète.
    • Comprend une grille flexible et des composants prêts à l’emploi.
    • Facile à personnaliser grâce aux variables SCSS.
  • Inconvénients :
    • Les styles par défaut peuvent être surutilisés, rendant les sites web semblables.
    • Peut être lourd si on n’utilise pas les composants judicieusement.
  • Pour apprendre à l’utiliser :

2. Bulma

  • Avantages :
    • Simple à utiliser avec une syntaxe claire et intuitive.
    • Design moderne et léger sans dépendance JavaScript.
    • Flexibilité grâce aux classes utilitaires et aux modificateurs.
  • Inconvénients :
    • Moins de composants intégrés comparé à Bootstrap.
    • La communauté est plus petite, donc moins de plugins et de support.

Pour apprendre à l’utiliser :

Encore + loin : apprendre à utiliser Git et Github Pages pour héberger vos fichiers HTML

  • Voici un excellent cours en ligne qui vous permettra d’apprendre les grands principes d’utilisation de git et de la solution Github Pages, une alternative pour héberger vos pages web et les rendre visible sur le net.

Faire le lien avec WordPress et Elementor

Maintenant que vous avez quelques connaissances à propos de Flexbox et que vous avez appris à utiliser Elementor, voici quelques tutos intéressants pour faire le lien avec tout ce que vous avez appris :