Nollasta etupään sankariin (osa 1)

Muistan, kun aloin oppia etupään kehitystä. Tapasin niin monia artikkeleita, ja olin niin hämmentynyt siitä, kuinka paljon materiaalia minun tarvitsi oppia, enkä edes tiennyt mistä aloittaa.

Tämä opas auttaa sinua navigoimaan käyttöliittymän kehityksen oppimisessa. Se tarjoaa oppimisresursseja, jotka pidin aikaisemmin tehokkaina, sekä täydentäviä selityksiä.

Jotta tämä opas olisi sulava, hajotin sen kahteen osaan. Ensimmäisessä osassa käsitellään rajapintojen kehittämistä HTML: n ja CSS: n kanssa. Toinen osa käsittelee Javascriptia, kehyksiä ja suunnittelumalleja. Jos tunnet HTML: n ja CSS: n, voit siirtyä toiseen osaan, joka kattaa kaiken Javascriptin.

Nollasta etupään sankariin (osa 2)

Täydellinen opas käyttöliittymän kehittämisen media.com- oppimiseen

HTML- ja CSS-perusteet

Etupään kehityksessä kaikki alkaa HTML: stä ja CSS: stä. HTML ja CSS hallitsevat mitä näet verkkosivulla. HTML sanelee sisältöä, kun taas CSS käsittelee muotoilua ja asettelua.

Aloita lukemalla Mozilla Developer Networkin (MDN) HTML- ja CSS-oppaat. MDN tarjoaa luku-selitykset tärkeistä HTML- ja CSS-käsitteistä. Lisäksi jokainen luku on vain sivua pitkä, ja vuorovaikutteiset demot on linkitetty CodePeniin ja JSFiddleen.

Suoritettuasi nämä opetusohjelmat, tutustu CodeAcademyn Make a Website -kurssiin. Tämä opetusohjelma kestää vain muutaman tunnin, ja se on hyvä pohja HTML- ja CSS-verkkosivustojen rakentamiseen. Jos haluat enemmän, verkkolomakkeiden luominen on toinen CodeAcademyn opetusohjelma, joka vie sinut verkkolomakkeen rakentamiseen ja muotoiluun.

Kokeile CSS Diner -ohjelmaa harjoitellaksesi CSS: n kanssa. Se on hauska CSS-haastepeli. Toinen tärkeä osa HTML: ää ja CSS: ää ovat asettelut. LearnLayout on interaktiivinen opetusohjelma, joka näyttää, kuinka voit luoda asetteluja HTML: n ja CSS: n avulla.

Opi myös käyttämään Google-fontteja CSSTricksin Google Font API -sovelluksen perusteiden kanssa. Typografia on rajapintojen perusrakenne. Kun sinulla on aikaa, suosittelen, että luet tämän ilmaisen online-kirjan Donny Truongin Professional Web Typography. Se opettaa sinulle kaiken, mitä sinun tarvitsee tietää typografiasta käyttöliittymän kehittäjänä.

Kaikissa näissä resursseissa älä huoli liikaa asioiden muistamisesta. Keskity sen sijaan ymmärtämään, kuinka HTML ja CSS toimivat yhdessä.

HTML- ja CSS-perusteiden harjoittelu

Nyt kun sinulla on HTML: n ja CSS: n perusosaaminen, pidetään hauskaa. Tässä osiossa on kaksi kokeilua, jotka on suunniteltu antamaan sinulle verkkosivustojen ja käyttöliittymien rakentamista. Käytän termiä "kokeilut", koska kokeissa opit yhtä paljon epäonnistumisestasi kuin menestyksestäsi.

Koe 1

Ensimmäisessä kokeessamme aiomme käyttää CodePenia. CodePen on käyttöliittymä, jossa voit koodata HTML- ja CSS-tiedostoja tarvitsematta tallentaa tiedostoja paikallisesti. Siinä on myös live-esikatselut, jotka päivittyvät heti, kun tallennat koodisi.

Käyttämällä CodePenia tapat kaksi lintua yhdellä kivellä. Toisaalta harjoittelet HTML: ää ja CSS: ää. Toisaalta luot perussalkun. Aiomme käyttää myös Dribbble-sivustoa, joka on täynnä inspiraatiota suunnittelusta.

Siirry Dribbble-sovellukseen ja etsi malli, joka on tarpeeksi yksinkertainen koodaamaan muutamassa tunnissa. Valitsin muutaman mallin, jotta pääset alkuun: 1, 2, 3, 4 ja 5. Valitsin ensin mobiilisovellukset, koska ne ovat vähemmän monimutkaisia ​​kuin työpöydän kollegansa. Voit kuitenkin valita vapaasti myös työpöydän mallit.

Kun olet päättänyt mallin, jatka ja yritä koodata se CodePeniin. Jos juutut jumiin, muista, että StackOverflow on ystäväsi. Toinen hyödyllinen käytäntö on käydä verkkosivustoilla, kuten Medium, AirBnB ja Dropbox, ja tarkastustyökalun avulla nähdä, miten ne saavuttavat erilaiset asettelut ja tyylit. Katso myös joitain CodePenin kyniä. Valitsin muutama hyvä viite:

  • Valikko-sovelluksen käyttöliittymä
  • Twitter-widget
  • Artikkeliuutiskortti
  • Yksinkertainen litteä valikko

Jos kopiosi näyttää erilaiselta kuin alkuperäinen, älä lannistu. Harjoittele jatkuvasti eri malleilla ja huomaat parannuksen joka kerta.

Jos sinulla ei ole suunnittelutausta, on todennäköistä, että suunnittelusilmäsi on alikehittynyt. Etupään kehittäjä, jolla on hyvä suunnittelusilmä, pystyy tunnistamaan hyvät mallit ja toistamaan ne täydellisesti. Kirjoitin muutama viikko sitten artikkelin siitä, miten voit kehittää suunnittelusilmääsi.

Koe 2

Toivottavasti ensimmäinen kokeilu antoi sinulle luottamusta HTML: n ja CSS: n kirjoittamiseen. Kokeessa 2 tarkastellaan joitain sivustoja ja koodataan sitten muutama niiden komponentti.

Jotkut verkkosivustot käyttävät CSS-kehyksiä tai hämärtävät CSS-luokkanimitään, mikä vaikeuttaa niiden lähdekoodin lukemista. Siksi valitsin muutaman hyvin suunnitellun verkkosivuston, jossa on helposti luettava lähdekoodi.

  • Dropbox for Business: Yritä kopioida heidän sankariosansa
  • AirBnB: Yritä kopioida heidän alatunniste
  • PayPal: Yritä kopioida heidän navigointipalkinsa
  • Esitys: Yritä kopioida heidän ilmoittautumisosionsa sivun alaosassa
  • Raita: Yritä kopioida heidän maksuosansa

Jälleen kerran kokeen 2 painopiste ei ole luoda koko sivua uudelleen. Vaikka se ei varmasti satuta! Valitse koodattavaksi pari avainkomponenttia, kuten navigointipalkki tai sankari-osa. Annoin ehdotuksia sivustoluettelon viereen, mutta voit vapaasti valita muita komponentteja.

Voit koodata tämän kokeilun CodePenissä tai tallentaa sen paikallisesti. Jos päätät tallentaa sen paikallisesti, voit joko ladata tämän esimerkkiprojektin kattilana tai luoda tiedostot tyhjästä. Ehdotan sellaisen editorin käyttöä kuin Atom tai Sublime.

Muista myös, että minkä tahansa verkkosivuston HTML-koodi ja CSS ovat aina näkyvissä. Napsauta hiiren kakkospainikkeella sivua tai sen komponenttia, napsauta tarkastaa ja vasemmanpuoleinen HTML-koodi ja oikealla oleva CSS-ikkuna avautuu. Kun olet valmis tai juuttunut, käytä tarkastajaa nähdäksesi, kuinka HTML ja CSS vertailevat.

HTML- ja CSS-parhaat käytännöt

Toistaiseksi olet oppinut HTML: n ja CSS: n perusteet. Seuraava vaihe on oppia parhaita käytäntöjä. Parhaat käytännöt ovat joukko epävirallisia sääntöjä, jotka parantavat koodisi laatua.

Semanttinen merkintä

Yksi HTML: n ja CSS: n parhaista käytännöistä on kirjoittaa semanttiset merkinnät. Hyvä web-semantiikka tarkoittaa asianmukaisten HTML-tunnisteiden ja mielekkäiden CSS-luokkien nimien käyttöä rakenteellisen merkityksen välittämiseen.

Esimerkiksi h1- tunniste kertoo meille, että sen käärimä teksti on tärkeä otsikko. Toinen esimerkki olisi alatunniste , joka kertoo meille, että elementti kuuluu sivun alaosaan. Jatka lukemista lukemalla CSSTricksin katsaus oikeaan HTML5-semantiikkaan ja mikä tekee semanttisesta luokan nimestä.

CSS-nimeämiskäytännöt

Seuraava tärkeä CSS: n paras käytäntö on oikeat nimeämiskäytännöt. Hyvät nimeämiskäytännöt, kuten semanttinen merkintä, välittävät merkityksen ja auttavat tekemään koodistamme ennakoitavan, luettavan ja ylläpidettävän. Voit lukea erilaisista nimeämiskäytännöistä artikkelista OOCSS, ACSS, BEM, SMACSS: mitä ne ovat? Mitä minun pitäisi käyttää?

Ehdotan yleensä kokeilemaan yksinkertaisia ​​nimeämiskäytäntöjä, jotka ovat intuitiivisia sinulle. Ajan myötä löydät parhaiten sinulle sopivat. Jos haluat nähdä, kuinka Mediumin kaltaiset yritykset käyttävät BEM: n kaltaisia ​​nimeämiskäytäntöjä, lue Mediumin CSS on todella hyvä asia. Tässä artikkelissa opit myös, että tehokkaan CSS-käytännesarjan keksiminen on iteratiivinen prosessi.

CSS Reset

Selaimissa on pieniä muotoilueroja marginaaleista viivan korkeuksiin. Tästä syystä nollaa CSS aina. MeyerWeb on suosittu palautus. Jos haluat kaivaa syvemmälle, voit lukea Luo oma yksinkertainen Reset.css-tiedosto.

Ristiselaimen tuki

Selainten välinen tuki tarkoittaa, että koodisi tukee useimpia päivitettyjä selaimia. Jotkin CSS-ominaisuudet, kuten siirtyminen, edellyttävät toimittajan etuliitteitä toimiakseen oikein eri selaimissa. Voit lukea lisää toimittajien etuliitteistä tässä artikkelissa, CSS-toimittajien etuliitteet. Tärkein poisto on, että sinun tulee testata verkkosivustoasi useilla selaimilla, kuten Chrome, Firefox ja Safari.

CSS-esiprosessorit ja jälkiprosessorit

CSS: n käyttöönoton jälkeen 1990-luvulla CSS on edennyt pitkälle. Koska käyttöliittymäjärjestelmät ovat yhä monimutkaisempia, ihmiset keksivät työkaluja, jotka tunnetaan esiprosessoreina ja jälkiprosessoreina monimutkaisuuden hallitsemiseksi.

CSS-esiprosessorit ovat CSS-kielilaajennuksia, jotka lisäävät kelloja ja pillejä, kuten muuttujia, miksauksia ja perintöä. Kaksi tärkeintä CSS-esiprosessoria ovat Sass ja Less. Vuonna 2016 Sassia käytetään yleensä laajemmin. Bootstrap, suosittu reagoiva CSS-kehys, vaihtaa myös Lessistä Sassiksi. Lisäksi, kun useimmat ihmiset puhuvat Sassista, he todella puhuvat SCSS: stä.

CSS-jälkiprosessorit tekevät muutoksia CSS: ään sen jälkeen, kun esikäsittelijä on kirjoittanut sen käsin tai koonnut sen. Esimerkiksi joillakin jälkikäsittelijöillä, kuten PostCSS, on laajennuksia, jotka lisäävät selaimen toimittajan etuliitteet automaattisesti.

Kun ensimmäisen kerran löydät CSS-esiprosessorit ja jälkiprosessorit, on houkuttelevaa käyttää niitä kaikkialla. Aloita kuitenkin yksinkertaisesti ja lisää laajennuksia, kuten muuttujia ja sekoituksia, vain tarvittaessa. Aikaisemmin ehdottamani artikkeli, Mediumin CSS on oikeastaan ​​melko hyvä, kattaa myös kuinka paljon on liikaa esikäsittelijöille.

Ristikkojärjestelmät ja reagointikyky

Ruudukkojärjestelmät ovat CSS-rakenteita, joiden avulla voit pinota elementtejä vaaka- ja pystysuunnassa.

Ruudukkorakenteet, kuten Bootstrap, Skeleton ja Foundation, tarjoavat tyylitaulukoita, jotka hallitsevat rivejä ja sarakkeita asetteluissa. Vaikka ruudukkokehykset ovat hyödyllisiä, on myös tärkeää ymmärtää ruudukkojen toiminta. CSS-ruudukkojärjestelmien ymmärtäminen ja älä ylikuormita ruudukkoja ovat erinomaisia ​​yleiskatsauksia.

Yksi ruudukkojärjestelmien päätavoitteista on lisätä reagointikykyä verkkosivustollesi. Reagointikyky tarkoittaa, että verkkosivustosi kokoa muutetaan ikkunan leveyden perusteella. Usein reagointikyky saavutetaan käyttämällä CSS-mediakyselyitä, CSS-sääntöjä, jotka koskevat vain tiettyjä näytön leveyksiä.

Voit lukea lisää mediakyselyistä Johdanto mediakyselyihin. Koska olemme siirtyneet mobiililaitteiden ensimmäiseen aikakauteen, tutustu myös Johdatus mobiilimyyntikyselyihin.

HTML- ja CSS-parhaiden käytäntöjen harjoittelu

Nyt kun olet aseistettu parhailla käytännöillä, testataan heitä taistelussa. Näiden kahden seuraavan kokeilun tavoitteena on harjoitella puhtaan koodin kirjoittamista ja parhaiden käytäntöjen pitkän aikavälin vaikutuksen luettavuuteen ja ylläpitävyyteen tarkkailemista.

Koe 3

Valitse kokeessa 3 jokin aikaisemmista kokeistasi ja korjaa koodisi käyttämällä joitain parhaita oppimiasi käytäntöjä. Refactoring tarkoittaa koodin muokkaamista siten, että se on helpompi lukea ja vähemmän monimutkainen.

Koodin tehokas korjaaminen on etupään kehittäjän tärkeä taito. Laatukoodin luominen on iteratiivinen prosessi. CSS-arkkitehtuurit: Refactor CSS on hyvä lähtökohta koodisi uudelleen tekemiseen.

Tässä on muutama asia, jonka voit kysyä itseltäsi, kun muokkaat koodiasi.

  • Ovatko luokkiesi nimet moniselitteisiä? Ymmärrätkö kuuden kuukauden kuluttua, mitä luokkanimesi tarkoittaa?
  • Onko HTML ja CSS semanttinen? Kun vilkaiset koodiasi, pystytkö nopeasti havaitsemaan rakenteellisen ja relaatiotarkoituksen?
  • Käytätkö samaa heksavärikoodia uudestaan ​​ja uudestaan ​​koodissasi? Olisiko järkevämpää muokata se Sass-muuttujaksi?
  • Toimiiko koodisi yhtä hyvin Safarissa kuin Chromessa?
  • Voisitko korvata osan ulkoasukoodistasi ruudukkojärjestelmällä, kuten Luuranko?
  • Käytätkö ! -Merkkiä usein? Kuinka voit korjata sen?

Koe 4

Viimeinen kokeilu käytti hyvistä käytännöistä oppimiasi. Parhaiden käytäntöjen vaikutukset eivät kuitenkaan usein tule näkyviin, ennen kuin käytät niitä suurempaan projektiin.

Viimeiselle kokeilulle rakenna itsellesi salkusivusto. Etupäänä portfoliosivustosi on yksi tärkeimmistä digitaalisista resursseistasi. Salkku on sivusto, joka esittelee työsi. Vielä tärkeämpää on, että se on jatkuva ennätys, joka auttaa sinua seuraamaan edistymistäsi ja kehitystäsi. Joten vaikka sinulla olisi vain 1 tai 2 nähtävää, aseta se.

Aloita seuraamalla Adham Dannawayn artikkelia "Oma (yksinkertainen) työnkulku portfoliosivuston suunnitteluun ja kehittämiseen"

Jos ensimmäinen salkkuasi ei ole täydellinen, se on ok . Salkut käyvät läpi useita toistoja. Ja mikä on tärkeää, että rakensit sen omilla taidoillasi.

Pysy ajan tasalla

Vaikka HTML ja CSS eivät poistu muodista pian, on tärkeää pysyä ajan tasalla käyttöliittymän maisemasta.

Alla on luettelo verkkosivustoista, blogeista ja foorumeista, jotka ovat sekä miellyttäviä lukea että informatiivisia.

  • CSSTricks
  • Smashing-lehti
  • Suunnittelijauutiset
  • Nettuts +
  • CSS-ohjattu toiminto

Opi esimerkin avulla

Paras tapa oppia on lopuksi esimerkki. Tässä on joukko tyylinoppaita ja koodikäytäntöjä, jotka opettavat sinua olemaan tehokkaampi käyttöliittymä.

Tyylinohjaimet

Verkko-ohjaimet ovat CSS-komponenttien ja -mallien kokoelmia, joita voidaan käyttää uudelleen verkkosivustolla. Keskeinen asia, joka on huomioitava näissä tyylisuunnitelmissa, on se, kuinka komponenttipohjaiset HTML- ja CSS-lähestymistavat mahdollistavat koodin uudelleenkäytön pitämään koodisi kuivana.

  • Mapbox
  • Yksinäinen planeetta
  • Myyntivoima
  • MailChimp

Koodisopimus

Koodikäytännöt on suunniteltu tekemään koodistasi luettavissa ja ylläpidettävissä. Jotkut näistä linkeistä, kuten CSS-ohjeet, ovat ohjeita parempien HTML- ja CSS-tiedostojen kirjoittamiseen, kun taas muut linkit, kuten Githubin sisäinen CSS-työkalupakki ja ohjeet, ovat esimerkkejä laatukoodista.

  • CSS-ohjeet
  • Githubin sisäinen CSS-työkalupakki ja ohjeet
  • AirBnB: n CSS-tyylisuunnitelma

Paketoida

Toivottavasti tämän artikkelin loppuun mennessä olet perehtynyt HTML: ään ja CSS: ään ja sinulla on muutama projekti turvavyön alla. Paras tapa oppia käyttöliittymä on rakentaa projekteja ja kokeilla. Muista, että jokaisen käyttöliittymäkehittäjän on aloitettava jostakin. Ja on parempi aloittaa tänään kuin huomenna.

Tämä artikkeli on ensimmäinen kaksiosaisesta sarjasta. Toinen artikkeli käsittelee vuorovaikutteisuuden lisäämistä Javascript- ja Javascript-kirjastojen / kehysten kanssa. Jos haluat minun tarkentavan jotain tai jos sinulla on kysyttävää, jätä minulle muistiinpano tai twiitti.

Nollasta etupään sankariin (osa 2)

Täydellinen opas käyttöliittymän kehittämisen media.com- oppimiseen

PS Jos pidit tästä artikkelista, se merkitsisi paljon, jos osut suosituspainikkeeseen tai jaat sen ystävien kanssa.

Jos haluat enemmän, voit seurata minua Twitterissä, johon lähetän ei-aistillisia hämmennyksiä suunnittelusta, käyttöliittymän kehityksestä, robotteista ja koneoppimisesta.