Mindig izgalmas, amikor először próbálsz meg tanulni egy új készséget. Különösen a kódolás.
Ha azonban nincs gyakorlat, a megtanultak nagy részét elfelejted. Ezért egy bizonyos ponton rájössz, hogy gyakorolnod kell, amit megtanultál. Különben mindent elfelejtesz.
Ez az a pont, ahol a projektek jönnek a képbe. A projektek jó módja annak, hogy gyakoroljuk a tanultakat. És hidd el, te is szeretnél néhány projekten dolgozni. A projektek segítségével bemutathatod, hogy min dolgoztál.
Újoncként a jelenlegi tudásszintednek megfelelő projektek kiválasztása ijesztő lehet. Lehet, hogy egy projektet választasz. Aztán a projekt túl nagy lesz ahhoz, hogy a jelenlegi tudásoddal elvégezd. Legalábbis én ezt éltem át ezen a tanulási úton.
Megválasztottam néhány olyan projektet, amelyeket akkor is megfelelőnek találtam, ha a tudásod csak a HTML-re és a CSS-re korlátozódik. Ezek a projektek elérhetőek a népszerű tanulási weboldalakon, ahol további információkat találsz arról, hogy mivel fogsz foglalkozni.
1. Tisztelgő oldal
Írd meg a tisztelgést valakiről, akit csodálsz, és tedd közzé weblapként. Ebben a projektben kép, linkek, listák és bekezdések hozzáadásával fogsz dolgozni. Ennek a projektnek az elkészítéséhez HTML-ismeretekre lesz szükség. Használhatsz azonban egy kis CSS-t is, hogy a projekt jobban nézzen ki.
2. Egy felmérési űrlap
A űrlapok hasznosak az online adatgyűjtésben. Ez a projekt főként az Ön képességeit fogja tesztelni mindenféle bemeneti adatokkal kapcsolatban. Ez tesztelni fogja az űrlapokkal és a weblap felépítésével kapcsolatos ismereteidet. Az űrlapnak nem kell adatokat küldenie.
Az űrlap a törzslapból építkezik. Ennek a projektnek az elkészítéséhez html/html5 ismeretekre lesz szükség.
3. Termék landing page készítése
Ez teszteli a HTML és CSS ismereteket. Gyakorolni kell majd az oszlopok létrehozását és az elemeknek az oszlopokon belüli igazítását. Alapvető képszerkesztési feladatokat is el kell végeznie, pl. képkivágást és méretváltoztatást, hogy tökéletes képeket készíthessen a weboldalához.
A HTML/CSS alapos ismeretére lesz szüksége.
4. Műszaki dokumentációs oldal készítése
Ez igényel némi HTML CSS és bootstrap vagy JavaScript ismeretet. Az alapötlet a következő: amikor a bal oldalon bármelyik témára kattintasz, akkor az a tartalom betöltődik a jobb oldalon.
Jelenleg próbálkozom ezzel a projekttel, és amint elkészül, közzéteszem a végleges projektet.
5. Személyes portfólió weboldal készítése
A HTML és CSS terén tanult összes készséget gyakorolni fogod. Tudnia kell majd azt is, hogyan kell képeket vágni és átméretezni. Ha nincsenek lehetőségeid, használd a Gimp-et. Ingyenes, nyílt forráskódú és elérhető Windowsra és Linuxra .
Ha sietsz portfóliót készíteni, olvasd el Brian cikkét az online portfólió készítéséről egy kész téma/sablon használatával.
6. Google.com oldal
Igen, sokszor láttad már. De meg tudod replikázni. Az egyszerű google.com oldal ikonokkal, a google logójával, egy szövegdobozzal és két gombbal. Elkészítheted a google.com oldal hasonmását. Ebben a projektben úgy néz ki, mint a google.com, nem úgy működik, mint a google.com.
Mind a HTML-t, mind a CSS-t ismerned kell.
7. google.com Keresési eredmény oldal
Egy google keresési eredmény oldal formátumú oldalt fogsz létrehozni. Az oldaladnak a szokásos 10 találatot és a következő oldalakra való navigációt kell tartalmaznia az alján.
Ez egy továbbfejlesztés a fenti google.com alapoldalhoz képest. Azonban képesnek kell lennie arra, hogy újra felhasználja a kód egy részét ebben a projektben.
Az oldalnak valamennyire úgy kell kinéznie, de a funkcionalitás most nem jelenthet gondot.
Következtetés
Ha meg szeretné tanulni a HTML alapjait, megnézheti a HTML rövid bevezető leckémet.
Elkészített egy alapprojektet, miközben HTML-t és CSS-t tanult? Ha igen, oszd meg az alábbiakban, és segíts más tanulóknak, hogy “egyszerű”, de kihívást jelentő ötleteket találjanak, amelyeket kipróbálhatnak.