Arkagyij Mochulszkij:
Szia Sasha. Elolvastam az utolsó bejegyzést a csatornán és lenne egy kérdésem hozzátok. Szeretnék megtanulni egy kis frontendet. Hol kezdjem? Ismerem az alap HTML/CSS-t, nagyon alap JS-t.
Arkady, szia!
Az alapismeretek jók. Kezdheti a gépelést. A folyamat során megértjük, hogy milyen tudás hiányzik. Aztán elmész cikkeket, könyveket olvasni, videóleckéket nézni, esetleg kurzusokra kellene jelentkezned.
Hol kezdjem?
A tördeléssel való ismerkedésem a 10. osztályban kezdődött. Érdekes lett, hogyan készülnek a weboldalak. Regisztráltam egy ingyenes tárhelyre, és elkezdtem építeni egy weboldalt. Útközben cikkeket olvasok arról, hogyan lehet valamit megvalósítani. Ezt követően pénzért weboldalakat kezdett készíteni tanárok számára.
Először is meg kell próbálnod. Tetszett? Kezdheti a tanulást.
Telepítsen egy kódszerkesztőt, például az Atomot. Próbálja meg:
- Tervezze meg webhelye kezdőlapját
A jegyzetben a profi érdekes honlapokra mutató linkeket jelölt meg, nézze meg őket - Találj ki egy ötletet egy kis webszolgáltatásra, és programozd be magad
Lásd a példákat: paradicsom időzítő, nehéz. Az első projektem egy XSLT szerkesztő volt, ami megkönnyítette az új XSLT fájlok létrehozását
Amint problémába ütközik, keressen megoldást az interneten. Problémái 99%-át már megoldották és cikkekben leírták. A HTML-címkék és a CSS-stílustulajdonságok leírása a htmlbook.ru webhelyen tekinthető meg.
Tanulja meg, hogyan dolgozhat webes felügyelettel: tekintse meg és szerkessze az elrendezést, stílusokat, hibakeresési szkripteket. Ha tetszik valakinek az oldala, nyugodtan nézzen be "a motorháztető alá", és nézze meg, hogy ott minden hogyan történik.
Néha vicces üzenetek érkeznek:
Ha valami hiba történt az elrendezési folyamat során, nyissa meg az ellenőrt, és keresse meg a hibát. Ha meg szeretné tudni, hogyan kell dolgozni vele, nézze meg ezeket a videókat:
Ha magabiztosnak érzi magát az elrendezésben, folytassa a JavaScript tanulásával. Először ismerje meg a nyelv lehetőségeit, majd térjen át a könyvtárak és keretrendszerek tanulására.
Azt tanácsolom, hogy kezdje el a nyelvtanulást David Flanagan - "" című könyvével. A könyv nagy, de ne ijedj meg. Nem szükséges teljesen elolvasni.
Videós tanfolyamokat is nézhetsz, YouTube-on sok van. Íme egy-két érdekesség:
Mi a következő lépés?
Ilya Kantornak van egy klassz Gulp-filmje
Szerettél gépelni? Most felgyorsíthatja munkáját. Tanuljon meg néhány stílus-előfeldolgozót: SASS , LESS vagy Stylus . Automatizálja a stílusok összeállítását és feldolgozását
Helló, a nevem Alexander Zelenin és webfejlesztő vagyok.
Sokszor hallottam azt a véleményt, hogy az elrendezés a kezdő frontenderek sokasága. Bár valójában ez minden (majdnem) webprojekt legfontosabb része. Ezt látják először a felhasználók. Jelenleg egy nagy projektben a kiváló minőségű elrendezés (különösen a blokktervezés) számos különféle készséget igényel.
Ebben a cikkben egy tervtervező fejlesztési sémát mutatok be
[nagy kattintás]
Természetesen ez nem egy átfogó és egyetlen igaz rendszer. Van egy egész hegy a kapcsolódó készségek, releváns technológiák és így tovább. Az osztályozás szubjektív.
Azonnal szeretném hozzátenni, hogy a cikkben nem lesz konkrét hivatkozás az oktatási anyagokra. Szívesen teszek megjegyzéseket.
Mit várunk?
Először is meg kell értenünk, mit várunk el egy személytől az egyes szinteken. Az Ön elvárásai eltérőek lehetnek.
Junior- ismeri a fő címkéket, tudja javítani a kész html oldalon lévő tartalmat, tudja, hogyan kell helyesen formázni a szöveget, gond nélkül beilleszt egy beágyazott elemet (videó YouTube-ról, Yandex térkép), csak saját magának dolgozik a verziókezelő rendszeren ( mester, 1 közreműködő). Lehet a semmiből kitalálni valami egyszerűt, és nem is fog menni (személyesen vele). Általánosságban elmondható, hogy ez nem független egység, és felülről történő útmutatást igényel.
Középső- többé-kevésbé autonóm egység (vagy teljesen autonóm kis és közepes projekteknél). Jól el tud helyezni egy közepes méretű webhelyet, és a böngészők minden jelenlegi verziójában helyesen jelenik meg. Megérti a sablonmotorok működését, és tudja használni őket (feltéve, hogy a kód többi része is rendelkezésre áll). Képes munkájuk tervezésére, dokumentálására, határidők becslésére. Megérti a kódstílus fenntartásának fontosságát. Megérti, miért léteznek grid rendszerek és css keretrendszerek. Képes minden szükséges információt átvenni a tervezőtől az elrendezésekből. Kapcsolatba léphet egy kis csapattal, ágakat hozhat létre és kéréseket vonhat le.
Idősebb- tud blokkrendszert tervezni egy nagy projekthez. Tudja, hogyan kerülje el az ismétlődéseket és a problémás területeket, amikor más fejlesztők használják a kódját. Képes összetett feladatok bontására és a feladatok helyes megfogalmazására. Képes legalább egy fejlesztési módszertan alkalmazására (például BEM). A lehető leggyorsabban megnyithatja a projektet. Jól megért több népszerű sablonozó motort. Képes assemblereket írni és automatizálni a hozzá kapcsolódó folyamatokat. Kódellenőrzéseket végezhet, és felügyelhet más elrendezéstervezőket.
Vizsgáljuk meg most egy kicsit konkrétabban, hogy az egyes szinteken az egyes blokkok mit tartalmaznak.
Junior
HTML- a főbb címkék, attribútumok ismerete. Elvileg megérteni, hogyan kell írni.
Tipográfia- szöveg formázási képesség. Szinte minden projekt alapja a szöveg. Szúrjon be nem törő szóközöket, ahol szükséges, félkövér, dőlt, rövidítés és így tovább. Használhat tipográfust vagy hasonló szolgáltatást, de képes legyen megérteni az eredményt.
Szemantika- annak megértése, hogy bizonyos feladatokhoz bizonyos címkék vannak. Legyen képes kiválasztani a megfelelő címkét.
Média- milyen típusú média ágyazható be az oldalba.
iframe- harmadik féltől származó widgetek beágyazása (videó, hang, térképek stb.).
Audio Videó- Elhalaszthatod a tanulást, mert. részben iframe-mel megoldva. Ismerje meg, milyen formátumokat tud lejátszani a böngésző, hogyan kell megtervezni a lejátszót stb.
Képek- milyen grafikai formátumokat és milyen formában észlel a böngésző. Egyes formátumok használatának előnyei és hátrányai.
Raszter- jpg, png, gif. Értse a formátumok közötti különbséget, és tudja alkalmazni, amit és ahol szükséges.
SVG- Elhalaszthatod a tanulást, mert. ritkábban használjuk, mint szeretnénk. Ismerje meg az előnyöket, hátrányokat, korlátokat stb.
Betűtípusok- elhalaszthatja a tanulást. Valójában ez egy meglehetősen összetett téma, és általában a kezdőknek javasolnám a rendszer betűtípusok használatát. Legyen képes betűtípusokat betölteni, optimalizálni a megjelenítést, minimalizálni a megjelenítési késést egyéni betűtípusokkal.
Táblázatos elrendezés- választható. Azoknak, akik a jövőben szeretnének minőségi e-mailes hírleveleket készíteni.
css 1- betűtípusok, színek, igazítás, méretek.
CSS 2.1- blokk viselkedés vezérlés, pozicionálás, teljes tervezés.
Kiválasztók- egyszerű választó címkék, osztályok, beágyazott elemek számára. Egyszerű pszeudo-választók, mint például a :hover.
névadás- hogyan nevezzük el az órákat, hogy ne legyen elviselhetetlenül fájdalmas.
Blokk elrendezés- bontsa a képet tudatos blokkokra, testesítse meg a blokkokat HTML-ben, díszítse CSS-sel.
Böngészők- elhalaszthatja a tanulást. Milyen böngészők léteznek, mi a különbség.
Fejlesztői eszközök- elhalaszthatja a tanulást. Használja a böngészőeszközöket a megjelenítési problémák elhárításához.
Szövegszerkesztők- Mik azok a szövegszerkesztők fejlesztőknek és miért. A SublimeText és a Notepad++ ismerős példák számomra. Legyen képes alapvető dolgokat beállítani bennük, például behúzásokat, sortöréseket stb.
Verzióvezérlő rendszerek- Én személy szerint nagyon fontosnak tartom, hogy ezeket legalább egyénileg, személyesen magamra tudjam használni. Tudja meg, miért és mik ezek a rendszerek.
git- általánosságban megérteni a legnépszerűbb verziókezelő rendszer feladatát és alapelveit.
Github / bitbucket- tudja használni a git egyik népszerű platformját.
checkout/commit/push/pull- alapvető műveletek személyes használatra.
Biztos helyre eltesz- a pillanatnyilag szükségtelen adatok ideiglenes mentésére.
10 mű- legalább 10 alkotás elkészítése különböző kivitelben. Lehet tesztelni, nem számít. Fontos, hogy a jelenlegi tudáson belül teljes legyen.
Középső
CSS 3- fokozatosság, árnyékok, simítás, szűrők, átalakítások.
Speciális választó- a megadott (+) jelet követő elemek, szám (nth-child), shadow-dom, előtte/utána és így tovább.
Animációk- választható. átmenet és animáció. Sima átmenetek, animációk. Ismerje meg a korlátokat és a hátrányokat.
Rácsok- miért léteznek, hogyan kell felépíteni, mik a kész megoldások. Példaként tekintheti meg a Flexbox rácsot vagy bármely más megtalálható rácsot.
Keretrendszerek (CSS) Miért van szükség rájuk és hogyan kell használni. Célszerű legalább egy kút használatát megtanulni. Nagyon hasznos prototípuskészítéshez. Tervezési költségvetés hiányában (nem egyedi, de használható) jelentősen javítja a projekt minőségét.
CSS előfeldolgozók- elhalaszthatja a tanulást. Munkaoptimalizálás, szebb és olvashatóbb kód. Változók, mixinek stb. Dolgozzon egy vagy több népszerű előfeldolgozóval, például SASS, LESS, Stylus.
Médialekérdezések- elhalaszthatja a tanulást. Jelenítse meg a kívánt stílusokat a körülményektől függően (eszköz, képernyő mérete, pixelsűrűség, nyomtatási verzió stb.).
Kód stílus- megérteni, mire valók a stíluskonvenciók, tanulmányozni és elkezdeni alkalmazni (ajánlom az AirBNB-től).
SZÁRAZ/CSÓK/SZILÁRD- elhalaszthatja a tanulást. Ismerje meg azokat a fontos fejlesztési elveket, amelyek jelentősen leegyszerűsítik a projekt további karbantartását.
OOCSS- választható. Ismerje meg, mi az objektumorientált css, és mire való. Ilyen vagy olyan formában sok projektben használják (bár anélkül, hogy megértenék, mi az). Ideális esetben tanulj meg tervezni. Nagy projektekhez jó lehet.
Dokumentáció- megérteni, mit és hogyan kell dokumentálni. Dokumentum. Elhalaszthatja, de a jövőben mindenképpen tanulmányozza a leárazási jelölést.
Tervezés- megtanulni képen becsülni a kifejezéseket és meghatározni a művek sorrendjét.
Bomlás- elhalaszthatja a tanulást. Ismerje meg, hogyan lehet egy feladatot részfeladatokra bontani. Nehezebb, mint amilyennek látszik :-)
Célokat kitüzni- elhalaszthatja a tanulást. Tanulja meg világosan leírni a feladatokat szövegben, hogy a többi fejlesztő, beleértve az alacsonyabb végzettségűeket is, világosan megértse, mit kell tenniük a végrehajtásukhoz.
Flexbox- a modell megértése, a teljes körű alkalmazás képessége.
Betűk elrendezése- választható. Általában a készség nem felesleges. Ismerje meg a levelezőrendszerek jellemzőit, őrizze meg a jó megjelenést, és ne essen spambe (ha nem spam).
polifilek- találja ki, hogyan használhatja a legújabb fejlesztési funkciókat a visszamenőleges kompatibilitás megőrzése mellett. Ismerje meg ennek a megközelítésnek az előnyeit és hátrányait.
Platformok közötti elrendezés- megérteni, mit kell tenni ahhoz, hogy a projekt jól nézzen ki ne csak Windows, Linux és Mac alatt, hanem SmartTV vagy PS alatt is.
Böngészőkön átívelő elrendezés- megérteni a különbséget a böngészők megjelenítésében, és ugyanazt kell megjeleníteni. Ebben nagy segítség a CanIUse weboldala.
Mobil elrendezés- elhalaszthatja a tanulást. Ismerje meg a mobil platformok korlátait. Használja bölcsen a korlátozott helyet.
Optimalizálás- elhalaszthatja a tanulást. Értse meg bizonyos technikák "árát". Értsd meg, milyen fázisokból áll a webhely megjelenítése a felhasználó számára. - elhalaszthatja a tanulást. Mérethez, gyorsítótárhoz, tömörítéshez, erőforrás-készletezéshez stb. kapcsolatos optimalizálás.
Rendering- elhalaszthatja a tanulást. Betöltés utáni renderelési sebességgel kapcsolatos optimalizálás.
SEO- elhalaszthatja a tanulást. Legalább egy alapvető ismerete a keresőmotorok működéséről. Az a képesség, hogy "segítsen" a keresőmotornak kitalálni, hol keressen és mi a fontos.
Sablon motorok- megérteni, hogyan használhatja újra a kódot, csoportosíthatja az elemeket és állíthat össze oldalakat. Nagyon kívánatos mind a szerveroldali, mind a kliensoldali renderelés megtanulása. Ide tartoznak a "tiszta" nyelvű sablonok is (például egyszerű PHP beillesztések). A sablonmotor „előtte” (adatfolyama) munkája nem érdekel bennünket.
PHP- elhalaszthatja a tanulást. Értse az alapvető szintaxist, és tudjon kisebb szerkesztéseket végezni az oldaltervezéssel kapcsolatban.
CMS- elhalaszthatja a tanulást. Tudja meg, milyen CMS-ek léteznek, és miért hozták létre őket. Tanulj meg legalább egy sablont írni (a Wordpress-t javaslom).
javascript- elhalaszthatja a tanulást. Tanulja meg az alapvető szintaxist, értse meg, hogyan kell lekapcsolni a legegyszerűbb kezelőket, és hogyan végezzen egyszerű munkát a DOM-mal.
jQuery- elhalaszthatja a tanulást. Tanulja meg, hogyan takaríthat meg sok időt a meglehetősen tipikus feladatok megoldására a legnépszerűbb js-könyvtár beépülő moduljaival (természetesen a vanilla.js után).
NodeJS- elhalaszthatja a tanulást. Ismerje meg, hogyan kell egy egyszerű szervert futtatni, statikus elemeket terjeszteni és a szerver oldalon megjeleníteni. Használhat Expresszt vagy bármilyen más keretrendszert.
Szerelés- választható. Tanulja meg, hogyan állíthat össze egy projektet egy csomó CSS/HTML fájlból a szükségessé. Azt javaslom, hogy "különböző" táborok képviselőiként ismerkedjen meg legalább a morgással és nyeléssel.
IDE- választható. Ismerje meg, miért van szükség IDE-re, és hogyan kell használni őket. Váltson valamilyen IDE használatára, hogy időt takarítson meg. Fontos: az IDE elsajátítása összemérhető egy teljes értékű programozási nyelv elsajátításával, és nem biztos, hogy indokolt a sok idő ráfordítása. Én személy szerint szövegszerkesztőket használok (és csak nagyon nagy projekteknél kapcsolom be az IDE-t).
elágazó- Tanuld meg kezelni az ágakat gitben.
Összeolvad- megtanulják, hogyan kell összevonni az ágakat a konfliktuskezeléssel.
lehívás/újrabázis- megérteni, miért használják őket, mikor kell használni őket, és szükség szerint kezdje el használni őket.
Grafikus szerkesztő- megérteni, mik vannak, mire. Miben különböznek a vektorok a rasztertől? Fontos megérteni a szerkesztőt legalább azon a szinten, hogy "elolvassa" az elrendezést a tervezőtől. Válassza ki a megfelelő betűtípust, méretet, színt stb. Nem a szemnek, de biztosan. Azt javaslom, hogy legalább 1 raszterrel (Photoshop) és 1 vektorral (Figma) dolgozzon.
50 mű- a szakasz végére körülbelül 50 különböző alkotás áll rendelkezésére, amelyek bemutatják a vizsgált területek készségeit.
Idősebb
Bár ez a csoport kicsinek tűnik az ábrán, valójában ez a legnagyobb. Mert ezen a ponton át kell tanulmányozni mindent, amit elhalasztottak.
Adaptív / Reszponzív elrendezés- megérteni a legmagasabb szintet és egyesíteni az összes eddig megszerzett tudást. A projektnek mindenhol és mindenen jól kell kinéznie (észszerű keretek között).
Fokozatos leromlás / Progresszív javulás- megérteni, mi ez és miért. Használat.
Gitflow- el tudja magyarázni a többi fejlesztőnek, hogyan kell ágakat létrehozni, hol kell összevonni, hogyan lehet kódellenőrzést lefolytatni (természetesen elrendezés, nem kód).
BEM- választható. Ismerje meg azt a módszertant, amely lehetővé teszi korlátlan számú nagy projekt létrehozását úgy, hogy minimális szinkronizálás mellett a különböző csapatok egymás blokkjait használhatják. Vannak más módszerek is, amelyek nem a legrosszabb eredményt adják. Ekkorra már így vagy úgy tudni fog róluk, és ha akarja, tanulmányozni is tudja őket.
100 mű- összesen száz alkotása van, amely bemutatja a különféle elsajátított készségeket. Valójában minden feltételhez kötött. Lehetséges, hogy egy (különböző részekből álló) munka legyen a portfólióban, amelyből már látszik, hogy nem félsz semmitől.
Következtetés
Valójában sok ilyen téma kicsi. Azonban nagyon nehéz egy csomó különböző tényezőt szem előtt tartani. 15 éven keresztül kevesebb mint tíz elrendezéstervezővel (és általában programozókkal) beszélgettem, akiket Senior kategóriába sorolnék (sokkal több volt az elrendezéstervező, jó programozó).
Offhand – teljesen el lehet tölteni egy évet (és többet is, ha az alkatrésztervezésbe kezd), hogy teljes mértékben tanulmányozza és gyakorolja az elrendezést a semmiből.
Remélem, hogy aki az út elején áll, annak a séma megmondja, hogy hova tud még költözni, és nem kell azonnal (vagy egyáltalán nem lehet belemenni) belefutni a programozásba.
Tervezek egy teljes értékű ingyenes kurzus létrehozását is, amely a diagramon szereplő téglalap témák mindegyikének részletes vizsgálatát tartalmazza. Szívesen ajánlok, visszajelzéseket, kívánságokat és így tovább.
A kurzus valószínűleg videoleckék formájában lesz teljes szöveges és grafikus sokszorosítással. Ha működik, a jövőben linkeket adok hozzá a megjegyzésekhez.
upd
Sok jelentés szerint nincs szükség kódolóra a keret ismerete nélkül. Ezt főleg nagy projektekben fejlesztők írják. És számukra ez teljesen igaz. De sokkal több stúdió van, amely nyitóoldalakat, különféle sablonokat készít a WordPresshez és más CMS-ekhez. Ez egy elég jó piac és egy lehetőség a keresetre. Jó néhány teljesen kis projekt van, jóval kisebb követelményekkel, amelyeket a tervező tökéletesen el tud végezni.
A HTML és CSS kurzusok fő célja a weboldal elrendezés és a weboldalkészítés alapjainak elsajátítása. Azok számára, akik az internetes technológiák terén kezdenek pályát, az elrendezési ismeretek jelentik a további fejlődés alapját.
- A HTML-elrendezéssel kapcsolatos kurzusok és képzések alapvetően kezdő tervezőknek és webtervezőknek szólnak. Ezek a szakemberek weboldalakat készítenek, és jelenleg nagy kereslet van rájuk a munkaerőpiacon.
- Az alapprogramokon kívül HTML 5 programozási és webalkalmazás-fejlesztési tanfolyamok is találhatók. Profi vagy már tapasztalt internetes programozók számára készültek.
Az órák formátuma nappali és távoli is. Leggyakrabban a képzés időtartama szabványos, és körülbelül 40 akadémiai óra, de vannak hosszabb programok is - 72 akadémiai óra.
Edzés után képes leszel
Általános szabály, hogy az elrendezés alaptanfolyamának, valamint a HTML és CSS alapjainak elsajátítása megtanítja:
- Weboldalak létrehozása.
- Egyszerű weboldalak készítése.
- Hozzon létre benyújtási űrlapokat.
- Funkcionális elrendezés (így később könnyű volt módosítani).
A HTML- és CSS-programozás továbbképzése összetettebb készségeket biztosít:
- Böngészőkön átívelő elrendezés és a W3C szabványok ismerete.
- Az oldalak használhatóságának és kényelmének alapjai.
- Fejlett CSS funkciók.
- Az elrendezés különféle megközelítései.
- Weboldalak készítése okostelefonokra és táblagépekre.
A piacon is találhat komolyabb képzést webes alkalmazások fejlesztésében HTML5-ben. Az ilyen képzési programok tapasztalt programozóknak szólnak, és ismereteket adnak az oldalbetöltési sebesség kezeléséről, az adattárolásról, a JavaScript-el (File API, Geolocation API) és még sok másról.
Kinek
Az alapprogramok mindenki számára készültek, aki webtechnológiákat szeretne elsajátítani és elsajátítani a modern webprogramozó vagy tervező szakmát. A haladó programok magabiztos elrendezést és webhelykészítési készségeket igényelnek.
Teljesítési igazolások
Valamennyi képzési központ saját nevében állítja ki a teljesítési igazolást. Egyes központok alkalmaznak.
- www.youtube.com/user/agragregra- egy nagyon érdekes csatorna, amely segít abban, hogy a semmiből hozzon létre különböző bonyolultságú webhelyeket;
- www.youtube.com/user/ArtSorax- sok hasznos anyag kezdőknek A hangsúly a CSS-en és a JS-en van;
- www.youtube.com/user/WebMagistersRu- Én személy szerint erről a csatornáról kezdtem az ismerkedést a webfejlesztő környezettel. Mindent közérthető és érthető nyelven mondanak el, úgymond az alapok alapja.
- www.youtube.com/user/loftblog- a LoftBlog csapata interjúkat készít kezdő és bejáratott informatikusokkal, fejlesztőkkel, valamint videós tréningeket tart;
- www.youtube.com/user/TheSWAT727- a videocsatorna információkat és oktatási anyagokat tartalmaz a webfejlesztésről általában, beleértve a front-endet, a back-endet, a szövegszerkesztő áttekintéseket és egyéb hasznos információkat a kezdő fejlesztők és tervezők számára.
Internetes források
- htmlbook.ru - egy szentély kezdőknek. Ez a forrás hatalmas mennyiségű információt tartalmaz elérhető és érthető formában + fórum. Itt tanácsolom, hogy kezdje el a HTML/CSS-szel való ismerkedést;
- webdesign-master.ru - informatív webhely a webdesign és az elrendezés mélyebb megismeréséhez;
- learning.javascript.ru - a webhely neve önmagáért beszél. Azt tanácsolom, hogy a HTML5/CSS3 alapjainak megismerése után kezdje el a tanulást.
Szolgáltatások
- A www.codecademy.com egy angol nyelvű szolgáltatás, ahol a gyakorlatban is próbára teheted tudásodat. Minden intuitív, nem szükséges az angol nyelv mély ismerete;
- htmlacademy.ru - Orosz nyelvű szolgáltatás, ahol a hangsúly a gyakorlaton + egy kis elméleten van. Nagyon érdekes forrás, tanfolyamok és feladatok;
- A jsfiddle.net úgymond egy "homokozó" a webfejlesztők számára. Itt, online, kódolhat, és azonnal láthatja az eredményt. A szolgáltatás segít a hibák jelzésében;
- validator.w3.org - itt ellenőrizheti a kód érvényességét, hogy kijavítsa a HTML-kód hibáit vagy hiányosságait;
- A jigsaw.w3.org/css-validator egy hasonló szolgáltatás a CSS-kód érvényesítésére.
Eredmény
Sok hasznos, helyes és szükséges információ található az interneten, de több haszontalan. Tanulj, gyakorolj, kódolj.
Érdekel a kérdés hogyan tanulja meg önállóan a webhely elrendezését? Kellő kitartással bárki megtanulhatja az oldalak elrendezését.
A mai bejegyzés témája: Hol kezdjem az elrendezés tanulását? Ez a kérdés korántsem tétlen, és mindenki a maga útját választja. Elmesélem, hogyan kezdtem el ezt a lenyűgöző világutat HTMLés CSS. Remélem, hogy néhányatoknak ez lesz, ha nem is vezércsillag, de legalább útmutatás a cél felé.
Szóval mi van weboldal elrendezése? Aki még nincs a tankban, figyeljen: az elrendezés ebben az esetben nem azt jelenti, hogy az Iskra újságban egy friss cikket kell beírni vezető betűkkel, hanem a Photoshopban megrajzolt oldalelrendezést közvetlenül működő oldallá alakítani.
Másképpen fogalmazva, az elrendezés kódolás, olyan adatok HTML-be írása, amelyeket minden önmagát tisztelő böngésző gyönyörű és érthető oldallá alakít.
Egy átlagos webhelylátogató számára ez a kód láthatatlan marad, a böngésző széles hátlapja mögött rejtve marad. Ez azonban egyáltalán nem jelenti azt, hogy akárhogy is lehet. A kód legyen szép, kényelmes és helyes!
Szóval hol kezdje a HTML tanulását? Az első dolog, ami eszedbe jut, az, hogy vegyél egy könyvet. És minél vastagabb, annál jobb. Talán valakinek ez hasznára válik.
De személy szerint az ilyen „téglákkal” kapcsolatos tapasztalatok után egyértelmű taszító reflexem alakult ki. Azon egyszerű oknál fogva, hogy az ott található információkat túlzottan közöljük.
Emlékszel az iskolára? Az átlagpolgárnak nem kell olyan mértékben ismernie a kémiát, a fizikát, az anatómiát stb., mint amennyit az agyába akar belevinni.
Így van ez itt is: egy vastag könyvben sok a fölösleges, és ha sok van belőle, elhomályosítja a szemet, ásít, és a tanulást 2-3 napos kínszenvedéssé változtatja, majd ezt a tudományt messzire dobja. a kemence. És ez az.
Szóval én személy szerint a másik irányba mentem. Megvettem a könyvet. Egyáltalán nem kövér. És még mindig nem fáradok bele, hogy diákjaimnak ajánlom, mert a könyv aktualitása még mindig friss és keresett. könyv szerzője Artemy Lomov, de úgy hívják "HTML, CSS, szkriptek: webhelyek létrehozásának gyakorlata". "BHV-Petersburg" kiadó.
Ebben a könyvben minden mértékkel van: van egy kis webtörténet, egy kicsit a szabványokról. De ami a legfontosabb, a HTML-ről, CSS-ről és JavaScriptről szóló alapanyag nagyon érthetően és egyszerűen van bemutatva. Egy kezdőnek, aki megtanulja a weboldal elrendezését – ez csak egy kötelező!
De egy könyv nem elég. Tanulmányozási módszerem korántsem új, ugyanakkor nagyon hatékony. Nem egy könyvre van szükségünk, hanem többre. A trükk itt az, hogy minden szerző egy kicsit másképp ír. Ha ugyanazt a témát különböző változatokban olvassa, az összkép sokkal gyorsabban válik világossá, és sokkal jobban emlékszik rá.
A második ilyen könyvem a Macromedia Dreamweaver programjának oktatóanyagának elektronikus változata volt, amelynek szerzője Vladimir Dronov.
Általánosságban elmondható, hogy kezdetben nagyon hasznos megszerezni ezt a programot. álmodozó egy vizuális szerkesztő, amely lehetővé teszi a webhely külső és belső oldalának megtekintését. Vagyis a külső megjelenítése a látogatók számára, és a belső - közvetlenül a kód.
A program nagy előnye, hogy megtekintheti (ismét kettős módban) a hálózaton lévő bármely webhelyet.
Például megtetszett egy webhely, ahol szép és kényelmes blokkok vannak elhelyezve, az egész oldalt elmentettem képekkel, majd elindítottam ezt az oldalt a Dreamben. És íme! Mindent láthat, hol és mit. Bár elsőre nem minden olyan nyilvánvaló, mint szeretnénk. Ez csak a könyv – csak egy nagyszerű segítő itt.
Természetesen már régóta nem használok vizuális szerkesztőt, de egy egyszerű szövegszerkesztővel, például a PSPaddal elboldogulok. De sok tapasztalat gyűlt össze. És ami a legfontosabb - sokoldalú. Miért illik a fejbe maga a téma könnyen és meglehetősen strukturáltan.
Egyébként a struktúra a legfontosabb tényező bármely nyelv tanulásában. És a HTML is egy nyelv. Erről a szerkezetről pedig legközelebb beszélek.
Addig is szerezzen be pár hasznos könyvet. És olvassa el a blogom webes tanácsait. Itt is sok hasznos tippet talál a webhely elrendezésével kapcsolatban. Kezdje el megtanulni a webhely elrendezését legalább a .
UPD 2012.10.25: Kezdőknek ajánlom ezt a cikket - Egy tördelőtervező útja. Ott minden sokkal részletesebb, linkekkel és egyéb hasznos dolgokkal.
