Jak zobrazit dovednosti front end vývojáře - HTML a CSS

Vydáno: Poslední aktualizace:

HTML a CSS jsou dvě nejzákladnější dovednosti vývojářů front-endu. Těžko narazíte na webového vývojáře, který by neměl alespoň základní znalosti těchto dvou základních dovedností. Někteří se však domnívají, že HTML a CSS by neměly být respektovány stejně jako ostatní jazyky, protože ani jeden z nich nevyžaduje žádnou vnitřní logiku. Je to proto, že HTML a CSS jsou deklarativní jazyky, které dávají webovému prohlížeči pokyn k vykreslování webových stránek, nikoliv k použití výpočetního kódu.

Navzdory tomu, co si někteří myslí, je pro vývojáře stále cennější mít hluboké znalosti a zkušenosti s těmito dvěma jazyky. Ověření znalostí HTML a CSS vývojáře je stejně důležité jako ověření znalostí jazyků, jako jsou Java a C++. Každý, kdo se alespoň okrajově zabývá technickými záležitostmi, by jistě měl mít základní znalosti jazyků HTML a CSS. To je nakonec vše, co potřebujete, že? Ne tak docela.

HTML a CSS tvoří páteř vývoje front-endu spolu s. JavaScript. Ve skutečnosti najdete také poměrně hodně back-endových vývojářů, kteří tyto jazyky běžně používají. Ačkoli nikdy nenajdete vývojáře, který by používal výhradně tyto jazyky, HTML a CSS jsou pro vývoj moderního softwaru natolik zásadní, že je třeba zajistit, aby se v nich vývojáři přední části jsou schopni je efektivně používat. Zatímco začátky s nimi jsou jednoduché, pokročilé aplikace vyžadují hluboké dovednosti a porozumění. Je nezbytné ověřit, zda váš vývojář tyto znalosti má.

Podívejte se na další vlastnosti softwarový inženýr.

Co je to HTML a CSS?1. Co je to HTML a CSS a k čemu se používají?

1.1 Co je HTML?

HTML neboli HyperText Markup Language je standardní značkovací jazyk pro vytváření webových stránek a webových aplikací. Značkovací jazyky se od programovacích jazyků liší tím, že neprovádějí žádnou logiku. Místo toho je jazyk HTML určen k vytváření strukturovaných dokumentů pomocí prvků, jako jsou obrázky, formuláře, seznamy atd. Je na prohlížeči, aby tento dokument následně interpretoval a vytvořil webové stránky, které si nakonec prohlížíte (jako například tu, kterou právě čtete).

1.2 Co je CSS?

CSS neboli kaskádové styly poskytují standardní definici toho, jak se mají jednotlivé prvky na stránce zobrazovat. Co tím myslím? Představte si, že chcete, aby vám malíř vymaloval dům, a můžete mu říct, jakou barvu chcete mít u každé jednotlivé stěny. Bylo by to podobné, jako kdybyste zadávali pokyny, pouze pomocí jazyka HTML. Vyžadovalo by to spoustu pokynů pro vaše malíře a jejich psaní by trvalo déle.

Ale pokud jste jako já, chcete, aby všechny stěny vašeho domu měly stejnou barvu. V takovém případě byste řekli malíři, aby každou stěnu vymaloval určitou barvou. To by bylo jako zadávat pokyny pomocí CSS. Pomocí CSS můžete definovat standardní vzhled prvku na stránce, takže kdykoli vytvoříte nový prvek, všechny vaše standardy návrhu zůstanou zachovány. Vyžaduje to méně pokynů a znamená to, že nové prvky, jako jsou barvy a písma, budou v souladu se zbytkem stránky.

1.3 K čemu slouží HTML a CSS?

HTML a CSS jsou společně základními kameny World Wide Webu. Oba jsou velmi populární a jejich základní koncepty jsou jednoduché na naučení. Společně s jazykem JavaScript představují dvě ze tří základních dovedností front end vývojářů. Front end vývojář však potřebuje znát více než jen základní pojmy, aby odvedl dobrou práci.

2. Co je důležité vědět o dovednostech front end vývojářů HTML a CSS pro IT náboráře?2. Co je důležité vědět o dovednostech front end vývojářů HTML a CSS pro IT náboráře?

2.1 Normy

World Wide Web Consortium (W3C) je mezinárodní organizace pro tvorbu standardů HTML a CSS. Nejnovější verzí jazyka HTML je HTML5, který se řídí standardem WHATWG (takzvaný živý standard HTML), nikoli standardem W3C. Neexistuje jediná verze CSS, protože od verze CSS 3 je rozdělena do modulů a každý modul je verzován samostatně.

Téměř každý vývojář, natož vývojář přední části, by měl mít alespoň základní znalosti HTML a CSS. Vývojář HTML nebo CSS je málokdy samostatná pozice. Většinou je to jen jedna z dovedností front end nebo full-stack vývojáře nebo grafika/webového designéra.

Normy se příliš často nemění. Pravidelně však přicházejí nové funkce, takže vývojáři musí být neustále v obraze. V posledních letech dochází k neustálému přílivu nových funkcí a aktualizací CSS. Je jich tolik, že si vývojáři back-endu možná ani neuvědomují, jak mocnou technologií se stala.

2.2 Nástroje

Každý prohlížeč interpretuje CSS a HTML trochu jiným způsobem. Vývojář by měl znát rozdíly mezi jednotlivými prohlížeči a jejich podporu různých verzí HTML/CSS. Kromě toho by vývojáři měli vědět, které nástroje mohou použít k vytváření obsahu HTML/CSS napříč prohlížeči.

Frontendoví vývojáři, kteří používají frameworky JavaScriptu, obvykle pracují s knihovnami plnými hotových komponent. Vytvoření aplikace připravené k výrobě však vyžaduje přizpůsobení stylu návrhu produktu. Tento druh přizpůsobení často vyžaduje pokročilé znalosti jazyka CSS.

Pro usnadnění a zrychlení webových stránek vývojáři často používají další nástroje, jako jsou front end frameworky (např. Bootstrap) nebo jazyk pro tvorbu stylů (např. LESS nebo SCSS).

2.3 Uživatelská zkušenost (UX)

UX je důležitou součástí vývoj přední části. A kompetentní front end developer by měl mít schopnost zobrazit webové stránky nebo aplikace z pohledu uživatele. To znamená optimalizovat UX komplexně. Navrhování vylepšení aplikace, jako je odstranění zbytečných kliknutí nebo zlepšení výkonu optimalizací rychlosti načítání stránek, jsou dva příklady optimalizace.

Další důležitou technikou, kterou musí vývojáři přední části webu zvážit pro UX, je responzivní webový design (RWD). Jedná se o přístup, který předpokládá, že design a vývoj by měly reagovat na chování uživatele a jeho prostředí v závislosti na velikosti obrazovky, platformě a orientaci.

A konečně, a11y (což je zkratka termínu "přístupnost") se stává hojně diskutovaným hnutím v technologických kruzích a dalším důležitým aspektem UX. Nejedná se o konkrétní normu, měření nebo zákon, který by souvisel s technologiemi, ale spíše o změnu způsobu tvorby webových stránek s ohledem na osoby se zdravotním postižením. Cílem projektu je, aby webové stránky byly stravitelnější, aktuálnější a shovívavější pro osoby se zdravotním postižením, ať už se jedná o zrakové postižení nebo jinou formu neduhu.

Dovednosti front end vývojáře

Zdroj: Unsplash - Safar Safarov

3. Prověření dovedností front end vývojáře v oblasti HTML a CSS pomocí jeho životopisu.

Mnoho náborářů si jako první udělá obrázek o znalostech HTML a CSS u front end vývojáře podle toho, co je napsáno v jeho životopise. Kromě jednoduchých znalostí HTML a CSS (které by měly být samozřejmostí pro každého front end vývojáře) je důležité zjistit, jak je kandidát znalý a aktuální v oblasti front end technologií. Zde je slovníček dovedností, na které je třeba si dát pozor, a přehled všeho, co by měl kandidát znát, abyste lépe pochopili, co hledat u front end vývojáře.

Slovník HTML a CSS pro technické náboráře3.1 Slovník HTML a CSS pro technické pracovníky

Front-endové rámce Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
Předprocesory CSS Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
Rámce HTML5 Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animace Responzivní webový design (RWD)
Přístupnost A11Y
Konvence Modifikátor blokového prvku
Nástroje Moduly CSS, CSS v JS
Ostatní/různé Kotlík HTML5

3.2 Standardy HTML - typy HTML

  • HTML 4 - základní verze jazyka HTML doporučená konsorciem W3C v roce 1997.
  • XHTML - rozšíření jazyka HTML4, jen jeho přísnější verze. Do jazyka HTML byly začleněny některé vlastnosti jazyka XML.
  • HTML5 - nejnovější verze standardu HTML. Nejpoužívanější.

3.3 Standardy CSS

  • CSS 2 - specifikace CSS 2. úrovně zveřejněná konsorciem W3C v roce 1998.
  • CSS 2.1 - CSS úroveň 2 revize 1, opravené chyby v CSS2
  • CSS 3 - rozděluje specifikaci na různé části nazývané moduly, což je zásadní změna. CSS 3 zavedlo mnoho nových funkcí, jako jsou nové selektory, nové vlastnosti, změny box modelu a mnoho dalšího.

3.4 Rámce HTML a CSS

Základní kódy HTML a CSS se kódují snadno, ale úroveň složitosti moderních webových stránek může být časově velmi náročná. Naštěstí vývojáři nemusí vytvářet vše od nuly. K dispozici jsou rámce, které nabízejí pomoc s hotovými komponentami a poskytují snadný způsob, jak přizpůsobit vzhled stránky.

Mezi nejoblíbenější frameworky patří:

  • Bootstrap (v4)
  • Foundation (nejnovější verze 6)

3.5 Další oblasti HTML a CSS, které by měl vývojář front-endu znát

Základy jazyka CSS se dají poměrně snadno naučit, ale existují oblasti jazyka CSS, které vyžadují zvýšené úsilí, aby je vývojáři mohli efektivně používat. Patří mezi ně:

  • Model CSS Flexbox
  • Mřížka CSS
  • Model CSS Box
  • Prvky rozvržení s absolutním pozicováním
  • Prvky rozvržení s plovoucími prvky
  • Animace CSS

Otázky a odpovědi k pohovorům o HTML/CSS4. Otázky a odpovědi k pohovorům o HTML/CSS

Tyto a další otázky najdete zde.

4.1 Otázky a odpovědi v rozhovoru o HTML

K čemu slouží doctype?

Doctype určuje, ke které verzi jazyka HTML se dokument vztahuje.

Na co byste si měli dát pozor při navrhování nebo vývoji vícejazyčných webů?

Odpovědi uchazeče na tuto otázku by měly ukázat, zda má zkušenosti se stavbou rozsáhlých památek z různých oblastí světa. Odpovědi, které zahrnují následující témata, jsou dobrou známkou informovaného kandidáta: podpora kódování Unicode, překlad zleva doprava vs. zprava doleva, automatizace překladu měn, dat a množného čísla a parametrizace překládaných řetězců.

Popište rozdíl mezi , a .

Odpovědi na tuto otázku souvisejí se znalostmi kandidáta o tom, jak se JavaScript spouští v rámci webové aplikace. Obvykle se skripty provádějí postupně, a jsou techniky pro načítání skriptů v jiném pořadí.

Proč je obecně dobré umístit CSS <link href="">mezi <head></head> a JS <script>s just before </body>? Do you know any exceptions?</script>

Odpovědi na tuto otázku prokazují vysokou úroveň porozumění struktuře dokumentu HTML. Odkazy CSS v rámci <head> zajistí, že veškerý obsah na stránce bude správně strukturovaný již od samého začátku vykreslování (žádné dočasné záblesky obsahu). Na druhou stranu, načítání JS ze spodní části stránky <body> vyzve prohlížeč ke spuštění JS po zobrazení obsahu.

Co je progresivní vykreslování?

Odpovědi prokazují, že uchazeč věnuje pozornost výkonnosti svých stránek. Progresivní vykreslování je technika pro rychlejší načítání zobrazených částí stránek.

4.2 Otázky a odpovědi při pohovorech s CSS

Co je specifičnost selektorů CSS a jak funguje?

Cílem této otázky je zjistit, zda měl uchazeč možnost vytvářet a/nebo spravovat velké webové stránky, kde mohl být zodpovědný za několik stylů (potenciálně konfliktních). Pokud je na určitý blok aplikováno mnoho konfliktních souborů stylů, musí CSS určit, který je důležitější.

Jaký je rozdíl mezi "resetováním" a "normalizací" CSS? Co byste si vybrali a proč?

Odpovědi prokáží, zda má kandidát zkušenosti s odstraňováním rozdílů mezi prohlížeči. Obnovení je odstranění výchozích stylů a normalizace je sjednocení výsledků.

Popište plováky a jejich fungování.

Odpovědi určují základní aspekty CSS. Floaty určují, jak umístit prvek do kontejneru.

Popište BFC (Block Formatting Context) a jeho fungování.

Odpověď určuje, zda uchazeč chápe, jak bloky strukturují stránku a jak se mohou vzájemně přizpůsobovat.

Jaké jsou různé techniky zúčtování a která je vhodná pro jaký kontext?

Odpovědi na tuto otázku prokazují základní znalosti jazyka CSS. Tři nejběžnější techniky jsou: "clear: both", vlastnost overflow a pseudoselektor ":after".

Jak byste řešili problémy se stylem specifickým pro daný prohlížeč?

Odpovědi na tuto otázku by se měly týkat toho, zda uchazeč rozumí tomu, jak zaručit konzistentní vzhled pro uživatele na mnoha různých zařízeních. Příkladem řešení by mohl být soubor normalize.css.

Jak servírujete stránky pro prohlížeče s omezenými funkcemi?

Odpovědi prokáží, že si kandidáti uvědomují, že někteří uživatelé mohou používat starší verze prohlížečů a že funkce CSS v kódové základně nemusí být podporovány. To je důležité zejména při vytváření rozsáhlých stránek, jako jsou stránky pro publikování zpráv.

Jaké techniky/procesy používáte?

Plynulá degradace - poskytuje náhradní řešení pro chybějící funkci prohlížeče, takže pokud něco není podporováno, je zajištěno podobné UX, jaké je možné.

Progresivní vylepšování - zaměřuje se na poskytování funkcí základním uživatelům a přidávání nových funkcí pouze tehdy, když je prohlížeč podporuje.

Jaké jsou různé způsoby vizuálního skrytí obsahu (a jeho zpřístupnění pouze pro čtečky obrazovky)?

Odpovědi na tuto otázku ověřují, zda má uchazeč zkušenosti se zajištěním přístupnosti webových stránek (a11y), tj. se zajištěním rovného UX pro osoby se zdravotním postižením. Tento konkrétní scénář by měl nastat tam, kde je obsah vizuálně zřejmý pro vidící uživatele a kde jsou k dispozici záložní informace pro čtečky obrazovky, které poskytují informace.

Technická prověrka dovedností vývojáře front endů HTML a CSS pomocí online testu.5. Technická prověrka dovedností vývojáře front endů HTML a CSS pomocí online testu.

Vývojáři přední části jsou tu proto, aby vytvářeli přední část webových stránek a aplikací. Je sice důležité zjistit, zda vývojář zná základní koncepty, ale ještě důležitější je vědět, zda je dokáže použít při skutečné práci. To lze provést buď pomocí test kódování nebo rozhovor o programování, ale ne všechny platformy pro tyto testy jsou stejné.

5.1 Které testy kódování HTML a CSS byste měli zvolit pro testování dovedností vývojáře front-endu?

Při hledání správného online testu kódování HTML a CSS byste se měli ujistit, že splňuje následující kritéria:

  • Test by měl odrážet skutečnou práci s jazykem HTML a CSS ve skutečných projektech front-endu.
  • Časová nenáročnost - maximálně jedna až dvě hodiny.
  • Odesílá se automaticky a lze jej vzít kamkoli, abyste vy a váš kandidát mohli být flexibilní.
  • Kromě kontroly vykreslování stránky se zaměřte také na efektivitu kódu a na to, jak dobře se vykresluje na různých platformách.
  • Přibližte se co nejvíce přirozenému vývojovému prostředí front-endu a umožněte kandidátovi přístup k takovým zdrojům, které běžně používá v práci.
  • Poskytněte uchazečům přístup ke všem knihovnám, frameworkům a dalším nástrojům, které obvykle používají, včetně těch, které jsou pro práci nejdůležitější.
  • Přizpůsobení schopností uchazeče příslušnému testu.

Online testy kódování HTML a CSS DevSkiller připravené k použití pro hodnocení dovedností vývojářů front-endu.6. Online testy kódování HTML a CSS DevSkiller připravené k použití pro posouzení dovedností vývojářů front-endu.

Metodika RealLifeTestingTM společnosti DevSkiller je vytvořena tak, aby testovala vývojáře, jako by již byli v práci. Vývojáři nedostávají jednostránkové testy, aby dosáhli předem stanoveného výsledku. Ve společnosti DevSkiller jsou vývojáři front-endu testováni na plnohodnotných projektech s více soubory, které vyvíjejí, aby předvedli plný rozsah svých dovedností. Zde je několik předpřipravených testů, které zahrnují HTML a CSS.

TypeScript
JUNIOR
Testované dovednosti
Doba trvání
51 maximálně minut.
Hodnocení
Automatické
Přehled testů

Otázky s výběrem odpovědí

hodnocení znalostí Typescript

Mezery v kódu

hodnocení znalostí JavaScript, Reagovat

Otázky s výběrem odpovědí

hodnocení znalostí HTML, CSS

Úloha programování - Úroveň: Snadné

TypeScript | React Hooks | Movies State Management - Kompletní aplikace pro správu filmů pomocí React Hooks implementací správy stavu do stávajících pohledů.

.NET
SENIOR
Testované dovednosti
Doba trvání
49 maximálně minut.
Hodnocení
Automatické
Přehled testů

Otázky s výběrem odpovědí

hodnocení znalostí .NET, C#, Vzory zpráv, WCF, Webové aplikace a webové služby, Windows Communication Foundation, Metadata

Mezery v kódu

hodnocení znalostí HTML, HTML5, CSS

Programování - Úroveň: těžká

.NET | Služba WCF pro dešifrování RSA - Dokončení implementace rozhraní WCF, které umí dešifrovat a ověřovat data zašifrovaná pomocí RSA.

JavaScript
STŘEDNÍ
Testované dovednosti
Doba trvání
62 maximálně minut.
Hodnocení
Automatické
Přehled testů

Otázky s výběrem odpovědí

hodnocení znalostí JavaScript, Redux

Mezery v kódu

hodnocení znalostí HTML, HTML5, CSS

Úloha programování - Úroveň: - Střední úroveň

JavaScript | Redux Selektory | Školení HR oddělení - Implementujte správně reduktory a selektory reduxu.

JavaScript
SENIOR
Testované dovednosti
Doba trvání
85 maximálně minut.
Hodnocení
Automatické
Přehled testů

Programování - Úroveň: těžká

HTML/CSS | Domovská stránka - Doplňte definice vlastností CSS, aby se před zobrazením domovské stránky zobrazil příslušný načítací panel.

Programování - Úroveň: těžká

JavaScript | Funkční memoizace - Napište dvě verze obecného memoizačního mechanismu.

Vue.js
JUNIOR
Testované dovednosti
Doba trvání
65 maximálně minut.
Hodnocení
Automatické
Přehled testů

Otázky s výběrem odpovědí

hodnocení znalostí JavaScript, HTML, CSS

Úloha programování - Úroveň: Snadné

JavaScript | Vue.js | Poznámky ke kalendáři - Implementujte aplikaci, pomocí které může uživatel přidat poznámku k datu, které si vybere z kalendáře.

JavaScript
SENIOR
Testované dovednosti
Doba trvání
57 maximálně minut.
Hodnocení
Automatické
Přehled testů

Otázky s výběrem odpovědí

hodnocení znalostí ES6, JavaScript, HTML, CSS, Přístupnost

Programování - Úroveň: těžká

JavaScript | Funkční memoizace - Napište dvě verze obecného memoizačního mechanismu.

PHP
STŘEDNÍ
Testované dovednosti
Doba trvání
60 maximálně minut.
Hodnocení
Automatické
Přehled testů

Mezery v kódu

hodnocení znalostí SQL

Otázky s výběrem odpovědí

hodnocení znalostí ES6, JavaScript, CSS, HTML, WCAG 2.0, Přístupnost webu

Úloha programování - Úroveň: - Střední úroveň

PHP | Úložiště kategorií - Implementujte dotazy PDO, které uživatelům vrátí platné výsledky o filmech.

HTML
SENIOR
Testované dovednosti
Doba trvání
133 maximálně minut.
Hodnocení
Automatické
Přehled testů

Otázky s výběrem odpovědí

hodnocení znalostí AJAX, JavaScript, Vývoj webových stránek, ES6, Typescript, CSS, HTML

Programování - Úroveň: těžká

JavaScript | Social Media Queries | Find friends by name - Implementujte funkci pro vyhledání přátel uživatele podle jeho jména.

Programování - Úroveň: těžká

CSS/HTML - Navigační lišta Flexbox - Kompletní definice CSS a použití Flexboxu k rozvržení komponent.

Sdílet příspěvek

Další informace o najímání zaměstnanců v oblasti technologií

Přihlaste se k odběru našeho vzdělávacího centra a dostávejte užitečné informace přímo do své e-mailové schránky.

Bezproblémové ověřování a rozvíjení dovedností v oblasti kódování.

Podívejte se na produkty DevSkiller v akci.

Bezpečnostní certifikace a shoda s předpisy. Zajistíme, aby vaše data byla v bezpečí.

Logo DevSkiller Logo TalentBoost Logo TalentScore