Screencasts video 2025, Ianuarie

Designul pentru comentarii ar putea arăta foarte simplu. Si e! Dar cred că simplu este eficient în acest caz. Comentariile sunt o parte atât de importantă a CSS-Tricks "

Începem să căutăm în Photoshop aici și proiectăm zona de comentarii. Începem de sus, adică individul comentează ei înșiși (spre deosebire de „

Începem prin a ne uita la o parte din munca mormăitoare pe care am făcut-o în culise, arătând câteva lucruri care trebuiau făcute. Ca și cum ați adăuga în restul „

Suntem aproape de a termina construirea paginii de pornire a zonei Fragmente a site-ului. Imediat, începem să modificăm lucrurile și să introducem mai multe lucruri în „

Cu designul pentru zona de fragmente „terminat” - acum putem trece la o anumită interactivitate (citiți: JavaScript). Adăugăm un rollover super lame pentru linkurile de pe „

Acum avem un design Photoshop din care să lucrăm pentru pagina principală a zonei Fragmente. Este mult mai navigabil decât înainte, dar păstrează curcubeul "

E timpul să vă scufundați în zona Fragmente! Adică aria de conținut reală a acestuia. Avem deja antetul la locul său. Zona cu fragmente este destul de populară. "

În acest screencast încheiem secțiunea Almanah. Există o ierarhie destul de clară în Almanah. Merge: Acasă> Acasă Almanah> Proprietate sau selector> "

Sărim înainte doar puțin. Aceasta este o serie de screencast destul de cuprinzătoare, dar durează aproximativ 40 de ore și, bineînțeles, acest proiect actual "

Am lucrat deja local la un domeniu local (v10.whatup). Acum este timpul să începeți să vă mutați în WordPress. Vom continua să lucrăm la nivel local "

Avem tot conținutul de care avem nevoie pe această pagină și avem antetul la locul său. Acum putem începe conținutul CSSin în designul în care mergem "

Pe măsură ce începem să lucrăm în WordPress, cel mai bine va fi să captăm o copie exactă a bazei de date live pentru a lucra la nivel local. Unele site-uri web au lucruri de genul „

Acum, că ne-am luptat pentru a obține conținutul adecvat pe pagina de pornire a Almanahului, putem să aprofundăm un stil real cu CSS. Am decis să mergem "

În acest screencast ne ocupăm în mare măsură de portocaliul „Photostar” care domină subsolul. Facem steaua într-un fișier separat în Photoshop, astfel încât să putem crea „

Antetul pentru Alamanc a intrat, de data aceasta de la Giovanni Difeterici. Folosim o mulțime de tehnici pe care le-am stabilit deja pentru a începe "

A apărut ilustrația personalizată a antetului pentru secțiunea videoclipuri, de data aceasta de la Alyssa Nassner. Petrecem puțin timp organizând fișierul Photoshop și „

În acest ecran final de construire a subsolului, lucrăm la subsolul jos, unde sunt zonele CodePen și ShopTalk. Trebuie să schimbăm codul HTML a "

În acest ecran, ne concentrăm pe liniile de sub link-urile din partea de sus a subsolului. Ne cam împiedicăm să ne dăm seama ce lucruri ar trebui "

Capul de fragmente a intrat, de data aceasta de Reagan Ray. De data aceasta petrecem puțin în Photoshop amestecând puțin lucrurile pentru a ne asigura că "

Având în vedere structura HTML pentru subsol, avem ceea ce avem nevoie pentru a începe stilarea și obținerea acestui subsol ca ceea ce am proiectat în Photoshop. "

Aceasta este ultima lucrare Photoshop pe care o vom face în mod specific despre subsol înainte de a trece peste construirea lui. În acest ecran, noi "

Lucrăm la crearea unui design pentru subsol în Photoshop. Memento rapid: lucrez în Photoshop pentru că mă simt mai creativ acolo înainte să sar peste "

Am ajuns la câteva alte activități Photoshoppin în acest screencast, prezentând subsolul cel mai de jos cu link-uri către cele două mari proiecte ale mele, CodePen "

Ne lansăm în marea călătorie care este subsolul! CSS-Tricks a avut întotdeauna un subsol extraordinar și acest design nu va face excepție. Nu este pur "

Cu designul nostru pentru subsol, totul gata de pornire în Photoshop, putem începe să îl construim în macheta noastră statică HTML și CSS. Primul pas este să dai „

Avem o altă zonă BSA pentru a ne integra pe site. Acesta ar trebui să fie puțin mai ușor, deoarece avem deja JavaScript în loc și este doar "

Avem o machetă a modului în care dorim să arate zonele noastre BuySellAds, așa că haideți să o construim pe deplin. Site-ul BuySellAds oferă codul de care avem nevoie "

Singurul lucru care lipsește acum din antetul Forumul vamal este partea care spune de fapt „Forumuri”! Nick a ilustrat o mână ținând un semn care era menit „

Acum, că știm exact cu ce zone lucrăm, ne întoarcem la Photoshop și ne batem în modul în care dorim să arate aceste zone publicitare. Avem un precedent pentru „

După cum știți, unele dintre anunțurile de pe CSS-Tricks sunt un fel de „autogestionare”, cum ar fi sponsorul principal Treehouse. Am acceptat asta pentru că este doar un singur "