I den här skärmutsändningen kommer vi att arbeta med “Demos” -området i CSS-Tricks. Det är ett ganska populärt område på webbplatsen, trots att jag inte lägger så mycket tid på det som jag borde. Poängen med det är en plats på webbplatsen med en mängd nedladdningsbara och synliga demos allt på ett ställe - så det är väldigt enkelt att bläddra och bläddra och hitta bitar som kan vara av intresse för dig och dina projekt.
I struktur liknar det mycket videofilm. Varje demo har en titel och kort beskrivning och några knappar, precis som varje video. Så vi modellerar layouten precis som vi gjorde videoområdet. Men till skillnad från videoområdet kan vi inte ta bort den handgjorda HTML-filen och ersätta den med en WordPress-loop. Det beror på att varje demo inte lever i WordPress utan är oberoende. Det är OK men vi är inte rädda för en liten markering. Vi skriver bara om det lite för att göra det så perfekt som det kan vara.
Vi har nu alla bitar på plats som vi behöver. Vi kontrollerar markeringen. Vi kontrollerar CSS bara för just detta område. Bara några tänkningar med det och huvudinnehållsområdet för detta område är gjort.
I slutet tittar vi på enskilda demosidor och ser hur varumärket för CSS-Tricks också gäller för dessa sidor.