A kódolás megtanulása mindig izgalmas és szórakoztató mindenki számára, és amikor a programozás világába lépünk, a legtöbb ember a legegyszerűbb dologgal, a HTML és a CSS segítségével kezd. Minden kezdő kódolási útja a frontendben ezzel a két alapvető építőelemmel kezdődik, és kreatívnak kell lennie, amikor egy gyönyörű alkalmazás megtervezéséről van szó.
A kezdők kezdetben élvezik a gombok készítését, a linkek hozzáadását, a képek hozzáadását, az elrendezéssel való munkát és egy csomó menő dolgot a webtervezésben, de amikor egy projektet kell készíteniük csak HTML és CSS használatával, elakadnak és összezavarodnak, hogy mit kellene csinálniuk, hogy gyakorolják mindezeket a dolgokat. Végül is a tudásuk csak a HTML-re és a CSS-re korlátozódik. Nem számít, hogy miután mindent megtanultál, egy bizonyos ponton rájössz, hogy egy projekt elkészítése fontos a HTML és CSS készségek gyakorlásához. Ellenőriznie kell, hogyan működik együtt a HTML és a CSS egy gyönyörű frontend alkalmazás megtervezéséhez. A kérdés tehát az, hogy milyen kezdőbarát projekteket készíthetsz, hogy gyakorolj mindent, amit tanultál… Beszéljük meg ezt.
A Tribute Page
A legegyszerűbb weboldal, amit kezdőként készíthetsz, egy tribute page valakinek, akit csodálsz az életedben. Ehhez csak alapvető HTML- és CSS-ismeretekre van szükség. Készíts egy weboldalt, amely ír az adott személyről, hozzáadva a képét. A weboldal tetején add hozzá a személy képét és nevét, alatta pedig adj elrendezést a többi részletnek. Használhatsz bekezdéseket, listákat, linkeket, képeket CSS-szel, hogy tisztességes megjelenést adj neki. Adjon hozzá megfelelő háttérszínt és betűstílust a weboldalához. A legtöbb részt HTML segítségével készítheti el, de ahhoz, hogy jobb megjelenést biztosítson egy kis CSS segítségével. Vegyen segítséget az alábbi linkről.
- My Tribute Page
- Tribute Page to Steve Jobs
- Tribute Page to Albert Einstein
Webpage Including Form
A nyomtatványok mindig lényeges részét képezik minden projektnek, és a legtöbb alkalmazásban sok nyomtatvánnyal fog dolgozni, ezért miért ne gyakorolná korábban és tesztelje tudását. Miután megismerkedett a HTML-ben a beviteli mezővel vagy az alapvető címkékkel egy űrlap létrehozásához, készítsen egy projektet az összes ilyen címke használatával. Hogyan használjon szövegmezőt, jelölőnégyzetet, rádiógombot, dátumot és más fontos elemeket egyetlen űrlapon. Megtanulja, hogyan adjon megfelelő struktúrát egy weboldalnak, miközben űrlapot hoz létre. A HTML/HTML5 ismerete elég jó, de használhatsz egy kis CSS-t is, hogy a projekt jobban nézzen ki. Vegye igénybe az alábbi linkek segítségét.
- Felmérési űrlap
- Good Vibes Form
- Felmérési űrlap
Parallax weboldal
A parallax weboldal fix képeket tartalmaz a háttérben, amelyeket a helyén tarthat, és az oldalon lefelé görgetve a kép különböző részeit láthatja. A HTML és a CSS alapvető ismereteivel parallaxis hatást adhat egy weboldalnak. A parallax effektus használata a webtervezésben nagyon népszerű, és gyönyörű megjelenést kölcsönöz a weboldalnak. Próbálja ki, és ossza az egész oldalt három-négy különböző részre. Állítson be 3-4 háttérképet, igazítsa a szöveget a különböző szakaszokhoz, állítsa be a margót és a kitöltést, adjon hozzá background-position-t és egyéb CSS elemeket és tulajdonságokat a parallax effektus létrehozásához. Segítséget kaphat a Parallax Website-tól.
Landing Page
A landing page egy másik jó projekt, amelyet HTML és CSS segítségével készíthet, de ehhez szükség van e két építőelem alapos ismeretére. Sok kreativitást fogsz használni egy landing page készítése során. Gyakorolni fogod, hogyan adj hozzá láblécet és fejlécet, hozz létre oszlopokat, igazítsd ki az elemeket, oszd fel a szakaszokat és még sok mindent. Óvatosan kell majd használnod a CSS-t, szem előtt tartva, hogy a különböző elemek ne fedjék egymást. Gondoskodni fogsz a színkombinációkról, a kitöltésről, a margóról, a szakaszok, a bekezdések és a dobozok közötti távolságról is. A színkombinációknak jól kell illeszkedniük egymáshoz a különböző szakaszok vagy hátterek esetében. Segítséget kaphatsz az alábbi linken.
- Teljes képernyős landing
- Landing Page
Restaurant Website
Mutasd meg, hogy milyen szilárd HTML és CSS ismereteid vannak egy étterem gyönyörű weboldalának létrehozásában. Egy étteremhez való elrendezés elkészítése kicsit bonyolultabb lesz, mint az előző projektpéldák. A különböző ételeket és italokat egy CSS elrendezési rács segítségével fogod igazítani. Árakat és képeket fogsz hozzáadni, és a színek, betűtípusok és képek megfelelő kombinációjával gyönyörű megjelenést kell biztosítanod. Hozzáadhat képgalériát a különböző ételekhez, a jobb megjelenés érdekében csúszó képeket is hozzáadhat. Adjon hozzá linkeket a belső oldalakra való átirányításhoz. Tegye reszponzívvá a nézetablak beállításával, médiakérdések és rács segítségével. Segítséget kaphat az Étterem weboldalától.
Egy esemény vagy konferencia weboldala
Egy eseményt vagy konferenciát tartó statikus oldalt készíthet. A konferencián részt venni kívánó emberek számára hozzon létre egy regisztrációs gombot. Említse meg az előadó, a helyszín és az ütemterv különböző linkjeit a fejléc rész tetején. Írja le a konferencia célját, illetve azt a kategóriát, akik hasznát vehetik a konferenciának. Adjon hozzá bemutatkozást és képeket az előadóról, a helyszín részleteit és a konferencia fő célját a weboldalán. Ossza az oldalt szakaszokra, adjon hozzá fejlécet és láblécet, amely bemutatja a menüt. Használjon megfelelő háttérszínt, amely jól illeszkedik egymáshoz a különböző szakaszokhoz. Válasszon tisztességes betűtípust és betűszínt, amely illik a weboldal témájához. Ehhez HTML/HTML5 és CSS ismeretek alapos ismerete szükséges. Segítséget vehet a Stíluskonferencián.
Zeneáruház oldal
Ha Ön a zene szerelmese, akkor készíthet egy weboldalt hozzá. Ehhez HTML5/CSS3 ismeretekre van szükség. Adj hozzá egy megfelelő háttérképet, ami leírja a célt, vagy hogy miről szól az oldal. A fejléc részben adj hozzá különböző menüket. Adjon hozzá gombokat, linkeket, képeket és némi leírást a rendelkezésre álló dalgyűjteményről. Az alján említse meg a vásárlásra, üzletre, karrierre vagy elérhetőségre mutató linkeket. A weboldalakon egyéb funkciókat is hozzáadhat, mint például a kipróbálási lehetőség, ajándékkártyák vagy előfizetés. Tegye reszponzívvá a viewport beállításával vagy médiakérdések és rács segítségével. Segítséget vehet a myTunes-tól.
Fotóoldal
Ha alapos HTML5 és CSS3 ismeretekkel rendelkezik, készíthet egy egyoldalas reszponzív fotóoldalt. Használjon flexboxot és media queries-t a reszponzivitás érdekében. Adja hozzá a cég nevét egy (fotózással kapcsolatos) képpel a tetején (landing page). Alatta mutassa be munkáját több kép hozzáadásával. Alul (lábléc) említse meg a fotós elérhetőségét. Adjon hozzá egy gombot a munkája megtekintéséhez. Ez a gomb közvetlenül a képek szekcióba vezet. Gondoskodnia kell a margóról, a kitöltésről, a színkombinációról, a betűméretről, a betűstílusról, a képméretről és a gomb stílusáról. Ehhez segítséget kaphat az Acme Photography-tól.
Személyes portfólió
A HTML5 és CSS3 ismeretében Ön is elkészítheti portfólióját. Mutasd be munkamintáidat és képességeidet portfóliódban a neveddel és képeiddel. Önéletrajzát is hozzáadhatja ott, és teljes portfólióját a GitHub-fiókjában is elhelyezheti. A fejléc részben említsen meg néhány menüpontot, mint például a körülbelül, a kapcsolat, a munka vagy a szolgáltatások. A tetején adjon hozzá egy képet a képei közül, és mutatkozzon be ott. Alatta adjon hozzá néhány munkamintát, és végül (lábléc) adjon hozzá elérhetőségi adatokat vagy közösségi média fiókot. Segítséget vehet a Személyes portfólióból.
Technikai dokumentáció
Ha egy kicsit ismeri a Javascriptet, akkor létrehozhat egy weboldal technikai dokumentációt. Ehhez HTML, CSS és alapvető javascript ismeretekre van szükség. Az egész weblapot ossza két részre. A bal oldalon hozzon létre egy menüt, amelyben az összes téma fentről lefelé haladva van felsorolva. A jobb oldalon meg kell említenie a témák dokumentációját vagy leírását. Az ötlet az, hogy ha egyszer rákattint a bal oldali rész egyik témájára, akkor a jobb oldali tartalmat kell betöltenie. A kattintáshoz használhat javascript vagy CSS könyvjelző opciót. Nem kell túlságosan díszesnek lennie, csak adjon neki egy egyszerű és tisztességes megjelenést, amely jól néz ki a műszaki dokumentációhoz. Segítséget kaphat a Technical Documentation.
Helpful Link: 10 tipp a hatékony webdesignhoz 2019-ben
