Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
triszt4n
force-pushed
the
feat/WebBasics
branch
from
3c2710c to
85b8972
Compare
There was a problem hiding this comment.
Pull request overview
This PR replaces the default tutorial intro with Hungarian “Web basics” educational content for the Webes alapok docs section.
Changes:
- Rewrote
docs/webes-alapok/intro.mdwith an overview of how the web works (client–server, DNS, HTTP). - Added introductory sections and examples for HTML, CSS (including box model/layout), and JavaScript (DOM/events).
- Added links to external resources (videos, tag lists) and illustrative images.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|  | ||
|
|
||
| CSS-ben pseudo-osztályok segítségével különböző állapotokat írhatunk le egy elemhez: |
There was a problem hiding this comment.
A kép hotlinkelve van külső domainről; ez törékeny és eltér a repo többi doksijától, ahol a képek lokálisan vannak. Javasolt a képet a repo-ba tenni (pl. static/img) és onnan hivatkozni.
| ## A Web működése | ||
|
|
||
| ## Getting Started | ||
| A web egy **kliens-szerver modell**en alapuló hálózat, ahol **kliens** (például egy böngésző) egy **URL** megadásakor (pl. kir-dev.hu), a DNS segítségével kideríti a **szerver** pontos IP-címét. Ezt követően a kliens egy **HTTP-kérés**sel lekéri tőle a weboldal vázát adó HTML-fájlt. Amint a kliens elkezdi feldolgozni ezt a kódot, automatikusan behívja a többi szükséges elemet is (CSS, JavaScript, képek stb.), amíg végül megjeleníti a teljes weboldalt a felhasználó számára. |
There was a problem hiding this comment.
A toldalékolás hibás: „HTTP-kérés” után a „-sel” így írva („kérés**sel”) helytelen, félrevezető a szövegben. Javítsd „HTTP-kéréssel” alakra (vagy írd át a mondatot úgy, hogy ne törjön meg a szó).
| A web egy **kliens-szerver modell**en alapuló hálózat, ahol **kliens** (például egy böngésző) egy **URL** megadásakor (pl. kir-dev.hu), a DNS segítségével kideríti a **szerver** pontos IP-címét. Ezt követően a kliens egy **HTTP-kérés**sel lekéri tőle a weboldal vázát adó HTML-fájlt. Amint a kliens elkezdi feldolgozni ezt a kódot, automatikusan behívja a többi szükséges elemet is (CSS, JavaScript, képek stb.), amíg végül megjeleníti a teljes weboldalt a felhasználó számára. | |
| A web egy **kliens-szerver modell**en alapuló hálózat, ahol **kliens** (például egy böngésző) egy **URL** megadásakor (pl. kir-dev.hu), a DNS segítségével kideríti a **szerver** pontos IP-címét. Ezt követően a kliens egy **HTTP-kéréssel** lekéri tőle a weboldal vázát adó HTML-fájlt. Amint a kliens elkezdi feldolgozni ezt a kódot, automatikusan behívja a többi szükséges elemet is (CSS, JavaScript, képek stb.), amíg végül megjeleníti a teljes weboldalt a felhasználó számára. |
| Egyszerű Log In form HTML-ben: | ||
|
|
||
| The command also installs all necessary dependencies you need to run Docusaurus. | ||
| #### **#TODO: előadáson bemutatott form beillesztése** | ||
|
|
||
| ## Start your site | ||
| ## CSS - Cascading Style Sheets |
There was a problem hiding this comment.
Publikált dokumentációban maradtak „#TODO” helykitöltők. Ezek így félkész tartalomnak tűnnek; vagy töltsd ki a példákat, vagy jelöld meg expliciten (pl. „(hamarosan)”) és távolítsd el a TODO marker-t.
|  | ||
|
|
||
| Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**. | ||
| _**[Web működése - videó (angol)](https://www.youtube.com/watch?v=BGN0KP4aOR8)**_ |
There was a problem hiding this comment.
A képek hotlinkelve vannak külső domainekről. Ez a doksi megbízhatóságát rontja (külső oldal törli/átnevezi/tiltja), és eltér a repo többi doksijától, ahol a képek lokálisan vannak (pl. docs/get-started/tutorial-basics/markdown-features.mdx:49). Javasolt a képeket a repo-ba tenni (pl. static/img vagy a doksi mappája) és onnan hivatkozni.
|
|
||
|  | ||
|
|
||
| Léteznek különöző **layout modellek** is, ami abban segít hogy a komponensek hogyan helyezkedjenek el egymáshoz képest: |
There was a problem hiding this comment.
Elgépelés: „különöző” → „különböző”.
| Léteznek különöző **layout modellek** is, ami abban segít hogy a komponensek hogyan helyezkedjenek el egymáshoz képest: | |
| Léteznek különböző **layout modellek** is, ami abban segít hogy a komponensek hogyan helyezkedjenek el egymáshoz képest: |
| - **Node.js**: Szerveroldali JavaScript futtatókörnyezet, segítségével JS kódot is futtathatunk a szerveren. _Bővebben **[NodeJS tanfolyam](/docs/node-js/intro.md)**._ | ||
| - **React**: Komponens-alapú JavaScript könyvtár, interaktív felhasználói felületek építésére. _Bővebben **[React tanfolyam](/docs/react/intro.md)**._ | ||
| - **Spring Boot**: Java-alapú keretrendszer, amely megkönnyíti a webalkalmazások fejlesztését. _Bővebben **[Spring Boot tanfolyam](/docs/spring-boot/intro.md)**._ |
There was a problem hiding this comment.
A belső Docusaurus linkeknél az abszolút „/docs/.../intro.md” formátum nagy valószínűséggel nem a generált route-ra mutat (általában nincs „.md” a URL-ben). Használj relatív fájl-linket (pl. „../node-js/intro.md”) vagy a route-ot kiterjesztés nélkül (pl. „/docs/node-js/intro”).
| - **Node.js**: Szerveroldali JavaScript futtatókörnyezet, segítségével JS kódot is futtathatunk a szerveren. _Bővebben **[NodeJS tanfolyam](/docs/node-js/intro.md)**._ | |
| - **React**: Komponens-alapú JavaScript könyvtár, interaktív felhasználói felületek építésére. _Bővebben **[React tanfolyam](/docs/react/intro.md)**._ | |
| - **Spring Boot**: Java-alapú keretrendszer, amely megkönnyíti a webalkalmazások fejlesztését. _Bővebben **[Spring Boot tanfolyam](/docs/spring-boot/intro.md)**._ | |
| - **Node.js**: Szerveroldali JavaScript futtatókörnyezet, segítségével JS kódot is futtathatunk a szerveren. _Bővebben **[NodeJS tanfolyam](../node-js/intro.md)**._ | |
| - **React**: Komponens-alapú JavaScript könyvtár, interaktív felhasználói felületek építésére. _Bővebben **[React tanfolyam](../react/intro.md)**._ | |
| - **Spring Boot**: Java-alapú keretrendszer, amely megkönnyíti a webalkalmazások fejlesztését. _Bővebben **[Spring Boot tanfolyam](../spring-boot/intro.md)**._ |
| Most, hogy minden tudásnak bírtokában vagyunk, egészítsük ki a Log In formunkat CSS-sel: | ||
|
|
||
| #### **#TODO: előadáson bemutatott form beillesztése** |
There was a problem hiding this comment.
Publikált dokumentációban maradt „#TODO” helykitöltő ennél a résznél is. Kérlek töltsd ki a Log In form CSS példát, vagy távolítsd el a TODO marker-t / jelöld „hamarosan”-nak.
| Ezek ismeretében tegyük interaktívvá a Log In formunkat: | ||
|
|
||
| Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. | ||
| #### **#TODO: előadáson bemutatott form beillesztése** |
There was a problem hiding this comment.
Publikált dokumentációban maradt „#TODO” helykitöltő ennél a résznél is. Kérlek töltsd ki a JS interaktív példa részt, vagy távolítsd el a TODO marker-t / jelöld „hamarosan”-nak.
|  | ||
|
|
||
| A megírt komponenseket tudjuk pozícionálni a weboldalon a következő tulajdonságok segítségével: |
There was a problem hiding this comment.
A kép hotlinkelve van külső domainről; ez törékeny és eltér a repo többi doksijától, ahol a képek lokálisan vannak. Javasolt a képet a repo-ba tenni (pl. static/img) és onnan hivatkozni.
|  | ||
|
|
||
| Léteznek különöző **layout modellek** is, ami abban segít hogy a komponensek hogyan helyezkedjenek el egymáshoz képest: |
There was a problem hiding this comment.
A kép hotlinkelve van külső domainről; ez törékeny és eltér a repo többi doksijától, ahol a képek lokálisan vannak. Javasolt a képet a repo-ba tenni (pl. static/img) és onnan hivatkozni.
No description provided.