Fra nul til frontend-helt (del 1)

Jeg husker, da jeg først begyndte at lære front-end-udvikling. Jeg stødte på så mange artikler og var så overvældet af, hvor meget materiale jeg havde brug for for at lære, at jeg ikke engang vidste, hvor jeg skulle starte.

Denne guide hjælper dig med at navigere i læringsfrontudvikling. Det giver læringsressourcer, som jeg fandt effektive tidligere, sammen med supplerende forklaringer.

For at holde denne guide fordøjelig delte jeg den op i to dele. Første del går over udvikling af grænseflader med HTML og CSS. Del to går over Javascript, rammer og designmønstre. Hvis du er fortrolig med HTML og CSS, kan du springe til del to, der dækker alt Javascript.

Fra nul til frontend-helt (del 2)

En komplet guide til at lære front-end udvikling medium.com

Grundlæggende om HTML og CSS

I front-end-udvikling starter alt med HTML og CSS. HTML og CSS styrer, hvad du ser på en webside. HTML dikterer indhold, mens CSS håndterer styling og layout.

For at komme i gang skal du læse HTML- og CSS-vejledningerne fra Mozilla Developer Network (MDN). MDN giver forklaringer kapitel for kapitel af vigtige HTML- og CSS-koncepter. Derudover har hvert kapitel kun en side med interaktive demoer, der er linket til CodePen og JSFiddle.

Når du har gennemført disse tutorials, skal du kigge på Make a Website-kurset af CodeAcademy. Denne tutorial tager kun et par timer at gennemføre og er en god primer til opbygning af websteder med HTML og CSS. Hvis du vil have mere, er bygning af webformularer en anden tutorial af CodeAcademy, der tager dig gennem opbygning og styling af en webformular.

For at øve dig med CSS, prøv CSS Diner. Det er et sjovt CSS-udfordringsspil. Et andet vigtigt aspekt af HTML og CSS er layout. LearnLayout er en interaktiv tutorial, der viser dig, hvordan du opretter layouts med HTML og CSS.

Lær også, hvordan du bruger Google Fonts med det grundlæggende i Google Font API af CSSTricks. Typografi er en grundlæggende byggesten for grænseflader. Når du har tid, vil jeg varmt anbefale dig at læse denne gratis online bog, Professional Web Typography af Donny Truong. Det lærer dig alt hvad du behøver at vide om typografi som en front-end-udvikler.

I disse ressourcer skal du ikke bekymre dig for meget om at huske tingene. I stedet skal du fokusere på at forstå, hvordan HTML og CSS fungerer sammen.

Øve dig på HTML og CSS Basics

Nu hvor du har en grundlæggende forståelse af HTML og CSS, lad os have det sjovt. I dette afsnit er der to eksperimenter designet til at give dig praksis med at opbygge websteder og grænseflader. Jeg bruger udtrykket "eksperimenter", fordi i eksperimenter lærer du lige så meget af din fiasko som du gør af din succes.

Eksperiment 1

I vores første eksperiment skal vi bruge CodePen. CodePen er en front-end legeplads, hvor du kan kode HTML og CSS uden at skulle gemme filer lokalt. Det har også live previews, der opdateres, så snart du gemmer din kode.

Ved at bruge CodePen dræber du to fugle i en sten. På den ene side øver du HTML og CSS. På den anden side opretter du en grundlæggende fremdriftsportefølje. Vi vil også bruge Dribbble, som er et sted fuld af designinspiration.

Gå til Dribbble og find et design, der er simpelt nok til at kode om et par timer. Jeg valgte et par designs for at komme i gang: 1, 2, 3, 4 og 5. Jeg valgte mobil-første webdesign, fordi de er mindre komplekse end deres desktop-kolleger. Du er dog også velkommen til at vælge desktop-design.

Når du har besluttet dig for et design, skal du prøve at kode det i CodePen. Hvis du sidder fast, skal du huske at StackOverflow er din ven. En anden nyttig praksis er at gå på websteder som Medium, AirBnB og Dropbox og bruge inspektørværktøjet til at se, hvordan de opnår forskellige layouts og stilarter. Se også på nogle af kuglepenne på CodePen. Jeg valgte et par gode referencer:

  • Menu-app-interface
  • Twitter-widget
  • Artikel Nyhedskort
  • Enkel flad menu

Hvis din kopi ser anderledes ud end originalen, skal du ikke frarådes. Fortsæt med at øve med forskellige designs, og du vil bemærke forbedringer hver gang.

Hvis du ikke har en designbaggrund, er det sandsynligt, at dit designøjne er underudviklet. En frontend-udvikler med et godt designøjne vil være i stand til at identificere gode designs og replikere dem perfekt. Jeg skrev en artikel for et par uger siden om, hvordan du udvikler dit designøjne.

Eksperiment 2

Forhåbentlig gav det første eksperiment dig selvtillid med at skrive HTML og CSS. Til eksperiment 2 skal vi se på nogle websteder og derefter kode et par af deres komponenter.

Nogle websteder bruger CSS-rammer eller tilslører deres CSS-klassenavne, hvilket gør det svært for dig at læse deres kildekode. Derfor valgte jeg et par veldesignede websteder med let at læse kildekode.

  • Dropbox for Business: Prøv at replikere deres heltesektion
  • AirBnB: Prøv at replikere deres sidefod
  • PayPal: Prøv at replikere deres navigationslinje
  • Invision: Prøv at replikere deres tilmeldingsafsnit nederst på siden
  • Stribe: Prøv at replikere deres betalingsafsnit

Igen er fokus for eksperiment 2 ikke at genskabe hele siden. Selvom det bestemt ikke ville skade! Vælg et par nøglekomponenter som f.eks. En navigationsbjælke eller en heltesektion til kode. Jeg leverede et forslag ved siden af ​​listen over websteder, men jeg er velkommen til at vælge andre komponenter.

Du kan kode dette eksperiment i CodePen eller gemme det lokalt. Hvis du vælger at gemme det lokalt, kan du enten downloade dette eksempelprojekt som en kedelplade eller oprette filerne fra bunden. Jeg foreslår, at du bruger en editor som Atom eller Sublime.

Husk også, at for ethvert websted kan du altid se dets HTML og CSS. Højreklik bare på siden eller en komponent på siden, klik på inspicer , så vises et panel med HTML til venstre og CSS til højre. Når du er færdig eller sidder fast, skal du bruge inspektøren til at se, hvordan din HTML og CSS sammenligner.

HTML og CSS bedste praksis

Indtil videre er det, du har lært, det grundlæggende i HTML og CSS. Det næste trin er at lære bedste praksis. Bedste fremgangsmåder er et sæt uformelle regler, der forbedrer kvaliteten af ​​din kode.

Semantisk markering

En af de bedste fremgangsmåder for HTML og CSS er at skrive semantisk markering. God websemantik betyder at bruge passende HTML-tags og meningsfulde CSS-klassenavne til at formidle strukturel betydning.

For eksempel fortæller h1- koden os, at den tekst, den indpakker, er en vigtig overskrift. Et andet eksempel ville være sidefodskoden , der fortæller os, at elementet hører hjemme nederst på siden. For yderligere læsning, læs Et kig på korrekt HTML5-semantik og hvad der skaber et semantisk klassenavn af CSSTricks.

CSS-navngivningskonventioner

Den næste vigtige bedste praksis for CSS er konventionelle navngivningskonventioner. Gode ​​navngivningskonventioner, som semantisk markering, formidler betydning og hjælper med at gøre vores kode forudsigelig, læsbar og vedligeholdelig. Du kan læse om de forskellige navngivningskonventioner i artiklen OOCSS, ACSS, BEM, SMACSS: hvad er de? Hvad skal jeg bruge?

Generelt foreslår jeg at prøve enkle navngivningskonventioner, der giver dig intuitiv mening. Over tid vil du opdage dem, der fungerer bedst for dig. For at se, hvordan virksomheder som Medium bruger navngivningskonventioner som BEM, skal du læse Mediums CSS faktisk er ret fedt. I denne artikel lærer du også, at det er en iterativ proces at komme med et effektivt sæt CSS-konventioner.

CSS-nulstilling

Browsere har små styling-uoverensstemmelser fra margener til linjehøjder. Af denne grund skal du altid nulstille din CSS. MeyerWeb er en populær nulstilling. Hvis du vil grave dybere, kan du læse Opret din egen enkle Reset.css-fil.

Cross Browser Support

Cross browser support betyder, at din kode understøtter de mest opdaterede browsere. Nogle CSS-egenskaber som overgang har brug for leverandørpræfikser for at fungere korrekt i forskellige browsere. Du kan læse mere om leverandørpræfikser i denne artikel, CSS Vendor Prefixes. Den vigtigste take away er, at du skal teste dit websted på tværs af flere browsere, herunder Chrome, Firefox og Safari.

CSS præprocessorer og postprocessorer

Siden introduktionen af ​​CSS i 1990'erne er CSS kommet langt. Da brugergrænsefladesystemer er blevet mere og mere komplekse, kom folk op med værktøjer kendt som forprocessorer og postprocessorer til at styre kompleksiteten.

CSS-præprocessorer er CSS-sprogudvidelser, der tilføjer klokker og fløjter som variabler, mixins og arv. De to vigtigste CSS-forprocessorer er Sass og Less. I 2016 er Sass generelt mere udbredt. Bootstrap, den populære responsive CSS-ramme, skifter også fra mindre til Sass. Også når de fleste mennesker taler om Sass, taler de faktisk om SCSS.

CSS-postprocessorer anvender ændringer til CSS, efter at den enten er håndskrevet eller kompileret af en forprocessor. For eksempel har nogle postprocessorer som PostCSS plugins, der automatisk tilføjer browser-leverandørpræfikser.

Når du først opdager CSS-præprocessorer og postprocessorer, er det fristende at bruge dem overalt. Start dog simpelt og tilføj kun udvidelser som variabler og mixins, når det er nødvendigt. Den artikel, jeg foreslog tidligere, Mediums CSS er faktisk ret f *** ing god, dækker også, hvor meget der er for meget, når det kommer til præprocessorer.

Gridsystemer og lydhørhed

Gridsystemer er CSS-strukturer, der giver dig mulighed for at stable elementer vandret og lodret.

Gitterrammer som Bootstrap, Skelet og Foundation giver typografiark, der administrerer rækker og kolonner i layout. Selvom gitterrammer er nyttige, er det også vigtigt at forstå, hvordan net fungerer. At forstå CSS Grid Systems og ikke overtænke net er gode oversigter.

Et af hovedformålene med netsystemer er at tilføje lydhørhed til dit websted. Responsivitet betyder, at dit websteds størrelse ændres baseret på vinduesbredde. Mange gange opnås respons ved at bruge CSS-medieforespørgsler, CSS-regler, der kun gælder for bestemte skærmbredder.

Du kan læse mere om medieforespørgsler i Intro til medieforespørgsler. Da vi er kommet ind i en mobil-første æra, skal du også se En introduktion til Mobile-First Media Queries.

Øve HTML og CSS bedste praksis

Nu hvor du er bevæbnet med bedste praksis, lad os kæmpe for at teste dem. Målet med de næste to eksperimenter er at øve sig i at skrive ren kode og iagttage den langsigtede effekt af bedste praksis på læsbarhed og vedligeholdelsesevne.

Eksperiment 3

Til eksperiment 3 skal du vælge et af dine tidligere eksperimenter og omforme din kode ved hjælp af nogle af de bedste fremgangsmåder, du har lært. Refactoring betyder at redigere din kode, så den er lettere at læse og mindre kompleks.

At være i stand til effektivt at omlægge kode er en vigtig færdighed hos en front-end-udvikler. Oprettelse af kvalitetskode er en iterativ proces. CSS-arkitekturer: Refactor Din CSS er et godt udgangspunkt for refactoring af din kode.

Her er et par ting, du kan spørge dig selv, når du omlægger din kode.

  • Er dine klassenavne tvetydige? 6 måneder fra nu, vil du stadig forstå, hvad dit hold betyder?
  • Er din HTML og CSS semantisk? Når du kigger på din kode, er du i stand til hurtigt at skelne strukturel og relationel betydning?
  • Genbruger du den samme hex-farve kode igen og igen i din kode? Ville det være mere fornuftigt at omlægge det til en Sass-variabel?
  • Fungerer din kode lige så godt på Safari som i Chrome?
  • Kan du erstatte noget af din layoutkode med et gittersystem som Skeleton?
  • Bruger du det ! Vigtige flag ofte? Hvordan kan du ordne det?

Eksperiment 4

Det sidste eksperiment brugte det, du har lært om bedste praksis. Virkningerne af bedste praksis bliver dog ofte ikke synlige, før du anvender dem på et større projekt.

Til det sidste eksperiment skal du oprette en portefølje-webside. Som en front-end er din porteføljeside en af ​​dine vigtigste digitale aktiver. En portefølje er et sted, der viser dit arbejde. Endnu vigtigere er det en løbende post, der hjælper dig med at spore dine fremskridt og udvikling. Så selvom du kun har 1 eller 2 ting at vise, sæt det op.

For at komme i gang skal du følge Adham Dannaways artikel, My (Simple) Workflow to Design and Develop A Portfolio Website

Hvis din første portefølje-iteration ikke er perfekt, er det okay . Porteføljer gennemgår mange iterationer. Og hvad er vigtigt, at du har bygget det med dine egne færdigheder.

Bliv opdateret

Mens HTML og CSS ikke kommer ud af mode når som helst snart, er det vigtigt at holde dig opdateret med frontend-landskabet.

Nedenfor er en liste over websteder, blogs og fora, der begge er behagelige at læse og informative.

  • CSSTricks
  • Smashing Magazine
  • Designer Nyheder
  • Nettuts +
  • CSS-guide

Lær ved eksempel

Endelig er den bedste måde at lære på et godt eksempel. Her er et sæt styleguides og kodekonventioner, der lærer dig, hvordan du kan være en mere effektiv front-end.

Styleguides

Webstyleguides er samlinger af CSS-komponenter og mønstre, der kan genbruges på tværs af et websted. Det vigtigste at bemærke fra disse styleguides er, hvordan komponentbaserede HTML- og CSS-tilgange giver dig mulighed for at genbruge kode for at holde din kode TØRR.

  • Mapbox
  • Ensom planet
  • Salgsstyrke
  • MailChimp

Kodekonventioner

Kodekonventioner designet til at gøre din kode læsbar og vedligeholdelig. Nogle af disse links som CSS-retningslinjer er retningslinjer for at skrive bedre HTML og CSS, mens andre links som Github interne CSS-værktøjssæt og retningslinjer er eksempler på kvalitetskode.

  • CSS Retningslinjer
  • Github interne CSS-værktøjssæt og retningslinjer
  • AirBnBs CSS Styleguide

Pak ind

Forhåbentlig ved slutningen af ​​denne artikel er du fortrolig med HTML og CSS og har et par projekter under dit bælte. Den bedste måde at lære frontend på er ved at bygge projekter og eksperimentere. Husk, at alle front-end-udviklere skal starte et sted. Og det er bedre at starte i dag end i morgen.

Denne artikel er den første af en todelt serie. Den anden artikel dækker tilføjelse af interaktivitet med Javascript og Javascript-biblioteker / -rammer. Også, hvis du vil have mig til at uddybe noget eller har spørgsmål, er du velkommen til at efterlade en note eller tweet ud til mig.

Fra nul til frontend-helt (del 2)

En komplet guide til at lære front-end udvikling medium.com

PS Hvis du kunne lide denne artikel, ville det betyde meget, hvis du trykker på knappen anbefale eller deler med venner.

Hvis du vil have mere, kan du følge mig på Twitter, hvor jeg sender ikke-sensiske spøgelser om design, front-end-udvikling, bots og maskinindlæring.