De zéro au héros frontal (partie 1)

Je me souviens quand j'ai commencé à apprendre le développement front-end. J'ai rencontré tellement d'articles et j'étais tellement submergé par la quantité de matériel dont j'avais besoin pour apprendre que je ne savais même pas par où commencer.

Ce guide vous aidera à naviguer dans l'apprentissage du développement frontal. Il fournit des ressources d'apprentissage que j'ai trouvées efficaces dans le passé, ainsi que des explications supplémentaires.

Pour que ce guide reste digeste, je l'ai divisé en deux parties. La première partie traite du développement d'interfaces avec HTML et CSS. La deuxième partie passe en revue Javascript, les frameworks et les modèles de conception. Si vous êtes familier avec HTML et CSS, vous pouvez passer à la deuxième partie qui couvre tout Javascript.

De zéro au héros frontal (partie 2)

Un guide complet pour apprendre le développement front-end medium.com

Bases du HTML et du CSS

Dans le développement front-end, tout commence par HTML et CSS. HTML et CSS contrôlent ce que vous voyez sur une page Web. HTML dicte le contenu tandis que CSS gère le style et la mise en page.

Pour commencer, lisez les didacticiels HTML et CSS de Mozilla Developer Network (MDN). Le MDN fournit des explications chapitre par chapitre sur les concepts HTML et CSS importants. De plus, chaque chapitre ne fait qu'une page, avec des démos interactives liées à CodePen et JSFiddle.

Après avoir terminé ces didacticiels, jetez un œil au cours Créer un site Web de CodeAcademy. Ce didacticiel ne prend que quelques heures et constitue une bonne introduction à la création de sites Web avec HTML et CSS. Si vous en voulez plus, Créer des formulaires Web est un autre didacticiel de CodeAcademy qui vous guide tout au long de la création et du style d'un formulaire Web.

Pour vous entraîner avec CSS, essayez CSS Diner. C'est un jeu de défi CSS amusant. Un autre aspect important du HTML et du CSS est la mise en page. LearnLayout est un didacticiel interactif qui vous montre comment créer des mises en page avec HTML et CSS.

Apprenez également à utiliser Google Fonts avec les bases de l'API Google Font de CSSTricks. La typographie est un élément fondamental des interfaces. Lorsque vous avez le temps, je vous recommande vivement de lire ce livre en ligne gratuit, Professional Web Typography par Donny Truong. Il vous apprend tout ce que vous devez savoir sur la typographie en tant que développeur front-end.

Tout au long de ces ressources, ne vous inquiétez pas trop de la mémorisation des choses. Au lieu de cela, concentrez-vous sur la manière dont HTML et CSS fonctionnent ensemble.

Pratiquer les bases du HTML et du CSS

Maintenant que vous avez une compréhension de base du HTML et du CSS, amusons-nous. Dans cette section, deux expériences sont conçues pour vous permettre de vous entraîner à créer des sites Web et des interfaces. J'utilise le terme «expériences» parce que dans les expériences, vous apprenez autant de votre échec que de votre succès.

Expérience 1

Dans notre première expérience, nous allons utiliser CodePen. CodePen est un terrain de jeu frontal où vous pouvez coder HTML et CSS sans avoir à stocker des fichiers localement. Il propose également des aperçus en direct qui se mettent à jour dès que vous enregistrez votre code.

En utilisant CodePen, vous faites d'une pierre deux coups. D'une part, vous pratiquez le HTML et le CSS. D'autre part, vous créez un portefeuille de progression de base. Nous allons également utiliser Dribbble, qui est un site plein d'inspiration design.

Allez sur Dribbble et trouvez un design assez simple pour coder en quelques heures. J'ai sélectionné quelques conceptions pour vous aider à démarrer: 1, 2, 3, 4 et 5. J'ai choisi les conceptions Web axées sur le mobile car elles sont moins complexes que leurs homologues de bureau. Cependant, n'hésitez pas à choisir des designs de bureau.

Une fois que vous avez choisi un design, allez-y et essayez de le coder dans CodePen. Si vous êtes bloqué, n'oubliez pas que StackOverflow est votre ami. Une autre pratique utile consiste à consulter des sites Web tels que Medium, AirBnB et Dropbox et à utiliser l'outil d'inspecteur pour voir comment ils obtiennent différentes mises en page et styles. Jetez également un œil à certains des stylos de CodePen. J'ai choisi quelques bonnes références:

  • Interface de l'application de menu
  • Widget Twitter
  • Article Carte de nouvelles
  • Menu plat simple

Si votre copie semble différente de l'original, ne vous découragez pas. Continuez à vous entraîner avec différents modèles et vous remarquerez une amélioration à chaque fois.

Si vous n'avez pas d'arrière-plan en design, il est probable que votre œil en matière de design soit sous-développé. Un développeur front-end avec un bon œil sur le design sera en mesure d'identifier les bons designs et de les reproduire parfaitement. J'ai écrit il y a quelques semaines un article sur la façon de développer votre œil de design.

Expérience 2

Espérons que la première expérience vous a donné une certaine confiance dans l'écriture de HTML et CSS. Pour l'expérience 2, nous allons jeter un œil à certains sites, puis coder quelques-uns de leurs composants.

Certains sites Web utilisent des frameworks CSS ou obscurcissent leurs noms de classes CSS, ce qui vous empêche de lire leur code source. C'est pourquoi j'ai sélectionné quelques sites Web bien conçus avec un code source facile à lire.

  • Dropbox for Business: essayez de reproduire leur section héros
  • AirBnB: essayez de reproduire leur pied de page
  • PayPal: essayez de répliquer leur barre de navigation
  • Invision: essayez de reproduire leur section d'inscription au bas de la page
  • Stripe: essayez de reproduire leur section de paiements

Encore une fois, le but de l'expérience 2 n'est pas de recréer la page entière. Bien que cela ne ferait certainement pas de mal! Choisissez quelques composants clés comme une barre de navigation ou une section héros à coder. J'ai fourni une suggestion à côté de la liste des sites mais n'hésitez pas à choisir d'autres composants.

Vous pouvez coder cette expérience dans CodePen ou la stocker localement. Si vous choisissez de le stocker localement, vous pouvez soit télécharger cet exemple de projet en tant que passe-partout ou créer les fichiers à partir de zéro. Je suggère d'utiliser un éditeur comme Atom ou Sublime.

De plus, gardez à l'esprit que pour tout site Web, vous pouvez toujours voir son HTML et son CSS. Faites un clic droit sur la page ou un composant de la page, cliquez sur inspecter , et un panneau apparaîtra avec le HTML à gauche et le CSS à droite. Une fois que vous avez terminé ou que vous êtes bloqué, utilisez l'inspecteur pour voir comment votre HTML et votre CSS se comparent.

Bonnes pratiques HTML et CSS

Jusqu'à présent, vous avez appris les bases du HTML et du CSS. La prochaine étape consiste à apprendre les meilleures pratiques. Les meilleures pratiques sont un ensemble de règles informelles qui améliorent la qualité de votre code.

Balisage sémantique

L'une des meilleures pratiques pour HTML et CSS consiste à écrire un balisage sémantique. Une bonne sémantique Web signifie utiliser des balises HTML appropriées et des noms de classe CSS significatifs pour transmettre une signification structurelle.

Par exemple, la balise h1 nous indique que le texte qu'elle enveloppe est un titre important. Un autre exemple serait la balise de pied de page , qui nous indique que l'élément appartient au bas de la page. Pour en savoir plus, lisez A Look Into Proper HTML5 Semantics and What Makes For a Semantic Class Name by CSSTricks.

Conventions de dénomination CSS

La prochaine bonne pratique importante pour CSS est les conventions de dénomination appropriées. De bonnes conventions de dénomination, comme le balisage sémantique, donnent du sens et contribuent à rendre notre code prévisible, lisible et maintenable. Vous pouvez lire les différentes conventions de dénomination dans l'article OOCSS, ACSS, BEM, SMACSS: que sont-ils? Que dois-je utiliser?

En général, je suggère d'essayer des conventions de dénomination simples qui vous semblent intuitives. Au fil du temps, vous découvrirez ceux qui fonctionnent le mieux pour vous. Pour voir comment des entreprises comme Medium utilisent des conventions de dénomination comme BEM, lisez le CSS de Medium est en fait très bon. Dans cet article, vous apprendrez également que l'élaboration d'un ensemble efficace de conventions CSS est un processus itératif.

Réinitialiser CSS

Les navigateurs présentent de petites incohérences de style des marges aux hauteurs de ligne. Pour cette raison, réinitialisez toujours votre CSS. MeyerWeb est une réinitialisation populaire. Si vous voulez creuser plus profondément, vous pouvez lire Créer votre propre fichier Reset.css simple.

Prise en charge de plusieurs navigateurs

La prise en charge de plusieurs navigateurs signifie que votre code prend en charge la plupart des navigateurs à jour. Certaines propriétés CSS comme la transition nécessitent des préfixes de fournisseur pour fonctionner correctement dans différents navigateurs. Vous pouvez en savoir plus sur les préfixes de fournisseurs dans cet article, CSS Vendor Prefixes. Le principal avantage est que vous devez tester votre site Web sur plusieurs navigateurs, y compris Chrome, Firefox et Safari.

Préprocesseurs et postprocesseurs CSS

Depuis l'introduction de CSS dans les années 1990, CSS a parcouru un long chemin. Les systèmes d'interface utilisateur étant de plus en plus complexes, les gens ont mis au point des outils appelés préprocesseurs et postprocesseurs pour gérer la complexité.

Les préprocesseurs CSS sont des extensions de langage CSS qui ajoutent des cloches et des sifflets comme des variables, des mixins et l'héritage. Les deux principaux préprocesseurs CSS sont Sass et Less. En 2016, Sass est généralement plus largement utilisé. Bootstrap, le framework CSS réactif populaire, passe également de Less à Sass. De plus, lorsque la plupart des gens parlent de Sass, ils parlent en fait de SCSS.

Les postprocesseurs CSS appliquent les modifications au CSS après qu'il a été écrit à la main ou compilé par un préprocesseur. Par exemple, certains postprocesseurs comme PostCSS ont des plugins qui ajoutent automatiquement des préfixes de fournisseur de navigateur.

Lorsque vous découvrez pour la première fois des préprocesseurs et postprocesseurs CSS, il est tentant de les utiliser partout. Cependant, commencez simplement et ajoutez des extensions comme des variables et des mixins uniquement lorsque cela est nécessaire. L'article que j'ai suggéré plus tôt, le CSS de Medium est en fait assez bon, couvre également combien c'est trop en ce qui concerne les préprocesseurs.

Systèmes de réseau et réactivité

Les systèmes de grille sont des structures CSS qui vous permettent d'empiler des éléments horizontalement et verticalement.

Les frameworks de grille tels que Bootstrap, Skeleton et Foundation fournissent des feuilles de style qui gèrent les lignes et les colonnes dans les mises en page. Bien que les cadres de grille soient utiles, il est également important de comprendre le fonctionnement des grilles. Comprendre les systèmes de grille CSS et Don't Overthink Grids sont d'excellents aperçus.

L'un des principaux objectifs des systèmes de grille est d'ajouter de la réactivité à votre site Web. La réactivité signifie que votre site Web est redimensionné en fonction de la largeur de la fenêtre. La réactivité est souvent obtenue en utilisant des requêtes multimédias CSS, des règles CSS qui ne s'appliquent qu'à certaines largeurs d'écran.

Vous pouvez en savoir plus sur les requêtes multimédias dans Introduction aux requêtes multimédias. De plus, parce que nous sommes entrés dans une ère axée sur le mobile, consultez An Introduction to Mobile-First Media Queries.

Pratiquer les meilleures pratiques HTML et CSS

Maintenant que vous êtes armé des meilleures pratiques, testons-les au combat. Le but de ces deux prochaines expériences est de s'entraîner à écrire du code propre et à observer l'effet à long terme des meilleures pratiques sur la lisibilité et la maintenabilité.

Expérience 3

Pour l'expérience 3, choisissez l'une de vos expériences précédentes et refactorisez votre code en utilisant certaines des meilleures pratiques que vous avez apprises. Refactoriser signifie éditer votre code pour qu'il soit plus facile à lire et moins complexe.

Être capable de refactoriser efficacement le code est une compétence importante d'un développeur front-end. La création d'un code qualité est un processus itératif. Architectures CSS: Refactoriser Votre CSS est un bon point de départ pour refactoriser votre code.

Voici quelques questions à vous poser lorsque vous refactorisez votre code.

  • Les noms de vos classes sont-ils ambigus? Dans 6 mois, comprendrez-vous toujours ce que signifie votre nom de classe?
  • Votre HTML et CSS sont-ils sémantiques? En jetant un coup d'œil à votre code, êtes-vous capable de discerner rapidement une signification structurelle et relationnelle?
  • Réutilisez-vous le même code de couleur hexadécimal encore et encore dans votre code? Serait-il plus logique de le refactoriser en une variable Sass?
  • Votre code fonctionne-t-il aussi bien sur Safari que sur Chrome?
  • Pourriez-vous remplacer une partie de votre code de mise en page par un système de grille comme Skeleton?
  • Utilisez-vous souvent l'indicateur ! Important ? Comment pouvez-vous résoudre ce problème?

Expérience 4

La dernière expérience a mis à profit ce que vous avez appris sur les meilleures pratiques. Cependant, les effets des meilleures pratiques ne deviennent souvent apparents que lorsque vous les appliquez à un projet plus important.

Pour la dernière expérience, créez vous-même un site Web de portfolio. En tant qu'interface, votre site de portefeuille est l'un de vos actifs numériques les plus importants. Un portfolio est un site qui présente votre travail. Plus important encore, c'est un enregistrement continu qui vous aide à suivre vos progrès et votre développement. Donc, même si vous n'avez qu'une ou deux choses à montrer, affichez-la.

Pour commencer, suivez l'article d'Adham Dannaway, Mon flux de travail (simple) pour concevoir et développer un site Web de portfolio

Si votre première itération de portefeuille n'est pas parfaite, ce n'est pas grave . Les portefeuilles sont soumis à de nombreuses itérations. Et ce qui est important que vous le construisiez avec vos propres compétences.

Rester au courant

Bien que HTML et CSS ne disparaîtront pas de sitôt, il est important de rester à jour avec le paysage frontal.

Vous trouverez ci-dessous une liste de sites Web, de blogs et de forums à la fois agréables à lire et informatifs.

  • CSSTricks
  • Magazine écrasant
  • Nouvelles des designers
  • Nettuts +
  • Assistant CSS

Apprenez par l'exemple

Enfin, la meilleure façon d'apprendre est par l'exemple. Voici un ensemble de guides de style et de conventions de code qui vous apprendront à être un front-end plus efficace.

Guides de style

Les guides de style Web sont des collections de composants et de modèles CSS qui peuvent être réutilisés sur un site Web. La chose clé à noter dans ces guides de style est la façon dont les approches HTML et CSS basées sur les composants vous permettent de réutiliser le code pour garder votre code SEC.

  • Mapbox
  • Planète seule
  • SalesForce
  • MailChimp

Conventions du code

Conventions de code conçues pour rendre votre code lisible et maintenable. Certains de ces liens comme les directives CSS sont des directives pour écrire de meilleurs HTML et CSS tandis que d'autres liens comme la boîte à outils CSS interne de Github et les directives sont des exemples de code de qualité.

  • Directives CSS
  • Boîte à outils et directives CSS internes de Github
  • Guide de style CSS d'AirBnB

Emballer

J'espère qu'à la fin de cet article, vous êtes familiarisé avec le HTML et le CSS et avez quelques projets à votre actif. La meilleure façon d'apprendre front-end est de créer des projets et d'expérimenter. N'oubliez pas que chaque développeur front-end doit commencer quelque part. Et il vaut mieux commencer aujourd'hui que demain.

Cet article est le premier d'une série en deux parties. Le deuxième article traite de l'ajout d'interactivité avec les bibliothèques / frameworks Javascript et Javascript. Aussi, si vous voulez que je développe quelque chose ou si vous avez des questions, n'hésitez pas à me laisser une note ou un Tweet.

De zéro au héros frontal (partie 2)

Un guide complet pour apprendre le développement front-end medium.com

PS Si vous avez aimé cet article, cela signifierait beaucoup si vous appuyez sur le bouton de recommandation ou partagez avec des amis.

Si vous en voulez plus, vous pouvez me suivre sur Twitter où je publie des divagations insensées sur la conception, le développement front-end, les bots et l'apprentissage automatique.