Video screencasts 2025, Januari-

We hebben acht navigatietabbladen op het hoogste niveau, maar Home is de enige die "werkt". Dus we hebben een aantal pagina's om mee te werken, we stoppen enkele pagina's voor "

Zolang ik me kan herinneren, heb ik Google Code Prettify gebruikt om de syntaxisaccentuering toe te passen op het codeblok op CSS-Tricks. Weet je, waar in een regel als "

We hebben zojuist Prism.js geïnstalleerd en het werkt. In deze screencast vinden we een thema met de naam Tomorrow Theme en integreren de kleuren in de syntaxis "

We hebben een beetje werk aan headers gedaan, maar we zullen er in deze screencast meer op ingaan. Headers zijn een verdomd belangrijk aspect van elke site. Goed gedaan,"

Nu we een blogpostgebied hebben om mee te werken, kunnen we echt in de typografie van blogposts komen. Misschien wel de belangrijkste typografie op de site zoals deze is "

Ik vind het erg fijn om een ​​individueel bestand (.scss) te hebben dat voor de overgrote meerderheid van de typografie op de site staat. Normalize heeft nogal wat typografie "

Typecast (in bèta ten tijde van deze opnames) is een heel nette webapp om met webtypografie te spelen. Het geeft je een geweldige interface om te spelen "

Door het concept van "Don't Overthink It Grids" voort te zetten, krijgen we dakgoten in het grid door simpelweg wat opvulling te gebruiken. We behouden het opvulnummer "

Voordat we wat typografisch werk gaan doen, dacht ik dat we het vervelende probleem zouden oplossen waarbij de afbeeldingen buiten het artikelgebied en het raster breken. Gebruik makend van"

Nu we een aangepast lokaal domein hebben, kunnen we PHP gebruiken. De "P" in MAMP is voor "PHP" =). Het gebruik van PHP betekent dat we include kunnen gebruiken. Bijvoorbeeld: onze "

We zouden onze eigen Sass @mixins kunnen schrijven om te helpen met CSS3-dingen (zoals verlopen), maar er is al een Sass-framework dat Compass heet dat "

Het ontwerp van de site wordt erg rasterachtig. Onze modules zullen heel netjes in een raster worden ingedeeld. Maar zijn rasters niet ingewikkeld en raar? En misschien wij "

In deze supersnelle screencast gebruiken we MAMP om een ​​URL in te stellen die we kunnen gebruiken voor lokale ontwikkeling. Dit is om verschillende redenen handig: we kunnen linken naar "

We introduceren het concept van @media-queries in CSS. Veel van wat we met Sass in dit project kunnen doen, is DROOG blijven (herhaal jezelf niet). We deden"

We beginnen met het aanpassen van het logotype, maar gaan dan over op het toevoegen van pictogrammen aan de hoofdnavigatie. Toen we de navigatie aan het ontwerpen waren in Photoshop (video "

We hebben een nieuwe kit opgezet in Typekit voor v10. Voor branding gebruiken we voorlopig Proxima Nova Soft en enkele andere lettertypen die net zo goed lijken op de HF&J-lettertypen in onze "

Tot dusver lijkt de eigenlijke website helemaal niet veel op ons Photoshop-ontwerp. In deze screencast gaan we precies dat doen, beginnend bovenaan met '

We gebruiken enkele positioneringstrucs om de linkerrand van het logo en het hoofdinhoudsgebied op één lijn te brengen, terwijl de koptekst nog steeds de linkerrand van de "

Het verwijderen van de user-agent (standaard) CSS uit de meeste elementen is meestal een goed idee. Dit wordt al lang gedaan door 'universele' resets of dingen zoals de Eric '

Terwijl we naar onze Photoshop-mockup kijken, schrijven we om HTML te schrijven om te beschrijven waar we naar kijken. We gebruiken natuurlijk HTML5 wanneer het "

We beginnen de tekst in de hoofdnavigatie neer te zetten, gewoon om te zien hoe deze past, werken aan maatvoering, kleuren, enz. Een deel van de tekst past vrij strak "

We zijn zeker niet voor altijd "klaar" in Photoshop voor dit ontwerp, maar we hebben genoeg om mee te werken om aan de slag te gaan met het maken van dit ontwerp in de browser. Na"

We beginnen met het ontwerpen van de (hoofd) navigatie op het hoogste niveau van de site. We beginnen met het scherm van het bureaubladformaat (op een weliswaar willekeurige breedte), maar we zijn "

We voegen wat extra lagen toe onder het koptekst / merkvak om de "stapel papieren" eruit te laten zien. Geen grote metafoor of zoiets, het voegt gewoon wat visueel toe "

De hele site wordt gebaseerd op "modules". Elk klein ding zal letterlijk in een doos zitten (zowel visueel als in de code, uiteindelijk). Wij"

Dit is een audio-opname van een Skype-gesprek tussen Erin Kissane en mijzelf. Erin schreef het boek over contentstrategie, dus ik had het geluk haar hulp te krijgen en "

Ontwerpen in de browser is cool en zo, maar door in Photoshop te beginnen, blijf ik creatief wanneer ik het het meest nodig heb: wanneer ik naar het lege canvas kijk. "

Welkom! Dit wordt een behoorlijke reis, en zoals alle reizen begint deze met een enkele stap. Onze eerste stap is het inventariseren van een deel van "

Dit herontwerp is niet alleen een herontwerp om het opnieuw te ontwerpen. Ik wil de site op alle mogelijke manieren verbeteren waarmee je een site kunt verbeteren. Een van de"

We hadden het al over het handmatig optimaliseren van SVG. Handmatig keuzes maken over details en wat voor soort dingen gecombineerd of verwijderd kunnen worden. In deze"