Kihagyás

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.

Back to top