Válassz bal oldalt egy nyelvet, olvasd el az alapfogalmakat, majd nézd meg a rövid példákat. A cél az, hogy ne csak másold a kódot, hanem lásd, mit miért írunk.
A HTML adja a weboldal vázát. Címeket, bekezdéseket, képeket, linkeket, listákat és űrlapokat helyezünk el vele. A legtöbb HTML elem nyitó és záró tagből áll.
Ilyen például a <h1>, <p> vagy <a>.
Extra adat az elemhez, például href, src vagy class.
A header, main, section segít értelmezni az oldalt.
<section>
<h1>Első weboldalam</h1>
<p>Ez egy rövid bemutatkozó szöveg.</p>
<a href="https://digitforge.hu">Megnézem</a>
</section><h2>Tanulási terv</h2>
<img src="logo.png" alt="DigitForge logó">
<ul>
<li>HTML váz elkészítése</li>
<li>CSS stílus hozzáadása</li>
<li>Python alapok gyakorlása</li>
</ul>
A CSS mondja meg, hogyan nézzen ki a HTML. Színeket, betűméretet, távolságokat, elrendezést, animációkat és reszponzív működést adhatunk az oldalhoz.
Kiválasztja, mit formázunk. Például h1, .card, #menu.
Amit módosítunk, például color, padding, display.
@media szabállyal mobilon más elrendezést adhatsz.
/* Egy modern, egyszerű tartalomkártya */
.card {
background: white;
border: 1px solid #eeeeee;
border-radius: 12px;
padding: 24px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.card h2 {
color: #3b82f6;
margin-bottom: 10px;
}.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 700px) {
.grid {
grid-template-columns: 1fr;
}
}
A Python egy könnyen olvasható programozási nyelv. Jó kezdőknek, automatizálásra, adatok feldolgozására, kisebb programokra és webes háttérrendszerekhez is.
Adatot tárol, például nev = "Anna" vagy pont = 10.
Az if dönti el, hogy melyik kódrész fusson le.
A for ismétlésekre jó, például listák bejárására.
pontszam = 82
if pontszam >= 80:
print("Szép munka, haladó szint!")
elif pontszam >= 50:
print("Jó irány, gyakorolj még!")
else:
print("Kezdd újra az alapokkal.")nyelvek = ["HTML", "CSS", "Python"]
for nyelv in nyelvek:
print(f"Ma ezt gyakorlom: {nyelv}")if vagy for blokkba.
A JavaScript teszi élővé a weboldalt. Gombkattintásra reagál, módosítja a HTML tartalmat, ellenőrzi az űrlapokat, animációkat indít, és adatokat kérhet le szerverről.
A böngészőben lévő HTML elemek rendszere, amit JavaScripttel módosíthatsz.
Például kattintás, gépelés vagy görgetés. Ezekre addEventListener figyel.
Újrahasznosítható kódrész, amit akkor futtatsz, amikor szükség van rá.
const gomb = document.querySelector("#gomb");
const cim = document.querySelector("#cim");
gomb.addEventListener("click", () => {
cim.textContent = "Sikerült megváltoztatni a címet!";
});let pont = 0;
function joValasz() {
pont = pont + 1;
console.log(`Pontszámod: ${pont}`);
}
joValasz();
joValasz();console.log eredményét.
A PHP szerveroldali nyelv. Ez azt jelenti, hogy a kód a szerveren fut le, majd a böngésző már a kész HTML választ kapja meg. Űrlapok, belépési rendszerek és adatbázisos oldalak gyakori alapja.
A PHP nem a böngészőben fut, hanem a tárhelyen vagy helyi szerveren.
A $_POST és $_GET segítségével érkezhet adat a felhasználótól.
Az echo HTML-t vagy szöveget küld vissza a böngészőnek.
<?php
$nev = "DigitForge tanuló";
$pont = 95;
echo "<h1>Szia, $nev!</h1>";
echo "<p>Pontszámod: $pont</p>";
?><?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$email = $_POST["email"];
echo "Köszönjük, erre írunk: " . htmlspecialchars($email);
}
?>htmlspecialchars segít elkerülni a veszélyes HTML beszúrását.
Az SQL adatbázisok kezelésére való. Táblákból kérhetsz le adatot, új sorokat szúrhatsz be, módosíthatsz rekordokat, vagy szűrhetsz feltételek alapján.
Olyan, mint egy rendezett táblázat: oszlopokból és sorokból áll.
A SELECT megmondja, milyen adatokat szeretnél látni.
A WHERE feltétellel csak bizonyos sorokat kapsz vissza.
SELECT nev, email, pontszam
FROM tanulok
WHERE pontszam >= 80
ORDER BY pontszam DESC;INSERT INTO tanulok (nev, email, pontszam)
VALUES ("Kovács Anna", "anna@example.com", 72);
A TypeScript a JavaScript kibővített változata, ahol előre megadhatod, milyen típusú adatot vársz. Ez segít hamarabb megtalálni a hibákat, főleg nagyobb projektekben.
Megmondja, hogy egy érték string, number, boolean vagy más legyen.
Leírja egy objektum formáját, például milyen mezői vannak egy tanulónak.
A TypeScriptből végül JavaScript készül, amit a böngésző futtat.
let nev: string = "Anna";
let pontszam: number = 88;
let aktiv: boolean = true;
console.log(`${nev} pontszáma: ${pontszam}`);interface Tanulo {
nev: string;
pont: number;
}
function ertekeles(tanulo: Tanulo): string {
return tanulo.pont >= 80 ? "Haladó" : "Gyakorló";
}
console.log(ertekeles({ nev: "Bence", pont: 91 }));
A React JavaScript könyvtár felhasználói felületekhez. Az oldalt kisebb, újrahasználható komponensekre bontod, majd ezekből építed fel a teljes appot.
Egy önálló UI darab, például gomb, kártya, menü vagy teljes szekció.
Kívülről átadott adatok, amelyekkel ugyanaz a komponens többféle tartalmat mutathat.
Olyan belső állapot, ami változáskor újrarajzolja a felületet.
function TanulasKartya() {
return (
<article className="card">
<h2>HTML alapok</h2>
<p>A HTML adja az oldal szerkezetét.</p>
</article>
);
}import { useState } from "react";
function PontSzamlalo() {
const [pont, setPont] = useState(0);
return (
<button onClick={() => setPont(pont + 1)}>
Pont: {pont}
</button>
);
}
A Node.js lehetővé teszi, hogy JavaScriptet ne csak böngészőben, hanem szerveren is futtass. API-k, botok, automatizációk és backend rendszerek készülhetnek vele.
A Node.js környezet futtatja a JavaScript kódot a gépeden vagy szerveren.
A kódot külön fájlokra bonthatod, majd import vagy require segítségével használhatod.
Egy backend végpont adatot ad vissza, például JSON formátumban.
const nyelvek = ["HTML", "CSS", "JavaScript"];
nyelvek.forEach((nyelv) => {
console.log(`Ma ezt tanulom: ${nyelv}`);
});import http from "http";
const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "application/json" });
res.end(JSON.stringify({ uzenet: "Szia a szerverről!" }));
});
server.listen(3000, () => {
console.log("Szerver fut: http://localhost:3000");
});
A C# erős, típusos programozási nyelv. Használják asztali alkalmazásokhoz, játékfejlesztéshez Unityben, webes backendhez ASP.NET-tel és vállalati rendszerekhez.
A változók típusát meg kell adni, például string, int vagy bool.
Az objektumorientált kód alapja. Adatokat és műveleteket fog össze.
Olyan függvény, amely egy osztályhoz tartozik.
string nev = "Anna";
int pont = 86;
if (pont >= 80)
{
Console.WriteLine($"{nev} haladó szinten van.");
}
else
{
Console.WriteLine($"{nev} még gyakorol.");
}class Tanulo
{
public string Nev { get; set; }
public int Pont { get; set; }
public string Szint()
{
return Pont >= 80 ? "Haladó" : "Kezdő";
}
}Készíts egy bemutatkozó kártyát képpel, címmel, rövid szöveggel és egy gombbal. CSS-ben adj neki keretet, árnyékot és hover állapotot.
<article class="profile-card">
<img src="logo.png" alt="Logó">
<h2>DigitForge tanuló</h2>
<p>Ma HTML-t és CSS-t gyakorlok.</p>
<button>Megnézem</button>
</article>Hozz létre egy gombot, ami minden kattintásnál növeli a pontszámot, és kiírja az aktuális értéket a képernyőre.
let pont = 0;
const gomb = document.querySelector("#pont-gomb");
const kimenet = document.querySelector("#pont");
gomb.addEventListener("click", () => {
pont++;
kimenet.textContent = pont;
});Készíts listát a tanult nyelvekből, majd ciklussal írd ki mindegyik mellé, hogy “gyakorlás alatt”.
nyelvek = ["HTML", "CSS", "Python"]
for nyelv in nyelvek:
print(f"{nyelv}: gyakorlás alatt")