diff --git a/README.md b/README.md
index 77b04acf60b84f3f88598f5d6e1fa71ab98534e2..32dc515f1dabf98e33c8ef04b1f109f45d722a0a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# schdesign-web-tutorial-1
+# schdesign-web-tutorial-2
## Visual Studio Code
@@ -6,508 +6,35 @@
### HasznĂĄlandĂł kiegĂŠszĂtĹk
-A vscode-ot megnyitva bal oldalt talĂĄljuk meg a kiegĂŠszĂtĹket *(Extensions)*. Itt keressĂźnk rĂĄ az alĂĄbbiakra ĂŠs telepĂtsĂźk Ĺket:
+A vscode-ot megnyitva bal oldalt talĂĄljuk meg a kiegĂŠszĂtĹket _(Extensions)_. Itt keressĂźnk rĂĄ az alĂĄbbiakra ĂŠs telepĂtsĂźk Ĺket:
- Live Server
-- Auto Rename Tag
-- CSS Peek
- HTML CSS Support
### Gyorsgombok
| Gyorsgomb | Mit csinĂĄl? |
| -------------- | ------------------------------------------------------------------------- |
-| `CTRL+SHIFT+P` | Command Pallet megnyitĂĄsa *(parancsokra tudunk rĂĄkeresni ĂŠs kiadni Ĺket)* |
+| `CTRL+SHIFT+P` | Command Pallet megnyitĂĄsa _(parancsokra tudunk rĂĄkeresni ĂŠs kiadni Ĺket)_ |
| `SHIFT+ALT+F` | KĂłd automatikus formĂĄzĂĄsa |
## Projekthez szĂźksĂŠges fĂĄjlok
A naptĂĄr ekĂŠszĂtĂŠse sorĂĄn az alĂĄbbi fĂĄjlok fognak nekĂźnk kelleni:
-- [Roboto-Regular.ttf](https://github.com/gergoradeczki/schdesign-web-tutorial-1/raw/main/dependencies/Roboto-Regular.ttf)
-- [rough_bg.jpg](https://github.com/gergoradeczki/schdesign-web-tutorial-1/raw/main/dependencies/rough_bg.jpg)
-
-## StruktĂşra
-
-Az alĂĄbbi fĂĄjl/mappa struktĂşrĂĄhoz igazodjuk:
-
-- /
- - css/
- - layout.css
- - responsive.css
- - style.css
- - font/
- - Roboto-Regular.ttf
- - img/
- - rough_bg.jpg
- - index.html
-
-## 1. index.html
-
-Ărjuk meg a HTML-t.
-
-``` html
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="css/layout.css">
- <link rel="stylesheet" href="css/style.css">
- <link rel="stylesheet" href="css/responsive.css">
- <title>NaptĂĄr</title>
- </head>
- <body>
- <main>
- <div class="time">
- <div class="dayName"></div>
- <div class="dayTimes">
- <div class="dayTime">07:00</div>
- <div class="dayTime">08:00</div>
- <div class="dayTime">09:00</div>
- <div class="dayTime">10:00</div>
- <div class="dayTime">11:00</div>
- <div class="dayTime">12:00</div>
- <div class="dayTime">13:00</div>
- <div class="dayTime">14:00</div>
- <div class="dayTime">15:00</div>
- <div class="dayTime">16:00</div>
- <div class="dayTime">17:00</div>
- <div class="dayTime">18:00</div>
- <div class="dayTime">19:00</div>
- <div class="dayTime">20:00</div>
- </div>
- </div>
- <div class="day">
- <div class="dayName">HĂŠtfĹ</div>
- <div class="dayEvents">
- <div class="event length--4" style="grid-row-start: 4;">
- <div class="eventTitle">KommunikĂĄciĂłs hĂĄlĂłzatok 2</div>
- <div class="eventDetails">
- <div class="eventTime">10:00-14:00</div>
- </div>
- </div>
- <div class="event length--4" style="grid-row-start: 8;">
- <div class="eventTitle">KommunikĂĄciĂłs hĂĄlĂłzatok 2</div>
- <div class="eventDetails">
- <div class="eventTime">14:00-18:00</div>
- </div>
- </div>
- </div>
- </div>
- <div class="day">
- <div class="dayName">Kedd</div>
- <div class="dayEvents">
- <div class="event length--2" style="grid-row-start: 4;">
- <div class="eventTitle">Algoritmus elmĂŠlet</div>
- <div class="eventDetails">
- <div class="eventTime">10:00-12:00</div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 6;">
- <div class="eventTitle">SzoftvertechnikĂĄk</div>
- <div class="eventDetails">
- <div class="eventTime">12:00-14:00</div>
- </div>
- </div>
- </div>
- </div>
- <div class="day">
- <div class="dayName">Szerda</div>
- <div class="dayEvents">
- <div class="event length--4" style="grid-row-start: 2;">
- <div class="eventTitle">OperĂĄciĂłs rendszerek</div>
- <div class="eventDetails">
- <div class="eventTime">08:00-12:00</div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 6;">
- <div class="eventTitle">Szoftver projekt laboratĂłrium</div>
- <div class="eventDetails">
- <div class="eventTime">12:00-14:00</div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 8;">
- <div class="eventTitle">Menedzsment ĂŠs vĂĄllalkozĂĄsgazdasĂĄgtan</div>
- <div class="eventDetails">
- <div class="eventTime">14:00-16:00</div>
- </div>
- </div>
- </div>
- </div>
- <div class="day">
- <div class="dayName">CsĂźtĂśrtĂśk</div>
- <div class="dayEvents">
- <div class="event length--2" style="grid-row-start: 4;">
- <div class="eventTitle">OperĂĄciĂłs rendszerek</div>
- <div class="eventDetails">
- <div class="eventTime">10:00-12:00</div>
- </div>
- </div>
- <div class="eventSubdivide length--2" style="grid-row-start: 6;">
- <div class="event length--2" style="grid-row-start: 1;">
- <div class="eventTitle">Algoritmus elmĂŠlet</div>
- <div class="eventDetails">
- <div class="eventTime">12:00-14:00</div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 1;">
- <div class="eventTitle">Kotlin alapĂş szoftverfejlesztĂŠs</div>
- <div class="eventDetails">
- <div class="eventTime">12:00-14:00</div>
- </div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 8;">
- <div class="eventTitle">KommunikĂĄciĂłs hĂĄlĂłzatok 2</div>
- <div class="eventDetails">
- <div class="eventTime">14:00-16:00</div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 10;">
- <div class="eventTitle">Menedzsment ĂŠs vĂĄllalkozĂĄsgazdasĂĄgtan</div>
- <div class="eventDetails">
- <div class="eventTime">16:00-18:00</div>
- </div>
- </div>
- </div>
- </div>
- <div class="day">
- <div class="dayName">PĂŠntek</div>
- <div class="dayEvents">
- <div class="event length--2" style="grid-row-start: 2;">
- <div class="eventTitle">Grafika</div>
- <div class="eventDetails">
- <div class="eventTime">08:00-10:00</div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 4;">
- <div class="eventTitle">OperĂĄciĂłs rendszerek</div>
- <div class="eventDetails">
- <div class="eventTime">10:00-12:00</div>
- </div>
- </div>
- <div class="event length--2" style="grid-row-start: 6;">
- <div class="eventTitle">SzoftvertechnikĂĄk</div>
- <div class="eventDetails">
- <div class="eventTime">12:00-14:00</div>
- </div>
- </div>
- </div>
- </div>
- <div class="day">
- <div class="dayName">Szombat</div>
- </div>
- <div class="day">
- <div class="dayName">VasĂĄrnap</div>
- </div>
- </main>
- </body>
-</html>
-```
-
-## 2. layout.css
-
-LĂŠpĂŠsrĹl lĂŠprĂŠsre helyezzĂźk el az elemeket.
-
-Kapcsoljunk ki minden nem kellĹ tulajdonsĂĄgot.
-
-``` css
-/* Minden elemen beĂĄllĂtjuk ezeket */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box; /* MĂĄshogy fog szĂĄmolĂłdni a Width ĂŠs Height */
-}
-```
-
-HelyezzĂźk kĂśzĂŠpre a `<body>` tartalmĂĄt.
-
-``` css
-body {
- min-height: 100vh; /* fĂźggĹleges kĂśzĂŠphez kell */
- display: flex; /* egyszerĹą lesz az elrendezĂŠs */
- align-items: center; /* FĂźggĹlegesen kĂśzĂŠpre rendezĂŠs */
- justify-content: center; /* VĂzszintesen kĂśzĂŠpre rendezĂŠs */
-}
-```
-
-RendezzĂźk el a `<main>`-ben lĂŠvĹ *"oszlopokat"*
-
-``` css
-main {
- display: flex; /* Tudjon reszponzĂvan nyĂşlni */
- min-width: 0; /* VĂŠkony kijelzĹn nem lesz levĂĄgva az eleje */
-}
-```
-
-Adjuk meg az idĹsĂĄvnak ĂŠs a napoknak az elvĂĄrt szĂŠlessĂŠget.
-
-``` css
-.time {
- width: 60px;
-}
-.day {
- width: 180px;
-}
-```
-
-UtĂĄna meg a napok neveit tegyĂźk magasabbĂĄ ĂŠs helyezzĂźk el Ĺket kĂśzĂŠpen.
-
-``` css
-.dayName {
- height: 60px;
- display: flex; /* SzeretjĂźk a flexet, mert */
- align-items: center; /* kĂśnnyen lehet benne */
- justify-content: center; /* kĂśzĂŠpre helyezni */
-}
-```
-
-Adjuk meg az oszlopok megjelenĂtĂŠsĂŠt, majd rendezzĂźk el az esemĂŠnyeket.
-
-``` css
-.dayTimes, .dayEvents {
- display: grid; /* EgyszerĹąen fogunk tudni 2D-ben dolgokat elhelyezni */
- /* 14 darab 60px magas sorunk lesz */
- grid-template-rows: repeat(14, 60px); /* Sorminta */
-}
-.event {
- margin: 1px; /* Minden irĂĄnyban 1px margĂł, Ăgy 2px-es rĂŠsek jĂśnnek lĂŠtre */
- padding: 15px 20px; /* Alul-felĂźl 15px, jobbra-balra 20px kitĂśltĂŠs */
-}
-```
-
-Oldjuk meg az ĂźtkĂśzĂŠs helyes megjelenĂŠsĂŠt
-
-``` css
-.event {
- margin: 1px; /* Minden irĂĄnyban 1px margĂł, Ăgy 2px-es rĂŠsek jĂśnnek lĂŠtre */
- padding: 15px 20px; /* Alul-felĂźl 15px, jobbra-balra 20px kitĂśltĂŠs */
- /* Ha valami oknĂĄl fogva tovĂĄbb akarna nyĂşlni, akkor ne */
- max-width: 178px;
-}
-
-.eventSubdivide {
- /* SzeretjĂźk a flexet */
- display: flex;
-}
-.eventSubdivide .event {
- max-width: 88px; /* Ha valami oknĂĄl fogva tovĂĄbb akarna nyĂşlni, akkor ne */
-}
-```
-
-Most egy csomĂł minden nem Ăşgy mĹąkĂśdik ahogyan szeretnĂŠnk. EgĂŠszĂtsĂźk ki az eventet ĂŠs a felosztott eventet is.
-
-``` css
-.event {
- margin: 1px; /* Minden irĂĄnyban 1px margĂł, Ăgy 2px-es rĂŠsek jĂśnnek lĂŠtre */
- padding: 15px 20px; /* Alul-felĂźl 15px, jobbra-balra 20px kitĂśltĂŠs */
- /* Ha valami oknĂĄl fogva tovĂĄbb akarna nyĂşlni, akkor ne */
- max-width: 178px;
-}
-.eventSubdivide {
- /* SzeretjĂźk a flexet */
- display: flex;
-}
-.eventSubdivide .event {
- max-width: 88px; /* Ha valami oknĂĄl fogva tovĂĄbb akarna nyĂşlni, akkor ne */
-}
-```
-
-## 3. style.css
-
-ElsĹ lĂŠpĂŠskĂŠnt *"importĂĄljuk"* az elĹre letĂśltĂśtt fĂĄjlokat a projektbe ĂŠs hasznĂĄljuk fel Ĺket egybĹl.
-
-``` css
-@font-face {
- font-family: 'Roboto'; /* Ezen a nĂŠven fogunk tudni rĂĄ hivatkozni */
- src: url('../font/Roboto-Regular.ttf') format('truetype'); /* Hol talĂĄlhatĂł ĂŠs tĂpusa */
- /* FigyeljĂźnk a cĂmzĂŠsre!!! */
-}
-body {
- font-family: 'Roboto'; /* A fentebb 'lĂŠtrehozott' betĹątĂpust hasznĂĄljuk fel */
- background-image: url('../img/rough_bg.jpg'); /* BeĂĄllĂtjuk a letĂśltĂśtt hĂĄtteret */
-}
-```
-
-KĂźlĂśnĂtsĂźk el a naptĂĄrat a hĂĄttĂŠrtĹl.
-
-``` css
-main {
- background-color: white; /* legyen fehĂŠr a hĂĄttĂŠr */
- /* Ezt csak mĂĄsoljuk le */
- box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}
-```
-
-EmeljĂźk ki a legfelsĹ sort, adjunk neki egy szĂźrkĂŠs szĂnt, legyen nagyobb a betĹątĂpusa ĂŠs mĂĄs a szĂśvegszĂn. CsinĂĄljunk egy ehhez hasonlĂłt az elsĹ oszloppal is.
-
-``` css
-.dayName {
- background-color: rgb(234,234,234); /* szĂźrke hĂĄttĂŠrszĂn */
- font-size: large; /* betĹą mĂŠret */
- color: rgb(110,110,110); /* szĂśvegszĂn */
-}
-.dayTime {
- font-size: medium;
- color: rgb(110,110,110);
- text-align: center; /* KĂśzĂŠpre igazĂtjuk a szĂśveget */
-}
-```
-
-Most az esemĂŠnyeknek adjunk stĂlust. NĂŠzzĂźk meg mi lenne, ha kikapcsolnĂĄnk a `max-width` tulajdonsĂĄgot. FigyeljĂźnk oda arra is, hogy esemĂŠny mĂŠretĂŠtĹl fĂźggĹen tĂśrjĂśn a cĂm.
-
-``` css
-.event {
- background-color: rgb(23,166,151);
- border-radius: 5px; /* lekerekĂtjĂźk a nĂŠgy sarkĂĄt */
- color: white;
- /* Fogadjuk el, hogy ez van */
- box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
-.eventTitle {
- font-size: medium;
- font-weight: 400; /* Mennyire legyen fĂŠlkĂśvĂŠr */
- word-wrap: break-word; /* Ha kell, akkor tĂśrd szĂŠt a szĂłt, hogy ne lĂłgjon tĂşl */
-}
-/* Csak az 1 Ăłra hosszĂş, vagy az ĂźtkĂśzĹ esemĂŠnyeknĂŠl lesz aktivĂĄlva */
-.eventSubdivide .eventTitle, .length--1 .eventTitle {
- overflow: hidden; /* ElrejtjĂźk a gĂśrgetĹsĂĄvat */
- white-space: nowrap; /* SzĂłkĂśznĂŠl nem kezdĂźnk Ăşj sort ha nincs elĂŠg hely */
-}
-.eventTime {
- font-size: small; /* Az idĹ legyen kisebb */
- font-weight: 300; /* Ne legyen annyira vastag */
-}
-```
-
-Ăs vĂŠgĂźl, amitĹl hoszabbak lesznek.
-
-``` css
-.length--1 {
- /* Mennyi cellĂĄt foglaljon el */
- grid-row-end: span 1; /* 1, azaz 1 cellĂĄt foglaljon el */
-}
-.length--2 {
- grid-row-end: span 2; /* 2, azaz 2 cellĂĄt foglaljon el */
-}
-.length--4 {
- grid-row-end: span 4; /* 4, azaz 4 cellĂĄt foglaljon el */
-}
-```
-
-## 4. responsive.css
-
-Ha tĂşl keskeny a kijelzĹ, akkor nem a legjobb a megjelenĂŠs. Ezt javĂtsuk ki azzal, hogy mĂŠg jobban reszponzĂvvĂĄ tesszĂźk a naptĂĄrat.
-
-KezdjĂźk azzal, hogy megkeressĂźk azt a pontot, ahol megtĂśrni lĂĄtszik a megjelenĂŠs.
-
-``` css
-/* 1380px vagy annĂĄl keskenyebb a kijelzĹ, akkor aktivĂĄlĂłdik */
-@media only screen and (max-width: 1380px) {
- /* ide Ărjuk a tovĂĄbbi mĂłdosĂtĂĄsokat */
-}
-```
-
-Ha nem tud a teljes naptĂĄr egĂŠszĂŠben megjelenni a kijelzĹn, akkor legyen napi nĂŠzet.
-
-``` css
-main {
- display: block; /* blokkĂŠnt jelenjen meg a tartalma */
- max-width: 800px; /* Maximum eddig nyoljon szĂŠt a tartalom */
- /* HelyezzĂźk kĂśzĂŠpre, de most hasznĂĄljunk valami rĂŠgit */
- margin-left: auto;
- margin-right: auto;
-}
-body {
- display: block; /* flexel nem fog mĹąkĂśdni, Ăgy visszatĂŠrĂźnk blockra */
-}
-```
-
-RejtsĂźk el az idĹ oszlopot, nem kell az nekĂźnk.
-
-``` css
-.time {
- display: none; /* Nem fog megjelenni */
-}
-```
-
-AprĂĄnkĂŠnt oldjuk meg, hogy minden szĂŠtnyĂşljon ebben a nĂŠzetben.
-
-``` css
-/* Ez mindennek a kontĂŠnere, ha nem nyĂşlik szĂŠt, akkor semmi sem fog */
-.day {
- width: 100%; /* ReszponzĂvan prĂłbĂĄld kitĂślteni a szabad helyet */
-}
-/* gridrĹl tĂŠrjĂźnk ĂĄt flexre, de oszlopos legyen a megjelenĂŠs */
-.dayEvents {
- display: flex;
- flex-direction: column;
-}
-.event {
- margin: 5px 10px;
- max-width: 100%; /* HasznĂĄljuk fel az Ăśsszes szabad helyet */
-}
-```
-
-Most mĂĄr csak az ĂźtkĂśzĹ elemekkel van problĂŠma. Ehhez hasznĂĄljuk ki azt, hogy elĂŠg csak az egyiknek belsĹ margĂłt megadni. Ăgy itt is marad a 10 pixel belsĹ tĂĄvolsĂĄg.
-
-``` css
-/* Csak az ĂźtkĂśzĹ esemĂŠnyekre alkalmazzuk */
-.eventSubdivide .event {
- /* Ezzel fogjĂĄk fele-fele arĂĄnyban elfoglalni a helyet */
- min-width: calc(50% - 15px); /* KiszĂĄmoljuk, mennyi legyen a minimĂĄlis szĂŠlessĂŠg */
-}
-/* ElĂŠg csak az elsĹnek a belsĹ margojĂĄt mĂłdosĂtani */
-.eventSubdivide .event:first-child {
- margin-right: 0;
-}
-```
-
-## Hogyan csĂkozzuk be?
-
-VegyĂźk ĂŠszre, hogy a vĂzszintes csĂkozĂĄs lehetetlen. A fĂźggĹleges mĂŠg ĂŠppen, hogy lehetsĂŠges.
-
-De mi most mĂŠgis megoldjuk a vĂzszintes csĂkozĂĄst a *repeating-linear-gradient* hasznĂĄlva.
-
-``` css
-/* Unortodox csĂkozĂĄs */
-main {
- background: repeating-linear-gradient(0deg, white, white 59px, rgb(234,234,234) 1px, rgb(234,234,234) 60px);
-}
-.day {
- border-left: 1px solid rgb(234,234,234);
-}
-```
-
-Csak ne felejtsĂźk el kikapcsolni mobil nĂŠzetben.
-
-``` css
-@media only screen and (max-width: 1380px) {
- main {
- background: white;
- }
- .day {
- border-left: none;
- }
-}
-```
-
## HĂĄzi feladat
A workshopon valĂł jelenlĂŠt megszerzĂŠsĂŠhez szĂźksĂŠges a hĂĄzi feladatnak az elkĂŠszĂtĂŠse. Ehhez hasznĂĄld nyugodtan azt a kĂłdot, amit a workshop ideje alatt kĂŠszĂtettĂŠl, vagy az itt talĂĄlhatĂł mintakĂłdot.
-- [A feladat szĂśvege itt ĂŠrhetĹ el.](https://github.com/gergoradeczki/schdesign-web-tutorial-1/raw/main/homework/homework.pdf)
-
### Feladatok
1. Legyen egyszerĹąen sĂśtĂŠt tĂŠmĂĄjĂşvĂĄ vĂĄlthatĂł a naptĂĄr!
- 1. *Hint: lehet ĂŠrdemes kĂźlĂśn css fĂĄjlt ĂŠs (1 db) osztĂĄlyt lĂŠtrehozni*
+ 1. _Hint: lehet ĂŠrdemes kĂźlĂśn css fĂĄjlt ĂŠs (1 db) osztĂĄlyt lĂŠtrehozni_
2. Legyen tĂśbb esemĂŠny stĂlus!
- 1. *Hint: most minden esemĂŠny ugyan olyan, lehessen pl. szĂnt, szĂśvegtĂpust stb. vĂĄlasztani.*
+ 1. _Hint: most minden esemĂŠny ugyan olyan, lehessen pl. szĂnt, szĂśvegtĂpust stb. vĂĄlasztani._
3. Legyen CSS vĂĄltozĂłn keresztĂźl mĂłdosĂthatĂł a naptĂĄr tetejĂŠnek ĂŠs idĹoszlopĂĄnak a szĂne!
- 1. *Hint: nĂŠzz utĂĄna hogyan kell CSS vĂĄltozĂłt lĂŠtrehozni ĂŠs Ăźgyelj arra, hogy jĂł helyen hozd Ĺket lĂŠtre.*
+ 1. _Hint: nĂŠzz utĂĄna hogyan kell CSS vĂĄltozĂłt lĂŠtrehozni ĂŠs Ăźgyelj arra, hogy jĂł helyen hozd Ĺket lĂŠtre._
-Beadni a `gergo.radeczki@schdesign.hu` email cĂmre lehet.<br>TĂĄrgynak add meg, hogy `[WebfejlesztĂŠs alapok HF]`.
+Beadni a [hazi@schdesign.hu](mailto:hazi@schdesign.hu) email cĂmre lehet.
-- HatĂĄridĹ: **2021.03.03. 19:00**
\ No newline at end of file
+- HatĂĄridĹ: **2021.03.14. 23:59**