A nullától az elülső hősig (1. rész)

Emlékszem, amikor először kezdtem el tanulni a front-end fejlesztést. Annyi cikkel találkoztam, és annyira elárasztott, hogy mennyi anyagra lesz szükségem ahhoz, hogy megtanuljam, nem is tudtam, hol kezdjem.

Ez az útmutató segít eligazodni a front-end fejlesztés elsajátításában. Olyan tanulási forrásokat biztosít, amelyeket korábban hatékonynak találtam, kiegészítő magyarázatokkal együtt.

Hogy ezt az útmutatót emészthetővé tegyem, két részre bontottam. Az első részben áttekintjük a HTML és CSS interfészek fejlesztését. A második rész a Javascript-et, a keretrendszereket és a tervezési mintákat mutatja be. Ha ismeri a HTML-t és a CSS-t, akkor ugorhat a második részre, amely a Javascript mindenre kiterjed.

A nullától az elülső hősig (2. rész)

Teljes útmutató a front-end fejlesztő medium.com elsajátításához

HTML és CSS alapok

A front-end fejlesztésben minden a HTML-lel és a CSS-sel kezdődik. A HTML és a CSS vezérli a weblapon látottakat. A HTML diktálja a tartalmat, míg a CSS kezeli a stílust és az elrendezést.

A kezdéshez olvassa el a Mozilla Developer Network (MDN) HTML és CSS oktatóanyagát. Az MDN fejezetenként ismerteti a fontos HTML és CSS fogalmakat. Ezenkívül minden fejezet csak egy oldal hosszú, interaktív bemutatókat tartalmaz a CodePen és a JSFiddle linkekkel.

Az oktatóanyagok elvégzése után tekintse meg a CodeAcademy webhely készítése tanfolyamát. Ez az oktatóanyag csak néhány órát vesz igénybe, és jó alapja a HTML és CSS-t tartalmazó webhelyek felépítésének. Ha többet szeretne, a webes űrlapok készítése a CodeAcademy másik oktatóprogramja, amely végigvezeti Önt egy webes űrlap felépítésén és stílusán.

A CSS gyakorlása érdekében próbálja ki a CSS éttermet. Ez egy szórakoztató CSS ​​kihívás játék. A HTML és a CSS másik fontos szempontja az elrendezés. A LearnLayout egy interaktív oktatóanyag, amely bemutatja, hogyan készítsen elrendezéseket HTML és CSS segítségével.

Ismerje meg, hogyan használhatja a Google Betűtípusokat a Google Font API alapjaival a CSSTricks által. A tipográfia az interfészek alapvető építőeleme. Ha van időd, nagyon ajánlom, hogy olvassa el ezt az ingyenes online könyvet, a Donny Truong professzionális webes tipográfiáját. Mindent megtanít, amit elöljáró fejlesztőként tudnia kell a tipográfiáról.

Ezen erőforrások során ne aggódjon túl sokat a dolgok memorizálása miatt. Ehelyett összpontosítson a HTML és a CSS együttműködésének megértésére.

A HTML és CSS alapok gyakorlása

Most, hogy rendelkezik a HTML és a CSS alapismereteivel, érezzünk jól magunkat. Ebben a szakaszban két kísérletet terveztek a webhelyek és interfészek felépítésének gyakorlására. Azért használom a „kísérletek” kifejezést, mert a kísérletek során ugyanannyit tanul a kudarcából, mint a sikeréből.

1. kísérlet

Első kísérletünk során a CodePen-t fogjuk használni. A CodePen egy olyan elülső játszótér, ahol HTML és CSS kódolást végezhet anélkül, hogy fájlokat kellene helyben tárolnia. Élő előnézetei is vannak, amelyek frissülnek, amint elmentik a kódot.

A CodePen használatával két legyet ölhet meg egy csapásra. Egyrészt gyakorolod a HTML-t és a CSS-t. Másrészt létrehoz egy alapvető haladási portfóliót. Használjuk a Dribbble-t is, amely egy olyan webhely, amely tele van ihletett dizájnnal.

Látogasson el a Dribbble oldalra, és találjon egy olyan tervet, amely elég egyszerű néhány óra alatt kódolni. Az induláshoz néhány tervet választottam: 1, 2, 3, 4 és 5. Azért választottam a mobil-első webes terveket, mert kevésbé összetettek, mint asztali társaik. Válasszon azonban nyugodtan asztali mintákat is.

Miután eldöntötte a formatervezést, próbálkozzon a CodePen kódolásával. Ha elakad, ne feledje, hogy a StackOverflow a barátja. Egy másik hasznos gyakorlat az olyan webhelyek felkeresése, mint a Medium, az AirBnB és a Dropbox, és az ellenőr eszköz használatával megtudhatja, hogyan érik el a különböző elrendezéseket és stílusokat. Vessen egy pillantást a CodePen néhány tollára. Kiválasztottam néhány jó referenciát:

  • Menü alkalmazás interfész
  • Twitter Widget
  • Cikk Hírlap
  • Egyszerű lapos menü

Ha másolata eltér az eredetitől, ne csüggedjen. Gyakoroljon különböző dizájnnal, és minden alkalommal észreveszi a javulást.

Ha nincs tervezési háttere, akkor valószínűleg a tervező szeme fejletlen. A jó tervező szemű front-end fejlesztő képes lesz a jó tervek azonosítására és tökéletes másolására. Néhány hete írtam egy cikket arról, hogyan fejlesztheti tervező szemét.

2. kísérlet

Remélhetőleg az első kísérlet adott némi bizalmat a HTML és CSS írásában. A 2. kísérlethez megnézünk néhány webhelyet, majd kódolunk néhány alkatrészt.

Egyes webhelyek CSS keretrendszereket használnak, vagy elfedik CSS osztályneveiket, ami megnehezíti a forráskód olvasását. Ezért választottam ki néhány jól megtervezett weboldalt, könnyen olvasható forráskóddal.

  • Dropbox for Business: Próbálja meg lemásolni a hős szakaszukat
  • AirBnB: Próbálja megismételni a láblécüket
  • PayPal: Próbálja megismételni a navigációs sávot
  • Megvizsgálás: Próbálja megismételni a feliratkozási részt az oldal alján
  • Csík: Próbálja megismételni a fizetési szakaszukat

Ismételten a 2. kísérlet nem a teljes oldal újrateremtésére irányul. Bár ez biztosan nem ártana! Válasszon ki néhány kulcsfontosságú komponenst, például egy navigációs sávot vagy egy hős részt a kódoláshoz. Javaslatokat adtam a webhelyek listája mellett, de bátran válasszon más összetevőket.

Kódolhatja ezt a kísérletet a CodePen-ben, vagy tárolhatja helyben. Ha úgy dönt, hogy helyben tárolja, vagy letöltheti ezt a példaprojekt kazánként, vagy létrehozhatja a fájlokat a semmiből. Javaslom egy olyan szerkesztő használatát, mint az Atom vagy a Sublime.

Ne feledje, hogy bármely webhely esetében mindig láthatja annak HTML-jét és CSS-jét. Csak kattintson jobb gombbal az oldalra vagy az oldalon lévő elemre, kattintson az Ellenőrzés gombra , és megjelenik egy panel, ahol a bal oldalon látható HTML, a jobb oldalon pedig a CSS található. Miután végzett, vagy elakadt, használja az ellenőrt, hogy lássa, hogyan hasonlít össze a HTML és a CSS.

HTML és CSS bevált gyakorlatok

Eddig a HTML és a CSS alapjait tanultad. A következő lépés a legjobb gyakorlatok elsajátítása. A bevált gyakorlatok olyan informális szabályok összessége, amelyek javítják a kód minőségét.

Szemantikus jelölés

A HTML és a CSS egyik legjobb gyakorlata a szemantikus jelölések írása. A jó webes szemantika megfelelő HTML-címkék és értelmes CSS-osztálynevek használatát jelenti a strukturális jelentés közvetítéséhez.

Például a h1 címke azt mondja nekünk, hogy az általa beburkolt szöveg fontos fejléc. Egy másik példa lehet a lábléc címke, amely azt mondja nekünk, hogy az elem az oldal aljára tartozik. További olvasmányért olvassa el a CSSTricks áttekintését a megfelelő HTML5 szemantikában és mit jelent egy szemantikus osztálynév számára.

CSS elnevezési konvenciók

A CSS következő fontos bevált gyakorlata a megfelelő elnevezési szabályok. A jó elnevezési szokások, például a szemantikai jelölés, jelentést közvetítenek, és elősegítik kódunk kiszámíthatóságát, olvashatóságát és fenntarthatóságát. A különböző elnevezési szokásokról az OOCSS, ACSS, BEM, SMACSS cikkben olvashat: mik ezek? Mit használjak?

Általánosságban azt javaslom, hogy próbálja ki az Ön számára intuitív értelemben vett egyszerű elnevezési szokásokat. Idővel felfedezheti azokat, amelyek a legjobban megfelelnek Önnek. Ha meg szeretné tudni, hogy a Mediumhoz hasonló vállalatok hogyan használják a BEM-hez hasonló elnevezési konvenciókat, olvassa el a Medium CSS-jét, ami valójában nagyon jó. Ebből a cikkből azt is megtudhatja, hogy a CSS-konvenciók hatékony sorozatának előállítása iteratív folyamat.

CSS Reset

A böngészőknek kisebb a stílus következetlensége a margóktól a vonalmagasságig. Ezért mindig állítsa vissza a CSS-t. A MeyerWeb népszerű visszaállítás. Ha mélyebbre szeretne ásni, olvassa el a Saját egyszerű Reset.css fájl létrehozása című cikket.

Keresztböngésző támogatás

A böngészők közötti támogatás azt jelenti, hogy kódja támogatja a legtöbb naprakész böngészőt. Egyes CSS-tulajdonságokhoz, például az átálláshoz, szállítói előtagokra van szükség ahhoz, hogy a különböző böngészőkben megfelelően működjenek. A szállító előtagjairól ebben a cikkben, a CSS szállító előtagjaiban olvashat bővebben. A fő szempont az, hogy tesztelje webhelyét több böngészőben, beleértve a Chrome-ot, a Firefox-ot és a Safari-t.

CSS elő- és utómunkálatok

A CSS 1990-es évekbeli bevezetése óta a CSS hosszú utat tett meg. Mivel a felhasználói felület rendszerei egyre bonyolultabbá válnak, az emberek a bonyolultság kezelésére előprocesszorokként és utóprocesszorokként ismert eszközökkel álltak elő.

A CSS előfeldolgozók olyan CSS nyelvi kiterjesztések, amelyek harangokat és sípokat adnak hozzá, mint például változók, mixek és öröklés. A két fő CSS előfeldolgozó a Sass és a Less. 2016-ban a Sass-t általában szélesebb körben használják. A Bootstrap, a népszerű reszponzív CSS keretrendszer a Less-ről a Sass-ra is átáll. Továbbá, amikor a legtöbb ember Sassról beszél, valójában az SCSS-ről.

A CSS utófeldolgozók azt követően alkalmazzák a CSS-változtatásokat, hogy azt kézzel írta vagy összeállította egy előfeldolgozó. Például egyes utómunkálatok, például a PostCSS, rendelkeznek beépülő modulokkal, amelyek automatikusan hozzáadják a böngésző szállítójának előtagjait.

Amikor először fedezi fel a CSS előfeldolgozókat és utóprocesszorokat, csábító mindenhol használni őket. Kezdje azonban egyszerű módon, és csak szükség esetén adjon hozzá olyan kiterjesztéseket, mint a változók és a mixek. Az általam korábban javasolt cikk, a Medium CSS-je valójában nagyon jó, kitér arra is, hogy mennyi a sok, ha az előfeldolgozókról van szó.

Rácsrendszerek és érzékenység

A rácsrendszerek CSS struktúrák, amelyek lehetővé teszik az elemek vízszintes és függőleges egymásra helyezését.

A rácskeretek, mint például a Bootstrap, a Skeleton és az Foundation, olyan stíluslapokat nyújtanak, amelyek az elrendezések sorait és oszlopait kezelik. Bár a rácskeretek hasznosak, fontos megérteni a rácsok működését is. A CSS rácsrendszerek megértése és a rácsok ne gondolják túlzásnak nagyszerű áttekintés.

A rácsrendszerek egyik fő célja a válaszkészség növelése a webhelyen. Az érzékenység azt jelenti, hogy webhelye átméretezi az ablak szélességét. Sokszor reagálni lehet CSS média lekérdezések, CSS szabályok használatával, amelyek csak bizonyos képernyő szélességekre vonatkoznak.

A média lekérdezésekről a Bevezetés a média lekérdezésekbe című cikkben olvashat bővebben. Továbbá, mivel beléptünk egy mobil-első korszakba, olvassa el az An Introduction to Mobile-First Media Queries című cikket.

A HTML és CSS bevált gyakorlatok gyakorlása

Most, hogy bevált gyakorlatokkal rendelkezik, teszteljük őket. E következő két kísérlet célja a tiszta kódírás gyakorlása és a bevált gyakorlatok hosszú távú hatásának megfigyelése az olvashatóságra és a fenntarthatóságra.

3. kísérlet

A 3. kísérlethez válassza ki az egyik korábbi kísérletét, és alakítsa át a kódot a megtanult legjobb gyakorlatok felhasználásával. Az újrafeldolgozás a kód szerkesztését jelenti, hogy könnyebben olvasható és kevésbé bonyolult legyen.

A felület hatékony fejlesztése a front-end fejlesztő fontos készsége. A minőségi kód létrehozása iteratív folyamat. CSS architektúrák: Refaktor A CSS jó kiindulópont a kód újrafeldolgozásához.

Íme néhány dolog, amelyet feltesz magának, amikor újrafeldolgozza a kódot.

  • Az osztálynevei nem egyértelműek? 6 hónap múlva még mindig meg fogja érteni, mit jelent az osztály neve?
  • Szemantikus a HTML és a CSS? Amikor a kódjára pillant, képes felismerni a strukturális és relációs jelentést?
  • Újra és újra felhasználja ugyanazt a hexadecimális színkódot a kódjában? Ésszerűbb lenne átalakítani Sass változóvá?
  • A kódod ugyanolyan jól működik a Safariban, mint a Chrome-ban?
  • Lecserélhetné néhány elrendezési kódját egy rácsrendszerre, például a Csontvázra?
  • Gyakran használja a ! Fontos zászlót? Hogyan lehet ezt kijavítani?

4. kísérlet

Az utolsó kísérlet felhasználta a bevált gyakorlatokról tanultakat. A bevált gyakorlatok hatása azonban gyakran csak akkor válik nyilvánvalóvá, ha nagyobb projektben alkalmazza őket.

Az utolsó kísérlethez készítsen magának portfólió weboldalt. Kezelőfelületként a portfólió webhelye az egyik legfontosabb digitális eszköz. A portfólió egy olyan webhely, amely bemutatja munkáját. Ennél is fontosabb, hogy ez egy folyamatos rekord, amely segít nyomon követni az előrehaladást és a fejlődést. Tehát akkor is, ha csak 1 vagy 2 dolgot mutat meg, tegye fel.

A kezdéshez kövesse Adham Dannaway cikkét: Az (egyszerű) munkafolyamatom egy portfólió weboldal tervezéséhez és fejlesztéséhez

Ha az első portfólió-iteráció nem tökéletes, az rendben van . A portfóliók sok ismétlésen mennek keresztül. És ami fontos, hogy a saját képességeivel építette fel.

Maradj naprakész

Bár a HTML és a CSS hamarosan nem fog divatból kilépni, fontos, hogy naprakész legyen a kezelőfelület tájképével.

Az alábbiakban felsoroljuk azokat a weboldalakat, blogokat és fórumokat, amelyek élvezetesek olvasni és informatívak.

  • CSSTricks
  • Smashing Magazine
  • Designer News
  • Nettuts +
  • CSS varázsló

Tanulj példával

Végül a tanulás legjobb módja a példa. Íme egy sor stílusvezérlő és kódegyezmény, amelyek megtanítják, hogyan lehet hatékonyabb kezelőfelület.

Styleguides

A webes stílusú útmutatók CSS-összetevők és minták gyűjteményei, amelyeket egy weboldalon újra felhasználhatnak. A legfontosabb megjegyzendő ezekből a stílusvezetésekből az, hogy az összetevő alapú HTML és CSS megközelítések hogyan teszik lehetővé a kód újrafelhasználását a kód DRY megtartása érdekében.

  • Mapbox
  • Magányos bolygó
  • Értékesítési erő
  • MailChimp

Kódegyezmények

Kódmegegyezések, amelyek a kód olvashatóvá és fenntarthatóvá teszik. Néhány ilyen link, például a CSS irányelvek, iránymutatás a jobb HTML és CSS megírásához, míg más linkek, például a Github belső CSS eszköztára és az irányelvek a minőségi kód példái.

  • CSS irányelvek
  • A Github belső CSS eszköztára és irányelvei
  • Az AirBnB CSS Styleguide

Tekerje be

Remélhetőleg a cikk végére ismeri a HTML-t és a CSS-t, és van néhány projekt az övében. A front-end elsajátításának legjobb módja projektek építése és kísérletezés. Ne feledje, hogy minden front-end fejlesztőnek el kell kezdenie valahonnan. És jobb ma kezdeni, mint holnap.

Ez a cikk a kétrészes sorozat első része. A második cikk az interaktivitás hozzáadásáról szól a Javascript és a Javascript könyvtárakkal / keretrendszerekkel. Továbbá, ha azt akarja, hogy részletezzek valamit, vagy bármilyen kérdése van, nyugodtan hagyjon nekem egy jegyzetet vagy tweetet.

A nullától az elülső hősig (2. rész)

Teljes útmutató a front-end fejlesztő medium.com elsajátításához

PS Ha tetszett ez a cikk, sokat jelentene, ha megnyomná az ajánlás gombot, vagy megosztaná ismerőseivel.

Ha még többet akarsz, követhetsz a Twitteren, ahol nem érzéki tévedéseket teszek közzé a tervezésről, a front-end fejlesztésről, a botokról és a gépi tanulásról.