Naučte sa HTML a CSS pomocou týchto návodov krok za krokom

Reklama

Keď svrbíte, aby ste si vyskúšali kód, nie je tu žiadny limit na počet tutoriálov, videí a online kurzov, ktoré môžete vyskúšať. Ale niekedy je najlepším spôsobom, ako sa niečo naučiť, potápaním a vyskúšaním z prvej ruky. Vývoj webových aplikácií sa nelíši.

Ak ste zvedaví na HTML, CSS a JavaScript, alebo si myslíte, že by ste sa mohli naučiť, ako vytvárať webové stránky od nuly - existuje niekoľko skvelých návody krok za krokom stojí za vyskúšanie.

Nasledujúci zoznam návodov vás prevedie základmi HTML a CSS a poskytne vám úvod do zložitého sveta, ktorý je JavaScript Čo je to JavaScript a môže bez neho existovať internet?JavaScript je jednou z tých vecí, ktoré mnohí považujú za samozrejmé. Každý to používa. Čítaj viac - aspoň pokiaľ ide o začiatočníkov. To, čo neurobia, je pripraviť vás na život vývojára hneď po vybalení z krabice. Väčšina z týchto služieb je jednoducho ľahké začať.

Profesionálne začatie vývoja webových stránok bude trvať oveľa viac. Tieto nástroje, z ktorých väčšina je zadarmo, vám poskytujú

základné stavebné kamene pre vývoj webových aplikáciía uľahčí sa ponorenie do zložitejších kurzov.

Ľudia na Valnom zhromaždení majú bezplatný nástroj, ktorý vás naučí základy HTML, CSS a JavaScript, a je to ideálne miesto pre začiatočníkov. skrz séria piatich projektov, naučíte sa terminológiu a základné zručnosti v oblasti kódovania, ktoré vám umožnia vytvoriť webovú stránku, ktorá pripomína stránku about.me, ako vytvoriť responzívny blog a webovú stránku reštaurácie.

Výuky Dash presahujú rámec toho, ako sa dajú vytvárať jednoduché webové stránky, môžete tiež využiť silu HTML, CSS a JavaScript na vytvorenie robota pomocou tvarov a čiar alebo dokonca hry Mad Libs.

Výuky Dash sa pohybujú primeraným tempom a každý krok vás prevedie niekoľkými riadkami kódu. Ako pri každom návode, aj pri práci by som vám rád robil poznámky. Pomôže vám to zapamätať si rôzne nástroje, ktoré sa učíte, a s tutoriálmi Valného zhromaždenia sa po dokončení fázy zdá, že neexistuje spôsob, ako to zopakovať.

záver: Pomocou služby Dash získate všetky vedomosti, ktoré potrebujete na zostavenie základnej modernej webovej stránky - od navigácie po responzívny dizajn. Dokonca si predstavíte základy vytvárania vlastnej témy Tumblr. Na Dash sú však iba celkom štyri hodiny. Aj keď si môžete vziať koncepty, ktoré ste sa naučili, a pokúsiť sa ich aplikovať rôznymi spôsobmi, musíte svoje vedomosti doplniť o ďalšie kurzy uvedené v tomto zozname.

Codecademy existuje už omnoho dlhšie ako Dash a do svojich ponúk často pridáva nové ponaučenia. S rovnakými podrobnými lekciami, ktoré nájdete na Dash, Codecademy ide o krok ďalej tým, že používateľom poskytuje všeobecné prehľad vytvorenia webovej stránky s HTML a CSS, ale tiež poskytuje podrobné návody k jednotlivým jazykom, HTML, CSS a JavaScript.

Rovnako ako iné služby, Codecademy vám ukáže, ako vytvoriť navigačné menu, pridať obrázky na pozadí, urob galéria obrázkov, alebo dokonca a prihlasovacia stránka. (Ak chcete na svoju registračnú stránku pridať funkčnosť, prečítajte si Výukový program Ruby on Rails.)

K dispozícii sú aj špeciálne hodiny jQuery Vytvorenie interaktívnej webovej stránky: Úvod do jQueryjQuery je skriptovacia knižnica na strane klienta, ktorú používa takmer každá moderná webová stránka - robí webové stránky interaktívnymi. Nie je to jediná knižnica Javascript, ale je to najrozvinutejšia, najpodporovanejšia a najpoužívanejšia ... Čítaj viac , kľúčový jazyk, ktorý uľahčuje výučbu jazyka JavaScript. Ak ste zvedaví na vývoj backendu, sú tu aj podrobné lekcie pre Ruby, Python, PHP a ďalšie.

Okrem učenia sa, ako navrhnúť webovú stránku, a potápania sa na internete zložitosti programovacích jazykov 7 užitočných trikov na zvládnutie nového programovacieho jazykaKeď sa učíte kódovať, je to v poriadku. Pravdepodobne zabudnete na veci tak rýchlo, ako sa ich naučíte. Tieto tipy vám môžu pomôcť lepšie si uchovať všetky tieto nové informácie. Čítaj viac , môžete tiež použiť Codecademy na získanie základných informácií o tom, ako vytvárať webové aplikácie a ako pridať na svoje webové stránky funkcie registrácie, prihlásenia a odhlásenia.

záver: Rovnako ako Dash je interaktivita Codecademy neoceniteľná. Byť schopní vidieť, ako sa každý krok na vašom webe prejavuje, je povzbudivý a nastavenie tiež uľahčuje rozpoznanie chýb. Ak ste úplným začiatočníkom, Codecademy je skvelým miestom, kde si môžete nechať zvlhčiť prsty na nohách a rozhodnúť sa, či je kódovanie a návrh webových stránok pre vás najvhodnejšie. S touto skúsenosťou môžete vziať tieto znalosti do plateného kurzu alebo triedy.

Tutsplus.com je webová stránka plná návodov (bezplatných aj platených) na širokú škálu tém vrátane všetkého mobilné Navrhujete prelomovú aplikáciu? 7 blogov pre vývoj mobilných zariadení, ktoré by ste si mali prečítaťMobilný priestor je taký nový, že trendy sa neustále menia a každý deň sa získavajú nové poznatky. Ak plánujete vývoj mobilných aplikácií, ako môžete držať krok bez toho, aby ste sa zbláznili? Čítaj viac a vývoj hier 4 bezplatné webové stránky, kde sa môžete naučiť základy vývoja hierAk hľadáte dobrú výučbovú sériu inštrukcií pre vývoj hier, chcete tú, ktorá vás naučí postupy a mentalitu dobrého kódovania, pretože potom môžete tieto postupy transponovať do ľubovoľného jazyka alebo jazyka plošina. Čítaj viac na teória farieb Ako sa naučiť teóriu farieb za menej ako jednu hodinuZákladné znalosti teórie farieb môžu znamenať rozdiel medzi „amatérskymi“ estetickými a „profesionálnymi“ - a učenie sa mu naozaj netrvá dlho. Čítaj viac a ako používať Adobe Illustrator Učte sa Adobe Illustrator zadarmoAdobe Illustrator je už dlho ilustračným nástrojom pre grafikov. Ste pripravení oživiť svoje návrhy? Tu je návod, ako sa môžete bezplatne naučiť program Adobe Illustrator. Čítaj viac . Aj keď nie všetky hodiny vyučované na webovej stránke sa riadia modelom krok za krokom, existuje niekoľko prístupov, ktoré používajú tento prístup a ktoré používateľov obchádzajú jednoduchými návody na vývoj webových aplikácií.

Jeden obzvlášť užitočný návod vás prevedie jednotlivými krokmi navrhnite a kódujte svoje webové stránky. Výukový program síce pochádza z roku 2009, takže estetika dizajnu vás nemusí osloviť, ale to znamená, že výučba vás naučí zručnosti potrebné na navrhovanie vašich webových stránok a tieto zručnosti potom môžete použiť na aktualizovanejší dizajn. Ďalšou výzvou, ktorú treba uviesť v tomto návode, je to, že vyžaduje použitie programu Adobe Photoshop. Ak nemáte prístup k softvéru, vždy sa môžete rozhodnúť pre možnosť Adobe Creative Cloud za poplatok 50 dolárov mesačne.

Výukový program vás prevedie navrhnutím základnej dvojstĺpcovej webovej stránky s hlavičkou a pätou. Web obsahuje obsah, navigačný panel, tlačidlá sociálnych médií a ďalšie. Po vytvorení webovej stránky vo Photoshope môžete prejsť na editor kódov a tutoriál vás prevedie kódom potrebným na transformáciu návrhu na HTML stránku. Výukový program si bude vyžadovať základné znalosti HTML, preto by som vám tento výukový program mal vyskúšať po absolvovaní niekoľkých prvých príručiek Valného zhromaždenia.

Ak si chcete vytvoriť komplikovanejšiu webovú stránku, prečítajte si ďalšiu príručku Tuts + ako navrhnúť krásnu webovú stránku od začiatku. Ďalší Výučba PSD na HTMl uľahčuje život poskytovaním súborov HTML, CSS a obrázkových súborov. Ďalšie návody na tému Tuts + vás prevedú vytvorením a Tumblr foto denník téma - hoci ide o jednoduchý dizajn Photoshopu, mínus kód.

záver: V porovnaní s programom Codecademy a Dash si tutoriály Tuts + vyžadujú trochu viac úsilia, pretože musíte prejsť jednotlivými krokmi. Na ďalších dvoch stránkach je tak oveľa viac „ruka držiacich“. Keď ste prešli každým krokom, je často ľahšie zistiť, akú chybu ste mohli urobiť. Vyžaduje tiež, aby ste používali svoj vlastný softvér, zatiaľ čo Dash a Codecademy majú vstavané systémy. To znamená, že s rôznymi tutoriálmi ste povinní nájsť súbor lekcií, ktoré zodpovedajú presne tomu, čo sa chcete naučiť.

Vďaka sérii 12 lekcií robí Shaye Howe skutočne skvelú prácu, keď prelomí základy HTML a uvedie vás do terminológie a ako používať rôzne prvky HTML a CSS. Rôzne lekcie zahŕňajú spoznávanie HTML, CSS, porozumenie modelu boxu, určovanie polohy, typografiu a ďalšie.

Pokiaľ ide o používanie lekcií v návode, webová stránka neposkytuje spôsob, ako rýchlo zistiť, ako vyzerá váš HTML a CSS efektívne. Na prekonanie tohto problému môžete použiť online nástroj, ktorý poskytne rovnaké funkcie, aké nájdete v Codecademy a Dash.

Pozrite sa na karanténu typu CSS / HTML / JavaScript CSSDeck alebo LiveWeave, ktoré vám umožňujú zadávať HTML, CSS a JavaScript a zobraziť konečný výsledok. Technicky môžete tiež použiť editory HTML, CSS a JavaScript v programoch Dash a Codecademy, ak sa vám páči nastavenie, ktoré poskytujú.

Počas práce na vysvetleniach vám webová stránka poskytuje príklady kódu, ktoré môžete vyskúšať sami. Na konci každej hodiny je praktické cvičenie, ktoré vám umožní uplatniť to, čo ste sa naučili.

Po absolvovaní 12 lekcií môžete prepnúť na Pokročilá lekcia HTML a CSS, ktoré zahŕňajú responzívny dizajn, jQuery a ďalšie.

záver: Tento tutoriál sa mierne líši od ostatných tu uvedených návrhov. Vďaka oveľa podrobnejšiemu vysvetleniu strávite viac času čítaním, ako aplikujete to, čo ste sa naučili. Niektorým to môže znieť nudne, ale tu sú niektoré cenné ponaučenia, ktoré poskytujú kontext a lepšie pochopenie toho, ako tieto jazyky fungujú.

Aký je váš názor?

Teraz je čas od vás počuť. Existujú nejaké online návody na vývoj webových aplikácií, ktoré by ste odporučili? Čo si myslíte, že je ďalším krokom po vyskúšaní týchto online kurzov? Dajte nám vedieť v komentároch.

Obrázok Kredit: hackNY.org