Video Screencasts 2025, September

Vi har disse otte navigationsfaner på øverste niveau, men Home er den eneste, der "fungerer". Bare så vi har nogle sider at arbejde med, stubber vi nogle sider ud for "

Så vidt jeg kan huske, brugte jeg Google Code Prettify til at anvende syntaksfremhævningen på kodeblok på CSS-Tricks. Du ved, hvor i en linje som "

Vi har lige installeret Prism.js og fik det til at fungere. I denne screencast finder vi et tema kaldet Tomorrow Theme og indgraver dets farver i syntaksen "

Vi har lavet en smule arbejde med overskrifter, men vi graver mere ind på dem i denne screencast. Overskrifter er et meget vigtigt aspekt af ethvert websted. Gjort godt, "

Nu hvor vi har et blogindlægsområde at arbejde med, kan vi virkelig komme ind i typografi på blogindlæg. Formentlig den vigtigste typografi på webstedet, da det er "

Jeg synes det er meget rart at have en individuel fil (.scss), der er for langt størstedelen af ​​typografi på webstedet. Normalisere har en hel del typografi "

Typecast (i beta på tidspunktet for denne filmoptagelse) er en rigtig pæn webapp til leg med webtypografi. Det giver dig en fantastisk grænseflade til at lege rundt "

Fortsætter konceptet med "Don't Overthink It Grids", får vi tagrender i gang på nettet ved bare at bruge en simpel polstring. Vi holder polstringsnummeret "

Før vi laver typografi, tænkte jeg, at vi ville rette op på den irriterende ting, hvor billederne sprængte uden for artikelområdet og gitteret. Ved brug af"

Nu hvor vi kører et brugerdefineret lokalt domæne, kan vi bruge PHP. "P" i MAMP er til "PHP" =). Brug af PHP betyder, at vi kan bruge inkluderer. For eksempel: Vores "

Vi kunne skrive vores egne Sass @mixins for at hjælpe med CSS3-ting (som gradienter), men der er en Sass-ramme, der allerede findes, kaldet Compass, som "

Webstedsdesignet formes til at være meget gitterlignende. Vores moduler placeres meget rent i et gitter. Men er ikke gitre komplekse og underlige? Og måske vi "

I denne super hurtige screencast bruger vi MAMP til at oprette en URL, som vi kan bruge til lokal udvikling. Dette er nyttigt af en række grunde: Vi kan linke til "

Vi introducerer begrebet @media-forespørgsler i CSS. Meget af det, der bruger Sass på dette projekt, giver os mulighed for at forblive TØR (gentag ikke dig selv). Vi gjorde"

Vi starter med at tilpasse logo-typen lidt, men springer derefter ind i at tilføje ikoner til hovednavnet. Da vi designede navigationen i Photoshop (video "

Vi oprettede et nyt sæt i Typekit til v10. Til branding bruger vi Proxima Nova Soft indtil videre og nogle andre skrifttyper, der ser så tæt på HF&J skrifttyperne i vores "

Indtil videre ser det faktiske websted slet ikke meget ud som vores Photoshop-design. I denne screencast graver vi i at gøre netop det, startende øverst med "

Vi bruger nogle positioneringstricks til at stille logoets venstre kant op og hovedindholdsområdet, mens vi stadig har overskriften til at røre ved venstre kant af "

Fjernelse af brugeragenten (standard) CSS fra de fleste elementer er normalt en god idé. Dette er længe blevet gjort ved "universelle" nulstillinger eller ting som Eric "

Mens vi ser på vores Photoshop-mockup, skriver vi begynder at skrive HTML for at beskrive, hvad vi ser på. Vi bruger selvfølgelig HTML5, når det gør "

Vi begynder at slippe teksten i hovednavigationen, bare for at se, hvordan den passer, arbejde med størrelse, farver osv. Noget af teksten passer ret tæt "

Vi er bestemt ikke "færdige" i Photoshop for evigt for dette design, men vi har nok at arbejde fra for at komme i gang med at skabe dette design i browseren. Efter"

Vi begynder at designe det øverste niveau (hoved) navigation på webstedet. Vi starter med skrivebordsstørrelsesskærmen (i en ganske vist vilkårlig bredde), men vi er "

Vi tilføjer nogle ekstra lag under hovedoverskriften / branding-boksen for at give "stakken papirer" udseende. Ingen stor metafor eller noget, det tilføjer bare visuelt "

Hele siden vil være baseret på "moduler". Hver lille ting vil bogstaveligt talt være i en kasse (både visuelt og i koden, i sidste ende). Vi"

Dette er en lydoptagelse af et Skype-opkald mellem Erin Kissane og mig selv. Erin skrev bogen om indholdsstrategi, så jeg var heldig at få hendes hjælp og "

At designe i browseren er cool og alt sammen, men at starte i Photoshop holder mig på mit mest kreative, når jeg har mest brug for det: når jeg står over for det tomme lærred. "

Velkommen! Dette bliver en ganske rejse, og som alle rejser starter denne med et enkelt trin. Vores første skridt er at tage en oversigt over "

Dette redesign er ikke et redesign kun af hensyn til redesign. Jeg ønsker at forbedre webstedet på enhver tænkelig måde, du kan forbedre et websted. En af de"

Vi talte om at optimere SVG manuelt allerede. Valg manuelt om detaljer og hvilke slags ting der kan kombineres eller fjernes. I denne"