🎯 Začiatočnícky kurz

Kurz HTML a CSS
pre začiatočníkov

Chcete sa naučiť tvoriť webové stránky od úplných základov, porozumieť tomu, ako web v skutočnosti funguje, a získať kontrolu nad každým prvkom bez spoliehania sa na obmedzené šablóny? Bojujete s neprehľadným kódom alebo sa obávate, že začať s programovaním je príliš zložité?

Kódovanie webov nemusí byť veda. Na živom online kurze sa naučíte písať čistý HTML5 kód, precízne štylovať prvky pomocou CSS3, pochopíte kľúčový Box Model, moderný Flexbox pre zarovnávanie prvkov a svoju prvú hotovú webstránku nahráte na internet úplne zadarmo.

⏱️
Trvanie –
💰
Cena –
🎓
Certifikát Po absolvovaní
Objednať kurz
VS Code – index.html
📄
🎨
🔧
</>
{}
▶️
<><!DOCTYPE html> · UTF-8 · HTML5
Element
Typ
CSS
1
<header>
Block
flex
2
<nav>
Block
grid
3
<main>
Block
flex
4
<footer>
Block
grid

Anotácia a popis kurzu

Základom každého webu na svete – od jednoduchých osobných vizitiek až po rozsiahle portály – je kombinácia jazykov HTML a CSS. Pochopenie ich princípov vám otvorí dvere do sveta front-end vývoja, správy webov či pokročilej úpravy redakčných systémov (WordPress a ďalšie).

Kurz HTML a CSS pre začiatočníkov je navrhnutý pre každého, kto nemá žiadne predchádzajúce skúsenosti s písaním kódu. Krok za krokom vás prevedieme inštaláciou obľúbeného editora Visual Studio Code a rozšírenia Live Server pre okamžitý náhľad zmien priamo v prehliadači.

Naučíte sa vytvárať sémantickú štruktúru HTML5 dokumentu, pracovať s nadpismi, odsekmi, zoznamami, obrázkami a hypertextovými odkazmi. V CSS časti zistíte, ako prepojiť štýly s HTML, používať selektory (značky, triedy, ID), nastavovať farby v rôznych formátoch (Hex, RGB, HSL) a vkladať moderné písma z Google Fonts. Dôkladne si osvojíte Box Model (margin, padding, border), ladenie cez DevTools v prehliadači, zarovnanie navigačných menu cez Flexbox a bezplatné publikovanie webu na internet.

👥 Pre koho je kurz určený?

  • Pre úplných začiatočníkov a samoukov, ktorí chcú vstúpiť do sveta IT a získať pevné základy webových technológií.
  • Pre správcov webov, copywriterov a marketérov, ktorí potrebujú vedieť upraviť HTML/CSS kód v e-shopoch, landing pages či WordPresse.
  • Pre grafikov a dizajnérov, ktorí chcú porozumieť technickej realizácii svojich grafických návrhov.
  • Pre každého, kto sa chce naučiť kódovať a získať praktickú zručnosť použiteľnú v modernej digitálnej praxi.

💻 Materiály a software

Každý účastník kurzu HTML a CSS pre začiatočníkov, dostane učebné materiály ku kurzu zadarmo.

Používané prostredie: Školenie prebieha v bezplatnom editore kódu Visual Studio Code a webovom prehliadači (odporúčaný Google Chrome alebo Mozilla Firefox) na operačnom systéme Windows alebo zariadeniach Apple (macOS). Na školenie je potrebný počítač s pripojením na internet.

Profil absolventa

Absolvent vzdelávacieho programu disponuje základnými teoretickými vedomosťami a praktickými zručnosťami v oblasti tvorby a štýlovania statických webových stránok pomocou jazykov HTML5 a CSS3. Dokáže samostatne vytvoriť sémanticky správnu štruktúru webového dokumentu, nastylovať prvky podľa moderných vizuálnych štandardov, pracovať s rozložením pomocou CSS Box Modelu a Flexboxu, odladiť kód cez nástroje prehliadača (DevTools) a publikovať hotový web na internete.

Vzdelávacie výstupy

1 Vedomosti (Čo absolvent vie a pozná)

  • Pozná základné princípy fungovania webových technológií, architektúru klient – server a proces spracovania kódu v prehliadači.
  • Rozumie syntaxi, hierarchii a sémantike HTML5 dokumentu (štruktúra Doctype/head/body, sémantické značky, atribúty, relatívne a absolútne cesty k súborom).
  • Ovláda základné princípy kaskádových štýlov (CSS), typy selektorov (značka, trieda, ID), prácu s farbami (Hex, RGB, HSL) a typografiou (Google Fonts).
  • Rozumie fungovaniu CSS Box Modelu (šírka, výška, padding, border, margin) a mechanizmu usporiadania prvkov pomocou moderného rozloženia Flexbox.
  • Pozná zásady inšpekcie a ladenia kódu pomocou vývojárskych nástrojov (DevTools), základy responzivity a možnosti bezplatného publikovania statických stránok.

2 Zručnosti (Čo absolvent dokáže prakticky vykonať)

  • Samostatne nainštalovať a nakonfigurovať editor Visual Studio Code vrátane rozšírenia Live Server pre okamžitý náhľad zmien v reálnom čase.
  • Vytvoriť sémanticky štruktúrovanú HTML5 stránku s využitím nadpisov, odsekov, zoznamov, hypertextových odkazov, obrázkov s alternatívnymi textami a blokových/riadkových elementov.
  • Prepojiť externý CSS súbor s HTML dokumentom, aplikovať štýly cez selektory a formátovať textové aj vizuálne prvky stránky.
  • Využiť CSS Box Model a Flexbox na presné nastavenie rozmerov, okrajov, orámovania, vycentrovanie obsahu a zarovnanie prvkov vedľa seba (napr. navigačné menu).
  • Identifikovať a opravovať chyby v rozložení pomocou nástrojov pre vývojárov v prehliadači a úspešne nahrať hotovú stránku na bezplatný webhosting.

3 Kompetencie (Uplatnenie v praxi)

  • Samostatne realizovať kódovanie jednoduchých prezentačných webových stránok a vizitiek od prázdneho súboru až po ich sprístupnenie na internete.
  • Kriticky kontrolovať čistotu, prehľadnosť a sémantickú správnosť písaného kódu s využitím komentárov a logického členenia.
  • Samostatne diagnostikovať a riešiť bežné technické a vizuálne nezrovnalosti v zobrazení webu priamo v prostredí prehliadača.
  • Aplikovať osvojené postupy pri úprave existujúceho HTML/CSS kódu na weboch či v redakčných systémoch.
  • Flexibilne nadviazať na získané základy pri ďalšom vzdelávaní v oblasti pokročilého frontend vývoja a programovania v JavaScripte.

Metódy vzdelávania a hodnotenia

🧑‍🏫 Metódy výučby

Interaktívny výklad lektora spojený s okamžitým písaním kódu v editore (learning by doing), osvojovaním si sémantickej štruktúry HTML5, základov kaskádových štýlov (CSS) a riešením praktických úloh pri tvorbe webstránky.

📝 Spôsob hodnotenia

Priebežná kontrola postupov a záverečné samostatné praktické zadanie zamerané na vytvorenie korektnej HTML5 štruktúry, aplikáciu štýlov (selektory, farby, typografia), prácu s Box modelom (margin, padding, border), základné zarovnanie pomocou Flexboxu, kontrolu v DevTools a publikovanie hotovej stránky online.

🎓 Kritériá ukončenia

Samostatné úspešné nakódovanie a zverejnenie funkčnej statickej webovej stránky podľa zadania na minimálne 70 % a následné vystavenie certifikátu.

Čo sa na živom online kurze HTML a CSS naučíte

Od prázdneho súboru až po fungujúcu, nastylovanú webstránku.

1

Úvod do webových technológií

  • Ako funguje web (klient vs. server)
  • Inštalácia editora kódu (Visual Studio Code)
  • Základná syntax jazyka HTML a CSS
  • Vytvorenie prvého projektu a zobrazenie v prehliadači
  • Inštalácia rozšírení pre zrýchlenie práce (Live Server)
2

Základy štruktúry HTML5

  • Anatómia HTML dokumentu (Doctype, head, body)
  • Práca s nadpismi (h1 až h6) a odstavcami (p)
  • Logické členenie obsahu pomocou div a span
  • Základy sémantických značiek (header, footer, main)
  • Vkladanie komentárov do kódu
3

Obrázky, odkazy a zoznamy

  • Vkladanie obrázkov (img) a alternatívne texty
  • Relatívne a absolútne cesty k súborom
  • Tvorba hypertextových odkazov (a) do menu
  • Otváranie odkazov v novej karte a maily
  • Usporiadané (ol) a neusporiadané (ul) zoznamy
4

Základy štýlovania (CSS)

  • Ako prepojiť HTML súbor s CSS súborom
  • Typy CSS selektorov (značka, trieda, ID)
  • Nastavenie farieb textu a pozadia (Hex, RGB, HSL)
  • Zmena fontov (Google Fonts) a veľkosti písma
  • Formátovanie textu (zarovnanie, tučné, medzery)
5

Rozloženie prvkov (Box Model)

  • Ako prehliadač chápe rozmery (Box model)
  • Nastavenie šírky (width) a výšky (height) prvkov
  • Vnútorné medzery (Padding) a vonkajšie okraje (Margin)
  • Pridávanie orámovania (Border) a zaoblených rohov
  • Nástroje pre vývojárov v prehliadači (DevTools)
6

Základy Flexboxu a publikovanie

  • Základný úvod do Flexbox rozloženia
  • Zarovnanie prvkov vedľa seba (napr. navigačné menu)
  • Vycentrovanie obsahu na stránke
  • Základy responzívneho dizajnu v skratke
  • Nahratie jednoduchej stránky na internet zadarmo

Objednávka kurzu

–

Načítavam termíny…
Prejsť do košíka →