Un curs interactiv pentru a vă duce de la începător la avansat.

În ultimele câteva săptămâni mi-am săpat capul în CSS Grid și am creat un curs complet la subiect. Și cu cât învățam mai mult, cu atât eram mai convins că CSS Grid este viitorul creării de machete de site-uri web.

Cursul este gratuit și nici nu trebuie să vă autentificați pentru a-l urmări. Cu toate acestea, va trebui să vă conectați dacă doriți să salvați note și să puneți întrebări pe tot parcursul cursului.

Aflati GRATUIT CSS GRATUIT in acest tutorial interactiv din 14
Faceți clic pe imagine pentru a ajunge la curs.

Acum să aruncăm o privire la ce veți învăța și cum veți învăța.

Notă: De asemenea, am lansat o versiune gratuită Curs Variabile CSS și a Curs CSS Flexbox dacă sunteți mai interesat de aceste subiecte.

Structura cursului

Cursul este construit în jurul a trei secțiuni. Primele două sunt liniare și trebuie urmărite în ordine. Acestea conțin conceptele CSS Grid pe care cred că sunt cele mai importante de învățat.

A treia este o secțiune bonus, în care veți învăța concepte care nu au intrat în primele două secțiuni, plus veți vedea câteva exemple de lucruri pe care le puteți construi cu CSS Grid.

Secțiunea 1 – Noțiuni de bază

Vom începe cu De ce ar trebui să înveți CSS Grid. Vă voi arăta beneficiile pe care CSS Grid le are asupra unui cadru precum Bootstrap, comparând codul dintre cele două abordări.

1611290406 753 Aflati GRATUIT CSS GRATUIT in acest tutorial interactiv din 14

Vom trece apoi direct în CSS Grid, începând cu o grilă foarte simplă care vă va învăța cum să definiți rânduri și coloaneși diferitele valori pe care le puteți utiliza pentru a seta lățimea și înălțimea. Acest lucru vă va învăța, de asemenea, elementele de bază ale receptivității.

1611290406 353 Aflati GRATUIT CSS GRATUIT in acest tutorial interactiv din 14

Următorul pas este de a crea un aspect de site web fals. Aici veți afla cum să poziționați elementele în grilă. Vom încheia prima secțiune cu un experiment captivant folosind grid-template-areas proprietate, care vă permite să prototipați rapid aspectele.

1611290406 514 Aflati GRATUIT CSS GRATUIT in acest tutorial interactiv din 14

La sfârșitul secțiunii unu ar trebui să știți suficient pentru a începe să utilizați CSS Grid în proiectele dvs. personale. Iată principalele concepte pe care le veți învăța:

  • display: grid;
  • grid-template-columns, grid-template-rows
  • grid-template (stenografie)
  • grid-column, grid-row
  • grid-template-areas
  • grid-area
  • grid-gap
  • fr

Pentru a obține o scurtă parte din această secțiune, puteți consulta și cele două articole ale mele Aflați grila CSS în 5 minute și Cum se prototipează rapid site-urile web cu CSS Grid. Acestea abordează câteva dintre aceste concepte, deși nu merg la fel de aprofundate ca și cursul.

Secțiunea 2 – Lucruri avansate

Aici veți afla despre capacitatea de reacție avansată. Acest lucru vă va permite să creați o grilă de imagine super cool la sfârșitul secțiunii:

Aflati GRATUIT CSS GRATUIT in acest tutorial interactiv din 14

Observați modul în care grila se amestecă în jurul elementelor pentru ao face să funcționeze indiferent de lățime.

După cum puteți vedea, variază numărul de coloane în funcție de lățimea dimensiunii ecranului și se amestecă pe elemente (care au dimensiuni și forme diferite), astfel încât să nu existe locuri deschise.

Majoritatea magiei se întâmplă într-o singură linie de CSS. Cu toate acestea, această linie de cod este puțin complexă, așa că vom parcurge fiecare pas al drumului, astfel încât să îl înțelegeți pe deplin.

Iată ce veți învăța:

  • auto-fit
  • repeat
  • minmax
  • grid-auto-flow
  • rânduri implicite
  • modul în care grila dispune elemente

În acest moment, ar trebui să vă simțiți confortabil creând aproape orice aspect folosind CSS Grid. Și indiferent de conceptul pe care nu îl cunoașteți încă, veți fi pe deplin capabil să aflați pentru dvs., deoarece aveți o puternică înțelegere de bază a CSS Grid.

Secțiunea bonus

Secțiunea finală este materialul bonus. Acest lucru nu trebuie să fie urmărit în ordine, deoarece ecranele nu depind unele de altele. Această secțiune constă în principal din diferite concepte ale grilei CSS pe care nu le-am putea încadra în primele două părți. Cu toate acestea, veți găsi, de asemenea, o comparație între Flexbox și Grid, unde văd cum diferă cele două module și cum pot fi utilizate împreună.

În plus, cofondatorul meu Magnus vă va oferi un exemplu foarte interesant despre cum să recreați aspectele articolelor cu CSS Grid. Această prelegere m-a inspirat și să scriu un articol pe același subiect.

Magnus vă va ajuta să creați un aspect al articolului folosind CSS Grid.

Magnus vă va ajuta să creați un aspect al articolului folosind CSS Grid.

În cele din urmă, vom completa acest curs cu conținut ori de câte ori vom vedea nevoia acestuia.

Dacă simțiți că lipsește ceva din curs, doar spune-ne și vom crea un nou screencast pe subiect în secțiunea bonus.

Iată ce veți afla în secțiunea Bonus.

  • linii numite
  • justificarea și alinierea (elemente, sine și conținut)
  • crearea unui aspect de articol în stil mediu (de Magnus)
  • CSS Flexbox vs Grid

Formatul Scrimba

Cursul este construit folosind Scrimba, un instrument de codare interactivă, care sunt cofondator împreună și Sindre.

Scrimencastele Scrimba arată ca videoclipuri normale, cu toate acestea, sunt complet interactive. Puteți edita codul în interiorul distribuțiilor.

Iată un gif care explică conceptul:

Întrerupeți ecranul → Editați codul → Rulați-l!  → Vedeți modificările dvs.

Întrerupeți ecranul → Editați codul → Rulați-l! → Vedeți modificările dvs.

Acest lucru este minunat atunci când simți că trebuie să experimentezi codul pentru a-l înțelege corect sau când vrei pur și simplu să copiezi o bucată din cod. De asemenea, scrimencasturile Scrimba cântăresc 1% din videoclipuri în dimensiunea fișierului, ceea ce înseamnă că este mult mai ușor să redați în flux chiar și atunci când conexiunea dvs. la internet este lentă.

Așadar, sper că vă veți bucura de curs. Înscrie-te astăzi si ne vedem acolo 🙂

Mulțumesc pentru lectură! Numele meu este Per, sunt cofondatorul Scrimbași îmi place să îi ajut pe oameni să învețe noi abilități. Urmează-mă pe mine Stare de nervozitate dacă doriți să fiți informat despre articole și resurse noi.


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.