Video Screencasts 2025, April

Vi har disse åtte navigasjonsfanen på toppnivå, men Home er den eneste som "fungerer". Bare så vi har noen sider å jobbe med, stikker vi ut noen sider for "

Så langt tilbake som jeg kan huske, brukte jeg Google Code Prettify for å bruke syntaksmarkeringen på kodeblokken på CSS-Tricks. Du vet, hvor i en linje som "

Vi har nettopp installert Prism.js og fikk det til å fungere. I denne skjermsendingen finner vi et tema som heter Tomorrow Theme og innretter fargene i syntaksen "

Vi har gjort litt arbeid med topptekster, men vi skal grave mer inn på dem i denne skjermsendingen. Overskrifter er et viktig aspekt på ethvert nettsted. Bra gjort,"

Nå som vi har et blogginnleggsområde å jobbe med, kan vi virkelig komme inn på blogginnleggstypografi. Uten tvil den viktigste typografien på siden da den er "

Jeg synes det er veldig hyggelig å ha en individuell fil (.scss) som er for de aller fleste typografier på nettstedet. Normalisere har ganske mye typografi "

Typecast (i beta på tidspunktet for filmen) er en veldig fin nettapp for å leke med webtypografi. Det gir deg et flott grensesnitt for å spille rundt "

Fortsetter konseptet med "Don't Overthink It Grids", får vi takrenner på gang i rutenettet ved å bare bruke litt enkel polstring. Vi beholder polstringsnummeret "

Før vi gjør litt typografiarbeid, tenkte jeg at vi ville fikse den irriterende tingen der bildene spretter utenfor artikkelområdet og rutenettet. Ved hjelp av"

Nå som vi kjører et tilpasset lokalt domene, kan vi bruke PHP. "P" i MAMP er for "PHP" =). Å bruke PHP betyr at vi kan bruke inkluderer. For eksempel: Vår "

Vi kunne skrive våre egne Sass @mixins for å hjelpe med CSS3-ting (som gradienter), men det er et Sass-rammeverk som allerede eksisterer kalt Compass som "

Nettstedsdesignet blir veldig rutenettaktig. Modulene våre legger veldig rent ut i et rutenett. Men er ikke rutenett komplekst og rart? Og kanskje vi "

I denne super raske screencast bruker vi MAMP til å sette opp en URL vi kan bruke til lokal utvikling. Dette er nyttig av en rekke årsaker: Vi kan lenke til "

Vi introduserer konseptet med @media-spørsmål i CSS. Mye av det som bruker Sass på dette prosjektet, lar oss være å være TØRRE (ikke gjenta deg selv). Vi gjorde"

Vi starter med å tilpasse logotypen litt, men hopper deretter til å legge til ikoner i hovednavnet. Da vi utformet navigasjonen i Photoshop (video "

Vi satte opp et nytt sett i Typekit for v10. For merkevarebygging bruker vi Proxima Nova Soft for nå og noen andre skrifter som ser så nær HF&J-skriftene i vår "

Så langt ser det faktiske nettstedet ikke ut som Photoshop-designet vårt. I denne skjermsendingen graver vi i å gjøre nettopp det, og begynner på toppen med "

Vi bruker noen posisjoneringstriks for å stille opp venstre kant av logoen og hovedinnholdsområdet, mens du fortsatt har overskriften berørt venstre kant av "

Å fjerne brukeragenten (standard) CSS fra de fleste elementer er vanligvis en god ide. Dette har lenge blitt gjort med "universelle" tilbakestillinger eller ting som Eric "

Mens vi ser på Photoshop mockup, skriver vi begynner å skrive HTML for å beskrive det vi ser på. Vi bruker selvfølgelig HTML5 når det blir "

Vi begynner å slippe teksten i hovednavigasjonen, bare for å se hvordan den vil passe, jobbe med størrelsen, farger osv. Noe av teksten passer ganske stramt "

Vi er absolutt ikke "ferdig" i Photoshop for alltid for dette designet, men vi har nok å jobbe fra for å komme i gang med å lage dette designet i nettleseren. Etter"

Vi begynner å designe toppnivå (hoved) navigering på nettstedet. Vi begynner med skjermbildet på skrivebordet (i en riktignok vilkårlig bredde), men vi er "

Vi legger til noen ekstra lag under hovedoverskriften / merkeboksen for å gi "stabelen papirer" utseende. Ingen stor metafor eller noe, det gir bare noe visuelt "

Hele nettstedet kommer til å være basert på "moduler". Hver lille ting kommer til å være bokstavelig talt i en boks (både visuelt og i koden, til slutt). Vi"

Dette er et lydopptak av en Skype-samtale mellom Erin Kissane og meg selv. Erin skrev boka om innholdsstrategi, så jeg var heldig som fikk henne hjelp og "

Å designe i nettleseren er kult og alt, men å starte i Photoshop holder meg på det mest kreative når jeg trenger det mest: når jeg vender mot det tomme lerretet. "

Velkommen! Dette kommer til å bli ganske reisen, og som alle reiser, starter denne med et enkelt trinn. Vårt første skritt er å ta oversikt over "

Dette redesignet er ikke et redesign bare for redesign. Jeg vil forbedre nettstedet på alle tenkelige måter du kan forbedre nettstedet. En av"

Vi snakket om å optimalisere SVG for hånd allerede. Å ta valg manuelt om detaljer og hva slags ting som kan kombineres eller fjernes. I dette"