Webfejlesztés áttekintés
Front-end fejlesztéshez használt technológiák:
HTML (HyperText Markup Language): Az alapvető nyelv a weboldalak szerkezetének létrehozásához. CSS (Cascading Style Sheets): A weboldalak megjelenésének stílusozására szolgál. JavaScript / EcmaScript: Dinamikus, interaktív funkciók hozzáadása a weboldalakhoz. Frameworks (pl. React, Angular, Vue.js): JavaScript alapú keretrendszerek, melyek megkönnyítik a dinamikus felhasználói felületek létrehozását. Responsive web design: A weboldalak adaptálása különböző eszközökre (például mobil, tablet). SVG (Scalable Vector Graphics): Vektorgrafikák megjelenítésére HTML-ben. XML (Extensible Markup Language): Adatok struktúrázására; manapság inkább JSON-t használnak front-end oldalon. Git & GitHub: Verziókövetés és közös kódkezelés mind front-end, mind back-end fejlesztők számára. Testing and debugging: A hibakeresés és a funkciók tesztelése a weboldalak és alkalmazások stabilitása érdekében. Basic UI/UX: Felhasználói felület és élmény alapfogalmak, melyek a felhasználóbarát megjelenés és működés kialakítását támogatják.
Back-end fejlesztéshez használt technológiák:
PHP: Szerveroldali programozási nyelv, amely gyakran használatos a webes alkalmazások hátterében. ASP.NET: Microsoft keretrendszer dinamikus webalkalmazások fejlesztéséhez. Komplex szerveroldali logikára van szükséged, például adatbázisokkal való mély integrációra vagy API-k készítésére. Python: Sokoldalú nyelv, amelyet webalkalmazások (pl. Django, Flask) hátterében használnak. Java: Szerveroldali nyelv nagyobb méretű alkalmazásokhoz, például vállalati megoldásokhoz. Ruby: Back-end nyelv, különösen népszerű a Ruby on Rails keretrendszerrel. SQL: Adatbázis-lekérdezésekhez használják, a back-end rendszerhez kapcsolódó adatok kezelésére. Node.js / NPM: JavaScript futtatása szerveroldalon (back-end). Express.js: Minimalista back-end keretrendszer a Node.js-hez. MongoDB: Dokumentumorientált adatbázis, amely jól működik együtt a Node.js és más modern alkalmazásokkal. API integration: Külső szolgáltatások és rendszerek integrálása webes alkalmazásokba API-k segítségével. Command line: Alapszintű parancssori ismeretek, melyek elengedhetetlenek a fejlesztési környezet kezeléséhez és a deploy folyamatokhoz. Security practices: Alapvető biztonsági gyakorlatok a webalkalmazások biztonságának megőrzéséhez.
Átfogó technológiák:
Git & GitHub: Verziókövető rendszerek, melyekkel a fejlesztők követhetik a kód változásait és közösen dolgozhatnak projekteken. HTTP: A webes kommunikáció alapvető protokollja, amelyet mind front-end, mind back-end fejlesztés során használnak.
Összefoglalva:
Front-end fejlesztő: HTML, CSS, JavaScript, front-end keretrendszerek (pl. React, Angular, Vue.js), responsive design, SVG, XML, alapvető UI/UX ismeretek Back-end fejlesztő: PHP, ASP.NET, Python, Java, Ruby, SQL, Node.js, Express.js, MongoDB, API integráció, security practice Mindkettő (vagy full-stack): Git & GitHub, HTTP, Node.js, parancssori alapok, hibakeresés és tesztelés Ez az elosztás a tipikus szerepekre épül, bár a "full-stack" fejlesztők mind front-end, mind back-end technológiákkal dolgozhatnak.
URL felépítése:
Tipikus kezdő hibák:
Túl sok időt töltenek az alapok megtanulásával (Elég, ha W3 school-on megnézni a html, css és javascript fejezeket) Nem kell elsőre a full stack fejlesztést megtanulni, elég a front-end-et és helyezkedj el azzal. Higgy a folyamatban! (Menj végig a lépéseken, a végén töltsd fel a projeketedet pl. insta clone)
Snippet shortcut:
https://docs.emmet.io/cheat-sheet/
Web developer checklist
STEP 1: Get Started STEP 2: HTML Tags What Is Web Developer? How Web Works? How Internet Works? What Is HTML, CSS And JavaScript? Head & Body Headings Paragraph List Image Anchor Form Element Tables Script Canvas Audio Video Doc Type Inline Style Block Vs Inline Path Defining STEP 3: CSS STEP 4: JavaScript Selectors Insert CSS File Color Fonts List Background Border Margin Padding Height Floats Positions Display Box Model Flexbox Animation Pseudo Class Media Query Variable Data Types Array Array Methods Object Conditions Loops Functions Call Stack Events Arrow Functions Class Object-Oriented ES6 DOM Callback Promise Http Debugging STEP 5: Other Topics STEP 6: Before Interview Bootstraps Unit Testing Github React Or Angular Redux/Ngrx Node.Js Firebase Npm, Webpack, Hosting Domain Personal Projects Online Portfolio #100dayofcodingchallenge Get Real Experience: Do Works For Free. Work For Friend & Family. Open Source Contribution Prepare For Coding Interviews: Solve Algorithm Problems Techie Programmer ©2023
40 Project ideas for Web developer
Calculator Quiz App Rock Paper Scissors Note App Stopwatch App QR Code Reader Weather App Ecommerce Website Landing Page Password Generator Tic Tac Toe Game Link Shortener Website Portfolio Website Drawing App Food Order Website Meme Generator Movie App Chat App Twitter Clone Survey App E-Book Site Instagram Clone Whatsapp Clone Netflix Clone File Sharing App Parallax Website Job Search App: Pinterest Clone Dating App Social Media Dashboard Tracker App Memory App Giphy Clone User Activity Tracker Stock-Trading App Chess Game Music Player To-Do List App Random User API Typing Speed Test
További program ötletek: Számkitalálós program. Ide kattints gomb, először kicsi a gomb, majd amikor rákattint a felhasználó, akkor kiírja, hogy mennyi idő alatt nyomott rá.
Ha rossz helyre kattintott, akkor egyre nagyobb lesz a gomb.
Hasznos linkek és források:
ElementorIT (ElementorIT Find Your Perfect Website Easily.) https://www.figma.com/ HTML+CSS https://www.youtube.com/watch?v=CtrMhe5Azys Javascript kezdőanyag https://journey.study/v2/learn/courses/1252/modules/19503/units/1 W3Schools Online Web Tutorials MDN Web Docs (mozilla.org)
Learn website development (from codehub.py): HTML -> html.com CSS -> css-tricks.com JS -> jsv9000.app DSA -> algorithm-visulizer.org GITHUB -> learngitbranching.js.org REACT -> react-tutorial.app API -> rapidapi.com/learn
Fejlesztői eszközök:
A WebStorm egy professzionális integrált fejlesztői környezet (IDE), amelyet a JetBrains fejlesztett ki, és kifejezetten webfejlesztéshez készült. Fizetős.
Visual Studio Code programot ajánlják.
HTML, CSS, JavaScript a játékfejlesztésben:
HTML: A játék alapstruktúráját hozod létre (pl. gombok a "kő", "papír" és "olló" választásához). CSS: A játék kinézetét tervezed meg. JavaScript: A játék logikáját programozod meg (pl. véletlenszerű választás a gép részéről, győztes meghatározása).