Je suis très intéressé par l'apprentissage du développement Web et j'ai appris quelques notions de base sur le HTML et le CSS il y a quelques années de W3Schools, mais je n'ai jamais appris à développer des sites Web conformes aux normes d'aujourd'hui, c'est-à-dire des sites fluides sans utiliser de tableaux pour régir la conception du site.

Quelles sont les bonnes ressources avec lesquelles je peux commencer?

CSS Zen Garden

Découvrez CSS Zen Garden et feuilletez les différents résultats. Ils sont très polyvalents et offrent beaucoup de différence par rapport au même code source. Vous en apprendrez beaucoup sur les techniques CSS modernes. Même si vous ne les disséquez pas complètement, vous trouverez au moins beaucoup d'inspiration et de capacités CSS par rapport au HTML accessible normal. La grande chose à propos de CSS Zen Garden est la sémantique contre le style. Le contenu n'est pas du tout un style. Tout ce que vous voyez dans les styles est fait uniquement par CSS, ce qui est la bonne façon de le faire, car les données peuvent être consommées par de nombreux clients différents, et uniquement par ceux qui les visualisent.

Livres

Quand il s'agit d'apprendre des livres, celui-ci ressemble beaucoup à un bon début CSS: The Missing Manual .

l'Internet

J'ai lu Smashing Magazine sur Internet qui fournit de nombreux exemples et approches. Il couvre des articles allant de la conception à de grandes approches de la conception Web et similaires.

La meilleure façon d'apprendre à créer des sites Web et des applications est de le faire , ce qui signifie que vous devez créer des projets et le faire tout le temps. Cette courte vidéo transmet les émotions d'un nouveau venu et donne de bons conseils sur le sujet.

J'ai également écrit quelques autres recommandations pour les personnes intéressées par l'apprentissage du développement Web que vous devriez lire avant de commencer.

Cependant, tout comme vous ne parlez pas des langues dans lesquelles vous ne connaissez aucun mot, vous avez besoin d'une bonne compréhension des bases avant de pouvoir créer un projet utile. Voici quelques ressources pour découvrir quelques notions de base et sites qui vous permettent d'explorer par vous-même.

Il existe d'excellents endroits pour apprendre gratuitement les bases du développement Web. Commencez ici, mais dérivez-les pour jouer avec des choses qu'ils n'enseignent pas directement. Après en avoir parcouru quelques-uns, essayez de créer vous-même d'autres sites / projets à partir de zéro. Cela renforcera les concepts, vous enseignera les détails de mise en œuvre et vous apprendra probablement des choses supplémentaires également. Vous ne pouvez tout simplement pas devenir un bon développeur ou designer en lecture seule, vous devez créer !

J'ai fait un cours intensif pour les concepteurs apprenant le développement web

Vérifiez-le! Ils sont adaptés à un public basé sur la conception mais s'appliquent à tous ceux qui apprennent. Ils enseignent les bases dans les diapositives / post / vidéo, puis attribuent un petit projet à la fin de chacun pour enseigner le développement frontal dans le monde réel.

• Leçon 1 - Pourquoi et quoi derrière le développement Web
• Leçon 2 - Démarrage de HTML et CSS
• Leçon 3 - Démarrage de JavaScript (JS)

Autres bons sites Web de tutoriel

• CodeAcademy - Connaissances générales de base de plusieurs langues.
• La série «Apprendre le Web» de Mozilla - Cela commence au niveau de départ et peut vous guider dans des sujets plus complexes. Grande ressource, je le recommande fortement.
• Udacity - Classe générale de développement web.
• Tuts + - Tutoriels sur des sujets plus spécifiques.
• KhanAcademy - Je ne l'ai pas utilisé personnellement, mais cela semble s'améliorer de jour en jour.

N'utilisez pas W3Schools , il est généralement obsolète et très sujet aux erreurs. Au lieu de cela, utilisez un site Web de didacticiel comme ceux ci-dessus pour apprendre et utiliser l'un des sites de documentation ci-dessous lorsque vous recherchez quelque chose de spécifique.

Documentation

Il est essentiel de consulter la documentation des propriétés, des bibliothèques, etc. pour devenir un bon développeur Web. Voici les meilleurs documents que vous pouvez utiliser:

• W3.org - La documentation officielle de la plupart des implémentations des navigateurs Web. Apprendre à lire ces documents est très important! Ce n'est en aucun cas affilié à W3Schools.
• Mozilla Docs - Une ressource tierce très fiable des créateurs de FireFox qui reste à jour.
• WHATWG.org - Une sorte de concurrent open source de W3; certains navigateurs implémentent parfois certaines suggestions d'ici sur W3.
• DevDocs - Pas officiel, mais a beaucoup de documents de langues sur un seul site. Assez pratique.

Flux utiles

• WebPlatformDaily - Une liste de nouvelles traitant de tout ce qui est mis à jour quotidiennement sur le Web (sauf les week-ends).
• SitePoint - Articles vraiment utiles sur diverses choses.
• WebDesignerDepot - Peut être du côté spam, mais la plupart de leurs articles réels sont bons.
• Smashing Magazine - Sujets plus avancés, mais surtout toutes les bonnes lectures.
• A List Apart - Un peu plus de connaissances avancées sous forme de blog.

Éditeurs

Petits projets / jouer avec du code

• JSFiddle - Faites de petits projets et suivez-les.
• CodePen - Regardez les griffonnages de code des autres et soumettez le vôtre aux autres.

Éditeurs de texte intégral

• SublimeText
• Atome

Autres sites Web utiles

• Page Mes ressources - Une liste de ressources que j'ai compilées, allant d'une introduction à une conception réactive à une analyse des différentes façons d'animer dans un navigateur Web.
• Manuel du développeur frontal - Une collection de publications plus diversifiée mais utile couvrant un large éventail de sujets frontaux.
• WebFieldManual - Une grande collection de ressources utiles.
• StackOverflow - Si vous avez une question spécifique liée à la programmation, StackOverflow est inégalée pour vous aider.
• LearnLayout - Apprenez quelques notions de base sur la mise en page CSS.
• Positionnement en conception web - Une partie de mon cours intensif qui est peut-être la plus utile.
• 30 sélecteurs CSS que vous devez connaître - Apprenez à les connaître et gagnez du temps plus tard. Il y a aussi un petit jeu sympa pour tester vos connaissances sur le sélecteur CSS.
• Codrops CSS Reference - Une page de référence concise et utile.
• CodeMentor et Thinkful - Sites où vous pouvez payer pour être encadrés 1 sur 1.

Recherchez les blogs personnels des développeurs et concepteurs Web que vous aimez. Ils ont souvent un très bon contenu.

J'ai également rédigé une introduction à la conception de l'interface utilisateur qui pourrait être très utile. J'y ai lié de grandes ressources supplémentaires.

Je ne saurais trop insister, la meilleure façon d'apprendre est de construire des choses qui repoussent vos limites et de le faire continuellement .

Pour une liste encore plus grande (et peut-être écrasante) de sites Web utiles, consultez WebDesignRepo !

Les meilleurs endroits pour moi sur l'apprentissage de la conception web (solutions de mise en page, convivialité, graphisme et solution technique) sont ceux-ci:

regardez tout le site Web des personnes qui ont écrit des articles dans ces sites Web:

Une liste à part
24ways.org

Ou quelque chose de plus technique sur la conception des listes et le flottant http://css.maxdesign.com.au/index.htm

Vous devez savoir quelles sont les normes Web. La source officielle est la suivante: World Wide Web Consortium (w3c) Il est un peu difficile d'en tirer des leçons car il est très technique, mais il est bon de le vérifier lorsque vous voulez savoir comment les choses fonctionnent sur le Web et pourquoi. sur les normes. la chose la plus utile c'est le validateur de votre code HTML.

Un meilleur moyen est de bien regarder le code source de bons sites Web, et naturellement la proportion de choses alignées comme celles pour apprendre les astuces: http://www.cssbeauty.com/

Et regardez le site Web de bons concepteurs de sites Web et ce qu'ils font:

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
etc ...

et mes favoris Delicious (il y a une variété de choses, vous devez les fouiller et parcourir ce dont vous n'avez pas besoin) http://www.delicious.com/Littlemad/webdesign

Avant de commencer à apprendre tous ces cadres ...

Je veux rediriger votre attention vers la partie design de la conception web.

Bien sûr, vous pouvez facilement créer un site Web avec Bootstrap ou un autre cadre. Mais ce n'est pas de la conception. Un cadre peut être une base, mais si vous ne mettez pas votre propre spin, vous obtiendrez essentiellement un site Web qui est comme tous les autres sites Web .

C'est pourquoi je vous conseille d'apprendre les bases du design et d'essayer de les appliquer vous-même.

Comment créez-vous de (beaux) sites Web par vous-même?

Maintenant, c'est une question qui mérite un livre, mais voici quelques conseils:

1. Lisez les principes de base de la conception . Cette introduction en 7 étapes à la conception Web devrait vous aider à démarrer. Aussi, cette série d'articles sur Smashing Magazine .
2. Observez les conceptions des autres. Quels principes de base ont-ils utilisés et comment? Mais ne vous contentez pas d'observer, notez vos observations .
3. Concevez avec l' objectif commercial à l'esprit . Une conception de sites Web existe pour aider une entreprise à atteindre son objectif et pour aider l'utilisateur à atteindre son propre objectif. Lorsque les 2 objectifs convergent, tout le monde est content. Donc, cet objectif devrait toujours être votre point de départ. Vous devez baser chaque décision de conception que vous prenez sur cet objectif - choix de polices, choix de couleurs, disposition, etc.
4. Assurez-vous qu'il y a de l' harmonie dans votre conception. En général, cela signifie une harmonie entre le message que vous souhaitez envoyer, les couleurs, les polices, l'ambiance du site Web et la marque. Commencez à intégrer l'harmonie dans vos conceptions en utilisant une échelle modulaire pour guider vos décisions de dimensionnement. Cette mini-série explique plus sur l'harmonie et l'utilisation d'une échelle modulaire.
5. Lisez cette introduction étonnante à la typographie : la typographie pratique de Butterick ou, au moins, ce résumé

Essayez de concevoir à partir de zéro

Maintenant, lorsque vous aurez fini de lire toutes ces choses et que vous connaissez le HTML et le CSS, vous pourrez faire votre propre conception très simple.

Essayez de concevoir une seule page avec juste du texte, en noir et blanc .

Pourquoi juste du texte? Parce que le texte est de loin le support le plus utilisé pour transmettre un message sur le Web. Par conséquent, il est fondamental pour vous, en tant que concepteur de sites Web, de pouvoir rendre le texte beau et agréable à lire.

Pourquoi noir et blanc? Parce que le choix des couleurs est encore une autre bête. Faire de petits pas vous rendra heureux des progrès que vous faites et vous aidera à apprendre plus rapidement.

Appliquez les principes de conception de base que vous avez appris + utilisez les observations des conceptions d'autres personnes + réfléchissez à l'objectif de cette page + dimensionnez le texte à l'aide d'une échelle modulaire.

La meilleure façon d'apprendre est de créer des choses, alors faites-vous un site Web.

Lisez les normes , alistapart , tutsplus .

Si vous avez besoin d' un regard de livre à SitePoint de - HTML Utopia: Design sans tableaux L' utilisation de CSS .

Quelques réflexions sur csszengarden et W3Schools .

Honnêtement, je commencerais par apprendre à développer des sites WordPress. Oui, je peux coder un site en HTML, CSS, PHP, ... mais je peux monter un site WordPress plus rapidement puis le personnaliser selon mes besoins.

Si vous cherchez à commencer par apprendre les normes d'aujourd'hui, je recommanderais http://nettuts.com/ . Il serait également avantageux d'obtenir l'abonnement premium et d'avoir accès à d'excellents tutoriels. Si le passage du PSD au HTML vous intéresse, ils couvrent cela.

Nettuts fait partie d'Envato. Envato propose plusieurs sites de didacticiels couvrant le développement Web, WordPress, les vecteurs, l'édition de photos et de vidéos et bien plus encore. C'est un bon endroit pour commencer.

Juste mes 2 cents.

Pour les débutants de Photoshop sur la conception Web, je recommanderais ce site http://psdvibe.com/

Il existe de nombreux sites Web avec des tonnes de tutoriels. Cependant, la meilleure plate-forme pour apprendre le webdesign est http://teamtreehouse.com/ . J'espère que ça aide! Nik