Project HTML és CSS, codenamecrud - ingyenes webfejlesztő képzés
Erre a mini-projektet szétszedni egy meglévő internetes oldalt, és újra meg újra. Ne aggódjon, ha a link nem vezet sehova, és megkeresi formában nem fog működni, ha elküldi. A cél az, hogy elkezd gondolkodni, hogy hogyan az elemeket elhelyezni az oldalon, mivel azok egy vonalban és stílusú. Lehet, hogy néhány próbál létrehozni valamit HTML először (izgalmas, nem?).
A következő fejlesztőeszközök a böngésző (jobb gombbal bárhol az oldalon, és kattintson az elem „elem, hogy vizsgálja meg”), ezek lesznek a legjobb barátok. Hozzon létre egy oldalt egy szöveges fájlt a kiterjesztés .html, és nyissa meg a böngészőben, hogy hogyan is néz ki (vagy próbálja CodePen vagy jsfiddle.net).
Próbálja ki, mielőtt elkezdi
Ezek a képességek hasznosak lesznek, amikor elkezdi írásban kódot. Akkor próbáld ki őket, vagy legalább arról, hogy tudja, hogyan kell csinálni:
- Két módon lehet mozgatni a div az oldalon
- Div rögzíteni az alsó vagy a felső oldal
- Határozzuk meg a színét egy meglévő oldal
- Vegye ki a kép URL-jét, hogy egy meglévő oldal
- Igazítsa elem a központban (vízszintesen)
- Három olyan módszereket, amelyek akkor is CSS-stílusokat az oldalon
- Megértése, hogyan kell használni az osztályok és id rendelni CSS-stílusok Az egyes elemek egy oldalon
- Egy nagyon egyszerű formában (akkor is, ha ez nem vezet sehova)
Beállítás-GitHub repository a projekt (nem kötelező)
Ezek az utasítások azonosak az egyes projektek által végrehajtott minket. ezek az első, hogy furcsának tűnik (különösen, ha nem tud semmit a Git fogjuk pótolni ezt a hiányosságot később), de ne aggódj - Ön ismeri őket, mert elvégezte a fenti műveleteket sokszor. Ha van valami baj - ne izgulj, és ne aggódj, lehet halasztani egy ideig. Kód írása most sokkal fontosabb, mint a Git!
Készíts egy commit (mentése) a frissített README a repository GitHub, a következő parancsokkal:
Ha a munka egy projekt, akkor valószínű, hogy végezze el többször git add + git commit parancs. amíg nem áll készen, hogy küldje el a változtatásokat a GitHub git push-parancsot.
Látnia kell a módosításokat a README GitHubról oldal után oldal frissítése.
Ha még mindig nem érzik magukat a Git a parancssorból, akkor csak kattintson a „Szerkesztés” gombra a webes felületen GitHub és szerkesztheti a fájlt közvetlenül a helyszínen. Ezzel a témával a második része a fentebb említett cikk arról, hogyan készíts egy tárat
Megjegyzés: Minden Git parancsokat kell végrehajtani belül a projekt könyvtárba (az egyetlen, ahol belépett a git init), különben kapsz egy hiba a választ!
Oké, most elég Git velünk - itt az ideje, hogy írjon kódot!
Light version: hozzon létre egy honlap Google.com
(Egyszerű, csak egy mezőt a kereséshez).
Bent a könyvtárban a projekt, hozzon létre egy index.html fájlt
- tipp:
- Ne légy maximalista! Te csak arra törekedjünk, hogy úgy nézzen ki, mint a google.com, és nem teljesen fel kell dolgozni, mint a kereső, valamint az oldal nem úgy néz ki, mint egy teljes másolatát, pixelenként. Bármilyen legördülő menüből, vagy elküld egy űrlapot, vagy fények hover figyelmen kívül kell hagyni.
- A GOOGLE! Ön valószínűleg találkozni minden akadályt, hogy megértsék a saját, ami nem. Amit csinálnak ebben az esetben a fejlesztők. google a problémát!
- Ha tele van irritáció, megpróbál egy gombot, vagy beviteli mező nézni a kívánt módon (például, hogy egyszerűen nem változtatnak megjelenés), meg a css-tulajdonság -webkit-megjelenés: none; vagy -moz-megjelenést. Ha a Firefox.
Kezdeni, egyszerűen helyezze az alapvető elemei az oldal (a logó kép, és a keresési forma), majd helyezze őket a helyére vízszintesen. Tudod letölt a Google logó, vagy közvetlenül használja a hivatkozást, hogy a címke .
Ezután hogy egy navigációs sáv az oldal tetején, először adja meg a tartalmat, majd próbálja meg azt elhelyezni. Lásd, hogyan lehet létrehozni egy vízszintes sáv segítségével CSS. Ha bármilyen probléma vele.
Végül, hozzon létre egy lábjegyzet, amely nagyon hasonlít a felső navigációs sáv.
Küldje el a projekt GitHub, a fenti utasításokat követve!
Kifinomultabb változata (opcionális): Hozzon létre egy találati oldalon Google.com
további források
Ez a szakasz tartalmaz linkeket további anyagokat. Ezek nem kötelező, ezért tartják őket valami hasznos, ha azt szeretné, hogy mélyebben a téma
Ha még mindig úgy érzi, hogy a bizalom hiánya, hogy megértsék a HTML és CSS, minden rendben! Bár akkor nem kell egy szakértő ebben az egészben. Ezek a források segít, ha azt szeretnénk, hogy erősítse svezhepriobretennoy ismeretek és megértésének elősegítése know: