Sari la conținut
Introductiv ST—00

De unde să începi

În două ore construiești același ecran de două ori: mai întâi în Figma, apoi în cod. Este o mostră plătită — există ca să înțelegi ce îți place să faci cu mâinile tale și să alegi cursul principal în cunoștință de cauză.

3 module8 lecții
2 orede video și practică
De la zerocerințe
Pe viațăacces și actualizări
Format
€3 plată unică
Plasează comanda Deschide programa
Plată cu cardul sau prin PayPal
Accesul se deschide imediat după plată
Retur în 14 zile, dacă nu ai început să vizionezi
Rezultat

Ce vei putea face

Să explici din ce este alcătuit orice ecran de interfață
Să construiești o machetă simplă în Figma, cu auto layout
Să scrii un card în HTML și CSS de la zero
Să citești codul altcuiva și să faci modificări în el
Să vezi unde se termină munca designerului și unde începe codul
Să alegi direcția și cursul următor pornind de la experiență, nu de la presupuneri
Programa

3 module, un singur proiect

Apasă pe un modul ca să vezi lecțiile

01 Din ce este făcut un ecran2 lecții · 34 minDeschis

Descompunem un ecran finit în părțile lui și vedem unde trece granița dintre machetă și cod. Fără instrumente — doar observație și vocabularul de care vei avea nevoie mai departe.

Descompunem ecranul: grilă, text, elemente
Cine ce face: designerul, dezvoltatorul și punctul lor de întâlnire
02 În rolul designerului: ecranul în Figma3 lecții · 46 min

Deschidem Figma și construim un card de produs: frame-uri, auto layout, spațiere și culoare. La finalul modulului ai propria machetă, nu una repetată după profesor.

Figma în 15 minute: frame-uri, layere, auto layout
Construim cardul de produs din text și fotografii gata pregătite
Spațiere, dimensiuni și culoare: de ce o machetă arată îngrijit
03 În rolul dezvoltatorului: același ecran în cod3 lecții · 40 min

Aceeași machetă o scriem în browser, în HTML și CSS, o stricăm și o reparăm. La final comparăm cele două experiențe și alegem ce curs principal urmează.

Scriem structura cardului în HTML, într-un fișier gol
CSS: spațiere, fonturi și culori direct în browser
Ce alegi mai departe: comparăm cele două moduri de lucru
Materiale

Ce primești

Fișier-șablon în Figma

Un frame cu text și imagini pregătite, ca să nu pierzi timp cu pregătirea și să construiești cardul din prima lecție.

Proiect de start pentru cod

Un folder cu index.html și style.css goale și instrucțiuni cum să le deschizi în editor și în browser.

Analiza soluției finale

Macheta finală și codul final al cardului, ca să le compari cu rezultatul tău și să găsești unde ai deviat.

Harta cursurilor următoare

Un tabel: ce studiază fiecare dintre cele patru cursuri principale, ce trebuie să știi dinainte și ce sarcini vei putea rezolva.

Autorul cursului

Vladimir Motipan

Predă direcția «Primii pași în profesie» la Forma. Lista completă a cursurilor este pe pagina autorului.

Toate cursurile autorului

Primul modul este deschis în întregime

Urmărește lecțiile primului modul și prima temă. Dacă formatul nu ți se potrivește, nu ai pierdut nimic.