Video Screencasts 2025, September

Designet til kommentarer ser muligvis meget simpelt ud. Og det er! Men jeg synes, at det enkle er effektivt i dette tilfælde. Kommentarer er en så vigtig del af CSS-Tricks "

Vi begynder at grave i Photoshop her og designe kommentarområdet. Vi starter øverst, hvilket betyder de enkelte kommentarer selv (i modsætning til "

Vi begynder med at se på noget af det grunt arbejde, jeg udførte bag kulisserne, og uddybe nogle ting, der skulle gøres. Som at tilføje resten af ​​"

Vi er temmelig tæt på at være færdig med at opbygge hjemmesiden for området Snippets. Straks begynder vi at finjustere ting og få flere ting ind i "

Med designet til uddragsområdet "færdig" - kan vi nu gå ind i en vis interaktivitet (læs: JavaScript). Vi tilføjer en super halt rollover til linkene på "

Vi har nu et Photoshop-design at arbejde fra til startsiden for området Snippets. Det er meget mere gennemsejligt end det var før, men holder regnbuen "

Tid til at dykke ned i området Snippets! Det vil sige det faktiske indholdsområde af det. Vi har allerede headeren på plads. Stykkeområdet er ret populært. "

I denne screencast afslutter vi sektionen Almanak. Der er et ret tydeligt hierarki i Almanakken. Det går: Hjem> Almanak Hjem> Ejendom eller vælger> "

Vi springer bare en teensy bit frem. Dette er en temmelig omfattende screencast-serie, men det er kun omkring 40 timer og selvfølgelig dette egentlige projekt "

Vi har allerede arbejdet lokalt på et lokalt domæne (v10.whatup). Nu er det tid til at komme i gang med at flytte til WordPress. Vi fortsætter med at arbejde lokalt "

Vi har alt det indhold, vi har brug for på denne side, og vi har overskriften på plads. Nu kan vi starte CSSin 'indholdet i det design, vi har i "

Når vi kommer i gang med at arbejde i WordPress, er det bedst, hvis vi hænger en nøjagtig kopi af den levende database til at arbejde med lokalt. Nogle websteder har ting som "

Nu hvor vi har kæmpet for at få det rette indhold på Almanaks hjemmeside, kan vi grave i noget faktisk styling med CSS. Vi besluttede at gå "

I denne screencast beskæftiger vi os stort set med den orange "Photostar", der dominerer sidefoden. Vi laver stjernen i en separat fil i Photoshop, så vi kan lave "

Hovedet til Alamanc er kommet ind, denne gang fra Giovanni Difeterici. Vi bruger mange teknikker, som vi allerede har etableret for at komme i gang "

Den tilpassede headerillustration til videosektionen er kommet ind, denne gang fra Alyssa Nassner. Vi bruger lidt tid på at organisere Photoshop-filen og "

I denne sidste screencast om udbygning af sidefoden arbejder vi på bundfoden, hvor CodePen og ShopTalk-områderne er. Vi er nødt til at ændre HTML a "

I denne screencast fokuserer vi på linjerne under linkene i den øverste del af sidefoden. Vi snubler lidt rundt med at finde ud af, hvilke ting der skal "

Stikhovedet er kommet ind, denne gang af Reagan Ray. Vi bruger lidt tid i Photoshop denne gang med at blande tingene lidt rundt for at sikre, at vi "

Med HTML-strukturen til sidefoden på plads har vi det, vi har brug for for at starte styling og få denne sidefod til at ligne det, vi designede i Photoshop. "

Dette er det sidste af Photoshop-arbejdet, vi skal udføre specifikt med sidefoden, inden vi springer over til at bygge det. I denne screencast "

Vi arbejder på at skabe et design til sidefoden i Photoshop. Hurtig påmindelse: Jeg arbejder i Photoshop, fordi jeg føler mig mere kreativ der, før jeg hopper over "

Vi kommer ned til nogle flere Photoshoppin-forretninger i denne screencast, hvor vi viser bunden nederst med links til mine to største andre projekter, CodePen "

Vi går ud på den store rejse, der er sidefoden! CSS-Tricks har altid haft en stor fancy sidefod, og dette design er ingen undtagelse. Det er ikke rent "

Med vores design til sidefoden klar til brug i Photoshop, kan vi begynde at bygge det ud i vores statiske HTML- og CSS-mockup. Det første skridt er at give "

Vi har en anden BSA-zone for at blive integreret i webstedet. Denne skal være lidt lettere, fordi vi allerede har JavaScript på plads, og det er bare "

Vi har en mockup af, hvordan vi vil have vores BuySellAds-zoner til at se ud, så lad os fortsætte med at bygge det rigtigt. BuySellAds-webstedet indeholder den kode, vi har brug for "

Det eneste, der mangler nu i vores toldforumsoverskrift, er den del, der faktisk siger "Forums"! Nick illustrerede en hånd, der havde et skilt, der var meningen "

Nu hvor vi ved nøjagtigt, hvilke zoner vi arbejder med, går vi tilbage til Photoshop og håner over, hvordan vi vil have disse annoncezoner til at se ud. Vi har et præcedens for "

Som du ved, er nogle af annoncerne på CSS-Tricks slags "selvstyrede", som den største Treehouse-sponsor. Jeg tog det på, fordi det bare er en enkelt "