Naučite se HTML in CSS s temi vadnicami po korakih

Oglas

Ko srbite, da bi poskusili z roko pri kodi, preprosto ni omejitev števila vadnic, videoposnetkov in spletnih tečajev, ki jih lahko poskusite. Toda včasih je najboljši način, da se nekaj naučiš tako, da se potapljaš in poskusiš iz prve roke. Spletni razvoj ni nič drugačen.

Če vas zanimajo HTML, CSS in JavaScript ali mislite, da bi vas morda zanimalo, kako ustvariti spletna mesta iz nič - obstaja nekaj odličnih vaje po korakih vredno poskusiti.

Naslednji seznam vadnic vas bo vodil skozi osnove HTML in CSS ter vam celo predstavil kompleksni svet, ki je JavaScript Kaj je JavaScript in ali lahko internet obstaja brez njega?JavaScript je ena tistih stvari, ki jih mnogi jemljejo kot samoumevne. Vsi ga uporabljajo. Preberi več - vsaj kar se tiče začetnikov. Ampak tisto, česar ne bodo storili, je, da vas pripravijo na življenje kot razvijalec takoj. Večina teh storitev je preprosto mesto za začetek.

Za začetek profesionalnega razvoja spletnih strani bo potrebno veliko več kot to. Ta orodja, ki jih je večina brezplačnih, vam dajo

osnovni gradniki spletnega razvoja, in se bo lažje potopil v bolj zapletene tečaje.

Ljudje na Generalni skupščini imajo brezplačno orodje, ki vas uči osnov HTML, CSS in JavaScript, in je popoln kraj za začetek popolnih začetnikov. Skozi serija petih projektov, naučili se boste terminologije in osnovnih veščin kodiranja, ki vam omogočajo izdelavo spletnega mesta, ki je podobno strani about.me, kako sestaviti odziven blog in spletno stran restavracije.

Vadnice Dash presegajo učenje, kako ustvariti preprosta spletna mesta, prav tako lahko uporabite moč HTML, CSS in JavaScript za ustvarjanje robota s pomočjo oblik in linij ali celo igro Mad Libs.

Vadnice Dash se premikajo z razumnim tempom in vas skozi vsak korak vodijo po nekaj vrstic kode hkrati. Kot pri vsaki vadbi sem tudi jaz priporočal, da si med delom zapisujete. To vam bo pomagalo zapomniti različna orodja, ki se jih učite, in z vadnicami Generalne skupščine, ko zaključite fazo, se vam ne zdi, da bi to lahko ponovili.

Zaključek: Uporaba Dash-a vam bo vzpostavila vse znanje, ki ga potrebujete za sestavljanje osnovnega sodobnega spletnega mesta - od navigacije do odzivnega oblikovanja. Seznanjeni ste celo z osnovami ustvarjanja Tumblr teme po meri. Glede na to so na Dashu le štiri ure. Medtem ko lahko koncepte, ki ste se jih naučili, in jih poskušate uporabiti na različne načine, morate svoje znanje dopolniti z drugimi predmeti, vključenimi na ta seznam.

Codecademy je že precej daljši od Dash-a in svoji ponudbi pogosto dodaja nova spoznanja. Z enakimi korak za korakom vseobsegajočimi lekcijami, ki jih boste našli na Dash-u, Codecademy gre še korak dlje, tako da daje uporabnikom splošno pregled ustvarjanja spletnega mesta s HTML in CSS, vsebuje pa tudi poglobljene vadnice o posameznih jezikih, HTML, CSS in JavaScript.

Kot druge storitve vam tudi Codecademy pokaže, kako ustvariti navigacijski meni, dodaj slike ozadja, narediti galerija slikali celo a stran za prijavo. (Če želite dodati svojo stran za prijavo, ne pozabite iti skozi Tutorial Ruby on Rails.)

Obstajajo tudi namenske lekcije o jQuery Izdelava spletnega interaktivnega: uvod v jQueryjQuery je skriptna knjižnica na strani odjemalca, ki jo uporablja skoraj vsako sodobno spletno mesto - spletna mesta naredijo interaktivne. To ni edina Javascript knjižnica, ampak je najbolj razvita, najbolj podprta in najbolj razširjena ... Preberi več , ključni jezik, ki omogoča JavaScript veliko lažjega učenja. Če vas zanima razvoj zalednih programov, obstajajo tudi poglobljene lekcije za Ruby, Python, PHP in še več.

Poleg tega, da se naučite oblikovati spletno stran in se potapljati v pretankosti programskih jezikov 7 uporabnih trikov za obvladovanje novega programskega jezikaV redu je biti preobremenjen, ko se učiš šifrirati. Verjetno boste stvari pozabili tako hitro, ko se jih boste naučili. Ti nasveti vam lahko pomagajo bolje obdržati vse te nove informacije. Preberi več lahko uporabite tudi Codecademy, da dobite osnove o ustvarjanju spletnih aplikacij in kako na svoje spletno mesto dodati funkcionalnosti za registracijo, prijavo in odjavo.

Zaključek: Tako kot Dash je interaktivnost Codecademy neprecenljiva. Spodbudno je razumevanje, kako se vsak korak na vašem spletnem mestu uresničuje, nastavitev pa omogoča tudi enostavno odkrivanje napak. Če ste popoln začetnik, je Codecademy odličen kraj za umirjanje prstov in odločitev, ali je kodiranje in oblikovanje spletnih strani primerno za vas. S to izkušnjo lahko to znanje prevzamete na plačanem tečaju ali razredu.

Tutsplus.com je spletno mesto z brezplačnimi in plačanimi vajami o najrazličnejših temah, vključno z vsemi mobilni Oblikovanje prebojna aplikacija? 7 blogov o mobilnem razvoju, ki jih morate prebratiMobilni prostor je tako nov, da se trendi nenehno spreminjajo in vsak dan se pojavljajo nova spoznanja. Če nameravate razvijati mobilne aplikacije, kako lahko vztrajate, ne da bi se razjezili? Preberi več in razvoj iger 4 brezplačne spletne strani, na katerih se lahko naučite osnov razvoja igerKo iščete dobro serijo vadnic za razvoj iger, želite tisto, ki vas bo naučila prakse in miselnost dobrega kodiranja, ker jih lahko potem prenesete v kateri koli jezik ali ploščad. Preberi več do barvna teorija Kako se naučiti teorije barv v manj kot eni uriOsnovno znanje o teoriji barv lahko pomeni razliko med "ljubiteljsko" estetiko in "profesionalno" - in resnično ne bo trajalo dolgo. Preberi več in kako uporabljati Adobe Illustrator Naučite se Adobe Illustrator brezplačnoAdobe Illustrator je že dolgo izbirno orodje za ilustracijo grafičnih umetnikov. Ste pripravljeni, da svoje modele zaživite? Takole se lahko brezplačno naučite Adobe Illustrator. Preberi več . Medtem ko vse lekcije, ki jih poučujemo na spletnem mestu, sledijo korakom po koraku, vendar je nekaj takih, ki uporabljajo ta pristop in uporabnike sprehodijo skozi enostavna spletna navodila.

Ena posebej koristna vadnica vas vodi skozi korake do oblikujte in kodirajte svoje spletno mesto. Vadnica zagotovo sega v leto 2009, tako da vas oblikovalska estetika morda ne bo privlačila, toda to je vadnica vas nauči veščin, potrebnih za oblikovanje vašega spletnega mesta, nato pa jih lahko uporabite pri bolj posodobljeni zasnovi. Pri tej vadnici je treba omeniti še eno opozorilo, da zahteva uporabo Adobe Photoshopa. Če nimate dostopa do programske opreme, se lahko vedno odločite za možnost Adobe Creative Cloud za plačilo 50 USD na mesec.

V vadnici vas vodi skozi oblikovanje osnovnega spletnega mesta z dvema stolpcema z glavo in nogo. Spletno mesto vključuje vsebino, navigacijsko vrstico, gumbe za socialne medije in drugo. Ko oblikujete spletno mesto v programu Photoshop, lahko preklopite na urejevalnik kod in v vadnici vas bo vodil po kodi, ki je potrebna za pretvorbo vašega dizajna v stran HTML. Vadnica bo zahtevala nekaj osnovnega znanja HTML, zato priporočam, da preizkusite to vadbo, ko boste prešli prvih nekaj vaj Generalne skupščine.

Če želite izdelati bolj dovršeno spletno mesto, si oglejte še eno vadnico Tuts + kako oblikovati lepo spletno stran od nič. Še ena PSD v HTMl vadnico olajša življenje z zagotavljanjem datotek HTML, CSS in slik. Druge vaje na Tuts + vas vodijo, kako ustvariti Tumblr tema dnevnika fotografij - čeprav je ta preprost dizajn Photoshopa, minus koda.

Zaključek: V primerjavi s Codecademyjem in Dashom vaje Tuts + vzamejo malo več truda, saj se morate sami sprehoditi po stopnicah. Z drugimi dvema spletnima mestoma je tako rekoč veliko več "ročnega držanja". Ko ste prehodili vsak korak, je pogosto lažje ugotoviti, katero napako ste morda storili. Zahteva tudi uporabo lastne programske opreme, medtem ko imata Dash in Codecademy vgrajene sisteme. Kljub temu boste z različnimi vajami našli niz lekcij, ki ustrezajo točno tistemu, kar se želite naučiti.

Shaye Howe z nizom 12 lekcij opravi resnično veliko delo, tako da razbije osnove HTML, tako da vas seznani s terminologijo in kako uporabljate različne elemente HTML in CSS. Različne lekcije vključujejo spoznavanje HTML, CSS, razumevanje modela škatle, pozicioniranje vsebine, tipografija in drugo.

Kar zadeva uporabo lekcij v vadnici, spletno mesto ne ponuja načina, kako hitro videti, kako izgledata HTML in CSS. Če želite to premagati, lahko uporabite spletno orodje, ki bo imelo enake funkcije, kot jih boste našli v Codecademy in Dash.

Oglejte si peskovnik v obliki CSS / HTML / JavaScript CSSDeck ali LiveWeave, ki omogočajo vnos HTML, CSS in JavaScript ter ogled končnega rezultata. Tehnično lahko v urejevalniku Dash in Codecademy uporabite tudi urejevalnike HTML, CSS in JavaScript, če vam je všeč nastavitev, ki jo zagotavljajo.

Ko se skozi razlage trudiš, spletno mesto vsebuje tudi primere kode, s katerimi lahko preizkusiš sam. Na koncu vsake lekcije je praktična vaja, ki omogoča uporabo tega, kar ste se naučili.

Potem ko ste to opravili skozi 12 lekcij, lahko preklopite na Napredne lekcije HTML in CSS, ki vključuje odziven dizajn, jQuery in še več.

Zaključek: Ta vadnica zavzema nekoliko drugačen pristop do ostalih predlogov, navedenih tukaj. Z veliko bolj poglobljeno razlago boste porabili več časa za branje, kot boste uporabili tisto, kar ste se naučili. Čeprav se nekaterim to morda zdi dolgočasno, je tu nekaj dragocenih spoznanj, ki zagotavljajo kontekst in boljše razumevanje delovanja teh jezikov.

Kaj je vaše?

Zdaj je čas, da se oglasimo od vas. Ali obstajajo kakšne spletne vaje za spletno razvoj, ki bi jih priporočili? Kaj je po vašem preizkusu spletnih tečajev naslednji korak? Sporočite nam v komentarjih.

Kreditna slika: hackNY.org