Video screencasts 2025, Januari-

Nick's illustratie had drie verschillende lagen voor de hoofden. Het zijn gewoon iets andere variaties. We kunnen de afbeeldingen uitwisselen met een animatie "

Terwijl ik aan dit ontwerp werkte, werd jQuery 1.8 uitgebracht. Dit is slechts een korte video waarin u erop kunt vertrouwen dat dit soort dingen gebeurt wanneer u sites ontwikkelt "

We hebben de standaard galeriekop, maar het mist de kleine blauwe mensen die Erica in de originele illustratie plaatste. We hadden het erover gehad in "

We hebben zojuist de aangepaste koptekst voor de galerij geïnstalleerd, dus laten we nu doorgaan met het toevoegen van nog een aangepaste koptekst. deze is gedaan door "

Er zijn zeven verschillende hoofdgebieden van de site buiten de startpagina. Dus huurde ik zeven verschillende illustratoren in om ontwerpen te maken. Dit is de eerste die we zijn "

Tot nu toe hebben we lokaal codewijzigingen aangebracht zonder enige vorm van versiebeheer. Nu de complexiteit van deze site toeneemt, wordt '

We hebben een goede start met het responsieve ontwerp. Het menu bij de kleinste schermformaten valt uiteen in een 2x4 raster. Het past mooi op het scherm, maar "

We voegen wat reactievermogen toe aan het raster dat we hebben ingesteld voor de galerij. Op de breedste schermen hebben we het ingesteld op vier kolommen. Dan beginnen we met het toevoegen van "

Waarin we de problemen achterhalen die we hadden met het netjes laden van de kolomlay-out. De oplossing was om de CSS te verwijderen die de "

We beginnen ons te verdiepen in de lay-out van het galeriegedeelte, iets waar ik aan heb gewerkt sinds het begin van dit herontwerpproces. Meestal"

We hebben de rasterlay-out voor de galerij. Helaas is het laden ervan een beetje abrupt en wankel. Dit komt doordat CSS3-kolommen zijn ontworpen om "

We hebben al wat tijd besteed aan het uitknippen van pagina's zodat onze navigatie werkt (video # 030) en je kunt rond de site klikken, maar wat staat er op die sub "

Er is een lange traditie van opiniepeilingen op CSS-Tricks. Ze zijn leuk, verzamelen goede belangrijke gegevens en vergroten de verbinding van mensen met de site. Verloving FTW! "

We zijn gestopt met een heel fatsoenlijke poll-widget. De typografie is strak en alles perfect bruikbaar. Het was echter niet bepaald boeiend of leuk. Wij"

De bovenste module in de hoofdzijbalk van de site is van Treehouse, als hoofdsponsor van CSS-Tricks. Gebaseerd op een gesprek dat ik had met Ryan Carson, "

Het zoekontwerp werkt prima totdat we bij onze "baby bear" (kleine mobiele) pauze komen. We moeten daar iets anders doen. We maken wat ruimte "

Want ik denk dat we de eerste keer in deze serie een aantal nieuwe dingen rechtstreeks aan het ontwerp gaan toevoegen door in de browser te werken (niet starten in Photoshop "

Als u een desktopbrowser erg smal naar beneden drukt, krijgt u een vaag idee van hoe een responsief ontwerp werkt, maar het is geen nauwkeurige weergave van een "

De advertentie die we hebben, is geweldig voor grote schermen / desktopformaat, maar het begint vrij snel te mislukken op kleinere schermen. We hebben al enkele breekpunten "

We hebben het uiterlijk van een knop in zijn normale staat gecreëerd, maar zo'n 3D-knop smeekt om een ​​"ingedrukte" staat. Wat we doen is een donkerdere kleur toevoegen aan "

We beginnen met de bedoeling om in HTML & CSSing te springen in de Top Treehouse Ad die we zojuist hebben ontworpen, maar natuurlijk ontsporen we zodra we beginnen "

We hebben de opmaak voor de Treehouse-advertentie bovenaan de pagina, maar we hebben wat stylingwerk te doen. We beginnen met de boomgrafiek zelf. We zijn "

We hebben een grote hoeveelheid open ruimte gelaten in de koptekst. Vanaf het allereerste begin wist ik dat dit voor CSS-Tricks hoofdsponsor Treehouse zou zijn. In deze"

We hebben nog wat werk te doen om het zoekgebied te voltooien. We raken even op een zijspoor, want ik merk dat we de driedimensionale '

We gaan verder waar we gebleven waren in video # 034 en gaan verder met het uitbouwen van het zoekgebied. Deze keer concentreren we ons op de 'open' staat van de zoekopdracht, het bouwen '

We nemen een korte pauze van het werken aan zoeken om een ​​klein knagend probleem op te lossen. "FOUT" is "Flash of Unstyled Text". Dit is een fenomeen waarbij @ font-face "

Nu we hebben gefotoshopt wat we hopen te bereiken met het zoekgebied, zijn we begonnen het te bouwen met HTML en CSS. We hebben al ons pictogramlettertype "

Er staat veel inhoud op CSS-Tricks. Dat is een van de dingen die het ontwerp een beetje uitdagend maken. Hoewel we schoon kunnen blijven met het ontwerp, "

We beginnen met spelen met onze blogpostmodule, prutsen met spaties. We voegen ook het kleine gekleurde vierkantje linksboven in de module toe, "

In deze supersnelle video voegen we alle CSS toe die nodig zijn om ervoor te zorgen dat het huidige pagina-item in de hoofdnavigatie wordt gemarkeerd wanneer die pagina is "