1. Vysvětlete rozdíly mezi HTML, CSS a JavaScript ve vývoji webových aplikací
Odpověď: HTML je značkovací jazyk používaný k vytváření struktury a formátování obsahu na webové stránce.
- CSS je stylovací jazyk používaný k definování vzhledu a rozvržení webové stránky.
- JavaScript je programovací jazyk používaný k přidání interaktivity a procesní logiky na webovou stránku.
2. Jak vytvoříte responzivní web?
Odpověď: K vytvoření responzivního webu používáme mediální dotazy a techniky CSS, jako jsou jednotky měření tekutin, mřížkové systémy a flexbox, abychom se přizpůsobili různým velikostem obrazovky. Používáme také flexibilní návrhové vzory, různá rozlišení obrázků a prvky zobrazení/skrytí podle velikosti obrazovky.
3. Vysvětlete pojem box model v CSS.
Odpověď: Krabicový model v CSS je model, který zahrnuje základní součásti prvku: okraj, okraj, výplň a obsah. Každá komponenta tvoří „krabici“ kolem obsahu prvku a definuje prostor a pozici prvku na webové stránce.
4. Jak pracujete s CSS frameworky jako Bootstrap?
Odpověď: Abychom mohli pracovat s frameworky CSS, jako je Bootstrap, zahrneme na naši webovou stránku soubory CSS a JavaScript tohoto frameworku. Poté můžeme použít předdefinované třídy a prvky poskytované rámcem k vytvoření rozhraní a urychlení procesu vývoje.
5. Vysvětlete, jak AJAX funguje při odesílání a přijímání dat ze serveru
Odpověď: AJAX(Asynchronous JavaScript and XML) nám umožňuje odesílat asynchronní HTTP požadavky z webové stránky a přijímat odpovědi ze serveru bez opětovného načítání celé stránky. K vytváření požadavků a zpracování přijatých výsledků pomocí metod, jako je GET nebo POST, používáme objekt XMLHttpRequest v JavaScriptu nebo rozhraní fetch API.
6. Vysvětlete použití dotazů na média v CSS k vytvoření responzivního webu
Odpověď: Dotazy na média v CSS nám umožňují aplikovat různá pravidla CSS na základě podmínek, jako je velikost obrazovky, rozlišení a orientace zařízení. Pomocí dotazů na média definujeme podmínky a odpovídající pravidla CSS, která se použijí, když jsou tyto podmínky splněny.
7. Jak optimalizujete dobu načítání stránky a výkon webu?
Odpověď: Abychom optimalizovali dobu načítání stránky a výkon webu, můžeme provést několik opatření, například:
- Optimalizujte a komprimujte CSS, JavaScript a soubory obrázků.
- Použijte techniky ukládání do mezipaměti k dočasnému uložení zdrojů v prohlížeči.
- Snižte počet požadavků HTTP kombinováním souborů a používáním obrazových spritů
- Použijte síť pro doručování obsahu(CDN) k rozložení zatížení webu.
- Optimalizujte strukturu HTML a CSS, abyste zajistili efektivní zdrojový kód a optimalizaci pro SEO.
8. Jak řešíte události v JavaScriptu? Vysvětlete použití addEventListener
Odpověď: Ke zpracování událostí v JavaScriptu používáme metodu addEventListener() k připojení funkce obsluhy události k prvku HTML. Například:
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
// Event handling when the button is clicked
});
Metoda addEventListener() nám umožňuje zadat název události(např. 'click', 'mouseover') a funkci obsluhy události, která bude provedena, když událost nastane.
9. Jak vytváříte efekty pohybu a animace pomocí CSS a JavaScriptu?
Odpověď: Chcete-li vytvořit efekty pohybu a animace pomocí CSS a JavaScriptu, můžeme použít vlastnosti CSS jako přechod, animace a transformace k úpravě vizuálních vlastností prvku. Můžeme také použít JavaScript k ovládání vlastností CSS a spouštění animačních efektů na základě událostí.
10. Vysvětlete pojem kompatibilita mezi prohlížeči a jak tento problém řešit při vývoji webu
Odpověď: Kompatibilita mezi různými prohlížeči je schopnost webu fungovat konzistentně a spolehlivě napříč různými webovými prohlížeči. Abychom tento problém vyřešili, musíme otestovat a zajistit, aby web správně fungoval ve více prohlížečích. Musíme také používat pokročilé techniky vývoje webu, dodržovat webové standardy a omezit používání funkcí, které starší prohlížeče příliš nepodporují.
11. Jak vytváříte a používáte opakovaně použitelné komponenty při vývoji Frontendu?
Odpověď: K vytváření a používání opakovaně použitelných komponent ve vývoji Frontendu často používáme knihovny uživatelského rozhraní jako React, Vue nebo Angular. Vytváříme nezávislé komponenty a následně je používáme v různých částech uživatelského rozhraní. To zvyšuje modularitu a znovupoužitelnost kódu, což usnadňuje efektivní správu uživatelského rozhraní.
12. Vysvětlete použití sémantických značek v HTML a proč jsou důležité pro SEO
Odpověď: Sémantické značky v HTML, jako jsou <header>, <nav>, <section>, <article> a <footer>, se používají k definování významu a struktury prvků na webové stránce. Dělají zdrojový kód čitelnějším a srozumitelnějším a poskytují důležité informace pro vyhledávače. Dobře implementované sémantické značky mohou zlepšit hledanost a hodnocení webu ve výsledcích vyhledávání.
13. Jak optimalizujete SEO na webu?
Odpověď: Pro optimalizaci SEO na webu můžeme přijmout několik opatření, včetně:
- Vytváření působivých a přesných meta názvů, které obsahují relevantní klíčová slova.
- Vytváření atraktivních meta popisů, které poskytují dobrý souhrn obsahu stránky.
- Použití vhodných značek nadpisů(h1, h2, h3) k zajištění jasné struktury obsahu.
- Optimalizace obrázků pomocí atributů alt a vhodných velikostí.
- Vytváření interních odkazů pro zlepšení zjistitelnosti a procházení.
- Navrhování uživatelsky přívětivých adres URL bohatých na klíčová slova.
- Generování kvalitního a relevantního obsahu cíleného na požadovaná klíčová slova.
14. Jak zpracováváte a ověřujete uživatelská vstupní data ve webových formulářích?
Odpověď: Ke zpracování a ověřování uživatelských vstupních dat ve webových formulářích používáme techniky jako JavaScript a PHP. Na straně klienta používáme JavaScript k provádění validace dat v reálném čase přímo v prohlížeči. Na straně serveru používáme PHP ke zpracování a opětovnému ověření dat, abychom zajistili bezpečnost a spolehlivost.
15. Vysvětlete použití CSS preprocesorů jako SASS nebo LESS a jejich výhody při vývoji Frontendu
Odpověď: CSS preprocesory jako SASS(Syntactically Awesome Stylesheets) nebo LESS(Leaner CSS) jsou jazyky rozšíření CSS, které poskytují výkonné funkce a nástroje pro psaní CSS. Umožňují nám používat výrazy, proměnné, vnořování a mixiny k vytváření čitelnějších, udržovatelných a opakovaně použitelných CSS. Použití preprocesorů CSS pomáhá urychlit vývoj a efektivně spravovat CSS ve velkých frontendových projektech.