Video screencasts 2025, Januari-

Het ontwerp voor opmerkingen ziet er misschien heel eenvoudig uit. En het is! Maar ik denk dat simpel in dit geval effectief is. Reacties zijn zo'n belangrijk onderdeel van CSS-Tricks "

We beginnen hier met het graven van Photoshop en het ontwerpen van het opmerkingengebied. We beginnen bovenaan, wat betekent dat de individuele opmerkingen zelf (in tegenstelling tot de '

We beginnen ongeveer door te kijken naar een deel van het gruntwerk dat ik achter de schermen heb gedaan om een ​​aantal dingen uit te werken die gedaan moesten worden. Zoals het toevoegen van de rest van '

We zijn bijna klaar met het bouwen van de startpagina van het gedeelte Snippets van de site. We beginnen meteen dingen aan te passen en meer dingen in te brengen "

Nu het ontwerp voor het fragmentgebied "klaar" is, kunnen we wat interactiviteit aangaan (lees: JavaScript). We voegen een super flauwe rollover toe voor de links op "

We hebben nu een Photoshop-ontwerp om vanuit te werken voor de startpagina van het gedeelte Snippets. Het is veel meer bladerbaar dan voorheen, maar behoudt de regenboog "

Tijd om het Snippets-gebied in te duiken! Dat wil zeggen, het eigenlijke inhoudsgebied ervan. We hebben de header al op zijn plaats. Het gedeelte met fragmenten is behoorlijk populair. "

In deze screencast sluiten we de Almanaksectie af. Er is een vrij duidelijke hiërarchie in de Almanak. Het gaat: Home> Almanac Home> Property of Selector> "

We springen hier een klein beetje naar voren. Dit is een behoorlijk uitgebreide serie screencasts, maar het is maar 40 uur of zo en natuurlijk dit echte project "

We hebben al lokaal gewerkt op een lokaal domein (v10.whatup). Nu is het tijd om aan de slag te gaan met WordPress. We blijven lokaal werken "

We hebben alle inhoud die we nodig hebben op deze pagina-uitvoer en we hebben de koptekst op zijn plaats. Nu kunnen we beginnen met CSSin 'de inhoud in het ontwerp dat we hebben'

Als we aan de slag gaan met WordPress, is het het beste als we een exacte kopie van de live database zoeken om lokaal mee te werken. Sommige websites hebben dingen als "

Nu we hebben gestreden om de juiste inhoud op de startpagina van de Almanac te krijgen, kunnen we met CSS wat echte styling onderzoeken. We besloten te gaan "

In deze screencast behandelen we grotendeels de oranje "Photostar" die de footer domineert. We maken de ster in een apart bestand in Photoshop, zodat we "

De kopbal voor de Alamanc is binnen, dit keer van Giovanni Difeterici. We gebruiken veel technieken die we al hebben ontwikkeld om aan de slag te gaan "

De aangepaste koptekstillustratie voor de video'ssectie is binnen, dit keer van Alyssa Nassner. We besteden wat tijd aan het organiseren van het Photoshop-bestand en "

In deze laatste screencast van het opbouwen van de voettekst, werken we aan de onderste voettekst waar de CodePen en ShopTalk gebieden zijn. We moeten de HTML wijzigen a "

In deze screencast concentreren we ons op de lijnen onder de links in het bovenste gedeelte van de footer. We struikelen een beetje rond om uit te zoeken welke dingen moeten "

Het hoofd van de fragmenten is binnengekomen, dit keer door Reagan Ray. We brengen dit keer wat tijd door in Photoshop en schudden de dingen een beetje om er zeker van te zijn dat we "

Met de HTML-structuur voor de voettekst op zijn plaats, hebben we wat we nodig hebben om te beginnen met opmaken en deze voettekst eruit te laten zien als wat we in Photoshop hebben ontworpen. "

Dit is het laatste van het Photoshop-werk dat we specifiek aan de voettekst zullen doen voordat we er over gaan om het daadwerkelijk te bouwen. In deze screencast we "

We werken aan het maken van een ontwerp voor de voettekst in Photoshop. Snelle herinnering: ik werk in Photoshop omdat ik me daar creatiever voel voordat ik erover spring "

We komen in deze screencast aan de slag met wat meer Photoshoppin'-zaken, met de onderste voettekst met links naar mijn twee grootste andere projecten, CodePen "

We beginnen aan de grote reis die de voettekst is! CSS-Tricks heeft altijd een grote mooie voettekst gehad en dit ontwerp zal geen uitzondering zijn. Het is niet puur "

Met ons ontwerp voor de voettekst helemaal klaar voor gebruik in Photoshop, kunnen we beginnen met het uitbouwen in onze statische HTML- en CSS-mockup. De eerste stap is '

We hebben nog een BSA-zone om in de site te worden geïntegreerd. Dit zou iets eenvoudiger moeten zijn, omdat we al JavaScript hebben geïnstalleerd en het is gewoon "

We hebben een mock-up van hoe we willen dat onze BuySellAds-zones eruit zien, dus laten we het echt gaan bouwen. De BuySellAds-website biedt de code die we nodig hebben "

Het enige dat nu nog ontbreekt aan de kop van onze douane-forums is het gedeelte dat eigenlijk "Forums" zegt! Nick illustreerde een hand met een bordje dat bedoeld was "

Nu we precies weten met welke zones we werken, gaan we terug naar Photoshop en bespotten we hoe we willen dat deze advertentiezones eruitzien. We hebben een precedent voor "

Zoals je weet, zijn sommige advertenties op CSS-Tricks een soort van "zelfbeheerder", zoals de hoofdsponsor van Treehouse. Ik nam dat aan omdat het maar een enkele is "