Lær HTML og CSS med disse trinnvise tutorials

Annonse

Når du klør for å prøve deg på kode, er det ganske enkelt ingen begrensning for antall opplæringsprogrammer, videoer og online kurs der ute som du kan prøve. Men noen ganger er den beste måten å lære noe ved å dykke i og prøve det på første hånd. Nettutvikling er ikke annerledes.

Hvis du er nysgjerrig på HTML, CSS og JavaScript, eller tenker at du kan ha en evne til å lære å lage nettsteder fra bunnen av - er det noen få gode trinnvise veiledninger verdt å prøve.

Følgende liste over opplæringsprogrammer vil lede deg gjennom det grunnleggende om HTML og CSS, og vil til og med gi deg en introduksjon til den komplekse verdenen som er Javascript Hva er JavaScript, og kan Internett eksistere uten det?JavaScript er en av de tingene mange tar for gitt. Alle bruker det. Les mer - i det minste for nybegynnere. Men det de ikke vil gjøre, er å forberede deg på et liv som utvikler rett utenfor boksen. De fleste av disse tjenestene er ganske enkelt et enkelt sted å starte.

Det vil ta mye mer enn dette å begynne å utvikle nettsteder profesjonelt. Disse verktøyene, hvorav de fleste er gratis, gir deg

grunnleggende byggesteiner til nettutvikling, og vil gjøre det mye lettere å dykke ned i de mer kompliserte kursene.

Folkene på generalforsamlingen har et gratis verktøy som lærer deg det grunnleggende om HTML, CSS og JavaScript, og det er det perfekte stedet for komplette nybegynnere å starte. Gjennom en serie på fem prosjekter, lærer du terminologien og grunnleggende kodingsevner som lar deg bygge et nettsted som ligner en om.me-side, hvordan du bygger en responsiv blogg og en restaurantnettsted.

Dash-veiledningene går utover å lære å lage enkle nettsteder, du kan også utnytte kraften til HTML, CSS og JavaScript for å lage en robot ved hjelp av former og linjer eller til og med et Mad Libs-spill.

Dash-veiledningene beveger seg i rimelig tempo og tar deg gjennom hvert trinn noen få linjer med kode om gangen. Som med alle opplæringer, vil jeg anbefale å ta notater mens du jobber. Dette vil hjelpe deg å huske de forskjellige verktøyene du lærer, og med veiledningene til generalforsamlingen, når du har fullført en fase, ser det ikke ut til å være en måte å gjenta den på.

Konklusjon: Å bruke Dash vil sette deg opp med all kunnskapen du trenger for å sette sammen et grunnleggende moderne nettsted - fra navigasjon, for responsiv design. Du blir til og med introdusert for det grunnleggende om hvordan du oppretter et tilpasset Tumblr-tema. Når det er sagt, er det bare totalt fire leksjoner på Dash. Selv om du kan ta konseptene du har lært og prøve å bruke dem på forskjellige måter, må du supplere kunnskapen din med andre kurs som er inkludert i denne listen.

Codecademy har eksistert ganske mye lenger enn Dash, og legger ofte til nye leksjoner i tilbudene. Med de samme trinnvise altomfattende leksjonene du finner på Dash, går Codecademy et skritt videre ved å gi brukerne en generell oversikt over hvordan du oppretter et nettsted med HTML og CSS, men gir også dybdeopplæringer om de enkelte språkene, HTML, CSS og Javascript.

Som andre tjenester viser Codecademy deg hvordan du oppretter en navigasjonsmeny, legge til bakgrunnsbilder, lage en galleri med bilder, eller til og med a påmeldingsside. (For å legge til funksjonalitet på påmeldingssiden din, må du huske å gå gjennom Opplæring i Ruby on Rails.)

Det er også dedikerte leksjoner om jQuery Å gjøre nettet interaktivt: en introduksjon til jQueryjQuery er et script-bibliotek på klientsiden som nesten alle moderne nettsteder bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er det mest utviklede, mest støttede og mest brukte ... Les mer , et nøkkelspråk som gjør JavaScript mye enklere å lære. Hvis du er nysgjerrig på utvikling av backend, er det også fordypningstimer for Ruby, Python, PHP og mer.

I tillegg til å lære å designe et nettsted, og dykke ned i forviklinger med programmeringsspråk 7 nyttige triks for å mestre et nytt programmeringsspråkDet er greit å bli overveldet når du lærer å kode. Du vil sannsynligvis glemme ting så raskt som du lærer dem. Disse tipsene kan hjelpe deg med å beholde all den nye informasjonen bedre. Les mer , kan du også bruke Codecademy for å få det grunnleggende om hvordan du oppretter webapper, og hvordan du legger til påloggings-, påloggings- og utloggingsfunksjoner på nettstedet ditt.

Konklusjon: I likhet med Dash er interaktiviteten til Codecademy uvurderlig. Å kunne se hvordan hvert trinn materialiseres på nettstedet ditt er oppmuntrende, og oppsettet gjør det også enkelt å oppdage feil. Hvis du er en nybegynner, er Codecademy et flott sted å få tærne våte og bestemme om koding og webdesign passer riktig for deg. Med den erfaringen kan du ta den kunnskapen til et betalt kurs eller en klasse.

Tutsplus.com er en webside fullpakket med veiledninger (gratis og betalt) om en lang rekke emner inkludert alt fra mobil Designe en gjennombrudd app? 7 mobilutviklingsblogger du bør leseMobilrommet er så nytt at trender stadig skifter og ny innsikt blir laget hver dag. Hvis du planlegger å utvikle mobilapper, hvordan kan du følge med uten å bli gal? Les mer og spillutvikling 4 gratis nettsteder hvor du kan lære det grunnleggende om spillutviklingNår du ser etter en god opplæringsserie for spillutvikling, vil du ha en som vil lære deg praksis og mentalitet for god koding fordi du deretter kan transponere denne fremgangsmåten på hvilket som helst språk eller plattform. Les mer til fargelære Hvordan lære fargelære på mindre enn en timeGrunnleggende kunnskap om fargeteori kan bety forskjellen mellom en "amatør" estetikk og en "profesjonell" - og det tar virkelig ikke lang tid å lære. Les mer og hvordan du bruker Adobe Illustrator Lær deg Adobe Illustrator gratisAdobe Illustrator har lenge vært det valgte illustrasjonsverktøyet for grafikere. Klar til å gi designene dine liv? Slik lærer du Adobe Illustrator gratis. Les mer . Selv om ikke alle leksjonene på nettstedet følger trinn-for-trinn-modell, er det noen få som tar denne tilnærmingen og leder brukere gjennom enkel hvordan du kan utvikle nettutvikling.

En spesielt nyttig tutorial fører deg gjennom trinnene til design og kode nettstedet ditt. Opplæringen går riktignok tilbake til 2009 så designestetikken kan ikke appellere til deg, men når det er sagt, opplæringen lærer deg ferdighetene som er nødvendige for å designe nettstedet ditt, og du kan deretter bruke disse ferdighetene til et mer oppdatert design. En annen advarsel som er verdt å nevne med denne opplæringen er at den krever bruk av Adobe Photoshop. Hvis du ikke har tilgang til programvaren, kan du alltid velge alternativet Adobe Creative Cloud mot et gebyr på $ 50 per måned.

Opplæringen leder deg gjennom å designe et grunnleggende nettsted med to kolonner med en topptekst og bunntekst. Nettstedet inneholder innhold, en navigasjonslinje, sosiale medieknapper og mer. Når du har designet nettstedet i Photoshop, kan du bytte til en kodedigerer, og opplæringen leder deg gjennom koden som kreves for å transformere designet til en HTML-side. Opplæringen vil kreve litt grunnleggende kunnskap om HTML, så jeg vil anbefale å prøve denne opplæringen etter at du har gått gjennom de første opplæringene på generalforsamlingen.

Hvis du vil lage en mer omfattende webside, kan du sjekke en annen Tuts + -opplæring på hvordan du designer et vakkert nettsted fra bunnen av. En annen PSD til HTMl opplæring gjør livet litt enklere ved å tilby HTML, CSS og bildefiler. Andre opplæringsprogrammer om Tuts + leder deg gjennom hvordan du lager en Tumblr foto dagbok tema - selv om denne er en enkel Photoshop-design, minus koden.

Konklusjon: Sammenlignet med Codecademy og Dash, tar Tuts + tutorials litt mer krefter siden du må gå selv gjennom trinnene. Med de to andre nettstedene er det mye mer ‘håndholding’ så å si. Når du har gått gjennom hvert trinn, er det ofte lettere å finne ut hvilken feil du kan ha gjort. Det krever også at du bruker din egen programvare, mens Dash og Codecademy har innebygde systemer. Når det er sagt, med forskjellige tutorials, er du nødt til å finne et sett med leksjoner som passer nøyaktig til det du vil lære.

Med en serie på 12 leksjoner, gjør Shaye Howe en virkelig god jobb med å bryte ned det grunnleggende om HTML som introduserer deg for terminologien, og hvordan du bruker de forskjellige elementene i HTML og CSS. Ulike leksjoner inkluderer å bli kjent med HTML, CSS, forstå boksemodellen, plassere innhold, typografi og mer.

Når det gjelder bruk av leksjonene i opplæringen, gir ikke nettstedet en måte å raskt se hvordan HTML og CSS ser ut i effekt. For å overvinne dette kan du bruke et online verktøy som vil gi de samme funksjonene du finner i Codecademy og Dash.

Sjekk ut en CSS / HTML / JavaScript sandkasse som CSSDeck eller LiveWeave, som lar deg legge inn HTML, CSS og JavaScript og se det endelige resultatet. Teknisk sett kan du også bruke HTML-, CSS- og JavaScript-redigeringsprogrammet i Dash og Codecademy også hvis du liker oppsettet de gir.

Når du jobber deg gjennom forklaringene, gir nettstedet også eksempler på kode for deg å prøve ut selv. På slutten av hver leksjon er en praktisk øvelse som lar deg bruke det du har lært.

Etter at du har klart deg gjennom de 12 timene, kan du bytte til Avansert HTML- og CSS-leksjon, som inkluderer responsiv design, jQuery og mer.

Konklusjon: Denne veiledningen tar en litt annen tilnærming til de andre forslagene som er oppført her. Med en mye mer dyptgående forklaring, vil du bruke mer tid på å lese enn du vil bruke det du har lært. Selv om dette kan høres kjedelig ut for noen, er det noen verdifulle leksjoner her som gir kontekst og bedre forståelse av hvordan disse språkene fungerer.

Hva tar du?

Nå er det på tide å høre fra deg. Er det noen opplæringsprogrammer for nettutvikling som du vil anbefale? Hva tror du er neste trinn etter å ha prøvd ut disse nettkursene? Gi oss beskjed i kommentarene.

Bildekreditt: hackNY.org