Video Screencasts 2025, April

Designet for kommentarer kan se veldig enkelt ut. Og det er! Men jeg tror enkelt er effektivt i dette tilfellet. Kommentarer er en så viktig del av CSS-Tricks "

Vi begynner å grave i Photoshop her og designe kommentarfeltet. Vi starter på toppen, som betyr at de enkelte kommentarene i seg selv (i motsetning til "

Vi begynner med å se på noe av det gruntarbeidet jeg gjorde bak kulissene og utarbeide noen ting som måtte gjøres. Som å legge til resten av "

Vi er ganske nærme å være ferdige med å bygge hjemmesiden til området Snippets. Med en gang begynner vi å tilpasse ting og få flere ting inn i "

Med designet for utdragsområdet "ferdig" - kan vi nå gå over til litt interaktivitet (les: JavaScript). Vi legger til en super halt rollover for lenkene på "

Vi har nå et Photoshop-design å jobbe fra for hjemmesiden til Snippets-området. Det er mye mer bla gjennom enn det var før, men holder regnbuen "

På tide å dykke inn i Snippets-området! Det vil si det faktiske innholdsområdet av det. Vi har allerede toppteksten på plass. Utdragsområdet er ganske populært. "

I denne skjermsendingen avslutter vi Almanac-delen. Det er et ganske klart hierarki i Almanakken. Det går: Hjem> Almanakk Hjem> Eiendom eller velger> "

Vi hopper fremover bare en tenåring. Dette er en ganske omfattende screencast-serie, men det er bare rundt 40 timer og selvfølgelig dette faktiske prosjektet "

Vi har allerede jobbet lokalt på et lokalt domene (v10.whatup). Nå er det på tide å komme i gang med å flytte til WordPress. Vi skal fortsette å jobbe lokalt "

Vi har alt innholdet vi trenger på denne siden, og vi har overskriften på plass. Nå kan vi starte CSSin 'innholdet i designet vi har i "

Når vi begynner å jobbe i WordPress, vil det være best hvis vi henter en nøyaktig kopi av den levende databasen å jobbe med lokalt. Noen nettsteder har ting som "

Nå som vi har kjempet oss for å få riktig innhold på hjemmesiden til Almanac, kan vi grave i noen faktisk styling med CSS. Vi bestemte oss for å gå "

I denne skjermsendingen handler vi i stor grad om den oransje "Photostar" som dominerer bunnteksten. Vi lager stjernen i en egen fil i Photoshop, slik at vi kan lage "

Hodet til Alamanc kom inn, denne gangen fra Giovanni Difeterici. Vi bruker mange teknikker som vi allerede har etablert for å komme i gang "

Den tilpassede toppillustrasjonen for videoseksjonen har kommet inn, denne gangen fra Alyssa Nassner. Vi bruker litt tid på å organisere Photoshop-filen og "

I denne siste screencasten om å bygge ut bunnteksten, jobber vi på bunnteksten der CodePen og ShopTalk-områdene er. Vi må endre HTML a "

I denne skjermsendingen fokuserer vi på linjene under lenkene øverst i bunnteksten. Vi snubler ganske rundt å finne ut hvilke ting som skal "

Utdragshodet har kommet inn, denne gangen av Reagan Ray. Vi bruker litt tid i Photoshop denne gangen ved å blande ting litt rundt for å sikre at vi "

Med HTML-strukturen for bunnteksten på plass, har vi det vi trenger for å starte stylingen og få denne bunnteksten til å se ut som den vi designet i Photoshop. "

Dette er det siste av Photoshop-arbeidet vi vil gjøre spesifikt med bunnteksten før vi hopper over til å faktisk bygge den. I denne skjermsendingen "

Vi jobber med å lage et design for bunnteksten i Photoshop. Rask påminnelse: Jeg jobber i Photoshop fordi jeg føler meg mer kreativ der før jeg hopper over "

Vi kommer ned til noen flere Photoshoppin-virksomheter i denne screencasten, og legger ut bunnteksten nederst med lenker til mine to største andre prosjekter, CodePen "

Vi legger ut på den flotte reisen som er bunnteksten! CSS-Tricks har alltid hatt en stor fancy bunntekst, og dette designet er ikke noe unntak. Det er ikke rent "

Med vårt design for bunnteksten klar til bruk i Photoshop, kan vi begynne å bygge den ut i vår statiske HTML- og CSS-mockup. Det første trinnet er å gi "

Vi har en annen BSA-sone for å bli integrert i nettstedet. Denne skal være litt enklere fordi vi allerede har JavaScript på plass, og det er bare "

Vi har en mockup av hvordan vi vil at BuySellAds-sonene skal se ut, så la oss fortsette å bygge det på ekte. BuySellAds-nettstedet inneholder koden vi trenger "

Det eneste som mangler nå i tollforumsoverskriften vår er delen som faktisk sier "Forums"! Nick illustrerte en hånd som hadde et skilt som var ment "

Nå som vi vet nøyaktig hvilke soner vi jobber med, går vi tilbake til Photoshop og håner hvordan vi vil at disse annonsesonene skal se ut. Vi har presedens for "

Som du vet, er noen av annonsene på CSS-Tricks slags "selvstyrte", som den viktigste Treehouse-sponsoren. Jeg tok det på fordi det bare er en enkelt "