Conseils utiles

Tutoriels HTML et CSS

Pin
Send
Share
Send
Send


En fait, si vous voulez apprendre et commencer à utiliser HTML et CSS, vous pouvez le faire en un jour ou deux. Il suffit d'approcher de manière compétente le processus d'apprentissage et de choisir la bonne source d'informations.

Dans cet article, je souhaite donner quelques conseils à ceux qui ont décidé de reconstituer leurs connaissances et d'aller au-delà du développement visuel de sites Web et de regarder au moins un peu sous le capot pour savoir quoi et comment cela fonctionne.

Oui, WordPress nous gâte et nous permet de créer des projets simples sans connaissance des langages de programmation.

Bien que les langages HTML et CSS puissent difficilement être qualifiés de programmatiques, ils sont très probablement des langages de balisage hyper-textuels, mais ils sous-tendent néanmoins tout ce que nous voyons sur Internet.

Je ne vous inciterai pas à acheter tel ou tel super-cours ou formation. Non, je vais vous donner quelques astuces pour apprendre à mieux utiliser HTML et CSS et pour obtenir des résultats.

De plus, dans cet article, je vais ouvrir une nouvelle section sur Info-m dans laquelle je publierai l'utilité de la présentation, de la conception et d'autres fonctionnalités.

Alors allons-y, par où commencer?

1. Je pense que vous devriez d'abord installer un éditeur pratique et confortable pour le code. L’un des leaders en ce moment est le code VSC ou Visual Studio de Microsoft.

Je recommande de télécharger l'éditeur à partir de. site et voici le lien de téléchargement.

Comment installer la langue désirée, je pense que vous trouverez des instructions sur le réseau, il y en a plus qu'assez. VSC est flexible et personnalisable et extensible. Des milliers d'extensions ont déjà été écrites. Mais je pense que vous aurez une version en boîte au début.

Pour ceux qui veulent trouver des excuses sur la personnalisation de l’éditeur, voici la vidéo, ce n’est pas la mienne, mais je suis trop paresseux pour la tourner et Alexey (l’auteur de la vidéo) a tout expliqué et l'a montré.

À partir de ce billet, j’ai décidé qu’il était intéressant de publier les vidéos d’autres personnes sur mon site, surtout s’il s’agissait de vidéos de haute qualité réalisées par des professionnels.

1. Académie HTML

Une ressource intéressante pour qui commence à partir de zéro.

Inscrivez-vous gratuitement et sous forme de jeu interactif, prenez le premier cours, puis plus difficile, etc. Les cours sont pour la plupart gratuits, il y a une vérification interactive des tâches. En général, je recommande le début pour les débutants.

A un moment, je pensais avoir un compte là-bas pour garder mes abonnés, mais comme d'habitude il n'y a pas assez de temps))

HTML, CSS pour les débutants à partir de zéro et au-delà.

Rappelez-vous, dans les derniers articles que j'ai déjà dit que je parlerai bientôt de toutes les ressources, sites, services, cours que je trouve utiles et efficaces pour apprendre le HTML et le CSS? Ce temps est venu, je vais vous raconter aujourd'hui ce que j'ai utilisé et où je continue à faire à l'heure actuelle.

Ce dont je vais parler est vérifié dans mon expérience personnelle et je garantis la qualité. Si vous utilisez mes recommandations, le temps passé ne passera pas en vain.

Je supposerai qu'au moins de manière générale, vous savez ce que sont le HTML et le CSS, ce que vous pouvez en faire, et pourquoi vous avez besoin de tout cela. L’efficacité de mes recommandations et de votre formation dépendra de votre maîtrise de ces disciplines, des objectifs que vous vous êtes fixés et du niveau de compétence que vous envisagez d’atteindre.

Dans cet article, je me concentrerai sur les débutants, sur ceux qui entament leurs premiers pas dans l’apprentissage du HTML et du CSS, c’est pour eux que mon conseil sera le plus pertinent. Après avoir traversé ces étapes, vous saurez certainement si vous êtes intéressé à approfondir vos connaissances et à améliorer vos compétences. Si c'est le cas, continuez à pratiquer et à comprendre toutes les subtilités et les nouvelles opportunités.

Je suis moi-même à ce stade, je passe progressivement les cours avancés, j'étudie les possibilités de HTML5 et CSS3. En même temps, les cours me procurent un grand plaisir, ainsi que le sentiment de souplesse, les grandes opportunités et les nouvelles idées qui naissent de ce processus fascinant.

2. Cours vidéo.

Au début, je voulais publier une liste complète de morceaux gratuits, mais malheureusement, la plupart d’entre eux sont périmés et les auteurs ne se donnent pas la peine de les mettre à jour. Oui, beaucoup de choses ont changé avec le passage à HTML5.

Par conséquent, je ne recommanderai pour l’instant qu’une tâche qui vaille la peine d’être acquise et d’acquérir les premières compétences.

Le parcours de Mikhail Rusakov est assez informatif et il sait bien faire ses devoirs.

Cours HTML et CSS gratuits

Plus de 6 heures de cours + exercices

J'ai même prévu de publier toutes les leçons de ce cours sur mon site Web avec l'analyse de DZ. Si cela vous intéresse, écrivez dans les commentaires.

Ma façon d'apprendre HTML et CSS

Ma première connaissance avec HTML et CSS a eu lieu lors des premiers cours à l'institut (bien que je me sois impliqué dans la programmation beaucoup plus tôt), puis j'ai réalisé quelle était la responsabilité de chacun d'eux. À cette époque, il était encore d'usage d'utiliser activement les styles intégrés et de créer une grille de pages à l'aide de tableaux. Seuls quelques-uns sont passés aux divs, pour lesquels je ne savais rien à l'époque et n'attachais pas d'importance à ces points.

Après avoir réglé quelques points fondamentaux, j’ai vécu avec cette connaissance inférieure et dépassée pendant longtemps. J'ai essayé de créer mes propres pages, de leur prescrire des styles. Dernièrement, j'ai retravaillé le modèle de ce blog, ce qui a également modifié la conception.

Et puis, en fouillant dans le code pendant plusieurs jours, j'ai réalisé à quel point mes connaissances étaient limitées et insuffisantes. C’est comme un cadre invisible dans lequel vous vous placez et vivez dans ceux-ci, en vous habituant à cet état de choses. Il n'y avait aucune liberté dans la mise en œuvre des idées créatives et des pensées.

Il y avait d'innombrables questions: «comment faire cela et ne pas tout gâcher?» C'est ce que j'ai décidé. Je ne me souviens plus trop de mes pensées sur de telles questions: «Est-il juste de faire cela dans cette situation et n’invente-t-on pas un deuxième vélo avec mes mains incompétentes?»

Le moment est venu où cet état de choses a cessé de me convenir et j'ai finalement décidé de prendre le contrôle de la situation. À la fin de l'année, cette idée est apparue dans les pages d'un article sur les projets pour l'année à venir. Mais à présent, ces plans sont mis en œuvre et je ne peux que penser: "Qu'est-ce qui me dérangeait et pourquoi je ne l'avais pas fait auparavant?" Cela ressemble à la façon dont j'ai récemment maîtrisé la technique de frappe au clavier avec les dix doigts et parviens maintenant à corriger les pensées sous forme de phrases.

Formations en ligne!

Peut-être l'une des méthodes d'enseignement les plus productives. Excellent code, vous regardez d'abord la vidéo, puis ils vous confient une tâche et vérifient également.

Je donnerai des liens à deux, un gratuit et le second pour une somme modique, mais avec des mentors sympas.

Je ne participe pas aux programmes d'affiliation de ces ressources, je les recommande simplement comme bonnes sources de connaissances.

Un cours assez informatif, nous commençons à étudier à partir de zéro et avant de placer le site HTML sur l'hébergement. Il existe des réponses simples à la DZ que vous publiez dans les commentaires sous les leçons et que Artem vérifie.

Bien sûr, il y a des retards dans les vérifications, mais vous devez comprendre que le projet est gratuit et qu’Artem ne peut pas s’asseoir et «brouter» chaque commentaire.

Néanmoins, le cours est assez volumineux: pas moins de 55 vidéos, il y a donc quelque chose à travailler.

La deuxième formation que je souhaite recommander est la mise en page Web. Mise en route par wayup.in

C'est payé, ça coûte, à mon avis, 9 $. Mais cet argent que vous payez pour l'aide d'un mentor qui contrôle vos savoirs traditionnels et vous dirige.

Au total, je suis au courant de 7 leçons volumineuses, mais à la fin de la formation, vous serez en mesure d'écrire votre premier site Web en HTML pur avec CSS et même de comprendre le fonctionnement de simples commandes dans JS.

Je donne un lien, ce n’est pas un affilié, Wayup est toujours en train de "dévorer" et ne connectera pas un programme d’affiliation.

Mais le parcours est vraiment bon et fonctionne bien, je le recommande donc aux débutants.

C'est probablement tout ce que je voulais vous dire aujourd'hui.

À la fin, quelques autres conseils sur la meilleure façon d’apprendre et la prochaine étape.

  1. Ne vous découragez pas si vous ne comprenez rien du début, cela arrive, essayez d’écrire du code et de voir le résultat dans le navigateur.
  2. N'essayez pas de tout apprendre et de tout comprendre en 1 heure. Vous pouvez apprendre les balises HTML, mais vous devez bricoler avec CSS.
  3. Pratique plus. Prenez-le, créez un document HTML propre et commencez à créer la structure de la première page.
  4. Créez un dossier de signets dans votre navigateur et mettez-y les conseils et astuces utiles que vous trouverez sur le réseau.
  5. Ce qui n'est pas clair, demandez, je me ferai un plaisir de vous le dire.

Étapes d'apprentissage HTML et CSS

Il est plus pratique de décomposer l’ensemble du processus en étapes:

  • Présentation de HTML et apprentissage des bases
  • Introduction au CSS et aux concepts de base
  • Niveau avancé. Apprendre HTML5 et CSS3

C'est bien connu et nous avons tous vérifié à plusieurs reprises que la répétition était nécessaire pour se souvenir. Mais pour que le processus ne soit pas ennuyeux, nous ne répéterons pas la même chose plusieurs fois. Au lieu de cela, nous nous tournerons vers différentes sources à chaque étape, élargissant ainsi nos connaissances et notre compréhension.

Et même si quelque part l’un des moments ne semble pas tout à fait clair, à un autre endroit, vous fermerez tous les points blancs, vous vous sentirez en confiance et pourrez passer à autre chose.

En adhérant à ce plan, vous vous familiariserez progressivement avec les technologies, vous vous souviendrez facilement de tout dans la pratique, vous deviendrez ainsi de très bons spécialistes en HTML et CSS, vous connaîtrez les nouvelles technologies HTML5, CSS3, ainsi que les approches les meilleures et les plus modernes de la mise en page.

Meilleurs tutoriels HTML et CSS

Et voici les ressources elles-mêmes, auxquelles je vais me référer et que je vous invite à utiliser activement:

  • Cours d'Evgeny Popov
  • Codecademy, cours HTML et CSS. Nous n'utiliserons que les leçons. Les tests et les projets là-bas sont payés, nous pouvons nous en passer.
  • Académie HTML. Vous pouvez utiliser mon code d'affilié 1115104d039 pour obtenir un bon rabais sur les cours avancés.

Nous devrions également mentionner l’école de code, où la qualité du matériel est excellente, mais elle est payante et ne sera pratique que pour ceux qui connaissent bien l’anglais.

Je mentionnerai peut-être aussi le répertoire htmlbook.ru, que vous trouverez souvent à l’avenir, à l’aide d’un moteur de recherche.

Ce n'est pas un hasard si les cours de E. Popov sont prioritaires. Cette personne sera votre guide dans les premières étapes.

Je recommande Codecademy pour épingler. Ici, les tâches sont en anglais, mais c'est assez simple et ne devrait pas causer de complications.

Je considère l’Académie HTML comme l’école de ressources en russe la plus solide et la plus sérieuse. C’est là que j’ai maintenant suivi des cours avancés qui ne sont disponibles que par abonnement, mais ce n’est pas du tout cher (300 roubles par mois) par rapport à la Code School (le prix varie de 20 à 30). dollars en fonction des actions détenues). En utilisant mon code d'affilié chez HTML Academy - 1115104d039, vous bénéficiez d'une réduction sur votre abonnement.

Nous contacterons chaque fois HTML Academy après les cours de Popov et de la Codecademy. Cela vous permettra de vous sentir plus calme et plus confiant lorsque vous résolverez des problèmes, dont certains très graves. Après tout, tout le monde n’a pas les nerfs de fer.

Plan d'apprentissage pour maîtriser facilement HTML et CSS

Je vous suggère de vous en tenir à ce plan. Je l'ai fait moi-même, j'ai aimé le résultat et le processus d'apprentissage lui-même.

  1. Le cours HTML de E. Popov. Ce que vous y apprenez et comment l'obtenir, voir mon article.
  2. Codecademy, cours HTML et CSS. Unité 1, Unité 2, Unité 3
  3. HTML Academy, les six premiers cours avant le cours "Connaître CSS", plus tard
  4. E. Popov CSS cours. Voir les détails dans mon article.
  5. Codecademy, cours HTML et CSS. Unité 4, Unité 5, Unité 6. À ce stade, nous allons terminer avec Codecademy.
  6. HTML Academy, Cours commençant par Connaissance du CSS, cours de 5 ans, se terminant par le cours CSS Text Typing
  7. Cours: Pratique HTML5 et CSS3
  8. HTML Academy, tous les cours restants du niveau de base, en commençant par le "Modèle de bloc du document" et se terminant par le cours "Tests de finition". Il peut sembler à certains que le cours de mise en page de Popov devrait être suivi après l’acquisition de HTML Academy (c’est-à-dire échanger les deux dernières étapes). Ce point de vue est également digne de respect, mais il me semble que vous serez plus responsable des cours de HTML Academy après avoir consulté les pages proposées par Eugene, et on se souviendra de mieux en mieux.
  9. Niveau avancé. Nous avons uniquement l'école HTML Academy où nous devons passer par des niveaux supplémentaires par abonnement. Ne pas oublier mon code d'affiliation, que j'ai mentionné ci-dessus. Apprendre des cours avancés et préprocesseurs. Au moment d'écrire ces lignes, je suis dans le cours sur les gradients linéaires. Je prévois de suivre tous ces cours jusqu'à la fin.

Voici un plan de travail pour ceux qui veulent apprendre à bien comprendre le HTML et le CSS. Cela peut sembler très long et difficile. Comme vous le savez, la peur a de grands yeux. Tout commence par la première étape. Si vous n'êtes pas paresseux et travaillez avec diligence pendant votre temps libre, la liste sera alors raccourcie.

Sans aucun doute, je n'ai pas parlé d'autres ressources pouvant également être utiles. Si vous les connaissez, pas seulement en HTML et CSS, alors parlez-nous-en! Ce sera génial si vous laissez les informations dans les commentaires.

Cours sur HTML5 et CSS3, mise en page moderne et design Web

J'ai décidé de vous parler de plusieurs autres cours sur HTML et CSS, ainsi que sur des sujets liés à la composition moderne, à la conception Web et au développement de sites Web. Mon plan de formation pour HTML et CSS, que j'ai proposé ci-dessus, a été testé et donne d'excellents résultats. Mais, peut-être qu'il sera gênant pour quelqu'un de passer à différentes sources, je veux que tout soit au même endroit. Dans ce cas, participer à des cours d’auteurs professionnels avec des leçons détaillées dont je parlerai sera plus agréable et encore plus efficace.
Ci-dessous, je vous donnerai simplement une liste de cours de formation, et vous verrez vous-même qui l’aime.

  • Principes de base de la mise en page adaptative en HTML5 et CSS3
  • HTML5 et CSS3 de Scratch à Pro
  • Pratique de la mise en page des appareils mobiles
  • Web design: un cours pratique pour créer une page de destination
  • Concepteur de sites Web est un professionnel. Créer des mises en page populaires
  • Tendances de développement Web
  • Tout sur la création de sites
  • Plan de création de site Web étape par étape
  • JavaScript et jQuery à partir de zéro pour les pros
  • Les secrets du référencement pratique
  • PHP moderne: travail avec VKontakte
  • Apprenez à créer de belles pages d'abonnement et de vente modernes.
  • École de blogs

Je pense qu’une telle sélection ne se rencontrera nulle part ailleurs. Je les ai moi-même collectionnés pendant longtemps, ce qui me rend encore plus agréable de les partager avec vous. Mieux marquez la page afin que vous ne la regrettiez pas plus tard.

Une minute de plus. Je pensais que si le sujet de gagner de l'argent sur Internet vous intéressait aussi.

Savez-vous qu'il y a beaucoup de travail à distance lié à HTML et CSS? Aujourd'hui, beaucoup travaillent sur Internet et parcourent le monde! Quels sont les métiers en ligne les plus recherchés? Combien de temps faut-il pour apprendre? Apprendre du livre

Merci de votre attention, j'espère que l'article vous sera utile. Exprimez vos pensées, partagez vos impressions! Tout cela est le bienvenu.

Première étape

Il faut comprendre que HTML et CSS ne sont pas des langages de programmation, mais un langage de balisage et des feuilles de style en cascade, respectivement. En d'autres termes, avec ces langues, vous spécifiez la disposition des éléments (titres, paragraphes, liens, etc.) et les stylisez. Il est également très important de se rappeler que sans une bonne base théorique, vous ne pouvez pas commencer à pratiquer.

Quatrième étape:

Après avoir maîtrisé tout le matériel HTML / CSS, commencez. Le plus de pratique, mieux c'est. Ici, vous aurez besoin d'un éditeur de texte, de mises en page PSD et, comme je l'ai écrit ci-dessus, de patience et de persévérance. Vous pouvez utiliser l'éditeur de texte de votre choix. Je vais souligner ces:

  • Texte sublime
  • Atome
  • Code Visual Studio

Vous pouvez facilement trouver des mises en page PSD gratuites sur Google.

Cinquième étape:

Et enfin, quelques ressources plus utiles:

Et quelques recommandations: Plus vous pratiquez, plus vite vous apprendrez tous les pièges et battez votre main. Téléchargez à nouveau les présentations PSD et leur composition. Croyez-moi, tout le monde a un tel moment: «rien ne se passe, je renonce à tout et je fais autre chose», mais ne cédez pas à cela, mettez-le au bout. Le monde du développement Web est très vaste et la mise en page n’est qu’un début.

Développeur frontal sur N-iX,
Maître de conférences à Hillel Computer School.

Regarde la vidéo: Cours Complet HTML CSS - Tutoriel pour Débutants et Confirmés Partie 13 (Novembre 2022).

Pin
Send
Share
Send
Send