Video Screencasts 2025, September

Vi har de här åtta navigationsflikarna på toppnivå, men Home är den enda som "fungerar". Bara så att vi har några sidor att arbeta med, stubbar vi ut några sidor för "

Så långt jag kan minnas använde jag Google Code Prettify för att tillämpa syntaxmarkeringen på kodblock på CSS-Tricks. Du vet, var i en rad som "

Vi har precis installerat Prism.js och fått det att fungera. I den här screencast hittar vi ett tema som heter Tomorrow Theme och ingraderar dess färger i syntaxen "

Vi har gjort lite arbete med rubriker, men vi gräver mer om dem i den här skärmutsändningen. Rubriker är en viktig aspekt på alla webbplatser. Gjort bra, "

Nu när vi har ett blogginlägg att arbeta med kan vi verkligen komma in i typografi för blogginlägg. Förmodligen den viktigaste typografin på webbplatsen eftersom den är "

Jag tycker att det är mycket trevligt att ha en enskild fil (.scss) som är för de allra flesta typografier på webbplatsen. Normalisera har en hel del typografi "

Typecast (i beta vid denna filmning) är en riktigt snygg webbapp för att spela med webbtypografi. Det ger dig ett bra gränssnitt för att spela runt "

Genom att fortsätta konceptet "Don't Overthink It Grids" får vi takrännor i rutnätet genom att bara använda lite vaddering. Vi behåller stoppningsnumret "

Innan vi gör lite typografi, tänkte jag att vi skulle fixa det irriterande där bilderna stöter utanför artikelområdet och rutnätet. Använder sig av"

Nu när vi kör en anpassad lokal domän kan vi använda PHP. "P" i MAMP är för "PHP" =). Att använda PHP betyder att vi kan använda inkluderar. Till exempel: vår "

Vi kan skriva våra egna Sass @mixins för att hjälpa till med CSS3-saker (som lutningar), men det finns ett Sass-ramverk som redan finns kallat Compass som "

Webbplatsdesignen formas till att vara väldigt rutnätlik. Våra moduler kommer att läggas ut mycket rent i ett rutnät. Men är inte galler komplexa och konstiga? Och kanske vi "

I denna supersnabba screencast använder vi MAMP för att ställa in en URL som vi kan använda för lokal utveckling. Det här är användbart av många orsaker: Vi kan länka till "

Vi introducerar konceptet med @media-frågor i CSS. Mycket av det som vi använder Sass för det här projektet gör att vi kan hålla oss torra (upprepa inte dig själv). Vi gjorde"

Vi börjar med att justera logotypen lite, men hoppa sedan över att lägga till ikoner i huvudnav. När vi utformade navigeringen i Photoshop (Video "

Vi satte upp ett nytt kit i Typekit för v10. För branding använder vi Proxima Nova Soft för tillfället och några andra teckensnitt som ser så nära HF&J-teckensnitten i vår "

Hittills ser den faktiska webbplatsen inte alls ut som vår Photoshop-design. I den här skärmutsändningen gräver vi för att göra just det och börjar högst upp med "

Vi använder några positioneringstrick för att ställa in den vänstra kanten av logotypen och huvudinnehållsområdet, samtidigt som rubriken fortfarande rör vid den vänstra kanten av "

Att ta bort användaragenten (standard) CSS från de flesta element är vanligtvis en bra idé. Detta har länge gjorts av "universella" återställningar eller saker som Eric "

När vi tittar på vår Photoshop-mockup skriver vi börja skriva HTML för att beskriva vad vi tittar på. Vi använder naturligtvis HTML5 när det blir "

Vi börjar släppa texten i huvudnavigeringen, bara för att se hur den kommer att passa, arbeta med storlek, färger etc. En del av texten passar ganska snävt "

Vi är definitivt inte "färdiga" i Photoshop för den här designen, men vi har tillräckligt att arbeta med för att komma igång med att skapa denna design i webbläsaren. Efter"

Vi börjar designa webbplatsens toppnivå (huvud) navigering. Vi börjar med skrivbordsstorleksskärmen (med en viss godtycklig bredd) men vi är "

Vi lägger till några extra lager under huvudrubriken / märkesrutan för att ge "stacken av papper" utseende. Ingen stor metafor eller något, det lägger bara till visuellt "

Hela webbplatsen kommer att baseras på "moduler". Varje liten sak kommer bokstavligen att vara i en ruta (både visuellt och i koden, i slutändan). Vi"

Detta är en ljudinspelning av ett Skype-samtal mellan Erin Kissane och mig själv. Erin skrev boken om innehållsstrategi så jag hade turen att få hennes hjälp och "

Att designa i webbläsaren är coolt och allt, men att börja i Photoshop håller mig på mitt mest kreativa när jag behöver det mest: när jag står inför den tomma duken. "

Välkommen! Detta kommer att bli en hel resa, och som alla resor börjar den här med ett enda steg. Vårt första steg är att göra inventering av "

Denna redesign är inte en redesign bara för att redesigna. Jag vill förbättra webbplatsen på alla tänkbara sätt du kan förbättra en webbplats. En av"

Vi pratade om att optimera SVG för hand redan. Att göra val manuellt om detaljer och vilka typer av saker som kan kombineras eller tas bort. I denna"