Screencast video 2025, Luglio

Abbiamo queste otto schede di navigazione di primo livello, ma la Home è l'unica che "funziona". Solo così abbiamo alcune pagine su cui lavorare, ne tagliamo fuori alcune per "

Per quanto posso ricordare, ho utilizzato Google Code Prettify per applicare l'evidenziazione della sintassi sul blocco di codice su CSS-Tricks. Sai, dove in una riga come "

Abbiamo appena installato Prism.js e lo abbiamo fatto funzionare. In questo screencast troviamo un tema chiamato Tomorrow Theme e inseriamo i suoi colori nella sintassi "

Abbiamo lavorato un po 'sulle intestazioni, ma approfondiremo di più quelle in questo screencast. Le intestazioni sono un aspetto dannatamente importante di qualsiasi sito. Ben fatto,"

Ora che abbiamo un'area di post sul blog con cui lavorare, possiamo davvero entrare nella tipografia dei post sul blog. Probabilmente la tipografia più importante del sito in quanto è "

Penso che sia molto bello avere un singolo file (.scss) che è per la stragrande maggioranza dei caratteri tipografici sul sito. Normalizza ha un bel po 'di tipografia "

Typecast (in beta al momento di queste riprese) è un'app web davvero carina per giocare con la tipografia web. Ti offre un'ottima interfaccia per giocare "

Continuando il concetto di "Don't Overthink It Grids", otteniamo grondaie nella griglia semplicemente usando qualche semplice imbottitura. Manteniamo il numero di riempimento "

Prima di fare un po 'di lavoro tipografico, ho pensato che avremmo sistemato la cosa fastidiosa in cui le immagini si interrompono al di fuori dell'area dell'articolo e della griglia. Utilizzando "

Ora che stiamo eseguendo un dominio locale personalizzato, possiamo usare PHP. La "P" in MAMP sta per "PHP" =). Usare PHP significa che possiamo usare include. Ad esempio: il nostro "

Potremmo scrivere il nostro Sass @mixins per aiutare con le cose CSS3 (come i gradienti), ma esiste già un framework Sass chiamato Compass che "

Il design del sito si preannuncia molto simile a una griglia. I nostri moduli saranno disposti in modo molto pulito in una griglia. Ma le griglie non sono complesse e strane? E forse noi "

In questo screencast super veloce, usiamo MAMP per impostare un URL che possiamo usare per lo sviluppo locale. Ciò è utile per una serie di motivi: possiamo collegarci a "

Introduciamo il concetto di query @media nei CSS. Molto di ciò che l'utilizzo di Sass in questo progetto ci permette di fare è rimanere ASCIUTTO (non ripetervi). Noi facemmo"

Iniziamo modificando un po 'il tipo di logo, ma poi passiamo all'aggiunta di icone nel menu di navigazione principale. Quando stavamo progettando la navigazione in Photoshop (video "

Abbiamo impostato un nuovo kit in Typekit per v10. Per il branding, per ora utilizzeremo Proxima Nova Soft e altri caratteri che si avvicinano il più possibile ai caratteri HF&J nel nostro "

Finora il sito web attuale non assomiglia affatto al nostro design di Photoshop. In questo screencast cerchiamo di fare proprio questo, iniziando dall'alto con "

Usiamo alcuni trucchi di posizionamento per allineare il bordo sinistro del logo e l'area dei contenuti principale, mantenendo comunque l'intestazione che tocca il bordo sinistro del "

La rimozione del programma utente (predefinito) CSS dalla maggior parte degli elementi è solitamente una buona idea. Questo è stato fatto a lungo da ripristini "universali" o cose come Eric "

Mentre guardiamo il nostro mockup di Photoshop, scriviamo per iniziare a scrivere HTML per descrivere ciò che stiamo guardando. Ovviamente stiamo usando HTML5 ogni volta che fa "

Iniziamo a inserire il testo nella navigazione principale, solo per vedere come si adatterà, lavoriamo su dimensioni, colori, ecc. Parte del testo si adatta piuttosto bene "

Certamente non siamo "finiti" in Photoshop per sempre per questo progetto, ma abbiamo abbastanza su cui lavorare per iniziare a creare questo progetto nel browser. Dopo"

Iniziamo a progettare la navigazione di primo livello (principale) del sito. Stiamo iniziando con lo schermo delle dimensioni del desktop (a una larghezza arbitraria) ma "

Aggiungiamo alcuni livelli extra sotto l'intestazione principale / casella di branding per dare l'aspetto della "pila di fogli". Nessuna grande metafora o altro, aggiunge solo un po 'di immagini "

L'intero sito si baserà su "moduli". Ogni piccola cosa sarà letteralmente in una scatola (sia visivamente che nel codice, in definitiva). Noi"

Questa è una registrazione audio di una chiamata Skype tra me e Erin Kissane. Erin ha scritto il libro sulla strategia dei contenuti, quindi ho avuto la fortuna di ricevere il suo aiuto e "

Progettare nel browser è bello e tutto, ma iniziare in Photoshop mi mantiene al massimo della mia creatività quando ne ho più bisogno: di fronte alla tela bianca ".

Benvenuto! Questo sarà un bel viaggio e, come tutti i viaggi, anche questo inizia con un singolo passo. Il nostro primo passo è fare l'inventario di bit di "

Questa riprogettazione non è una riprogettazione solo per il gusto di riprogettare. Voglio migliorare il sito in ogni modo immaginabile che puoi migliorare un sito. Uno di"

Abbiamo già parlato dell'ottimizzazione manuale di SVG. Fare scelte manualmente sui dettagli e sul tipo di cose che possono essere combinate o rimosse. In questo"