Videocasty 2025, Leden

Návrh komentářů může vypadat velmi jednoduše. A to je! Ale myslím si, že v tomto případě je efektivní jednoduché. Komentáře jsou tak důležitou součástí triků CSS “

Začneme zde kopat do Photoshopu a navrhovat oblast komentářů. Začínáme nahoře, což znamená jednotlivé komentáře samotné (na rozdíl od „

Začneme tím, že se podíváme na některé z mrzutých prací, které jsem udělal v zákulisí, a vysvětlil některé věci, které bylo třeba udělat. Jako přidání do zbytku „

Jsme docela blízko dokončení stavby domovské stránky oblasti Snippets na webu. Okamžitě začneme dolaďovat věci a získávat další věci “

S designem pro oblast úryvků „hotovo“ - nyní můžeme přejít k určité interaktivitě (číst: JavaScript). Přidali jsme super lame rollover pro odkazy na "

Nyní máme návrh Photoshopu, ze kterého můžeme pracovat na domovské stránce oblasti Úryvky. Je mnohem přehlednější než dříve, ale udržuje duhu “

Je čas se ponořit do oblasti Snippets! To znamená její skutečnou obsahovou oblast. Záhlaví už máme na svém místě. Oblast úryvků je velmi populární. “

V tomto screencastu shrnujeme sekci Almanach. V almanachu je celkem jasná hierarchie. Funguje to: Domů> Almanach Domů> Vlastnictví nebo selektor> „

Tady skočíme jen o kousek dopředu. Toto je docela obsáhlá série screencastů, ale je to jen asi 40 hodin a samozřejmě tento skutečný projekt “

Již jsme pracovali lokálně na místní doméně (v10.whatup). Nyní je čas začít s přechodem na WordPress. Budeme dál pracovat lokálně “

Veškerý obsah, který potřebujeme, máme na této stránce a máme záhlaví na místě. Nyní můžeme začít CSSin 'obsah do designu, do kterého vstupujeme “

Jakmile začneme pracovat na WordPressu, bude nejlepší, když zachytíme přesnou kopii živé databáze, se kterou budeme pracovat lokálně. Některé weby obsahují věci jako „

Nyní, když jsme bojovali se získáváním správného obsahu na domovské stránce Almanachu, můžeme se ponořit do nějakého skutečného stylu s CSS. Rozhodli jsme se jít “

V tomto screencastu se do značné míry zabýváme oranžovým „Photostar“, který v zápatí dominuje. Hvězdu vytvoříme ve samostatném souboru ve Photoshopu, abychom mohli

Záhlaví Alamanc přišlo, tentokrát od Giovanni Difeterici. Abychom mohli začít, používáme spoustu technik, které jsme již zavedli “

Přišla vlastní ilustrace záhlaví pro sekci videí, tentokrát od Alyssy Nassner. Trávíme trochu času organizováním souboru Photoshopu a “

V tomto posledním screencastu sestavování zápatí pracujeme na spodním zápatí, kde jsou oblasti CodePen a ShopTalk. Musíme změnit HTML a "

V tomto screencastu se zaměříme na čáry pod odkazy v horní části zápatí. Trochu jsme narazili na to, abychom zjistili, které věci by měly "

Vstoupila hlava úryvků, tentokrát Reagan Ray. Trávíme trochu času ve Photoshopu, tentokrát trochu zamícháme věci, abychom se ujistili, že “

Se strukturou HTML pro zápatí máme vše, co potřebujeme, abychom mohli začít stylovat a vypadat, jako by to zápatí vypadalo, co jsme navrhli ve Photoshopu.

Toto je poslední práce ve Photoshopu, kterou provedeme konkrétně o zápatí, než se přeskočíme k jeho skutečnému vytvoření. V tomto screencastu

Pracujeme na vytvoření designu zápatí ve Photoshopu. Rychlé připomenutí: Pracuji ve Photoshopu, protože se tam cítím kreativnější, než přeskočím

Pustíme se do dalšího podnikání Photoshoppinu v tomto screencastu a vyložíme nejzazší zápatí s odkazy na mé dva největší další projekty, CodePen “

Vydáváme se na velkou cestu, která je zápatí! CSS-Tricks vždy měl velkou fantazijní zápatí a tento design nebude výjimkou. Není to čistě "

Díky našemu designu zápatí připravenému k použití ve Photoshopu jej můžeme začít stavět do naší statické makety HTML a CSS. Prvním krokem je dát “

Máme další zónu BSA, abychom se mohli integrovat do webu. Tenhle by měl být o něco jednodušší, protože už máme zavedený JavaScript a je to jen "

Máme maketu toho, jak chceme, aby naše zóny BuySellAds vypadaly, takže pojďme na to, abychom to vytvořili skutečně. Web BuySellAds poskytuje kód, který potřebujeme “

Jediná věc, která nyní chybí v záhlaví našich celních fór, je ta část, která ve skutečnosti říká „Fóra“! Nick ilustroval ruku drží ceduli, která byla míněna "

Nyní, když víme přesně, se kterými zónami pracujeme, vrátíme se do Photoshopu a vysmíváme se, jak chceme, aby tyto reklamní zóny vypadaly. Máme precedens pro „

Jak víte, některé reklamy na tricích CSS jsou jakosi „samostatně spravované“, jako hlavní sponzor Treehouse. Vzal jsem to, protože je to jen jeden "