Odată cu dezvoltarea atât de multor limbaje de programare, stil și markup, învățarea designului web devine mai complicată ca niciodată. Din fericire, există o mulțime de instrumente disponibile pentru a vă ajuta să începeți. Căutați câteva resurse de bază, cum ar fi tutoriale online sau o carte actualizată despre designul web. După ce sunteți gata să începeți, începeți prin a stăpâni elementele de bază ale HTML și CSS. Apoi, puteți începe să explorați limbaje de design web mai avansate, cum ar fi JavaScript!
Pași
Metoda 1 din 4: Găsirea resurselor de proiectare web
Pasul 1. Verificați online cursurile și tutorialele de web design
Internetul este plin de informații detaliate despre designul web și multe dintre acestea sunt disponibile gratuit. S-ar putea să începeți urmând câteva cursuri online gratuite pe Udemy sau CodeCademy sau alăturându-vă unei comunități de codare precum freeCodeCamp. De asemenea, puteți găsi tutoriale video de design web pe YouTube.
- Dacă știți exact ce căutați, încercați să efectuați o căutare utilizând termeni specifici (de exemplu, „selectoare de clasă în tutorialul CSS”).
- Dacă sunteți un începător fără experiență în design web, începeți prin a afla despre elementele de bază ale codării în HTML și CSS.
Pasul 2. Priviți să luați o clasă la un colegiu sau universitate locală
Dacă participați la un colegiu sau universitate, consultați departamentul de informatică al școlii sau consultați catalogul de cursuri pentru a afla dacă sunt disponibile cursuri de design web. Dacă nu sunteți la școală, verificați dacă vreun colegiu sau universitate din apropierea dvs. oferă cursuri de educație continuă în design web.
Unele universități oferă cursuri de web design online care sunt deschise oricui dorește să se înscrie. Accesați site-uri web precum Coursera.org pentru a găsi cursuri gratuite sau la prețuri accesibile de design web predate de instructori universitari
Pasul 3. Obțineți câteva cărți de web design din librărie sau bibliotecă
O carte bună despre designul web poate fi o referință neprețuită pe măsură ce înveți și îți aplici meseria. Căutați cărți actualizate despre design web general sau formate specifice de codare și limbi pe care doriți să le învățați.
Citirea de reviste și articole de blog despre designul web este, de asemenea, o modalitate bună de a învăța noi tehnici, de a vă inspira și de a ține pasul cu ultimele tendințe
Pasul 4. Descărcați sau cumpărați un software de proiectare web
Un bun software de proiectare web vă poate ajuta să creați site-uri web mai eficient și mai eficient și este, de asemenea, excelent pentru a vă ajuta să învățați detaliile aplicării codării, scriptării și a altor elemente cheie de proiectare. S-ar putea să beneficiați de utilizarea unor instrumente precum:
- Programe de design grafic, cum ar fi Adobe Photoshop, GIMP sau Sketch.
- Instrumente de creare a site-urilor web, cum ar fi WordPress, Chrome DevTools sau Adobe Dreamweaver.
- Software FTP pentru transferul fișierelor terminate pe server.
Pasul 5. Găsiți câteva șabloane de site web cu care să vă jucați la început
Nu este nimic în neregulă cu utilizarea șabloanelor pe măsură ce învățați elementele de bază ale designului web. Efectuați o căutare a șabloanelor de pagini web care vă plac și aruncați o privire atentă asupra codului pentru a vă face o idee despre modul în care designerul a pus pagina împreună. De asemenea, puteți experimenta schimbarea codului și adăugarea propriilor elemente la șablon.
Căutați șabloane de site-uri web gratuite pentru a începe sau experimentați cu șabloane care vin împreună cu software-ul dvs. de design web
Metoda 2 din 4: Stăpânirea HTML
Pasul 1. Familiarizați-vă cu etichetele HTML de bază
HTML este un limbaj de markup simplu care este utilizat pentru formatarea elementelor de bază ale unui site web. Puteți formata diferite elemente ale site-ului dvs. web utilizând etichete. Etichetele apar între paranteze unghiulare înainte și după fiecare element și oferă instrucțiuni despre modul în care va funcționa acel element pe pagină. Pentru a închide eticheta, puneți un / în fața etichetei finale în interiorul parantezelor unghiulare.
- De exemplu, dacă doriți să fie o parte din textul dvs. îndrăzneţ, ați înconjura elementul cu eticheta, astfel: Acest text este îndrăzneț.
- Câteva etichete comune includ (paragraful), (ancoră, care definește textul legat) și (font, care poate ajuta la definirea diferitelor atribute ale textului, cum ar fi dimensiunea și culoarea).
- Alte etichete definesc diferitele părți ale documentului HTML în sine. De exemplu, este utilizat pentru a conține informații despre pagină care nu vor fi vizibile pentru vizualizator, cum ar fi cuvintele cheie sau o descriere a paginii care ar apărea în rezultatele motorului de căutare.
Pasul 2. Învață să folosești atributele etichetei
Unele etichete au nevoie de informații suplimentare pentru a specifica cum ar trebui să funcționeze. Aceste informații suplimentare apar în eticheta de deschidere și se numește „atribut”. Numele atributului apare imediat după numele etichetei, separat printr-un spațiu. Valoarea atributului este atașată la numele atributului printr-un semn = și înconjurată de ghilimele.
- De exemplu, dacă doriți să faceți o parte din textul dvs. roșu, puteți face acest lucru folosind eticheta și un atribut corespunzător de culoare a fontului, astfel: Acest text este roșu.
- Multe dintre efectele care au fost realizate odată în mod obișnuit cu atributele etichetei HTML, cum ar fi setarea diferitelor culori ale fontului, sunt acum de obicei realizate cu codificare CSS.
Pasul 3. Experimentați cu elemente imbricate
HTML vă permite, de asemenea, să plasați elemente în alte elemente pentru a crea o formatare mai complexă. De exemplu, dacă doriți să definiți un paragraf și apoi să cursivați o parte din textul din paragraf, puteți face acest lucru:
Ador codarea!
Pasul 4. Familiarizați-vă cu elementele goale
Unele elemente din HTML nu necesită atât deschiderea, cât și închiderea etichetelor. De exemplu, dacă introduceți o imagine, aveți nevoie doar de o singură etichetă „img” care conține numele etichetei și orice alte atribute necesare (cum ar fi numele fișierului imagine și orice text alternativ pe care doriți să îl adăugați în scopuri de accesibilitate). De exemplu:
Pasul 5. Explorează aspectul de bază al unui document HTML
Pentru ca site-ul dvs. web bazat pe HTML să funcționeze corect, va trebui să știți cum să formatați întreaga pagină. Aceasta implică definirea locului în care începe și se termină codul dvs. html, precum și utilizarea etichetelor pentru a determina ce părți ale codului vor fi afișate față de care sunt acolo pentru a furniza informații de fundal ascunse. De exemplu:
- Utilizați eticheta pentru a vă defini pagina ca document HTML.
- Apoi, conțineți întreaga pagină în etichete pentru a defini unde începe și se termină codul dvs.
- Plasați toate informațiile care nu vor fi afișate vizualizatorului, cum ar fi titlul paginii, cuvintele cheie și descrierea paginii dvs., în etichete.
- Definiți corpul paginii dvs. (adică orice text și imagini pe care doriți să le vadă spectatorul) cu etichetele.
Metoda 3 din 4: Familiarizarea cu CSS
Pasul 1. Utilizați CSS pentru a aplica stiluri documentelor dvs. HTML
CSS este un limbaj de foaie de stil care vă permite să aplicați diferite elemente de stil și design pe pagina dvs. web. De exemplu, dacă doriți să aplicați selectiv un anumit font sau culoare de text la unele dintre elementele de text de pe pagina dvs., puteți crea un fișier CSS pentru a face acest lucru. Apoi, puteți introduce fișierul CSS în documentul dvs. HTML oriunde doriți.
-
De exemplu, dacă doriți ca un fișier CSS să transforme toate elementele de paragraf din documentul dvs. HTML în verde, puteți crea un fișier.css conținând liniile:
- p {
- culoare: verde;
- }
- Apoi ați salva fișierul cu un nume precum style.css.
- Pentru a aplica foaia de stil documentului dvs. HTML, îl veți insera ca element de link gol în etichete. De exemplu:
Pasul 2. Familiarizați-vă cu elementele unui set de reguli CSS
O bucată individuală de cod CSS se numește „set de reguli”. Setul de reguli conține diferitele elemente care definesc ceea ce doriți să facă codul dvs. Acestea includ:
- Selectorul, care definește elementul HTML pe care doriți să îl stilizați. De exemplu, dacă doriți ca setul de reguli să afecteze elementele de paragraf, veți începe setul de reguli cu litera „p”.
- Declarația, care definește proprietățile pe care doriți să le stilizați (cum ar fi culoarea fontului). Declarația este cuprinsă între paranteze cretate {}.
- Proprietatea, care specifică ce proprietate a elementului HTML pe care doriți să o stilizați. De exemplu, în cadrul etichetei, puteți specifica că doriți să stilizați culoarea textului.
- Valoarea proprietății definește în mod specific modul în care doriți să modificați proprietatea (de exemplu, dacă proprietatea are culoarea fontului, atunci valoarea proprietății ar fi „verde”).
- Puteți modifica mai multe proprietăți diferite într-o singură declarație.
Pasul 3. Aplicați CSS textului dvs. pentru a face aspectul frumos al tipografiei
CSS este util pentru a aplica o varietate de efecte textului dvs. fără a fi nevoie să codificați individual fiecare proprietate în HTML. Experimentați schimbarea diferitelor proprietăți de tipare în CSS, inclusiv:
- Culoarea fontului
- Marimea fontului
- Familia de fonturi (de exemplu, gama de fonturi pe care doriți să le utilizați în text)
- Aliniere text
- Inaltimea liniei
- Spațiul dintre litere
Pasul 4. Experimentați cu cutii și alte instrumente de aspect CSS
CSS este, de asemenea, util pentru adăugarea de elemente vizuale atractive pe pagina dvs., cum ar fi casete de text și tabele. În plus, îl puteți utiliza pentru a schimba aspectul general al paginii dvs. și pentru a defini unde sunt poziționate diferitele elemente unul față de celălalt.
De exemplu, puteți defini atribute precum lățimea și culoarea de fundal a unui element, puteți adăuga o margine sau puteți seta margini care vor crea spațiu între diferitele elemente de pe pagina dvs
Metoda 4 din 4: Lucrul cu alte limbaje de proiectare
Pasul 1. Aflați JavaScript dacă doriți să adăugați elemente interactive la paginile dvs
JavaScript este un limbaj excelent de învățat dacă sunteți interesat să adăugați funcții mai avansate pe site-urile dvs. web, cum ar fi animații și ferestre pop-up. Faceți un curs sau căutați tutoriale online despre cum să codificați în JavaScript și să încorporați aceste elemente codate în paginile dvs. web | folosind HTML.
Înainte de a vă putea simți confortabil cu JavaScript, va trebui să vă familiarizați cu elementele de bază ale construirii paginilor în HTML și CSS
Pasul 2. Familiarizați-vă cu jQuery pentru a facilita codarea JavaScript
jQuery este o bibliotecă JavaScript care poate simplifica programarea Java, permițându-vă să accesați o varietate de elemente JavaScript precodificate. jQuery este un instrument excelent dacă sunteți deja familiarizat cu elementele de bază ale codării JavaScript.
Puteți accesa biblioteca jQuery și multe alte resurse valoroase prin jQuery.org, site-ul web al Fundației jQuery
Pasul 3. Studiați limbile de pe server dacă sunteți interesat de dezvoltarea back-end-ului
În timp ce HTML, CSS și JavaScript sunt ideale pentru designerii de web care se concentrează pe ceea ce utilizatorul vede și face pe site, limbajele de pe server sunt utile dacă sunteți mai interesat de munca din culise. Dacă doriți să aflați despre dezvoltarea back-end, concentrați-vă pe învățarea limbilor precum Python, PHP și Ruby on Rails.
Aceste limbi sunt utile pentru gestionarea și prelucrarea datelor pe care utilizatorul nu le vede. De exemplu, PHP poate fi utilizat pentru a crea instrumente sigure de creare a parolelor pe site-uri web care necesită o autentificare
Fișiere de ajutor
Foaie de cheat HTML
CSS Cheat Sheet
