Első lépések a webfejlesztés világában¶
HTML¶
Mivel a HTML valójában nem egy programozási nyelv, hanem egy leíró nyelv, így először érdemes megnézni, hogy milyen alapvető alkotóelemekből is épül fel minden egyes weboldal, amivel találkozunk. Ezt a tanulási és ismerkedési folyamatot a w3schools weboldala nagyon szépen viszi végig, rengeteg példával kiegészítve. Ezeket az online editorukban egyből ki is lehet próbálni, a példáikat célszerű kedvedre szerkesztgetni.
https://w3schools.com/html/default.asp
CSS¶
Ha ezt legyűrted, akkor már készen is állsz arra, hogy egy ilyen szuper és abszolút legit weboldalt összedobjatok. Ezután jöhet a weboldal cicomázása. Ezt CSS (Cascading Style Sheets) segítségével tudod megtenni. Ezen megint csak a w3schools oldala visz végig a css tutoriáljuk keretében.
https://w3schools.com/css/default.asp
Javascript¶
Ezekkel még csak egy statikus oldalnál járunk. Interakció hozzáadásához a Javascript-en keresztül vezet az út. Ezt a nyelvet már csak azért is érdemes megtanulni, mert manapság mindenre IS használják (amiről egyébként mindenki eldöntheti, hogy mit gondol…). Ha eddig tetszett a w3schools weboldala, akkor a javascripten is végig vezetnek.
https://w3schools.com/js/default.asp
Következő lépések¶
Ha ezeket végig csináltátok, természetesen már csak végtelen türelem és tanulás kell a webfejlesztéshez. Rengeteg példát lehet célzott kereséssel és “stack overflowozással” találni. Az egyik legfontosabb webfejlesztői kvalitás, hogy ne félj, és tudj keresni. Ha inspirálódni szeretnél, a jsfiddle és a codepen rengeteg szuper projektet tartalmaz.
Minden webfejlesztő egyik legjobb barátja az F12, “fejlesztői eszközök” része a böngészőnek, itt tudod megnézni bármilyen oldal kódját, és garázdálkodni bármelyik részében.
Ezen a ponton érdemes lehet elkezdeni egy saját projektet. Ne vállalj be egy megvalósíthatatlan, hatalmas dolgot. Érdemes olyan projektet elkezdeni, amivel szívesen foglalkozol.
Egy pár ötlet
- Egy oldalas, reszponzív weboldal. Ez lehet egy tetszőleges személy/cég bemutatkozó oldala, egy Wikipédia-szócikk, vagy akár a kedvenc Pokémonjaid listája.
- Landing page.
- Kvíz játék.
- To-do lista.
- Javascriptes rajzoló program.
- Visszaszámláló/stopper
- Egy óra (engedd szabadjára a fantáziád!)
- A prog1-es nagyházi lista is szuper ötleteket adhat.
- ... és tényleg bármi más, ami az érdeklődési körödbe vág, engedd szabadjára a fantáziádat
A legfontosabb, hogy ne add fel! Ha bármiben elakadnál, inspirációra vagy segítségre van szükséged, nyugodtan keress meg valaki a webfejlesztő divízióból, és pikk-pakk segítségre fogsz találni.
Az editor kérdése¶
Alapvetően mindenkinek azt célszerű használnia, ami kényelmes neki. Alapvető HTML/CSS/JS webfejlesztéshez nincs is szükséged többre, mint a Notepad++. Egyébként a Visual Studio Code egy hihetetlenül szuper alkalmazás webfejlesztéshez. Ingyenes és nyílt forráskódú.
A JetBrains termékeihez is igényelhető student licence, amivel többek között a WebStorm-ot vagy PhpStorm-ot ingyenesen használhatjátok.
GitHub student pack¶
És ha már ingyenesen igényelhető dolgoknál tartunk, semmiképpen se hagyd ki a GitHub student pack-jét. Ez csomó (általában egyébként fizetős) dolgot ingyen elérhetővé tesz diákok számára. Ha már csak végigkattintgatsz rajtuk, rengeteg mindent tanulhatsz arról, hogy egyáltalán mik léteznek a világban.