Video Screencasts 2025, September

Designen för kommentarer kan se väldigt enkel ut. Och det är! Men jag tror att enkel är effektiv i det här fallet. Kommentarer är en så viktig del av CSS-Tricks "

Vi börjar gräva i Photoshop här och utforma kommentarområdet. Vi börjar högst upp, vilket betyder att de enskilda kommentarerna själva (i motsats till "

Vi börjar med att titta på några av det gruntarbete jag gjorde bakom kulisserna och presenterade några saker som behövdes göras. Som att lägga till resten av "

Vi är ganska nära att vara färdiga med att bygga hemsidan för området Snippets. Omedelbart börjar vi justera saker och få in fler saker i "

Med designen för utdragsområdet "gjort" - kan vi nu gå över till viss interaktivitet (läs: JavaScript). Vi lägger till en superlama rollover för länkarna på "

Vi har nu en Photoshop-design att arbeta från för hemsidan för området Snippets. Det är mycket mer bläddringsförmåga än det var tidigare, men håller regnbågen "

Dags att dyka in i området Snippets! Det vill säga det faktiska innehållsområdet av det. Vi har redan rubriken på plats. Utdragsområdet är ganska populärt. "

I denna skärmdump avslutar vi avsnittet Almanak. Det finns en ganska tydlig hierarki i Almanaken. Det går: Home> Almanac Home> Property or Selector> "

Vi hoppar fram en tonårig bit här. Detta är en ganska omfattande screencast-serie, men det är bara 40 timmar eller så och naturligtvis detta faktiska projekt "

Vi har redan arbetat lokalt på en lokal domän (v10.whatup). Nu är det dags att börja flytta till WordPress. Vi kommer att fortsätta arbeta lokalt "

Vi har allt innehåll vi behöver på denna sidutdata och vi har rubriken på plats. Nu kan vi starta CSSin 'innehållet i den design vi har i "

När vi börjar arbeta i WordPress är det bäst om vi fäster en exakt kopia av den levande databasen att arbeta med lokalt. Vissa webbplatser har saker som "

Nu när vi har kämpat för att få rätt innehåll på Almanaks hemsida, kan vi gräva i någon faktisk styling med CSS. Vi bestämde oss för att gå "

I denna skärmdump handlar vi till stor del om den orange "Fotostjärna" som dominerar sidfoten. Vi gör stjärnan i en separat fil i Photoshop, så vi kan göra "

Huvudet för Alamanc har kommit in, den här gången från Giovanni Difeterici. Vi använder många tekniker som vi redan har etablerat för att komma igång "

Den anpassade rubrikillustrationen för videosektionen har kommit in, den här gången från Alyssa Nassner. Vi spenderar lite tid på att organisera Photoshop-filen och "

I den här sista screencasten för att bygga ut sidfoten arbetar vi på bottenfoten där CodePen och ShopTalk är. Vi måste ändra HTML a "

I den här skärmutsändningen fokuserar vi på linjerna under länkarna i den övre delen av sidfoten. Vi snubblar ganska runt för att ta reda på vilka saker som ska "

Utdragshuvudet har kommit in, den här gången av Reagan Ray. Vi tillbringar lite tid i Photoshop den här gången med att blanda lite runt saker för att se till att vi "

Med HTML-strukturen för sidfoten på plats har vi vad vi behöver för att börja utforma och få den här sidfoten att se ut som den vi designade i Photoshop. "

Det här är det sista av Photoshop-arbetet vi kommer att göra specifikt med sidfoten innan vi hoppar över till att faktiskt bygga den. I den här skärmutsändningen "

Vi arbetar med att skapa en design för sidfoten i Photoshop. Snabb påminnelse: Jag jobbar i Photoshop eftersom jag känner mig mer kreativ där innan jag hoppar över "

Vi kommer ner till några fler Photoshoppin-affärer i den här skärmutsändningen och lägger fram bottenfoten med länkar till mina två största andra projekt, CodePen "

Vi börjar på den stora resan som är sidfoten! CSS-Tricks har alltid haft en stor fin sidfot och den här designen är inget undantag. Det är inte rent "

Med vår design för sidfoten redo att gå i Photoshop kan vi börja bygga ut den i vår statiska HTML- och CSS-mockup. Det första steget är att ge "

Vi har en annan BSA-zon för att integreras på webbplatsen. Den här ska vara lite enklare eftersom vi redan har JavaScript på plats och det är bara "

Vi har en mockup av hur vi vill att våra BuySellAds-zoner ska se ut, så låt oss fortsätta bygga det på riktigt. Webbplatsen BuySellAds innehåller den kod vi behöver "

Det enda som saknas nu i vårt tullforums rubrik är den del som faktiskt säger "Forums"! Nick illustrerade en hand som hade ett skylt som menades "

Nu när vi vet exakt vilka zoner vi arbetar med, går vi tillbaka till Photoshop och hånar hur vi vill att dessa annonszoner ska se ut. Vi har ett prejudikat för "

Som ni vet är några av annonserna på CSS-Tricks typ av "självstyrda", som den främsta Treehouse-sponsorn. Jag tog på det för det är bara en enda "