Õppige HTML-i ja CSS-i nende samm-sammult juhendavate dokumentide abil

Reklaam

Kui sügelete, et proovida oma kätt koodiga, pole seal pakutavate õppematerjalide, videote ja veebikursuste arvu lihtsalt piiratud. Kuid mõnikord on parim viis midagi õppida, kui sukelduda sisse ja proovida seda ise. Veebiarendus ei erine.

Kui tunnete huvi HTMLi, CSS-i ja JavaScripti vastu või arvate, et võiksite osata veebisaitide nullist loomise õppimiseks - siin on mõned suurepärased samm-sammult õpetused tasub proovimist.

Järgmine õppematerjalide loend tutvustab teid HTML-i ja CSS-i põhitõdedest ning annab teile isegi sissejuhatuse keerulisse maailma, mis on JavaScript Mis on JavaScript ja kas Internet saab ilma selleta eksisteerida?JavaScript on üks neist asjadest, mida paljud peavad iseenesestmõistetavaks. Kõik kasutavad seda. Loe rohkem - vähemalt algajate jaoks. Kuid mida nad ei tee, on see, et valmistate teid ette arendajana elamiseks otse karbist väljas. Enamik neist teenustest on lihtsalt lihtne koht alustamiseks.

Veebisaitide professionaalse arendamise alustamiseks kulub palju rohkem. Need tööriistad, millest enamik on tasuta, annavad teile selle

veebiarenduse põhielemendid, ja see muudab keerukamatesse kursustesse sukeldumise palju lihtsamaks.

Peaassamblee inimestel on tasuta tööriist, mis õpetab teile HTML-i, CSS-i ja JavaScripti põhitõed ning see on ideaalne koht alustamiseks alustamiseks. Läbi viiest projektist koosnev sari, õpite terminoloogiat ja põhilisi kodeerimisoskusi, mis võimaldavad teil luua umbes.me-lehte meenutava veebisaidi, reageeriva ajaveebi ja restorani veebisaidi.

Dash-õpetused ei piirdu lihtsalt lihtsate veebisaitide loomise õppimisega, vaid HTML-i, CSS-i ja JavaScripti võimalusi saab kasutada roboti loomiseks, kasutades kujundeid ja jooni või isegi Mad Libsi mängu.

Dashi õpetused liiguvad mõistliku kiirusega, viies teid igal sammul läbi paar rida koodi korraga. Nagu iga juhendaja puhul, soovitaksin ka töötamise ajal märkmeid teha. See aitab teil meelde jätta mitmesuguseid õpitud tööriistu ja Peaassamblee õpetustega, kui olete faasi läbinud, ei näi olevat võimalust seda korrata.

Järeldus: Dash'i kasutamine annab teile kõik teadmised, mida vajate moodsa põhilise veebisaidi kokkupanekuks reageerivasse disaini. Teile tutvustatakse isegi põhitõdesid, kuidas luua kohandatud Tumblri teema. Dashil on ainult neli õppetundi. Ehkki võite võtta õpitud mõisteid ja proovida neid erineval viisil rakendada, peate oma teadmisi täiendama teiste selles loendis sisalduvate kursustega.

Codecademy on olnud Dashist üsna palju kauem ja lisab oma pakkumistele sageli uusi õppetunde. Sama järkjärgulise ja kõikehõlmava õppetunniga, mida leiate Dashilt, läheb Codecademy sammu edasi, andes kasutajatele üldise HTML-i ja CSS-iga veebisaidi loomise ülevaade, kuid pakub ka põhjalikke õpetusi üksikute keelte, HTML, CSS ja JavaScript.

Nagu muud teenused, näitab Codecademy teile, kuidas luua navigeerimismenüü, lisama taustpildid, teha pildigalerii, või isegi a registreerumisleht. (Registreerimislehe funktsionaalsuse lisamiseks avage kindlasti leht Juhendaja Ruby on Rails.)

Samuti on pühendatud õppetunnid jQuery Veebi interaktiivseks tegemine: jQuery sissejuhatusjQuery on kliendipoolne skriptikogu, mida kasutab peaaegu iga kaasaegne veebisait - see muudab veebisaidid interaktiivseks. See pole ainus Javascripti teek, kuid see on kõige enam arenenud, kõige toetatud ja laialdasemalt kasutatav ... Loe rohkem , võtmekeel, mis muudab JavaScripti õppimise palju lihtsamaks. Kui olete huvitatud taustaprogrammi arendamisest, leiate ka põhjalikke õppetunde Ruby, Pythoni, PHP ja muu jaoks.

Lisaks veebisaidi kujundamise õppimisele ja veebikeskkonda sukeldumisele programmeerimiskeelte keerukused 7 kasulikke nippe uue programmeerimiskeele valdamiseksKoodide õppimisel on okei. Tõenäoliselt unustate asjad nii kiiresti kui õpite. Need näpunäited aitavad teil kogu seda uut teavet paremini säilitada. Loe rohkem , saate Codecademy abil saada ka põhilisi juhiseid veebirakenduste loomise kohta ning kuidas lisada oma veebisaidile registreerimis-, sisselogimis- ja väljalogimisfunktsioone.

Järeldus: Nagu Dash, on Codecademy interaktiivsus hindamatu. Võimalus näha, kuidas iga samm teie veebisaidil realiseerub, on julgustav ning seadistamine hõlbustab ka vigade tuvastamist. Kui olete täielik algaja, on Codecademy suurepärane koht, kus varbad märjaks teha ja otsustada, kas kodeerimine ja veebidisain sobivad teile kõige paremini. Selle kogemuse abil saate viia need teadmised tasulisele kursusele või klassi.

Tutsplus.com on veebisait, mis sisaldab õpetusi (tasuta ja tasulisi) väga erinevatel teemadel, sealhulgas kõike alates mobiilne Kas soovite kujundada läbimurdelist rakendust? Peaksite lugema 7 mobiiliarenduse ajaveebiMobiiliruum on nii uus, et trendid muutuvad pidevalt ja iga päev tehakse uusi teadmisi. Kui plaanite välja töötada mobiilirakendusi, kuidas saaksite end hulluks ajamata sammu pidada? Loe rohkem ja mängu arendamine 4 tasuta veebisaiti, kus saate õppida mängude arendamise aluseidKui otsite head mängu arendamise õpetussarja, soovite ühe, mis õpetaks teile hea kodeerimise tavad ja mentaliteet, sest siis saate neid tavasid mis tahes keeles või platvorm. Loe rohkem kuni värviteooria Kuidas õppida värviteooriat vähem kui tunnigaBaasteadmised värviteooriast võivad tähendada erinevust "amatöörliku" esteetilise ja "professionaalse" vahel - õppimine ei võta tegelikult kaua aega. Loe rohkem ja kuidas kasutada Adobe Illustrator Õpetage endale Adobe Illustrator tasutaAdobe Illustrator on pikka aega olnud graafikute jaoks valitud illustreerimisvahend. Kas olete valmis oma disainilahendused ellu viima? Siit saate teada, kuidas saate Adobe Illustratorit tasuta õppida. Loe rohkem . Kuigi mitte kõik veebisaidil õpetatavad õppetunnid ei järgi samm-sammulist mudelit, on mõni üksik, kes kasutab seda lähenemisviisi ja juhendab kasutajaid lihtsa veebiarenduse juhiste kaudu.

Üks eriti kasulik õpetus juhendab teid sammudeni kujundage ja koodige oma veebisait. Õpetus pärineb tõepoolest aastast 2009, nii et kujunduse esteetika ei pruugi teile meeldida, kuid juhendaja seda siiski ütles õpetab teile oma veebisaidi kujundamiseks vajalikke oskusi ja seejärel saate neid oskusi uuema kujunduse jaoks rakendada. Veel üks hoiatus, mida tasub selle õpetuse juures mainida, on see, et see nõuab Adobe Photoshopi kasutamist. Kui teil pole tarkvarale juurdepääsu, võite alati valida Adobe Creative Cloud'i valiku, mille tasu on 50 USD kuus.

Õpetus juhendab teid päise ja jaluse abil kahe põhiveeruga veebisaidi kujundamisel. Veebisait sisaldab sisu, navigeerimisriba, sotsiaalmeedia nuppe ja palju muud. Kui olete veebisaidi Photoshopis kujundanud, saate üle minna koodiredaktorile ja õpetus juhendab teid koodi jaoks, mis on vajalik teie kujunduse muutmiseks HTML-lehele. Õpetus nõuab HTML-i põhiteadmisi, nii et soovitaksin selle läbi proovida pärast paari esimest Peaassamblee õpetust.

Kui soovite teha keerukamat veebisaiti, siis tutvuge veel ühe Tuts + õpetusega kuidas nullist ilusat veebisaiti kujundada. Veel üks PSD to HTMl-i õpetus muudab elu natuke lihtsamaks, pakkudes HTML-, CSS- ja pildifaile. Muud Tuts + juhendid juhendavad teid a. Loomise kohta Tumblri fotopäeviku teema - kuigi see on lihtne Photoshopi kujundus, millest on maha arvatud kood.

Järeldus: Võrreldes Codecademy ja Dashiga vajavad Tuts + õpetused natuke rohkem pingutusi, kuna peate ise sammud läbi käima. Kahe ülejäänud saidi puhul on nii-öelda palju rohkem käes hoidmist. Iga sammu läbimisel on sageli lihtsam aru saada, millise vea olete võinud teha. Samuti nõuab see, et kasutaksite oma tarkvara, samas kui Dashil ja Codecademy'l on sisseehitatud süsteemid. Kuid mitmekesiste õpetuste abil peate kindlasti leidma õppetükid, mis vastavad täpselt sellele, mida soovite õppida.

12-tunnise seeriaga teeb Shaye Howe tõeliselt suure töö HTML-i põhitõdede tutvustamiseks, tutvustades teile terminoloogiat ning kuidas kasutada HTML-i ja CSS-i erinevaid elemente. Erinevate tundide hulka kuulub HTML, CSS tundmaõppimine, kasti mudeli mõistmine, sisu positsioneerimine, tüpograafia ja palju muud.

Õppetundide rakendamisel ei paku veebisait võimalust kiiresti näha, kuidas teie HTML ja CSS tegelikult välja näevad. Selle ületamiseks võite kasutada veebipõhist tööriista, mis pakub samu funktsioone, mida leiate Codecademy ja Dash-ist.

Vaadake CSS / HTML / JavaScripti liivakasti nagu CSSDeck või LiveWeave, mis võimaldavad sisestada HTML-i, CSS-i ja JavaScripti ning vaadata lõpptulemust. Tehniliselt saate Dashis ja Codecademy'is kasutada ka HTML-, CSS- ja JavaScripti redigeerijaid, kui teile meeldib nende pakutav seadistus.

Kui töötate läbi selgitusi, pakub sait ka näiteid koodidest, mida saate ise proovida. Iga tunni lõpus on praktiline harjutus, mis võimaldab teil õpitu rakendada.

Kui olete 12 õppetunni läbi teinud, saate üle minna klassidele Täpsem HTML ja CSS õppetund, mis hõlmab reageerivat disaini, jQuery ja palju muud.

Järeldus: Selles õpetuses on muudetud siin toodud ettepanekute lähenemisviis pisut teistsugune. Palju põhjalikuma selgituse korral kulutate lugemisele rohkem aega, kui rakendate õpitut. Ehkki see võib mõnele tunduda igav, on siin mõned väärtuslikud õppetunnid, mis pakuvad konteksti ja paremat arusaamist nende keelte toimimisest.

Mis te võtate?

Nüüd on aeg teid kuulda. Kas teil on veebis veebiarenduse õpetusi, mida soovitaksite? Mis on teie arvates järgmine samm pärast nende veebikursuste proovimist? Andke meile kommentaarides teada.

Kujutise krediit: hackNY.org