Kódolj velünk!

2021.02.05.

Kérjük add meg email címedet, ahová az eredményedet küldhetjük!

HTML | step 1

HTML alapok

1. FELADAT:

A HTML vázad ún. elemekből fog állni. A tag-ek nyitó és záró elemből állnak. Az első feladatban a

tag szerepel, ami a vázad főcímét jelöli.

Feladat:

Először nyomd meg a RESULT gombot, így láthatod a kódod Frontend oldali megjelenését.
Írd át a "Hello World!" szöveget pl. erre: "Első weboldalam!".
(A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.)


[codepen_embed height=300 theme_id=1 slug_hash='OJbMqLG' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

HTML | step 2

HTML alapok

2. FELADAT:

A második feladatban a tag szerepel, amivel a vázad bekezdésit kódolhatod le.

Feladat:

Először nyomd meg a RESULT gombot.
Írd át a tagek közötti "Bekezdés" szöveget pl. erre: "Hurrá, kódolok!".
(A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.)


[codepen_embed height=300 theme_id=1 slug_hash='BaQjMPM' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

HTML | step 3

HTML alapok

3. FELADAT:

A harmadik feladatban megtanulunk hivatkozást létrehozni. A hivatkozás tag eleme az . Az tag-be href="" jelöléssel tudjuk megadni, hova vezessen a linkünk. Az alábbi módon kódoljuk:
HIVATKOZÁS

Feladat:

Először nyomd meg a RESULT gombot.
Írd át aZ tagek közötti "HIVATKOZÁS" szöveget pl. erre: "LINK".
(A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.)


[codepen_embed height=300 theme_id=1 slug_hash='poNybzj' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

CSS | step 4

CSS alapok

4. FELADAT:

A negyedik feladatban megismerkedünk a CSS-sel. A CSS az angol „cascading style sheets” kifejezés rövidítése, ami magyarul „egymásba ágyazott stíluslapokat” jelent.
A CSS fájlunkba a HTML elemet adjuk meg, amit formázni szeretnénk.
Az alábbi módon kódoljuk:
h1{}

Feladat:

Először nyomd meg a RESULT gombot. Kattints a CSS fülre, hogy lásd a kódot.
Írd át az a{} elem background-color egyik 0-ás értékét 200-ra:

(A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.)

[codepen_embed height=300 theme_id=1 slug_hash='gOLrMbq' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

CSS | step 5

CSS alapok

5. FELADAT:

Az ötödik feladatban a gombunk hover színén változtatunk. Az a:hover azt jelöli, amikor a hivatkozásunk, vagy gombunk színe az egér fölévitelével megváltozik.
Az alábbi módon kódoljuk:
a:hover{}

Feladat:

Először nyomd meg a RESULT gombot. Kattints a CSS fülre, hogy lásd a kódot.
Írd át az a:hover{} elem background-color 200-as értékét 0-ra:

(A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.)

[codepen_embed height=300 theme_id=1 slug_hash='OJbNXbe' user='progmatic' default_tab='html' animations='run'] [/codepen_embed]

Time's up