TIL ...

Gratis kursus: Lav en blog fra ridser

Det er måske lettere end forestillet

Før jeg kommer til artiklen, vil jeg bare dele, at jeg bygger et produkt, og jeg vil meget gerne indsamle nogle data om, hvordan man bedre betjener webudviklere. Jeg oprettede et kort spørgeskema for at tjekke før eller efter at have læst denne artikel. Tjek det ud - tak! Og nu tilbage til vores regelmæssige planlagte programmering.

Den blog vi opbygger. Foretrækker du video? Klik her for at åbne i Scrimba

Hvis du er som mig, er du interesseret i nettet og dets overvældende rækkevidde, men du er også oversvømmet af det rod med information, der lærer HTML og CSS. Sagen er, at disse sprog er i modsætning til andre domæner, som tekstbehandlere og programmeringssprog. Internettet er en anden verden, og det er ikke det smukkeste.

Efter at have lært mig noget web, er jeg her for at give et blødt skub af opmuntring, fordi disse domæner med lidt vejledning kan være meget lettere, end du forestiller dig. Fortsæt med at læse, så opbygger vi en smuk blog fra bunden. Vi lærer også noget CSS Grid, Flexbox og responsivt design.

Målet er at gøre for dig det, som jeg har gjort for mig selv; lære HTML og CSS fra første principper.

Foretrækker du video? Klik her for at åbne i Scrimba

Jeg underviste også i et gratis HTML / CSS-kursus om Scrimba, hvor jeg lærer hvordan man bygger en smuk blog fra * bund *. Klik her for at tilmelde dig!

Scrimba.com er en interaktiv platform, hvor websteder optages som begivenheder - ikke videoer - og kan redigeres!

Så hvor kommer HTML fra?

HTML er en efterkommer af det første meta- eller markup-sprog: GML. Millennial-læsere arbejder nu på, at GML står for Generalised Markup Language, men det er ikke alt, hvad det står for. Det var Charles Goldfarb, Edward Mosher og Raymond Lorie, der skabte det, vi nu kender som meta- eller markup-sprog hos IBM. Og i 1996 skrev Charles Goldfarb:

”Jeg gav GML sit nuværende navn, så vores initialer altid skulle bevise, hvor det havde sin oprindelse. En af de grimme sandheder ved teknologioverførsel er, at udviklere har en tendens til at være taknemmelige for forskningsarbejdet, når de først blev modtaget, og praktisk taget glemme det ved afslutningen af ​​en lang udviklingscyklus ... ”
- Charles Goldfarb, i 1996

GML blev senere standardiseret og blev dermed SGML. Derefter lånte Tim Berners-Lee, der arbejdede hos CERN, ML fra SGML (nej, ikke maskinlæring eller hvad hipstere kalder det) for at oprette HTML, hvor HT står for HyperText.

Whoa, seje ord. Og som jeg forstår, har det rødder fra et interaktivt forfattermiljø kaldet HyperCard, fra Bill Atkinson, der arbejdede hos Apple. For en dybere udforskning sender jeg følgende videoer:

Klik på enten for at lære mere

Så lad os sammenfatte. HTML overtog ikke bare verden. Der var faktisk en hel verden før HTML. WUT? Jeg ved, jeg dirrer af chok - men jeg var ikke født - så der var ikke en verden.

Og HTML skylder sine forgængere meget. Det gør vi også alle vores forældre. Ikke desto mindre er det sådan, vi laver kode ud fra tekst. Nu i fire lektioner på et minut lærer jeg det grundlæggende om HTML, CSS og Responsive Design.

HTML og CSS på 4 minutter

Første minut: Et websted kan bedre forstås som en webtree


     
     

Alle websteder begynder deres liv som sådan. Dog - og dette er forfærdeligt - der er ikke noget indhold. Ikke desto mindre starter vi her, fordi vi først skal forstå, hvad der er et websted. Tænk på det som et træ - et nedadvendt træ * - et webtree. HTML-elementet er roden, mens hoved og krop er de første grene af vores webtree:

   html <- rod
   / \
hovedkrop <- grene

Hovedelementet (eller mærket - samme ting) er til metadata eller information om vores websted. Kropselementet er på den anden side til vores websteds indhold. Og fordi CSS er vores websteds stil, går det i hovedelementet, mens indhold, som afsnit, kattevideoer (≧ ∇ ≦), og så videre, går ind i kropselementet.

Andet minut: elementer eller tags har flere optrædener


 værdi 
 værdi 
  1. Det første element er et selvlukkende element, hvor vi kommunikerer noget til browseren, men det har ikke også en værdi. Et eksempel på dette er
    -elementet, der indsætter en linjeskift.
  2. Det andet element er et fælles element, hvor vi kommunikerer en værdi, som hører til et eller andet element. For eksempel

    hej, verden!

    er værdien "hej, verden!" Som tilhørende afsnitelementet.
  3. Til sidst har vi et element med en attribut. Og en attribut er, hvad der lyder som - fanden, det er en attribut! Det giver et element mere kontekst eller mening. Attributter kan have flere værdier, og elementer kan have flere attributter. Attribut-ception.
 værdi 

Nu - jeg er nødt til at nævne - vi opretter ikke navnene på vores HTML-elementer. Vi låner dem fra en liste over 100+ elementer, der er foruddefineret. Naturligvis gør dette nogle ting lettere, og nogle ting meget, meget sværere, såsom memorering!

Tredje minut: Hvordan HTML og CSS kommunikerer