TIL…

Cours gratuit: Construire un blog à partir de zéro

Cela pourrait être plus facile qu'on ne l'imaginait

Avant d’arriver à l’article, je veux simplement dire que je construis un produit et j'aimerais beaucoup collecter des données sur la manière de mieux servir les développeurs Web. J'ai créé un court questionnaire à vérifier avant ou après la lecture de cet article. S'il vous plaît vérifier - merci! Et maintenant, revenons à notre programmation régulière.

Le blog que nous allons construire. Préfère la vidéo? Cliquez ici pour ouvrir à Scrimba

Si vous êtes comme moi, vous êtes intéressé par le Web et sa portée écrasante, mais vous êtes également submergé par le fouillis d’informations que sont l’apprentissage de HTML et de CSS. Le fait est que ces langages ne ressemblent pas à d’autres domaines, comme les traitements de texte et les langages de programmation. Le Web est un autre monde et ce n’est pas la chose la plus jolie qui soit.

Ayant appris quelque chose sur le Web, je suis ici pour vous encourager, car, avec un peu d’aide, ces domaines peuvent être beaucoup plus faciles que vous ne l’imaginez. Continuez à lire, et nous allons construire un beau blog à partir de zéro. Nous allons également apprendre le CSS Grid, Flexbox et Responsive Design.

Le but est de faire pour vous ce que je me suis fait moi-même; apprendre le HTML et le CSS à partir des principes de base.

Préfère la vidéo? Cliquez ici pour ouvrir à Scrimba

J'ai également enseigné un cours HTML / CSS gratuit sur Scrimba, où j'apprends à construire un beau blog à partir de * scratch *. Cliquez ici pour vous inscrire!

Scrimba.com est une plate-forme frontale interactive dans laquelle les sites Web sont enregistrés en tant qu'événements - et non en vidéos - et peuvent être modifiés!

Alors d'où vient le HTML?

HTML est un descendant du premier méta ou langage de balisage: GML. Les lecteurs du millénaire travaillent maintenant sur le fait que GML signifie Generalized Markup Language, mais ce n’est pas tout. C'est Charles Goldfarb, Edward Mosher et Raymond Lorie qui ont créé ce que nous connaissons maintenant comme méta ou langage de balisage chez IBM. Et en 1996, Charles Goldfarb a écrit:

«J'ai donné à GML son nom actuel pour que nos initiales prouvent toujours d'où il vient. L’une des vérités les plus déplorables du transfert de technologie est que les développeurs ont tendance à être reconnaissants des travaux de recherche lorsqu’ils sont reçus pour la première fois, et à y oublier presque à la fin d’un long cycle de développement… »
- Charles Goldfarb, en 1996

GML est ensuite devenu normalisé, devenant ainsi SGML. Ensuite, Tim Berners-Lee, qui a travaillé au CERN, a emprunté le ML à SGML (non, pas d’apprentissage automatique, ou peu importe comment les hipsters l’appellent) pour créer du HTML, où HT signifie HyperText.

Whoa, mot cool. Et si je comprends bien, il découle d’un environnement de création interactif appelé HyperCard, créé par Bill Atkinson, qui a travaillé chez Apple. Pour une exploration plus approfondie, je soumets les vidéos suivantes:

Cliquez soit pour en savoir plus

Alors, récapitulons. HTML n'a pas seulement conquis le monde. En fait, il y avait tout un monde avant HTML. WUT? Je sais, je tremble sous le choc - mais je n’étais pas née -, il n’y avait pas de monde.

Et HTML doit beaucoup à ses prédécesseurs. Comme nous tous à nos parents. Néanmoins, c’est comme cela que nous créons du code à partir de texte. Maintenant, en quatre leçons d’une minute, je vais enseigner les bases du HTML, du CSS et du Responsive Design.

HTML et CSS en 4 minutes

Première minute: un site Web peut être mieux compris comme un arbre Web


     
     

Tous les sites commencent leur vie en tant que tels. Cependant, et c’est terrible, il n’ya pas de contenu. Néanmoins, nous commençons ici car nous devons d'abord comprendre ce qu'est un site Web. Considérez-le comme un arbre, un arbre à l'envers *, un arbre Web. L'élément html est la racine, tandis que la tête et le corps sont les premières branches de notre arbre Web:

   html <- root
   / \
tête corps <- branches

L'élément head (ou tag - idem) est destiné aux métadonnées ou aux informations relatives à notre site Web. L’élément body, quant à lui, concerne le contenu de notre site Web. Et comme CSS est le style de notre site Web, il va dans l’élément head, alors que le contenu, comme les paragraphes, les vidéos de chats (∇ ≦), etc., va dans l’élément body.

Deuxième minute: les éléments, ou balises, ont plusieurs apparences

<élément>
 value 
<élément attribut = "valeur"> valeur 
  1. Le premier élément est un élément à fermeture automatique, dans lequel nous communiquons quelque chose au navigateur, mais il n’a pas non plus de valeur. Un exemple de ceci est l'élément
    , qui insère un saut de ligne.
  2. Le deuxième élément est un élément commun, dans lequel nous communiquons une valeur comme appartenant à un élément. Par exemple,

    hello, world! est la valeur “hello, world!” Comme appartenant à l'élément de paragraphe.

  3. Enfin, nous avons un élément avec un attribut. Et un attribut, c’est ce que l’on dirait. Cela donne à un élément plus de contexte ou de signification. Les attributs peuvent avoir plusieurs valeurs et les éléments peuvent avoir plusieurs attributs. Attribut-ception.
<élément attribut = "valeur" attribut = "valeur valeur"> valeur 

Maintenant, je dois mentionner, nous ne créons pas les noms de nos éléments HTML. Nous les empruntons à une liste de plus de 100 éléments prédéfinis. Bien sûr, cela rend certaines choses plus faciles et beaucoup plus difficiles, telles que la mémorisation!

Troisième minute: Comment HTML et CSS communiquent