Screencasty wideo 2025, Styczeń
Mamy osiem kart nawigacyjnych najwyższego poziomu, ale Strona główna jest jedyną, która „działa”. Abyśmy mieli kilka stron do pracy, usunęliśmy niektóre strony dla „
Odkąd pamiętam, użyłem Google Code Prettify, aby zastosować podświetlanie składni w bloku kodu w CSS-Tricks. Wiesz, gdzie w wierszu typu „
Właśnie zainstalowaliśmy Prism.js i uruchomiliśmy go. W tym screencastie znajdujemy motyw o nazwie Motyw jutra i dołączamy jego kolory do składni ”
Zrobiliśmy trochę pracy nad nagłówkami, ale będziemy bardziej zagłębiać się w te w tym screencastie. Nagłówki to cholernie ważny aspekt każdej witryny. Dobrze zrobione,"
Teraz, gdy mamy obszar postów na blogu do pracy, możemy naprawdę zająć się typografią postów na blogu. Prawdopodobnie najważniejsza typografia w witrynie, ponieważ „
Myślę, że bardzo fajnie jest mieć indywidualny plik (.scss), który jest przeznaczony dla większości typografii na stronie. Normalize ma sporo typografii ”
Typecast (w wersji beta w czasie kręcenia tego filmu) to naprawdę fajna aplikacja internetowa do zabawy z typografią internetową. Zapewnia doskonały interfejs do zabawy ”
Kontynuując koncepcję „Don't Overthink It Grids”, w siatce pojawiają się rynny, po prostu używając prostego wypełnienia. Utrzymujemy numer dopełnienia "
Zanim zajmiemy się typografią, pomyślałem, że naprawimy irytującą sytuację, w której obrazy wypadają poza obszar artykułu i siatkę. Za pomocą"
Teraz, gdy uruchamiamy niestandardową domenę lokalną, możemy używać PHP. Litera „P” w MAMP oznacza „PHP” =). Używanie PHP oznacza, że możemy używać include. Na przykład: nasz „
Moglibyśmy napisać własne @mixiny Sass, aby pomóc w CSS3 (jak gradienty), ale istnieje już framework Sass o nazwie Compass, który "
Projekt witryny wygląda bardzo podobnie do siatki. Nasze moduły będą układać się bardzo czysto w siatkę. Ale czy siatki nie są skomplikowane i dziwne? A może my ”
W tym super szybkim screencastie używamy MAMP do ustawienia adresu URL, którego możemy użyć do lokalnego rozwoju. Jest to przydatne z kilku powodów: możemy utworzyć link do „
Przedstawiamy koncepcję zapytań @media w CSS. Wiele z tego, co pozwala nam używać Sassa w tym projekcie, to pozostać SUCHYM (nie powtarzaj tego). Zrobiliśmy"
Zaczynamy od nieco poprawienia typu logo, a następnie wskakujemy do dodawania ikon do głównej nawigacji. Podczas projektowania nawigacji w programie Photoshop (wideo „
Skonfigurowaliśmy nowy zestaw w Typekit dla v10. Do budowania marki na razie użyjemy Proxima Nova Soft i kilku innych czcionek, które wyglądają tak blisko czcionek HF&J w naszym „
Jak dotąd, rzeczywista strona internetowa nie przypomina naszego projektu Photoshopa. W tym screencastie zajmiemy się tym, zaczynając od góry słowami „
Używamy pewnych sztuczek związanych z pozycjonowaniem, aby wyrównać lewą krawędź logo i główny obszar zawartości, jednocześnie trzymając nagłówek dotykający lewej krawędzi „
Usunięcie klienta użytkownika (domyślnie) CSS z większości elementów jest zwykle dobrym pomysłem. Od dawna jest to robione przez „uniwersalne” resetowania lub takie rzeczy jak Eric ”
Patrząc na naszą makietę Photoshopa, zaczynamy pisać HTML, aby opisać, na co patrzymy. Oczywiście używamy HTML5 zawsze, gdy powoduje to „
Zaczynamy upuszczać tekst do głównej nawigacji, aby zobaczyć, jak będzie pasował, popracować nad rozmiarami, kolorami itp. Część tekstu jest dość ciasna. "
Z pewnością nie „skończyliśmy” w Photoshopie na zawsze dla tego projektu, ale mamy wystarczająco dużo pracy, aby rozpocząć tworzenie tego projektu w przeglądarce. Po"
Rozpoczynamy projektowanie nawigacji najwyższego poziomu (głównej) witryny. Zaczynamy od ekranu rozmiaru pulpitu (wprawdzie dowolnej szerokości), ale „
Dodajemy kilka dodatkowych warstw pod głównym nagłówkiem / polem marki, aby nadać wygląd stosu dokumentów. Żadnej wielkiej metafory ani nic, po prostu dodaje trochę obrazu ”
Cała witryna będzie oparta na „modułach”. Każda drobiazg będzie dosłownie w pudełku (zarówno wizualnie, jak i ostatecznie w kodzie). My"
To jest nagranie audio rozmowy przez Skype'a między Erin Kissane a mną. Erin napisała książkę o strategii treści, więc miałem szczęście, że otrzymałem jej pomoc i „
Projektowanie w przeglądarce jest fajne iw ogóle, ale rozpoczęcie pracy w Photoshopie pozwala mi zachować największą kreatywność wtedy, gdy najbardziej tego potrzebuję: stojąc przed pustym płótnem ”.
Witamy! To będzie niezła podróż i jak wszystkie podróże, ta zaczyna się od jednego kroku. Naszym pierwszym krokiem jest sporządzenie inwentaryzacji „
To przeprojektowanie nie jest przeprojektowaniem tylko ze względu na przeprojektowanie. Chcę ulepszyć witrynę w każdy możliwy sposób, w jaki możesz ją ulepszyć. Jeden z"
Rozmawialiśmy już o ręcznej optymalizacji SVG. Ręczne dokonywanie wyborów dotyczących szczegółów i rodzajów elementów, które można łączyć lub usuwać. W tym"