Apprendre le HTML et CSS avec ces tutoriels étape par étape

Curieux de HTML, CSS et JavaScript? Si vous pensez que vous avez un talent pour apprendre à créer des sites Web à partir de zéro - voici quelques tutoriels étape par étape qui valent la peine d'être essayés.

Curieux de HTML, CSS et JavaScript?  Si vous pensez que vous avez un talent pour apprendre à créer des sites Web à partir de zéro - voici quelques tutoriels étape par étape qui valent la peine d'être essayés.
Publicité

Lorsque vous êtes impatient de vous essayer au code, il n'y a simplement aucune limite au nombre de tutoriels, de vidéos et de cours en ligne que vous pouvez essayer. Mais parfois, la meilleure façon d'apprendre quelque chose est de plonger et de l'essayer de première main. Le développement Web n'est pas différent.

Si vous êtes curieux au sujet du HTML, CSS et JavaScript, ou pensez que vous pourriez avoir un talent pour apprendre à créer des sites Web à partir de zéro - il y a quelques didacticiels étape par étape qui valent la peine d'être essayés.

La liste suivante de didacticiels vous guidera à travers les bases de HTML et CSS, et vous donnera même une introduction au monde complexe qu'est JavaScript. Qu'est-ce que JavaScript, et Internet peut-il exister sans cela? Qu'est-ce que JavaScript, et Internet peut-il exister sans? JavaScript est l'une de ces choses que beaucoup considèrent comme allant de soi. Tout le monde l'utilise. Lire la suite - au moins en ce qui concerne les débutants. Mais ce qu'ils ne feront pas, c'est vous préparer à une vie de développeur dès la sortie de la boîte. La plupart de ces services sont simplement un endroit facile à démarrer.

Il faudra beaucoup plus que cela pour commencer à développer des sites Web professionnellement. Ces outils, dont la plupart sont gratuits, vous donnent les éléments de base pour le développement web, et vous aideront à vous plonger dans les cours les plus compliqués.

Dash de l'Assemblée générale

Les gens de l'Assemblée générale ont un outil gratuit qui vous enseigne les bases du HTML, CSS et JavaScript, et c'est l'endroit idéal pour les débutants complets pour commencer. Grâce à une série de cinq projets, vous apprendrez la terminologie et les compétences de base de codage vous permettant de construire un site Web qui ressemble à une page about.me, comment créer un blog réactif et un site Web de restaurant.

Dash1

Les tutoriels Dash vont au-delà de l'apprentissage de la création de sites web simples, vous pouvez également exploiter la puissance du HTML, CSS et JavaScript pour créer un robot en utilisant des formes et des lignes ou même un jeu Mad Libs.

Les tutoriels Dash se déplacent à un rythme raisonnable, vous faisant passer à travers chaque étape quelques lignes de code à la fois. Comme pour tout tutoriel, je vous recommande de prendre des notes pendant que vous travaillez. Cela vous aidera à mémoriser les différents outils que vous apprenez, et avec les tutoriels de l'Assemblée Générale, une fois que vous avez terminé une phase, il ne semble pas y avoir de moyen de le répéter.

Dash2

Conclusion : L'utilisation de Dash vous permettra d'acquérir toutes les connaissances dont vous avez besoin pour créer un site Web moderne de base, de la navigation à la conception adaptative. Vous êtes même initié aux bases de la création d'un thème Tumblr personnalisé. Cela dit, il n'y a qu'un total de quatre leçons sur Dash. Tandis que vous pouvez prendre les concepts que vous avez appris et essayer de les appliquer de différentes manières, vous devez compléter vos connaissances avec d'autres cours inclus dans cette liste.

Codecademy

Codecademy existe depuis beaucoup plus longtemps que Dash et ajoute souvent de nouvelles leçons à ses offres. Avec les mêmes leçons complètes et détaillées que vous trouverez sur Dash, Codecademy va encore plus loin en donnant aux utilisateurs un aperçu général de la création d'un site Web avec HTML et CSS, mais fournit également des tutoriels approfondis sur les différentes langues, HTML, CSS et JavaScript.

Comme d'autres services, Codecademy vous montre comment créer un menu de navigation, ajouter des images de fond, faire une galerie d'images, ou même une page d'inscription. (Pour ajouter des fonctionnalités à votre page d'inscription, assurez-vous de parcourir le didacticiel Ruby on Rails.)

codecademy1

Il existe également des leçons dédiées sur jQuery Rendre le Web interactif: Introduction à jQuery Rendre le Web interactif: Introduction à jQuery jQuery est une bibliothèque de scripts côté client que presque tous les sites web modernes utilisent - elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus largement utilisée .... Read More, un langage clé qui rend le JavaScript beaucoup plus facile à apprendre. Si vous êtes intéressé par le développement de backend, il y a aussi des leçons approfondies pour Ruby, Python, PHP, et plus encore.

En plus d'apprendre à concevoir un site Web, et de plonger dans les subtilités des langages de programmation 7 trucs utiles pour maîtriser un nouveau langage de programmation 7 trucs utiles pour maîtriser un nouveau langage de programmation Il est normal d'être dépassé quand vous apprenez à coder. Vous oublierez probablement les choses aussi vite que vous les apprenez. Ces conseils peuvent vous aider à mieux conserver toutes ces nouvelles informations. En savoir plus, vous pouvez également utiliser Codecademy pour obtenir les bases de la création d'applications Web et pour ajouter des fonctionnalités d'inscription, de connexion et de déconnexion à votre site Web.

Codecademy2

Conclusion : Comme Dash, l'interactivité de Codecademy est inestimable. Être capable de voir comment chaque étape se matérialise dans votre site Web est encourageant, et la configuration permet également de repérer facilement les erreurs. Si vous êtes un débutant complet, Codecademy est un endroit idéal pour se mouiller les orteils et décider si le codage et la conception web sont faits pour vous. Avec cette expérience, vous pouvez prendre cette connaissance à un cours payé ou d'une classe.

Tuts +

Tutsplus.com est un site Web rempli de tutoriels (gratuits et payants) sur une grande variété de sujets, y compris tout de Mobile Designing A Breakthrough App? 7 Blogs de développement mobile Vous devriez lire la conception d'une application révolutionnaire? 7 Blogs de développement mobile que vous devriez lire L'espace mobile est si nouveau que les tendances changent constamment et que de nouvelles idées sont faites chaque jour. Si vous envisagez de développer des applications mobiles, comment pouvez-vous suivre le rythme sans devenir fou? En savoir plus et le développement de jeux 4 sites Web gratuits où vous pouvez apprendre les bases du développement de jeux 4 sites Web gratuits où vous pouvez apprendre les bases du développement de jeux Lorsque vous cherchez une bonne série de tutoriels de développement de jeu, vous en apprendrez les pratiques et la mentalité du bon codage parce que vous pouvez ensuite transposer ces pratiques dans n'importe quelle langue ou plate-forme. Lire la suite à la théorie des couleurs Comment apprendre la théorie des couleurs en moins d'une heure Comment apprendre la théorie des couleurs en moins d'une heure La connaissance fondamentale de la théorie des couleurs peut faire la différence entre une esthétique "amateur" et une ne tarde pas à apprendre. En savoir plus et comment utiliser Adobe Illustrator Apprenez à vous-même Adobe Illustrator pour vous enseigner gratuitement Adobe Illustrator gratuitement Adobe Illustrator est depuis longtemps l'outil d'illustration par excellence pour les graphistes. Prêt à apporter vos créations à la vie? Voici comment vous pouvez apprendre Adobe Illustrator gratuitement. Lire la suite . Bien que toutes les leçons enseignées sur le site Web ne suivent pas le modèle étape par étape, il y en a quelques-unes qui adoptent cette approche et aident les utilisateurs à suivre des procédures de développement Web faciles.

TutsPlus1

Un tutoriel particulièrement utile vous guidera à travers les étapes pour concevoir et coder votre site Web. Il est vrai que le tutoriel date de 2009, donc l'esthétique du design peut ne pas vous intéresser, mais cela dit, le tutoriel vous enseigne les compétences nécessaires pour concevoir votre site web, et vous pouvez ensuite appliquer ces compétences à un design plus à jour. Une autre mise en garde à mentionner avec ce tutoriel est qu'il nécessite l'utilisation d'Adobe Photoshop. Si vous n'avez pas accès au logiciel, vous pouvez toujours opter pour l'option Adobe Creative Cloud moyennant des frais de 50 $ par mois.

Le didacticiel vous guide dans la conception d'un site Web de base à deux colonnes avec un en-tête et un pied de page. Le site comprend du contenu, une barre de navigation, des boutons de médias sociaux, et plus encore. Une fois que vous avez conçu le site Web dans Photoshop, vous pouvez passer à un éditeur de code et le didacticiel vous guide à travers le code requis pour transformer votre conception en une page HTML. Le tutoriel exigera quelques connaissances de base en HTML. Je vous recommande d'essayer ce tutoriel après avoir suivi les quelques premiers tutoriels de l'Assemblée générale.

Si vous voulez créer un site Web plus élaboré, consultez un autre tutoriel Tuts + sur la façon de concevoir un beau site Web à partir de zéro. Un autre tutoriel PSD to HTMl rend la vie un peu plus facile en fournissant les fichiers HTML, CSS et image. D'autres tutoriels sur Tuts + vous expliquent comment créer un thème de journal photo Tumblr - bien que celui-ci soit un simple design Photoshop, moins le code.

TutsPlus2

Conclusion : Comparé à Codecademy et Dash, les tutoriels Tuts + demandent un peu plus d'efforts puisque vous devez vous promener à travers les étapes. Avec les deux autres sites, il y a beaucoup plus de «main dans la main» pour ainsi dire. Au fur et à mesure que vous franchissez chaque étape, il est souvent plus facile de comprendre quelle erreur vous avez pu commettre. Il nécessite également que vous utilisiez votre propre logiciel, tandis que Dash et Codecademy ont des systèmes intégrés. Cela dit, avec la variété des tutoriels, vous trouverez forcément un ensemble de leçons qui répondent exactement à ce que vous voulez apprendre.

Apprenez à coder avec Shaye Howe

Avec une série de 12 leçons, Shaye Howe fait un excellent travail de décomposer les bases de HTML en vous présentant la terminologie, et comment utiliser les différents éléments de HTML et CSS. Les diverses leçons comprennent apprendre à connaître HTML, CSS, comprendre le modèle de boîte, le positionnement du contenu, la typographie, et plus encore.

SH

Quand il s'agit d'appliquer les leçons dans le tutoriel, le site Web ne fournit pas un moyen de voir rapidement comment votre HTML et CSS apparaissent en vigueur. Pour surmonter cela, vous pouvez utiliser un outil en ligne qui fournira les mêmes fonctionnalités que vous trouverez dans Codecademy et Dash.

Découvrez un sandbox CSS / HTML / JavaScript comme CSSDeck ou LiveWeave, qui vous permet de saisir du code HTML, CSS et JavaScript et d'afficher le résultat final. Techniquement, vous pouvez également utiliser les éditeurs HTML, CSS et JavaScript dans Dash et Codecademy si vous aimez l'installation qu'ils fournissent.

Au fur et à mesure que vous progressez dans les explications, le site fournit également des exemples de code pour que vous puissiez essayer vous-même. À la fin de chaque leçon est un exercice pratique qui vous permet d'appliquer ce que vous avez appris.

Une fois que vous avez terminé les 12 leçons, vous pouvez passer à la leçon HTML et CSS avancée, qui comprend le design réactif, jQuery et plus encore.

Conclusion: Ce tutoriel adopte une approche légèrement différente des autres suggestions listées ici. Avec une explication beaucoup plus approfondie, vous passerez plus de temps à lire que vous appliquerez ce que vous avez appris. Bien que cela puisse paraître ennuyeux pour certains, il y a quelques leçons utiles qui fournissent un contexte et une meilleure compréhension de la façon dont ces langues fonctionnent.

Quelle est votre prise?

Maintenant, il est temps d'avoir de vos nouvelles. Y a-t-il des tutoriels de développement web en ligne que vous recommanderiez? Selon vous, quelle est la prochaine étape après avoir essayé ces cours en ligne? Faites le nous savoir dans les commentaires.

Crédit d'image: hackNY.org

In this article