Hoe de front-end ontwikkelaarsvaardigheden te screenen - HTML en CSS

Gepubliceerd: Laatst bijgewerkt:
Hoe je front-end ontwikkelaarsvaardigheden kunt screenen - HTML en CSS Blog

HTML en CSS zijn twee van de meest fundamentele front-end ontwikkelaars vaardigheden. Het zal je moeite kosten een webontwikkelaar tegen te komen die niet op zijn minst een basiskennis van deze twee stokpaardjes heeft. Sommigen zijn echter van mening dat HTML en CSS niet hetzelfde respect zouden moeten krijgen als andere talen, omdat geen van beide enige interne logica vereist. Dat komt omdat HTML en CSS declaratieve talen zijn die een webbrowser instrueren webpagina's te renderen in plaats van rekencode te gebruiken.

Ondanks wat sommigen misschien denken, wordt het voor ontwikkelaars steeds waardevoller om een grondige kennis en expertise van deze twee talen te bezitten. Het verifiëren van de HTML- en CSS-vaardigheden van een ontwikkelaar is net zo belangrijk als het vaststellen van vaardigheden in talen als Java en C++. Iedereen die enigszins technisch is, zou toch een basiskennis van HTML en CSS moeten hebben. Uiteindelijk is dat alles wat je nodig hebt, toch? Niet helemaal.

HTML en CSS vormen de ruggengraat van front-end ontwikkeling, samen met JavaScript. In feite zul je ook vrij veel back-end ontwikkelaars vinden die deze talen op regelmatige basis gebruiken. Hoewel je nooit een ontwikkelaar zult vinden die alleen deze talen gebruikt, zijn HTML en CSS kritisch genoeg voor moderne softwareontwikkeling om ervoor te zorgen dat front-end ontwikkelaars in staat zijn ze doeltreffend te gebruiken. Hoewel ze eenvoudig zijn om mee te beginnen, vereisen geavanceerde toepassingen een diepgaande vaardigheid en begrip. Het is van essentieel belang om na te gaan of uw ontwikkelaar dit inzicht heeft.

Bekijk meer kwaliteiten van een software-ingenieur.

Wat zijn HTML en CSS?1. Wat zijn HTML en CSS en waar worden ze voor gebruikt?

1.1 Wat is HTML?

HTML of HyperText Markup Language is de standaard opmaaktaal voor het maken van webpagina's en webapplicaties. Markup-talen verschillen van programmeertalen in die zin dat ze geen logica uitvoeren. In plaats daarvan is HTML ontworpen om een gestructureerd document te maken met elementen zoals afbeeldingen, formulieren, lijsten, enz. Het is aan de browser om dit document te interpreteren en zo de webpagina's te maken die je uiteindelijk te zien krijgt (zoals degene die je nu aan het lezen bent).

1.2 Wat is CSS?

CSS of Cascading Style Sheets geven een standaard definitie voor hoe de verschillende elementen op de pagina moeten verschijnen. Wat bedoel ik daarmee? Stel je voor dat je wilt dat een schilder je huis schildert, dan kun je hem vertellen welke kleur je wilt voor elke afzonderlijke muur. Dit zou vergelijkbaar zijn met het geven van instructies, maar dan met HTML. Het zou een heleboel instructies voor je schilders vereisen en langer duren om te schrijven.

Maar als je zoals mij bent, wil je dat alle muren van je huis dezelfde kleur hebben. In dat geval, zou u uw schilder vertellen om elke muur in een bepaalde kleur te schilderen. Dit zou hetzelfde zijn als instructies geven met CSS. Met CSS kunt u een standaard uiterlijk van een element op uw pagina definiëren, zodat wanneer u een nieuw element maakt, al uw ontwerpstandaarden intact zullen zijn. Het vereist minder instructies en betekent dat nieuwe elementen, zoals kleuren en lettertypes, consistent zullen zijn met de rest van de pagina.

1.3 Waarvoor worden HTML en CSS gebruikt?

Samen vormen HTML en CSS de hoekstenen van het World Wide Web. Ze zijn allebei erg populair, en de basisconcepten zijn eenvoudig te leren. Samen met JavaScript zijn ze twee van de drie essentiële front-end ontwikkelaarsvaardigheden. Maar een front end ontwikkelaar moet meer dan alleen de basis concepten kennen om goed werk te leveren.

2. Wat is belangrijk voor een IT recruiter om te weten over front end developer vaardigheden HTML en CSS?2. Wat is belangrijk voor een IT recruiter om te weten over front end developer vaardigheden HTML en CSS?

2.1 Normen

Het World Wide Web Consortium (W3C) is de internationale organisatie die HTML- en CSS-normen opstelt. De nieuwste versie van HTML is echter HTML5, die de WHATWG-norm volgt (de zogenaamde HTML Living Standard) in plaats van de W3C-norm. Er is niet één versie van CSS, want sinds CSS 3 is het onderverdeeld in modules, en elke module is onafhankelijk van elkaar geversioneerd.

Bijna elke ontwikkelaar, laat staan een front-end ontwikkelaar, zou op zijn minst een basiskennis van HTML en CSS moeten hebben. Een HTML of CSS ontwikkelaar is zelden een op zichzelf staande positie. Meestal is het slechts een van de vaardigheden van een front-end of full-stack ontwikkelaar of een grafisch/web designer.

Standaarden veranderen niet zo vaak. Er komen echter regelmatig nieuwe functies bij, dus ontwikkelaars moeten op de hoogte blijven. In de afgelopen jaren is er een consistente stroom van nieuwe CSS functies en updates geweest. Zo veel zelfs dat back-end ontwikkelaars zich misschien niet eens bewust zijn van hoe krachtig de technologie is geworden.

2.2 Gereedschap

Elke browser interpreteert CSS en HTML op een iets andere manier. De ontwikkelaar moet de verschillen tussen de verschillende browsers en hun ondersteuning van verschillende HTML/CSS-versies kennen. Bovendien moeten ontwikkelaars weten welke hulpmiddelen ze kunnen gebruiken om cross-browser HTML/CSS-inhoud te maken.

Frontend ontwikkelaars die JavaScript frameworks gebruiken, werken meestal met bibliotheken die vol zitten met kant-en-klare componenten. Het maken van een productieklare applicatie vereist echter een aanpassing van de stijl voor het ontwerp van het product. Dit soort aanpassing vereist vaak geavanceerde kennis van CSS.

Om webpagina's eenvoudiger en sneller te maken, gebruiken ontwikkelaars vaak extra hulpmiddelen zoals front-end frameworks (bv. Bootstrap) of stylesheettaal (bv. LESS of SCSS).

2.3 Gebruikerservaring (UX)

UX is een vitaal onderdeel van front end ontwikkeling. Een bekwaam front end ontwikkelaar moet in staat zijn webpagina's of applicaties te bekijken vanuit het perspectief van de gebruiker. Dat betekent dat de UX holistisch moet worden geoptimaliseerd. Het voorstellen van verbeteringen aan de applicatie, zoals het verwijderen van onnodige klikken of het verbeteren van de prestaties door het optimaliseren van de laad snelheid van de pagina, zijn twee voorbeelden van optimalisatie.

Responsive Web Design (RWD) is een andere belangrijke techniek die front-end ontwikkelaars moeten overwegen voor UX. Het is de benadering die suggereert dat ontwerp en ontwikkeling moeten reageren op het gedrag en de omgeving van de gebruiker op basis van schermgrootte, platform en oriëntatie.

Ten slotte is a11y (een afkorting van de term 'toegankelijkheid') een veelbesproken stroming aan het worden binnen tech-kringen en een andere belangrijke UX-overweging. Het verwijst niet naar een specifieke norm, meting of wet die met technologie te maken heeft, maar eerder naar een verandering in de manier waarop websites worden gebouwd om rekening te houden met mensen met een handicap. Het project heeft tot doel webpagina's verteerbaarder, actueler en vergevingsgezinder te maken voor mensen met een handicap, of het nu gaat om een visuele handicap of een andere vorm van kwaal.

Front end ontwikkelaar vaardigheden

Bron: Unsplash - Safar Safarov

3. De HTML- en CSS-vaardigheden van een front-end ontwikkelaar screenen aan de hand van hun cv

De eerste hint die veel recruiters hebben over de HTML- en CSS-kennis van een front-end ontwikkelaar is wat er in het cv van de kandidaat staat. Naast eenvoudige HTML- en CSS-vaardigheden (die voor elke front-end ontwikkelaar vanzelfsprekend zouden moeten zijn), is het van vitaal belang om te zien hoe goed de kandidaat op de hoogte is van de front-end technologiestack. Hier is een verklarende woordenlijst van vaardigheden om op te letten en een opsomming van alles wat de kandidaat moet weten om u te helpen beter te begrijpen wat u in een front-end ontwikkelaar moet zoeken.

HTML en CSS woordenlijst voor technische recruiters3.1 HTML en CSS Woordenlijst voor technische recruiters

Front-end kaders Bootstrap, Stichting, Semantische UI, Zuiver, UIkit, Bulma
CSS preprocessoren Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
HTML5-kaders Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animaties Responsief ontwerp (RWD)
Toegankelijkheid A11Y
Conventies Blok Element Modifier
Gereedschap CSS modules, CSS in JS
Overige/Diversen HTML5ilerplaat

3.2 HTML-standaarden - soorten HTML

  • HTML 4 - de basisversie van HTML die in 1997 door het W3C werd aanbevolen
  • XHTML - een uitbreiding van HTML4, gewoon een striktere versie van HTML 4. Het integreerde enkele kenmerken van XML in HTML.
  • HTML5 - nieuwste versie van de HTML-standaard. De meest gebruikte.

3.3 CSS-normen

  • CSS 2 - CSS niveau 2 specificatie gepubliceerd door het W3C in 1998
  • CSS 2.1 - CSS level 2 revisie 1, fouten in CSS2 hersteld
  • CSS 3 - splitst de specificatie in verschillende secties genaamd modules, een belangrijke verandering. CSS 3 introduceerde veel nieuwe functies, zoals nieuwe selectors, nieuwe eigenschappen, wijzigingen in het box-model, en nog veel meer.

3.4 HTML- en CSS-Frameworks

HTML en CSS zijn eenvoudig te coderen, maar de complexiteit van moderne websites kan zeer tijdrovend zijn om te coderen. Gelukkig hoeven ontwikkelaars niet alles vanaf nul op te bouwen. Er zijn frameworks beschikbaar die hulp bieden met kant-en-klare componenten en een gemakkelijke manier bieden om het uiterlijk van een pagina aan te passen.

De meest populaire Frameworks om naar te zoeken zijn:

  • Bootstrap (v4)
  • Stichting (laatste versie 6)

3.5 Andere gebieden van HTML en CSS waar uw front-end ontwikkelaar van af moet weten

Hoewel CSS basics vrij eenvoudig te leren zijn, zijn er enkele gebieden van CSS die extra inspanning vereisen om efficiënt gebruikt te worden door ontwikkelaars. Deze omvatten:

  • CSS Flexbox model
  • CSS-raster
  • CSS doosmodel
  • Lay-out elementen met absolute positionering
  • Lay-out elementen met vlotters
  • CSS-animaties

HTML/CSS interview vragen en antwoorden4. HTML/CSS-interviewvragen en antwoorden

U kunt deze vragen en meer vinden hier.

4.1 HTML Interview vragen en antwoorden

Wat doet een doctype?

Doctype bepaalt naar welke versie van HTML het document verwijst.

Voor welke dingen moet u oppassen bij het ontwerpen of ontwikkelen voor meertalige sites?

Uit de antwoorden van een kandidaat op deze vraag moet blijken of hij al dan niet ervaring heeft met het bouwen van grootschalige sites uit verschillende regio's van de wereld. Antwoorden die de volgende onderwerpen omvatten, zijn een goede indicatie van een goed geïnformeerde kandidaat: ondersteuning van Unicode voor codering, links-naar-rechts vs. rechts-naar-links, automatisering van de vertaling van valuta, datums en meervoudsvorm, en parametrisering van vertaalde strings

Beschrijf het verschil tussen DevSkiller logo TalentBoost logo TalentScore logo