Aflați HTML și CSS cu aceste Tutoriale pas cu pas

Când vă este mâncărime să vă încercați mână la cod, nu există pur și simplu nici o limită la numărul de tutoriale, videoclipuri și cursuri online acolo pentru a încerca. Dar, uneori, cel mai bun mod de a învăța ceva este prin scufundări și încercarea de la prima vedere. Dezvoltarea web nu este diferită.

Dacă sunteți interesat de HTML, CSS și JavaScript, sau credeți că ați putea avea un talent pentru a învăța cum să creați site-uri web de la zero - există câteva mari pas cu pas tutoriale merită să încerci.

Următoarea listă de tutoriale vă va arăta prin elementele de bază ale codului HTML și CSS și vă va oferi chiar o prezentare a lumii complexe care este JavaScript Ce este JavaScript și poate exista Internetul fără ea? Ce este JavaScript, și poate exista Internetul fără ea? JavaScript este unul dintre acele lucruri pe care mulți le consideră necesare. Toată lumea o folosește. Citește mai mult - cel puțin în ceea ce privește începătorii. Dar ceea ce nu vor face este să vă pregătească pentru o viață ca dezvoltator chiar din cutie. Cele mai multe dintre aceste servicii sunt pur și simplu un loc ușor de început.

Va fi nevoie de mult mai mult pentru a începe să dezvoltați site-urile profesionale. Aceste instrumente, cele mai multe dintre care sunt gratuite, vă oferă blocuri de bază pentru dezvoltarea web, și va face mult mai ușor să se scufunde în cursurile mai complicate.

Adunarea Generală Dash

Oamenii de la Adunarea Generală au un instrument gratuit care vă învață elementele de bază ale codului HTML, CSS și JavaScript și este locul perfect pentru începerea completă a începătorilor. Prin o serie de cinci proiecte, veți învăța terminologia și abilitățile de codare de bază, permițându-vă să construiți un site care seamănă cu o pagină about.me, cum să construiți un blog receptiv și un site de restaurant.

Tutorialele Dash depășesc învățarea cum să creeze site-uri web simple, de asemenea, puteți valorifica puterea HTML, CSS și JavaScript pentru a crea un robot folosind forme și linii sau chiar un joc Mad Libs.

Tutorialele Dash se mișcă într-un ritm rezonabil, trecând prin fiecare pas câteva linii de cod la un moment dat. Ca și în cazul oricărui tutorial, aș recomanda să faceți note în timp ce lucrați. Acest lucru vă va ajuta să memorați diferitele instrumente pe care le învățați și, cu ajutorul tutorialelor Adunării Generale, odată ce ați finalizat o fază, nu pare să existe o modalitate de ao repeta.

Concluzie: Folosirea Dash vă va pune la dispoziție toate cunoștințele de care aveți nevoie pentru a pune împreună un site modern de bază - de la navigație, la un design receptiv. Sunteți chiar introdus la elementele de bază ale modului de a crea o temă personalizată Tumblr. Acestea fiind spuse, există doar patru lecții pe Dash. În timp ce puteți lua conceptele pe care le-ați învățat și încercați să le aplicați în moduri diferite, trebuie să vă completați cunoștințele cu alte cursuri incluse în această listă.

Codecademy

Codecademy a fost în jur de mult mai mult decât Dash și adesea adaugă lecții noi ofertelor sale. Cu aceleași lecții detaliate pas cu pas veți găsi pe Dash, Codecademy merge cu un pas mai departe, oferind utilizatorilor o imagine generală a creării unui site web cu HTML și CSS, dar oferă, de asemenea, tutoriale aprofundate în limbile individuale , HTML, CSS și JavaScript.

Ca și alte servicii, Codecademy vă arată cum să creați un meniu de navigare, să adăugați imagini de fundal, să creați o galerie de imagini sau chiar o pagină de înscriere. (Pentru a adăuga funcționalitate la pagina dvs. de înscriere, asigurați-vă că treceți prin tutorialul Ruby on Rails.)

Există, de asemenea, lecții dedicate jQuery Efectuarea Interactivității Web: Introducere în jQuery Efectuarea Interactivității Web: Introducere JQuery jQuery este o bibliotecă de scripting pe partea clientului pe care aproape orice site web modern le folosește - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai utilizată și cea mai utilizată ... Read More, o limbă cheie care face JavaScript mai ușor de învățat. Dacă sunteți curios de dezvoltarea backendului, există și lecții aprofundate pentru Ruby, Python, PHP și multe altele.

În plus față de învățarea modului de a proiecta un site Web și de a scufunda în complexitatea limbajelor de programare 7 Trucuri utile pentru mastering un nou limbaj de programare 7 Trucuri utile pentru mastering un nou limbaj de programare Este bine să fiți copleșiți când învățați să codificați. Probabil veți uita lucrurile cât de repede le veți învăța. Aceste sfaturi vă pot ajuta să păstrați mai bine toate informațiile noi. Citiți mai multe, puteți utiliza, de asemenea, Codecademy pentru a obține elementele de bază despre cum să creați aplicații web și cum să adăugați funcții de conectare, conectare și deconectare la site-ul dvs..

Concluzie: La fel ca Dash, interactivitatea Codecademy este de neprețuit. Fiind capabil să vedem cum se materializează fiecare pas pe site-ul dvs. este încurajator, iar configurarea facilitează și identificarea greșelilor. Dacă sunteți un începător complet, codecademy este un loc minunat pentru a vă uda degetele de la picioare și decideți dacă codarea și designul web este potrivit pentru dvs. Cu această experiență, puteți lua aceste cunoștințe la un curs sau o clasă plătită.

tuts+

Tutsplus.com este un site plin de tutoriale (gratuit și plătit) pe o gamă largă de subiecte, inclusiv de la proiectarea mobilă la o aplicație descoperită? 7 Blog-uri de dezvoltare mobilă trebuie să citiți Proiectarea unei aplicații descoperitoare? 7 blog-uri de dezvoltare mobilă trebuie să citiți Spațiul mobil este atât de nou încât tendințele sunt în continuă schimbare, iar noi perspective sunt făcute în fiecare zi. Dacă intenționați să dezvoltați aplicații mobile, cum puteți să vă mențineți fără să vă supărați? Citește mai mult și dezvoltarea jocului 4 Site-uri gratuite de unde puteți afla elementele de bază ale dezvoltării jocului 4 site-uri gratuite de unde puteți afla elementele de bază ale dezvoltării jocurilor Când căutați o serie bună de dezvoltare a jocului, vreți să vă învățați practicile și mentalitatea de codare bună, deoarece puteți transpune aceste practici în orice limbă sau platformă. Citește mai mult teoria culorilor Cum să înveți teoria culorilor în mai puțin de o oră Cum să înveți teoria culorilor în mai puțin de o oră Cunoștințele de bază ale teoriei culorii pot însemna diferența dintre o estetică "amator" și una "profesională" - și chiar nu durează mult să înveți. Citește mai multe și cum se utilizează Adobe Illustrator Învățați-vă Adobe Illustrator gratuit Învățați-vă gratuit Adobe Illustrator gratuit Adobe Illustrator a fost mult timp instrumentul ilustrativ de alegere pentru artiștii grafici. Sunteți gata să vă aduceți la viață designul? Iată cum puteți învăța gratuit Adobe Illustrator. Citeste mai mult . Deși nu toate lecțiile învățate pe site-ul web urmează modelul pas cu pas, există câteva care iau această abordare și călătoresc utilizatorii prin intermediul unor modalități ușoare de dezvoltare web.

Un tutorial deosebit de util vă arată prin pașii de proiectare și codare a site-ului dvs. web. Tutorialul se datorează, adesea, până în anul 2009, astfel încât esteticul de design să nu vă apeleze la dvs., dar acest lucru vă spunea că tutorialul vă învață abilitățile necesare pentru a proiecta site-ul dvs. web, iar apoi puteți aplica aceste abilități unui design mai actualizat. O altă mențiune care merită menționată în acest tutorial este că aceasta necesită utilizarea Adobe Photoshop. Dacă nu aveți acces la software, puteți opta întotdeauna la opțiunea Adobe Creative Cloud pentru o taxă de 50 USD pe lună.

Tutorialul te plimba prin proiectarea unui site de bază cu două coloane, cu antet și subsol. Site-ul include conținut, o bară de navigare, butoane de social media și multe altele. Odată ce ați proiectat site-ul în Photoshop, puteți comuta la un editor de coduri și tutorialul vă va deplasa prin codul necesar pentru transformarea designului într-o pagină HTML. Tutorialul va necesita cateva cunostinte de baza despre HTML, asa ca as recomanda sa incerc acest tutorial dupa ce ai trecut prin primele tutoriale ale Adunarii Generale.

Dacă doriți să faceți un site mai elaborat, verificați un alt tutorial Tuts + despre cum să creați un site minunat de la zero. Un alt tutorial PSD pentru HTMl face viața mai ușoară prin furnizarea fișierelor HTML, CSS și imagine. Alte tutoriale despre Tuts + te uiți prin cum să creezi o temă de jurnal foto Tumblr - deși acesta este un design simplu Photoshop, minus codul.

Concluzie: Comparativ cu Codecademy și Dash, tutorialele Tuts + depun un efort mult mai mare, deoarece trebuie să te plimbi prin pași. Cu celelalte două site-uri, există o mult mai mult "mâna exploatație" așa să spunem. Pe măsură ce ați trecut prin fiecare pas, este adesea mai ușor să vă dați seama ce greșeală ați fi putut face. De asemenea, este necesar să utilizați software-ul propriu, în timp ce Dash și Codecademy au sisteme încorporate. Acestea fiind spuse, cu varietatea de tutoriale, sunteți obligat să găsiți un set de lecții care să răspundă exact la ceea ce doriți să aflați.

Învață să codzi cu Shaye Howe

Cu o serie de 12 lecții, Shaye Howe face o treabă foarte bună de a descompune elementele de bază ale HTML care vă introduc terminologia și cum să utilizați diferitele elemente ale HTML și CSS. Diverse lecții includ cunoașterea HTML, CSS, înțelegerea modelului cutiei, poziționarea conținutului, tipografia și multe altele.

Când vine vorba de aplicarea lecțiilor în tutorial, site-ul nu oferă o modalitate de a vedea rapid cum arată HTML și CSS în vigoare. Pentru a depăși acest lucru, puteți utiliza un instrument online care va oferi aceleași funcții pe care le veți găsi în Codecademy și Dash.

Consultați o casetă de nisip CSS / HTML / JavaScript, cum ar fi CSSDeck sau LiveWeave, care vă permit să introduceți cod HTML, CSS și JavaScript și să vizualizați rezultatul final. Din punct de vedere tehnic, puteți utiliza, de asemenea, editorii HTML, CSS și JavaScript în Dash și Codecademy, dacă vă place configurarea pe care o oferă.

Pe măsură ce lucrați prin explicații, site-ul oferă, de asemenea, exemple de cod pentru a vă încerca singur. La sfârșitul fiecărei lecții este un exercițiu hands-on care vă permite să aplicați ceea ce ați învățat.

După ce ați trecut prin cele 12 lecții, puteți trece la lecția Advanced HTML and CSS, care include designul receptiv, jQuery și multe altele.

Concluzie: Acest tutorial are o abordare puțin diferită față de celelalte sugestii enumerate aici. Cu o explicație mult mai detaliată, veți petrece mai mult timp citind decât veți aplica ceea ce ați învățat. Deși acest lucru poate părea plictisitor pentru unii, există câteva lecții valoroase care oferă context și o mai bună înțelegere a modului în care funcționează aceste limbi.

Care-i treaba ta?

Acum este timpul să vă auziți. Există tutoriale de dezvoltare online pe care le-ați recomanda? Care credeți că este următorul pas după ce ați încercat aceste cursuri online? Spuneți-ne în comentariile.

Image Credit: hackNY.org

Explorați mai multe despre: Tehnologia educației, HTML, HTML5, Web Design.