Lær HTML og CSS med disse trinnvise opplæringsprogrammene

Når du er kløe for å prøve hånden din på koden, er det rett og slett ingen grense for antall opplæringsprogrammer, videoer og nettkurs der ute for å prøve. Men noen ganger er den beste måten å lære noe på, ved å dykke inn og prøve det førstehånds. Webutvikling er ikke annerledes.

Hvis du er nysgjerrig på HTML, CSS og JavaScript, eller tenk at du har mulighet til å lære å lage nettsteder fra bunnen av - det er noen flotte trinnvise opplæringsprogrammer verdt å prøve.

Følgende liste over opplæringsprogrammer vil gå 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? Hva er JavaScript, og kan Internett eksistere uten det? JavaScript er en av de tingene mange tar for gitt. Alle bruker det. Les mer - minst så langt som nybegynnere er bekymret. Men det de ikke vil gjøre er å forberede deg på et liv som utvikler rett ut av boksen. De fleste av disse tjenestene er ganske enkelt et enkelt sted å starte.

Det vil ta mye mer enn dette for å begynne å utvikle nettsteder profesjonelt. Disse verktøyene, hvorav de fleste er gratis, gir deg grunnleggende byggesteiner til webutvikling, og vil gjøre det mye lettere å dykke inn i de mer kompliserte kursene.

Generalforsamlingens Dash

Folkene på Generalforsamlingen har et gratis verktøy som lærer deg grunnleggende om HTML, CSS og JavaScript, og det er det perfekte stedet for komplette nybegynnere å starte. Gjennom en serie på fem prosjekter, Du vil lære terminologien og grunnleggende kodende ferdigheter slik at du kan bygge et nettsted som ligner en about.me-side, hvordan du bygger en responsiv blogg og en restaurantwebside.

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 en Mad Libs-spill.

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

Konklusjon: Bruke Dash vil sette deg opp med all den kunnskapen du trenger for å sette sammen et grunnleggende, moderne nettsted - fra navigasjon til responsiv design. Du blir til og med introdusert til det grunnleggende om hvordan du lager et eget Tumblr-tema. Når det er sagt, er det bare totalt fire leksjoner på Dash. Mens du kan ta de konseptene du har lært og forsøke å bruke dem på forskjellige måter, må du supplere din kunnskap med andre kurs i denne listen.

Codecademy

Codecademy har eksistert ganske mye lengre enn Dash, og legger ofte nye leksjoner til sine tilbud. Med de samme trinnvise omfattende leksjonene finner du på Dash, Codecademy går ett skritt videre ved å gi brukerne en generell oversikt over hvordan man lager et nettsted med HTML og CSS, men gir også grundige veiledninger på de enkelte språkene. , HTML, CSS og JavaScript.

Som andre tjenester, viser Codecademy deg hvordan du lager en navigasjonsmeny, legger til bakgrunnsbilder, lager et galleri med bilder, eller til og med en registreringsside. (For å legge til funksjonalitet til påloggingssiden din, pass på å gå gjennom Ruby on Rails-opplæringen.)

Det er også dedikert leksjoner på jQuery Å gjøre Internett-interaktiv: En introduksjon til jQuery Å gjøre Internett-interaktiv: En introduksjon til jQuery jQuery er et script-bibliotek på klientsiden som nesten alle moderne nettsider bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er den mest utviklede, mest støttede og mest brukte ... Les mer, et nøkkel språk som gjør JavaScript mye lettere å lære. Hvis du er nysgjerrig på utvikling av backend, er det også grundige leksjoner for Ruby, Python, PHP og mer.

I tillegg til å lære å designe et nettsted og dykke inn i intricacies av programmeringsspråk. 7 Nyttige triks for å mestre et nytt programmeringsspråk. 7 Nyttige triks for å mestre et nytt programmeringsspråk. Det er greit å være overveldet når du lærer å kode. Du vil sikkert glemme ting så fort du lærer dem. Disse tipsene kan hjelpe deg å bedre beholde all den nye informasjonen. Les mer, du kan også bruke Codecademy for å få grunnleggende om hvordan du lager webapper, og hvordan du legger til pålogging, pålogging og loggfunksjonalitet til nettstedet ditt.

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

Tuts+

Tutsplus.com er et nettsted fullpakket med opplæringsprogrammer (gratis og betalt) på et bredt spekter av emner, inkludert alt fra mobildesigning av et gjennombruddsprogram? 7 Mobile Development Blogs Du bør lese å designe et gjennombruddsprogram? 7 Mobilutviklingsblogger du bør lese Mobilplassen er så ny at trender stadig skifter og nye innsikt blir gjort hver dag. Hvis du planlegger å utvikle mobilapper, hvordan kan du holde tritt uten å bli gal? Les mer og spillutvikling 4 Gratis nettsteder hvor du kan lære grunnleggende om spillutvikling 4 gratis nettsteder hvor du kan lære grunnleggende om spillutvikling Når du ser etter en god spillutvikling opplæringsserie, vil du ha en som vil lære deg praksis og mentalitet av god koding fordi du deretter kan transponere disse praksisene i hvilket som helst språk eller plattform. Les mer til fargeteori Slik lærer du fargeteorier på mindre enn en time Slik lærer du fargeteorier på mindre enn en time Grunnleggende kunnskaper om fargeteori kan bety forskjellen mellom en "amatør" estetisk og en "profesjonell" en - og det er virkelig tar ikke lang tid å lære. Les mer og hvordan du bruker Adobe Illustrator Lær deg selv Adobe Illustrator gratis lær deg selv Adobe Illustrator gratis Adobe Illustrator har lenge vært et illustrasjonsverktøy for grafikere. Klar til å bringe designene dine til liv? Slik lærer du Adobe Illustrator gratis. Les mer . Selv om ikke alle leksjonene som er undervist på nettstedet, følger trinnvis modell, er det noen som tar denne tilnærmingen og brukerne gjennom enkle webutvikling.

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

Opplæringen går deg gjennom å designe en grunnleggende to kolonne nettside med en header og footer. Nettstedet inneholder innhold, en navigeringslinje, sosiale medier knapper og mer. Når du har designet nettstedet i Photoshop, kan du bytte til en kodeditor, og veiledningen går deg gjennom koden som kreves for å forvandle design til en HTML-side. Opplæringen vil kreve noen grunnleggende kunnskaper om HTML, så jeg vil anbefale å prøve denne opplæringen etter at du har gått gjennom de første generalforsamlingsopplæringene.

Hvis du ønsker å lage et mer forseggjort nettsted, sjekk ut en annen Tuts + opplæring om hvordan du designer et vakkert nettsted fra bunnen av. En annen PSD til HTMl opplæring gjør livet litt enklere ved å gi HTML, CSS og bildefiler. Andre opplæringsprogrammer på Tuts + går deg gjennom hvordan du lager et Tumblr-bildedagstema - selv om dette er et enkelt Photoshop-design, minus koden.

Konklusjon: Sammenlignet med Codecademy og Dash, tar Tuts + tutorials litt mer innsats siden du må gå deg gjennom trinnene. Med de to andre sidene er det mye mer 'håndholdte' så å si. Når du gikk gjennom hvert trinn, er det ofte lettere å finne ut hvilken feil du måtte ha gjort. Det krever også at du bruker din egen programvare, mens Dash og Codecademy har innebygde systemer. Når det er sagt, med ulike opplæringsprogrammer, er du nødt til å finne et sett med leksjoner som passer nøyaktig til det du vil lære.

Lær å kode med Shaye Howe

Med en serie på 12 leksjoner, gjør Shaye Howe en veldig god jobb med å bryte ned grunnleggende HTML, og introdusere deg til terminologien, og hvordan du bruker de ulike elementene i HTML og CSS. Ulike leksjoner inkluderer å bli kjent med HTML, CSS, forståelse av boksemodellen, plassering av innhold, typografi og mer.

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

Sjekk ut en CSS / HTML / JavaScript sandkasse som CSSDeck eller LiveWeave, som lar deg skrive inn HTML, CSS og JavaScript og se det endelige resultatet. Teknisk kan du også bruke HTML, CSS og JavaScript redaktører 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 deg selv. På slutten av hver leksjon er en hands-on trening som lar deg bruke det du har lært.

Etter at du har gjort det gjennom de 12 leksjonene, kan du bytte til Advanced HTML og CSS Lesson, som inkluderer responsiv design, jQuery og mer.

Konklusjon: Denne opplæringen tar en litt annen tilnærming til de andre forslagene som er oppført her. Med en mye mer grundig forklaring vil du bruke mer tid til å 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 sammenheng og bedre forståelse av hvordan disse språkene fungerer.

Hva er det du tar?

Nå er det på tide å høre fra deg. Er det noen online webutviklingsopplæringer som du vil anbefale? Hva tror du er neste skritt etter å ha prøvd disse nettkursene? Gi oss beskjed i kommentarene.

Bildekreditt: hackNY.org

Utforsk mer om: Utdanningsteknologi, HTML, HTML5, Webdesign.