Video Screencasts 2025, September

Nick's illustration hade tre olika lager för huvuden. De är bara lite olika variationer. Vi kunde byta ut bilderna med en animation "

När jag arbetade med denna design släpptes jQuery 1.8. Detta är bara en snabb video för att förlita sig på att den här typen av saker händer när du utvecklar webbplatser "

Vi har det grundläggande gallerhuvudet på plats, men det saknas de små blå människorna som Erica satte i originalillustrationen. Vi hade pratat om det i "

Vi har precis fått den anpassade rubriken för galleriet på plats, så medan vi är på, låt oss fortsätta lägga till ytterligare en anpassad rubrik. den här gjordes av "

Det finns sju olika huvudområden på webbplatsen bortom hemsidan. Så jag anställde sju olika illustratörer för att göra design. Detta är den första vi är "

Hittills har vi gjort kodändringar lokalt utan att använda någon form av versionskontroll. Med den här webbplatsens komplexitet ökar, blir det "

Vi har en bra start på den responsiva designen. Menyn med de minsta skärmstorlekarna bryts ner i ett 2x4-rutnät. Det passar fint på skärmen, men "

Vi lägger till lite lyhördhet för det rutnät vi har ställt in för galleriet. På de bredaste skärmarna har vi den inställd på fyra kolumner. Sedan börjar vi lägga till "

Där vi räknar ut de problem vi hade med att få kolumnlayouten att ladda in snyggt. Korrigeringen var att ta bort CSS som gjorde "

Vi börjar gräva in i layouten för galleriområdet, vilket jag har tänkt på sedan början av denna redesignprocess. För det mesta"

Vi har rutnätlayouten för Galleriet igång. Tyvärr är lastningen lite plötslig och otäck. Detta beror på att CSS3-kolumner är utformade för att "

Vi har redan spenderat lite tid på att stubba ut sidor så att vår navigering fungerar (Video # 030) och du kan klicka dig runt på webbplatsen, men vad finns på dessa underordnade "

Det finns en lång tradition av enkäter på CSS-Tricks. De är roliga, samlar bra viktiga data och ökar människors anslutning till webbplatsen. Förlovning FTW! "

Vi slutade med en helt anständig enkätwidget. Typografin är ren och allt perfekt användbart. Det var dock inte precis övertygande eller roligt. Vi"

Toppmodulen i sidans huvudfält tillhör Treehouse, som huvudsponsor för CSS-Tricks. Baserat på ett samtal jag haft med Ryan Carson, "

Sökdesignen fungerar bra tills vi kommer ner till vår "baby björn" (liten mobil) storlek paus. Vi måste göra något annorlunda där. Vi gör lite utrymme "

För jag tror att första gången i den här serien kommer vi att lägga till några nya saker i designen direkt genom att arbeta i webbläsaren (startar inte i Photoshop "

Att klämma ner en webbläsare mycket smal kan ge dig en vag känsla för hur en lyhörd design fungerar, men det är inte en exakt representation av en "

Annonsen vi har på plats är bra för stora skärmar / skrivbordsstorlekar, men den börjar misslyckas ganska snabbt på mindre skärmar. Vi har redan några brytpunkter "

Vi har skapat utseendet på en knapp i det vanliga tillståndet, men en sådan 3D-knapp ber om ett "tryckt" tillstånd. Vad vi gör är att lägga till en mörkare färg i "

Vi börjar med avsikten att hoppa in i HTML & CSSing Top Treehouse-annonsen som vi just designat, men går naturligtvis av spår så fort vi börjar "

Vi har markeringen på plats för Treehouse-annonsen högst upp på sidan, men vi har lite stylingarbete att göra. Vi börjar med själva trädgrafiken. Vi är "

Vi har lämnat en stor mängd öppet utrymme i rubriken. Från början visste jag att detta skulle vara för CSS-Tricks huvudsponsor, Treehouse. I denna"

Vi har lite mer arbete att göra för att avsluta sökområdet. Vi spåras bara en sekund eftersom jag märker att vi inte lade till det tredimensionella "

Vi fortsätter där vi slutade i Video # 034 och fortsätter att bygga ut sökområdet. Den här gången fokuserar vi på det "öppna" tillståndet för sökningen, byggnaden "

Vi tar en liten paus från att arbeta med sökning för att lösa ett lite fnissande problem. "FOUT" är "Flash of Unstyled Text". Detta är fenomen där @ font-face "

Nu när vi har fotograferat vad vi hoppas kunna åstadkomma med sökområdet, började vi bygga det med HTML och CSS. Vi har redan vårt ikonfont "

Det finns mycket innehåll på CSS-Tricks. Det är en av de saker som gör designen lite utmanande. Medan vi kan hålla oss rena med designen, "

Vi börjar med att leka med vår blogginläggsmodul och fiska med avstånd. Vi lägger också till den lilla färgade rutan längst upp till vänster i modulen, "

I den här supersnabba videon lägger vi till all CSS som behövs för att säkerställa att det aktuella sidobjektet i huvudnavigeringen markeras när den sidan är "