Naučte se HTML a CSS s těmito návody krok za krokem

reklama

Když se pokoušíte vyzkoušet kód, není zde žádný počet výuk, videí a online kurzů, které můžete vyzkoušet. Ale někdy je nejlepším způsobem, jak se něco naučit, potápěním a vyzkoušením z první ruky. Vývoj webu se neliší.

Pokud jste zvědaví na HTML, CSS a JavaScript, nebo si myslíte, že by vás mohlo zajímat, jak vytvářet webové stránky od nuly - existuje několik skvělých návody krok za krokem stojí za pokus.

Následující seznam tutoriálů vás provede základy HTML a CSS a dokonce vám představí složitý svět, který je JavaScript Co je to JavaScript a může bez něj existovat internet?JavaScript je jednou z těch věcí, které mnozí považují za samozřejmost. Každý to používá. Přečtěte si více - alespoň pokud jde o začátečníky. Ale to, co neudělají, je připravit vás na život jako vývojář hned po vybalení z krabice. Většina z těchto služeb je jednoduše snadné začít.

Profesionální vývoj webových stránek bude trvat mnohem déle. Tyto nástroje, z nichž většina je zdarma, vám poskytují základní stavební kameny pro vývoj webových aplikací, a bude mnohem snazší ponořit se do složitějších kurzů.

Lidé na Valném shromáždění mají bezplatný nástroj, který vás naučí základům HTML, CSS a JavaScript, a je to ideální místo pro začátečníky. Přes série pěti projektů, naučíte se terminologii a základní dovednosti v oblasti kódování, které vám umožní vytvořit web, který se podobá stránce about.me, jak vytvořit responzivní blog a restauraci.

Výukový program Dash jde dále, než se naučit, jak vytvářet jednoduché webové stránky. Můžete také využít sílu HTML, CSS a JavaScript k vytvoření robota pomocí tvarů a čar nebo dokonce hry Mad Libs.

Výukový program Dash se pohybuje přiměřeným tempem a každý krok vás provede několika řádky kódu. Stejně jako u každého tutoriálu bych i při práci doporučoval zapisovat si poznámky. Pomůže vám to zapamatovat si různé nástroje, které se učíte, a s tutoriály Valného shromáždění, jakmile dokončíte fázi, se zdá, že neexistuje způsob, jak ji opakovat.

Závěr: Používání Dash vám poskytne všechny znalosti, které potřebujete k sestavení základního moderního webu - od navigace, k responzivnímu designu. Jste dokonce seznámeni se základy vytváření vlastního motivu Tumblr. To znamená, že na Dash jsou pouze čtyři hodiny. I když si můžete vzít koncepty, které jste se naučili, a pokusit se je aplikovat různými způsoby, musíte své znalosti doplnit dalšími kurzy zahrnutými v tomto seznamu.

Codecademy existuje asi mnohem déle než Dash a do svých nabídek často přidává nové ponaučení. Se stejnými podrobnými všestrannými lekcemi, které najdete na Dash, Codecademy jde o krok dále tím, že dává uživatelům obecnou přehled vytváření webových stránek s HTML a CSS, ale také poskytuje podrobné návody k jednotlivým jazykům, HTML, CSS a JavaScript.

Stejně jako ostatní služby, Codecademy vám ukáže, jak vytvořit navigační menu, přidat obrázky na pozadí, a galerie obrázků, nebo dokonce registrační stránka. (Chcete-li na svou registrační stránku přidat funkce, nezapomeňte projít Výukový program Ruby on Rails.)

Jsou zde také vyhrazené hodiny jQuery Vytvoření interaktivního webu: Úvod do jQueryjQuery je skriptovací knihovna na straně klienta, kterou téměř každý moderní web používá - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejvíce podporovaná a nejrozšířenější ... Přečtěte si více , klíčový jazyk, díky němuž se JavaScript mnohem snáze učí. Pokud jste zvědaví na vývoj backendu, existují také podrobné lekce pro Ruby, Python, PHP a další.

Kromě učení, jak navrhnout webové stránky, a potápění do složitosti programovacích jazyků 7 užitečných triků pro zvládnutí nového programovacího jazykaJe v pořádku být ohromen, když se učíte kódovat. Pravděpodobně zapomenete na věci tak rychle, jak se je naučíte. Tyto tipy vám mohou pomoci lépe uchovat všechny nové informace. Přečtěte si více , můžete také použít Codecademy, abyste získali základní informace o tom, jak vytvářet webové aplikace, a jak na svůj web přidat funkce registrace, přihlášení a odhlášení.

Závěr: Stejně jako Dash je interaktivita Codecademy neocenitelná. Možnost vidět, jak se každý krok uskutečňuje na vašem webu, je povzbudivá a díky nastavení také snadno zjistíte chyby. Pokud jste úplným začátečníkem, Codecademy je skvělým místem, kde si můžete nechat mokré prsty a rozhodnout se, zda je pro vás kódování a návrh webu tím pravým. Díky této zkušenosti můžete vzít tyto znalosti do placeného kurzu nebo třídy.

Tutsplus.com je web plný tutoriálů (bezplatných i placených) na širokou škálu témat včetně všeho od mobilní, pohybliví Navrhování průlomové aplikace? 7 blogů pro mobilní vývoj, které byste si měli přečístMobilní prostor je tak nový, že trendy se neustále mění a každý den se vytvářejí nové poznatky. Pokud plánujete vývoj mobilních aplikací, jak můžete držet krok, aniž byste se zbláznili? Přečtěte si více a vývoj hry 4 bezplatné webové stránky, kde se můžete naučit základy vývoje herPokud hledáte dobrou výukovou řadu pro vývoj her, chcete ten, který vás naučí postupy a mentalitu dobrého kódování, protože pak můžete tyto postupy transponovat do jakéhokoli jazyka nebo plošina. Přečtěte si více na teorie barev Jak se naučit teorii barev za méně než jednu hodinuZákladní znalost teorie barev může znamenat rozdíl mezi „amatérským“ estetickým a „profesionálním“ - a opravdu se to dlouho netrvá dlouho. Přečtěte si více a jak používat Adobe Illustrator Učte se Adobe Illustrator zdarmaAdobe Illustrator je pro grafické umělce již dlouho nástrojem ilustrace. Jste připraveni oživit své návrhy? Zde je návod, jak se můžete zdarma naučit Adobe Illustrator. Přečtěte si více . I když ne všechny lekce vyučované na webových stránkách se řídí modelem krok za krokem, existuje několik, které tento přístup využívají a procházejí uživatele jednoduchým postupem vývoje webových aplikací.

Jeden obzvláště užitečný návod vás provede kroky k navrhněte a kódujte svůj web. Výukový program sice pochází z roku 2009, takže estetika designu vás nemusí oslovovat, ale to znamená, vás naučí dovednosti potřebné k navrhování vašich webových stránek a poté je můžete použít pro aktualizovanější design. Další upozornění, která stojí za zmínku v tomto tutoriálu, je, že vyžaduje použití Adobe Photoshopu. Pokud nemáte přístup k softwaru, můžete se vždy rozhodnout pro možnost Adobe Creative Cloud za poplatek 50 $ měsíčně.

Výukový program vás provede návrhem základního webu se dvěma sloupci se záhlavím a zápatím. Web obsahuje obsah, navigační panel, tlačítka sociálních médií a další. Jakmile web navrhnete ve Photoshopu, můžete přejít do editoru kódu a tutoriál vás provede kódem potřebným k transformaci vašeho návrhu na HTML stránku. Výukový program bude vyžadovat některé základní znalosti HTML, takže vám doporučujeme vyzkoušet si tento tutoriál poté, co jste prošli několika málo tutoriály Valného shromáždění.

Pokud chcete vytvořit složitější web, podívejte se na další kurz Tuts + jak navrhnout krásné webové stránky od nuly. Další Výukový program PSD na HTMl usnadňuje život poskytováním souborů HTML, CSS a obrázků. Další návody na Tuts + vás provedou tím, jak vytvořit Tumblr foto deník téma - i když je to jednoduchý design Photoshopu, minus kód.

Závěr: Ve srovnání s Codecademy a Dash, tutoriály Tuts + vyžadují trochu větší úsilí, protože se musíte projít jednotlivými kroky. S dalšími dvěma weby existuje mnohem více „ruka drží“, abych tak řekl. Když procházíte každým krokem, je často snazší zjistit, jakou chybu jste možná udělali. Vyžaduje také použití vlastního softwaru, zatímco Dash a Codecademy mají vestavěné systémy. To znamená, že s řadou výukových programů jste povinni najít řadu lekcí, které by se zaměřily přesně na to, co se chcete naučit.

Díky sérii 12 lekcí dělá Shaye Howe opravdu skvělou práci, když rozebírá základy HTML a seznamuje vás s terminologií a jak používat různé prvky HTML a CSS. Různé lekce zahrnují poznání HTML, CSS, porozumění modelu boxu, umisťování obsahu, typografie a další.

Pokud jde o používání lekcí v tutoriálu, web neposkytuje způsob, jak rychle zjistit, jak vypadá váš HTML a CSS efektivně. K překonání tohoto problému můžete použít online nástroj, který poskytne stejné funkce, jaké najdete v Codecademy a Dash.

Podívejte se jako na karanténu CSS / HTML / JavaScript CSSDeck nebo LiveWeave, které umožňují zadávat HTML, CSS a JavaScript a zobrazit konečný výsledek. Technicky můžete také použít editory HTML, CSS a JavaScript v Dash a Codecademy, pokud se vám líbí nastavení, které poskytují.

Při procházení vysvětlením poskytuje web také příklady kódu, které můžete vyzkoušet sami. Na konci každé lekce je praktické cvičení, které vám umožní aplikovat to, co jste se naučili.

Po absolvování 12 lekcí můžete přepnout na Pokročilá lekce HTML a CSS, což zahrnuje responzivní design, jQuery a další.

Závěr: Tento tutoriál zaujímá poněkud odlišný přístup k ostatním zde uvedeným návrhům. S mnohem podrobnějším vysvětlením strávíte více času čtením, než budete aplikovat to, co jste se naučili. I když to pro některé může znít nudně, jsou zde některé cenné lekce, které poskytují kontext a lepší porozumění tomu, jak tyto jazyky fungují.

Jaký je váš názor?

Nyní je na čase od vás slyšet. Existují nějaké online návody pro vývoj webových aplikací, které byste doporučili? Co si myslíte, že je dalším krokem po vyzkoušení těchto online kurzů? Dejte nám vědět v komentářích.

Obrázek Kredit: hackNY.org