Screencasts video 2025, Martie
Avem aceste opt file de navigare de nivel superior, dar Acasă este singura care „funcționează”. Ca să avem câteva pagini cu care să lucrăm, scoatem câteva pagini pentru „
Din câte îmi amintesc, am folosit Google Code Prettify pentru a aplica evidențierea sintaxei pe blocul de cod pe CSS-Tricks. Știi, unde într-o linie de genul „
Tocmai am instalat Prism.js și am funcționat. În acest screencast găsim o temă numită Tema de mâine și încorporăm culorile sale în sintaxă "
Am făcut un pic de lucru pe anteturi, dar vom analiza mai multe despre cele din acest ecran. Anteturile sunt un aspect important al oricărui site. Facut bine,"
Acum, că avem o zonă de postare pe blog cu care putem lucra, putem intra cu adevărat în tipografia postărilor pe blog. Probabil cea mai importantă tipografie de pe site, deoarece este "
Cred că este foarte plăcut să ai un fișier individual (.scss) care este pentru marea majoritate a tipografiei de pe site. Normalize are destul de puțină tipografie "
Typecast (în versiune beta la momentul filmării) este o aplicație web foarte bună pentru a juca cu tipografia web. Vă oferă o interfață excelentă pentru a vă juca "
Continuând conceptul de „Nu vă imaginați în exces”, obținem jgheaburi în grilă doar folosind niște umpluturi simple. Păstrăm numărul de umplere "
Înainte de a face o lucrare de tipografie, m-am gândit că vom remedia chestia enervantă în care imaginile se sparg în afara zonei articolului și a grilei. Se folosește „
Acum că rulăm un domeniu local personalizat, putem folosi PHP. „P” în MAMP este pentru „PHP” =). Folosirea PHP înseamnă că putem folosi include. De exemplu:
Am putea scrie propriul nostru Sass @mixins pentru a ajuta cu chestii CSS3 (cum ar fi gradientele), dar există un cadru Sass care există deja numit Compass care "
Proiectarea site-ului se modelează pentru a fi foarte asemănătoare rețelei. Modulele noastre vor fi așezate foarte curat într-o rețea. Dar nu sunt grile complexe și ciudate? Și poate noi "
În acest screencast super rapid, folosim MAMP pentru a configura o adresă URL pe care o putem folosi pentru dezvoltarea locală. Acest lucru este util din mai multe motive: ne putem conecta la „
Introducem conceptul de interogări @media în CSS. Multe dintre ceea ce ne permite să folosim Sass în acest proiect este să rămânem uscat (nu vă repetați). Noi am facut"
Începem prin modificarea puțin a tipului de siglă, dar apoi trecem la adăugarea de icoane în nav principal. Când proiectam navigarea în Photoshop (Video "
Am configurat un nou kit în Typekit pentru v10. Pentru branding, vom folosi Proxima Nova Soft pentru moment și alte fonturi care arată cât mai aproape de fonturile HF&J din „
Până în prezent, site-ul web nu seamănă deloc cu designul nostru Photoshop. În acest screencast, ne străduim să facem exact asta, începând din partea de sus cu „
Folosim câteva trucuri de poziționare pentru a alinia marginea din stânga a logo-ului și zona principală de conținut, în timp ce încă mai avem antetul atingând marginea din stânga a „
Eliminarea agentului utilizator (implicit) CSS din majoritatea elementelor este de obicei o idee bună. Acest lucru s-a făcut mult timp prin resetări „universale” sau lucruri precum Eric ”
În timp ce ne uităm la macheta noastră Photoshop, scriem să începem să scriem HTML pentru a descrie la ce ne uităm. Desigur, folosim HTML5 ori de câte ori face acest lucru "
Începem să aruncăm textul în navigarea principală, doar pentru a vedea cum se va potrivi, a lucra la dimensionare, a culorilor etc. Unele dintre texturi se potrivesc destul de strâns "
Cu siguranță, nu suntem „terminați” în Photoshop pentru totdeauna pentru acest design, dar avem destui de lucru pentru a începe să creăm acest design în browser. După"
Începem să proiectăm navigarea de nivel superior (principal) a site-ului. Începem cu ecranul cu dimensiunea desktopului (la o lățime recunoscută arbitrar), dar suntem "
Adăugăm câteva straturi suplimentare sub antetul principal / caseta de marcare pentru a da aspectul „teancului de hârtii”. Fără o mare metaforă sau altceva, doar adaugă ceva vizual "
Întregul site va merge pe baza „modulelor”. Fiecare lucru mic va fi literalmente într-o cutie (atât vizual, cât și în cod, în cele din urmă). Noi"
Aceasta este o înregistrare audio a unui apel Skype între mine și Erin Kissane. Erin a scris cartea despre strategia de conținut, așa că am avut norocul să îi ajut și "
Proiectarea în browser este mișto și totul, dar începând cu Photoshop mă ține cel mai creativ când am cel mai mult nevoie: când mă confrunt cu pânza goală. "
Bine ati venit! Acesta va fi chiar călătoria și, ca toate călătoriile, aceasta începe cu un singur pas. Primul nostru pas este să inventariem un pic de "
Această reproiectare nu este o reproiectare doar de dragul reproiectării. Vreau să îmbunătățesc site-ul în toate modurile concepute pe care le puteți îmbunătăți. Unul dintre"
Am vorbit deja despre optimizarea SVG manual. Alegerea manuală a detaliilor și a tipurilor de lucruri care pot fi combinate sau eliminate. In acest"