Videocasty 2025, Leden
Máme těchto osm navigačních karet nejvyšší úrovně, ale Home je jediný, který „funguje“. Abychom mohli pracovat s některými stránkami, odstraníme některé stránky pro „
Pokud si pamatuji, použil jsem Google Code Prettify k použití zvýraznění syntaxe na bloku kódu na CSS-Tricks. Víte, kde v řádku jako „
Právě jsme nainstalovali Prism.js a fungovali jsme. V tomto screencastu najdeme téma zvané Tomorrow Theme a integrujeme jeho barvy do syntaxe "
Udělali jsme trochu práce na záhlavích, ale budeme se zabývat více těmi v tomto screencastu. Záhlaví jsou zatraceně důležitým aspektem každého webu. Dobře uděláno,"
Teď, když máme oblast pro práci s blogovými příspěvky, můžeme se opravdu pustit do typografie blogových příspěvků. Pravděpodobně nejdůležitější typografie na webu, jaký je “
Myslím, že je velmi hezké mít individuální soubor (.scss), který je pro drtivou většinu typografie na webu. Normalizace má docela dost typografie “
Typecast (v době tohoto natáčení v beta verzi) je opravdu elegantní webová aplikace pro hraní s webovou typografií. Poskytuje skvělé rozhraní pro hraní her. “
Pokračujeme v konceptu „Don't Overthink It Grids“ a pomocí jednoduchého polstrování dostáváme odtoky v mřížce. Ponecháváme si číslo výplně “
Než uděláme nějaké typografické práce, myslel jsem si, že napravíme nepříjemnou věc, kde se obrázky rozpadají mimo oblast článku a mřížku. Použitím"
Nyní, když provozujeme vlastní lokální doménu, můžeme používat PHP. „P“ v MAMP je pro „PHP“ =). Používání PHP znamená, že můžeme používat zahrnuje. Například: Naše „
Mohli bychom napsat vlastní Sass @mixins, abychom pomohli s CSS3 (jako přechody), ale existuje již existující rámec Sass s názvem Compass, který "
Design stránek se vyvíjí a je velmi podobný mřížce. Naše moduly budou velmi čistě rozloženy do mřížky. Ale nejsou mřížky složité a divné? A možná jsme
V tomto super rychlém screencastu používáme MAMP k nastavení adresy URL, kterou můžeme použít pro místní vývoj. To je užitečné z mnoha důvodů: Můžeme odkazovat na „
Představujeme koncept dotazů @media v CSS. Mnoho z toho, co nám použití Sass na tomto projektu umožňuje, je zůstat SUCHÝ (neopakovat se). Udělali jsme"
Začneme tím, že trochu upravíme typ loga, ale pak skočíme do přidávání ikon do hlavní navigace. Když jsme navrhovali navigaci ve Photoshopu (video „
V sadě Typekit pro verzi 10 jsme nastavili novou sadu. Pro branding budeme prozatím používat Proxima Nova Soft a některá další písma, která vypadají tak blízko písmům HF&J v našem
Skutečná webová stránka zatím vůbec nevypadá jako náš design Photoshopu. V tomto screencastu se zabýváme právě tím, že začneme od „
Pomocí několika pozičních triků jsme zarovnali levý okraj loga a hlavní oblast obsahu, přičemž záhlaví se stále dotklo levého okraje „
Odebrání CSS agenta uživatele (výchozí) z většiny prvků je obvykle dobrý nápad. To již dlouho dělají „univerzální“ resety nebo věci jako Eric
Při pohledu na naši maketu Photoshopu píšeme začneme psát HTML, abychom popsali, na co se díváme. Samozřejmě používáme HTML5, kdykoli to dělá “
Začneme vkládat text do hlavní navigace, abychom viděli, jak se vejde, pracujeme na změně velikosti, barvách atd. Některý text padne docela těsně “
Určitě nejsme ve Photoshopu „hotovi“ navždy pro tento design, ale máme dost práce na to, abychom mohli začít vytvářet tento design v prohlížeči. Po"
Začneme navrhovat nejvyšší (hlavní) navigaci na webu. Začínáme s obrazovkou velikosti pracovní plochy (s jistě libovolnou šířkou), ale my jsme „
Přidáme několik dalších vrstev pod hlavní rámeček záhlaví / značky, abychom získali vzhled „stohu papírů“. Žádná velká metafora nebo tak něco, jen přidává nějaký vizuální "
Celý web bude založen na „modulech“. Každá maličkost bude doslova v krabici (vizuálně i nakonec v kódu). My"
Toto je zvukový záznam hovoru přes Skype mezi Erin Kissane a mnou. Erin napsala knihu o obsahové strategii, takže jsem měl to štěstí, že jsem jí pomohl a “
Návrh v prohlížeči je skvělý a vše, ale počínaje ve Photoshopu mě udržuje v mé nejkreativnější, když to nejvíc potřebuji: když čelím prázdnému plátnu. “
Vítejte! Bude to docela cesta a stejně jako všechny cesty, i tato začíná jediným krokem. Naším prvním krokem je provést inventuru bitů
Tento redesign není redesign pouze kvůli redesignu. Chci vylepšit web všemi možnými způsoby, jak můžete web vylepšit. Jeden z"
Už jsme mluvili o ruční optimalizaci SVG. Ruční výběr podrobností a toho, jaké věci lze kombinovat nebo odebrat. V tomhle"