Screencasty wideo 2025, Styczeń
Projekt komentarzy może wyglądać bardzo prosto. I to jest! Ale myślę, że proste jest skuteczne w tym przypadku. Komentarze są tak ważną częścią sztuczek CSS ”
Zaczynamy tutaj zagłębiać się w Photoshopa i projektować obszar komentarzy. Zaczynamy od góry, co oznacza same komentarze (w przeciwieństwie do „
Zaczynamy od przyjrzenia się mojej podstawowej pracy, którą wykonałem za kulisami, dopracowując pewne rzeczy do zrobienia. Podobnie jak dodanie pozostałej części „
Jesteśmy blisko ukończenia budowy strony głównej w obszarze Fragmenty witryny. Od razu zaczynamy ulepszać rzeczy i wprowadzać więcej rzeczy do „
Z projektem obszaru snippets "gotowym" - możemy teraz przejść do interaktywności (czytaj: JavaScript). Dodajemy super lame rollover dla linków w witrynie „
Mamy teraz projekt Photoshopa do pracy na stronie głównej obszaru Snippets. Jest dużo łatwiejsze do przeglądania niż wcześniej, ale zachowuje tęczę ”
Czas zagłębić się w obszar Snippets! Oznacza to, że jest to rzeczywisty obszar zawartości. Mamy już nagłówek na miejscu. Obszar fragmentów jest dość popularny ”.
W tym screencastie podsumowujemy sekcję Almanach. W Almanachu istnieje dość wyraźna hierarchia. To idzie: Strona główna> Almanach Strona główna> Właściwość lub selektor> „
Podskoczyliśmy tu trochę do przodu. To dość obszerna seria screencastów, ale trwa tylko około 40 godzin i oczywiście ten faktyczny projekt ”
Pracowaliśmy już lokalnie w domenie lokalnej (v10.whatup). Nadszedł czas, aby przejść do WordPressa. Będziemy dalej pracować lokalnie ”
Mamy całą zawartość, której potrzebujemy na wyjściu tej strony, i mamy na miejscu nagłówek. Teraz możemy rozpocząć CSS w projektowaniu treści.
Rozpoczynając pracę w WordPress, najlepiej będzie, jeśli zdobędziemy dokładną kopię bazy danych na żywo do pracy lokalnie. Niektóre witryny zawierają takie elementy, jak „
Teraz, gdy walczyliśmy z uzyskaniem odpowiedniej treści na stronie głównej Almanachu, możemy zagłębić się w rzeczywistą stylizację za pomocą CSS. Zdecydowaliśmy się pójść ”
W tym screencastie mamy do czynienia głównie z pomarańczowym „Photostarem”, który dominuje w stopce. Gwiazdę tworzymy w osobnym pliku w Photoshopie, dzięki czemu możemy „
Główka dla Alamanc nadeszła, tym razem od Giovanniego Difeterici. Aby rozpocząć, używamy wielu ustalonych już technik ”
Pojawiła się niestandardowa ilustracja nagłówka sekcji wideo, tym razem od Alyssy Nassner. Spędzamy trochę czasu na porządkowaniu pliku Photoshopa i „
W tym ostatnim screencastie budowania stopki pracujemy na dolnej stopce, gdzie znajdują się obszary CodePen i ShopTalk. Musimy zmienić kod HTML a "
W tym screencastie skupiamy się na liniach pod linkami w górnej części stopki. Trochę się potykamy, zastanawiając się, co powinno ”
Weszła głowa fragmentów, tym razem Reagan Ray. Spędzamy trochę czasu w Photoshopie, tym razem zmieniając trochę rzeczy, aby upewnić się, że „
Po utworzeniu struktury HTML stopki mamy wszystko, czego potrzebujemy, aby rozpocząć stylizację i sprawić, by stopka wyglądała tak, jak zaprojektowaliśmy w programie Photoshop ”.
To ostatnia praca w Photoshopie, którą zajmiemy się konkretnie stopką, zanim przejdziemy do jej budowania. W tym screencastie „
Pracujemy nad stworzeniem projektu stopki w Photoshopie. Szybkie przypomnienie: pracuję w programie Photoshop, ponieważ czuję się bardziej kreatywny, zanim przeskoczę ”
W tym screencastie zajmiemy się bardziej interesami Photoshopa, przedstawiając dolną stopkę z linkami do moich dwóch największych innych projektów, CodePen ”
Wyruszamy w wielką podróż, którą jest stopka! CSS-Tricks zawsze miał dużą fantazyjną stopkę i ten projekt nie będzie wyjątkiem. To nie jest wyłącznie ”
Gdy nasz projekt stopki jest gotowy do użycia w Photoshopie, możemy zacząć budować go w naszej statycznej makiecie HTML i CSS. Pierwszym krokiem jest dawanie „
Mamy kolejną strefę BSA do zintegrowania z witryną. Ten powinien być nieco łatwiejszy, ponieważ mamy już zainstalowany JavaScript i po prostu „
Mamy makietę tego, jak chcemy, aby wyglądały nasze strefy BuySellAds, więc zacznijmy budować to naprawdę. Witryna BuySellAds zawiera potrzebny nam kod „
Jedyne, czego teraz brakuje w nagłówku naszych forów celnych, to część, która tak naprawdę mówi „Fora”! Nick zilustrował dłoń trzymającą znak oznaczający „
Teraz, gdy dokładnie wiemy, z jakimi strefami pracujemy, wracamy do Photoshopa i udajemy, jak chcemy, aby te strefy reklamowe wyglądały. Mamy precedens dla „
Jak wiesz, niektóre reklamy w CSS-Tricks są w pewnym sensie „samodzielnie zarządzane”, jak główny sponsor Treehouse. Wziąłem to na siebie, bo to tylko jeden "