Videonäyttö 2025, Syyskuu
Meillä on tämä kahdeksan ylätason navigointivälilehteä, mutta Koti on ainoa "toimiva". Joten meillä on joitain sivuja, joiden kanssa voimme työskennellä, poistamme joitain sivuja "
Sikäli kuin muistan, käytin Google Code Prettify -sovellusta soveltamaan syntaksikorostusta CSS-Tricks-koodilohkoon. Missä rivillä kuten "
Olemme juuri asentaneet Prism.js: n ja saaneet sen toimimaan. Tässä kuvaruudussa löydämme teeman nimeltä Tomorrow Theme ja sisällytämme sen värit syntaksiin "
Olemme tehneet vähän työtä ylätunnisteiden parissa, mutta tutkimme tarkemmin tämän kuvaruudun aiheita. Otsikot ovat tärkeä osa sivustoa. Tehty hyvin "
Nyt kun meillä on blogiviestialue, jonka kanssa voimme työskennellä, voimme todella päästä blogiviestien typografiaan. Epäilemättä sivuston tärkein typografia sellaisenaan "
Mielestäni on erittäin mukavaa saada oma tiedosto (.scss), joka on tarkoitettu suurimmalle osalle sivuston typografiaa. Normalisoinnissa on melko vähän typografiaa "
Typecast (beeta tämän kuvaushetken aikana) on todella siisti verkkosovellus web-typografialla pelaamiseen. Se antaa sinulle upean käyttöliittymän leikkimiseen "
Jatkamalla "Älä overthink it ruudukot" -periaatetta, saamme ruudukossa olevat kourut yksinkertaisen pehmusteen avulla. Pidämme pehmusteen numeron "
Ennen kuin teemme typografista työtä, ajattelin korjaavan ärsyttävän asian, jossa kuvat romahtavat artikkelin alueen ja ruudukon ulkopuolella. "
Nyt kun käytämme mukautettua paikallista verkkotunnusta, voimme käyttää PHP: tä. MAMP: n "P" on "PHP" =). PHP: n käyttö tarkoittaa, että voimme käyttää sisällyttää. Esimerkiksi: "
Voisimme kirjoittaa omat Sass @mixins auttamaan CSS3-juttuissa (kuten kaltevuudet), mutta on olemassa jo olemassa oleva Sass-kehys nimeltä Compass, joka "
Sivustosuunnittelu on muuttumassa hyvin ruudukkomaiseksi. Moduulimme asettuvat erittäin siististi ruudukkoon. Mutta eivätkö ristikot monimutkaisia ja outoja? Ja ehkä me "
Tässä erittäin nopeassa kuvaruudussa käytämme MAMP: ää määrittämään URL-osoitteen, jota voimme käyttää paikalliseen kehitykseen. Tästä on hyötyä monista syistä: voimme linkittää
Esittelemme @media-kyselyjen käsitteen CSS: ssä. Paljon mitä Sassin käyttö tässä projektissa antaa meille mahdollisuuden pysyä kuivana (älä toista itseäsi). Me teimme"
Aloitamme säätämällä logotyyppiä hieman, mutta siirrymme sitten lisäämään kuvakkeita päävalikkoon. Kun suunnittelemme navigointia Photoshopissa (Video "
Perustimme uuden sarjan Typekit-versiossa v10: lle. Brändäykseen käytämme toistaiseksi Proxima Nova Softia ja joitain muita fontteja, jotka näyttävät yhtä lähellä HF & J-fontteja. "
Toistaiseksi varsinainen verkkosivusto ei näytä olevan lainkaan kuin Photoshop-suunnittelumme. Tässä kuvakaappauksessa kaivamme tekemään juuri niin, aloittaen ylhäältä "
Käytämme joitain paikannustemppuja linjaamaan logon vasen reuna ja pääsisältöalue samalla, kun otsikko koskettaa silti "
Käyttäjäagentin (oletus) CSS: n poistaminen useimmista elementeistä on yleensä hyvä idea. Tämä on jo pitkään tehty "universaaleilla" palautuksilla tai esimerkiksi Ericillä
Katsellessamme Photoshop-mallia kirjoitamme aloittamaan HTML-kuvauksen kuvaamaan mitä katsomme. Käytämme tietenkin HTML5: tä aina, kun se tekee "
Aloitamme pudottamalla tekstin päänavigointiin vain nähdäksemme, miten se sopii, työskentelemme koon, värien jne. Suhteen. Osa tekstistä sopii melko tiukasti "
Emme todellakaan ole "tehneet" Photoshopissa ikuisesti tätä mallia, mutta meillä on tarpeeksi töitä aloittaaksemme tämän mallin luomisen selaimessa. Jälkeen"
Alamme suunnitella sivuston ylimmän tason (pää) navigointia. Aloitamme työpöydän koonäytöllä (tosin mielivaltaisella leveydellä), mutta olemme "
Lisäämme ylimääräisiä kerroksia pääotsikon / tuotemerkkikotelon alle, jotta "paperipino" näyttää. Ei suurta metaforaa tai mitään, se vain lisää visuaalista "
Koko sivusto perustuu "moduuleihin". Jokainen pieni asia tulee kirjaimellisesti olemaan laatikossa (sekä visuaalisesti että lopulta koodissa). Me"
Tämä on äänitallenne Skype-puhelusta Erin Kissanen ja minun välillä. Erin kirjoitti kirjan sisältöstrategiasta, joten minulla oli onni saada hänen apua ja "
Suunnittelu selaimessa on hienoa ja kaikki, mutta Photoshopissa aloittaminen pitää minut luovimmana silloin, kun sitä eniten tarvitsen: kun kohtaan tyhjää kangasta. "
Tervetuloa! Tämä tulee olemaan melko matka, ja kuten kaikki matkat, tämäkin alkaa yhdellä askeleella. Ensimmäinen askel on kartoittaa vähän "
Tämä uudelleensuunnittelu ei ole uudelleensuunnittelu vain uudelleensuunnittelun vuoksi. Haluan parantaa sivustoa kaikilla mahdollisilla tavoilla, joilla voit parantaa sivustoa. Yksi"
Puhuimme SVG: n optimoinnista jo käsin. Valintojen tekeminen manuaalisesti yksityiskohdista ja siitä, minkälaisia asioita voidaan yhdistää tai poistaa. Tässä"