Sådan screenes front end-udviklerfærdigheder - HTML og CSS

Udgivet: Sidst opdateret:

HTML og CSS er to af de mest grundlæggende færdigheder for front-end-udviklere. Det er svært at finde en webudvikler, som ikke har mindst en grundlæggende forståelse af de to grundpiller. Nogle mener dog, at HTML og CSS ikke bør have samme respekt som andre sprog, fordi ingen af dem kræver nogen intern logik. Det skyldes, at HTML og CSS er deklarative sprog, som instruerer en webbrowser i at gengive websider i stedet for at bruge beregningskode.

På trods af hvad nogle måske tror, bliver det mere og mere værdifuldt for udviklere at have indgående viden og ekspertise i disse to sprog. Det er lige så vigtigt at kontrollere en udviklers HTML- og CSS-færdigheder som at kontrollere færdigheder i sprog som Java og C++. Enhver, der er nogenlunde teknisk interesseret, bør have en grundlæggende forståelse af HTML og CSS. I sidste ende er det alt, hvad man behøver, ikke sandt? Ikke helt.

HTML og CSS udgør rygraden i frontend-udviklingen sammen med JavaScript. Faktisk finder du også en hel del backend-udviklere, der bruger disse sprog regelmæssigt. Selv om du aldrig vil finde en udvikler, der udelukkende bruger disse sprog, er HTML og CSS vigtige nok for moderne softwareudvikling til at sikre, at front end-udviklere er i stand til at bruge dem effektivt. Selv om de er enkle at komme i gang med, kræver avancerede applikationer dybdegående færdigheder og forståelse. Det er vigtigt at verificere, at din udvikler har denne forståelse.

Se flere kvaliteter ved en softwareingeniør.

Hvad er HTML og CSS?1. Hvad er HTML og CSS, og hvad bruges de til?

1.1 Hvad er HTML?

HTML eller HyperText Markup Language er standardsproget til oprettelse af websider og webapplikationer. Markup-sprog adskiller sig fra programmeringssprog ved at de ikke udfører nogen logik. HTML er i stedet designet til at skabe et struktureret dokument ved hjælp af elementer som billeder, formularer, lister osv. Det er op til browseren at fortolke dette dokument for at skabe de websider, som du ender med at se (som den, du læser lige nu).

1.2 Hvad er CSS?

CSS eller Cascading Style Sheets giver en standarddefinition af, hvordan de forskellige elementer skal se ud på siden. Hvad mener jeg med det? Forestil dig, at du vil have en maler til at male dit hus, så kan du fortælle ham, hvilken farve du ønsker for hver enkelt væg. Dette ville svare til at give dine instruktioner, blot ved hjælp af HTML. Det ville kræve en masse instruktioner til dine malere og ville tage længere tid at skrive.

Men hvis du er som mig, vil du gerne have alle væggene i dit hus i samme farve. I så fald beder du din maler om at male alle vægge i en bestemt farve. Det ville være som at give instruktioner ved hjælp af CSS. Med CSS kan du definere et standardudseende for et element på din side, så når du opretter et nyt element, vil alle dine designstandarder være intakte. Det kræver færre instruktioner og betyder, at nye elementer, som f.eks. farver og skrifttyper, vil være i overensstemmelse med resten af siden.

1.3 Hvad bruges HTML og CSS til?

Sammen er HTML og CSS hjørnestenene i World Wide Web. De er begge meget populære, og de grundlæggende begreber er lette at lære. Sammen med JavaScript er de to af de tre essentielle færdigheder for front-end-udviklere. Men en frontend-udvikler skal kende mere end blot de grundlæggende koncepter for at kunne udføre et godt stykke arbejde.

2. Hvad er vigtigt for en it-rekrutteringskonsulent at vide om front end-udviklerkompetencer HTML og CSS?2. Hvad er vigtigt for en it-rekrutteringskonsulent at vide om front end-udviklerkompetencer HTML og CSS?

2.1 Standarder

World Wide Web Consortium (W3C) er den internationale standardiseringsorganisation, der udarbejder HTML- og CSS-standarder. Den seneste version af HTML er dog HTML5, som følger WHATWG-standarden (den såkaldte HTML Living Standard) i stedet for W3C-standarden. Der findes ikke en enkelt version af CSS, for siden CSS 3 er den opdelt i moduler, og hvert modul versioneres uafhængigt af hinanden.

Næsten alle udviklere, for slet ikke at tale om front-end-udviklere, bør som minimum have en grundlæggende forståelse af HTML og CSS. En HTML- eller CSS-udvikler er sjældent en selvstændig stilling. Oftest er det blot en af de færdigheder, som en front-end- eller full-stack-udvikler eller en grafiker/webdesigner har.

Standarderne ændres ikke særlig ofte. Der kommer dog jævnligt nye funktioner til, så udviklerne skal holde sig ajour. I de seneste år har der været en konstant strøm af nye CSS-funktioner og opdateringer. Så meget, at backend-udviklere måske ikke engang er klar over, hvor kraftfuld teknologien er blevet.

2.2 Værktøjer

Hver browser fortolker CSS og HTML på en lidt forskellig måde. Udvikleren bør kende forskellene mellem de forskellige browsere og deres understøttelse af forskellige HTML/CSS-versioner. Desuden bør udviklere vide, hvilke værktøjer de kan bruge til at skabe HTML/CSS-indhold på tværs af browsere.

Frontend-udviklere, der bruger JavaScript-rammer, arbejder normalt med biblioteker, der er fulde af færdige komponenter til brug. Men for at skabe en produktionsklar applikation kræves der en tilpasning af stilen til produktets design. Denne form for tilpasning kræver ofte avanceret viden om CSS.

For at gøre websiderne lettere og hurtigere bruger udviklere ofte ekstra værktøjer som front-end frameworks (f.eks. Bootstrap) eller stilarksprog (f.eks. LESS eller SCSS).

2.3 Brugeroplevelse (UX)

UX er en vigtig del af udvikling af frontend. En kompetent front end-udvikler bør have evnen til at se websider eller applikationer fra brugerens perspektiv. Det betyder, at UX skal optimeres holistisk. Forslag til forbedringer af applikationen, som f.eks. fjernelse af unødvendige klik eller forbedring af ydeevnen ved at optimere sidens indlæsningshastighed, er to eksempler på optimering.

Responsive Web Design (RWD) er en anden vigtig teknik, som front-end-udviklere skal overveje for UX. Det er en tilgang, der foreslår, at design og udvikling skal reagere på brugerens adfærd og miljø baseret på skærmstørrelse, platform og orientering.

Endelig er a11y (som er en forkortelse af begrebet "tilgængelighed") ved at blive en meget omdiskuteret bevægelse inden for teknologikredse og en anden vigtig UX-overvejelse. Det henviser ikke til en specifik standard, måling eller lov, der har med teknologi at gøre, men snarere til en ændring i den måde, hvorpå websteder bygges, så der tages hensyn til handicappede. Projektet har til formål at gøre websider mere letfordøjelige, opdaterede og tilgivelige for dem, der har handicap, hvad enten det drejer sig om synshandicap eller en anden form for lidelse.

Færdigheder som front end-udvikler

Kilde: Kilde: Unsplash - Safar Safarov

3. Screening af en front end-udviklers HTML- og CSS-færdigheder ved hjælp af deres cv

Det første hint, som mange rekrutteringsfolk får om en front-end udviklers HTML- og CSS-viden, er det, der står i kandidatens CV. Ud over simple HTML- og CSS-færdigheder (som burde være en selvfølge for enhver front-end udvikler) er det vigtigt at se, hvor vidende og opdateret kandidaten er med front-end teknologistakken. Her er en ordliste over de færdigheder, du skal holde øje med, og en oversigt over alt det, din kandidat bør vide, så du bedre kan forstå, hvad du skal kigge efter hos en front-end udvikler.

HTML- og CSS-ordliste for tekniske rekrutteringsfolk3.1 HTML- og CSS-ordliste for tekniske rekrutteringsfolk

Front-end-rammer Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
CSS-præprocessorer Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
HTML5-rammer Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animationer Responsivt webdesign (RWD)
Tilgængelighed A11Y
Konventioner Blokelement-modifikator
Værktøj CSS-moduler, CSS i JS
Andet/Diverse HTML5 Boilerplate

3.2 HTML-standarder - typer af HTML

  • HTML 4 - den grundlæggende version af HTML, der blev anbefalet af W3C i 1997
  • XHTML - en udvidelse af HTML4, blot en strengere version af HTML 4. Den inkorporerede nogle funktioner fra XML i HTML.
  • HTML5 - den nyeste version af HTML-standarden. Den mest udbredte.

3.3 CSS-standarder

  • CSS 2 - CSS level 2-specifikation offentliggjort af W3C i 1998
  • CSS 2.1 - CSS niveau 2 revision 1, rettet fejl i CSS2
  • CSS 3 - opdeler specifikationen i forskellige sektioner kaldet moduler, hvilket er en stor ændring. CSS 3 introducerede mange nye funktioner som nye selektorer, nye egenskaber, ændringer i boksmodellen og meget mere.

3.4 HTML- og CSS-rammer

Grundlæggende HTML og CSS er let at kode, men kompleksiteten af moderne websteder kan være meget tidskrævende at kode. Heldigvis er det ikke nødvendigt for udviklere at skabe alt fra bunden. Der findes frameworks, som tilbyder hjælp med færdige komponenter og giver en nem måde at tilpasse en sides udseende på.

De mest populære frameworks, du skal kigge efter, er:

  • Bootstrap (v4)
  • Foundation (seneste version 6)

3.5 Andre områder af HTML og CSS, som din front-end-udvikler bør kende til

Selv om CSS-grundprincipperne er ret nemme at lære, er der nogle områder af CSS, som kræver en ekstra indsats for at blive brugt effektivt af udviklere. Disse omfatter:

  • CSS Flexbox-model
  • CSS-gitter
  • CSS Box-model
  • Layoutelementer med absolut positionering
  • Layoutelementer med flydere
  • CSS-animationer

Spørgsmål og svar til interview om HTML/CSS4. Spørgsmål og svar til HTML/CSS-interview

Du kan finde disse spørgsmål og flere andre her.

4.1 HTML-interviewspørgsmål og -svar

Hvad gør en doktype?

Doctype bestemmer, hvilken version af HTML dokumentet henviser til.

Hvilke ting skal du være på vagt over for, når du designer eller udvikler til flersprogede websteder?

Kandidaternes svar på dette spørgsmål skal vise, om de har erfaring med at bygge store byggepladser fra forskellige regioner i verden. Svar, der omfatter følgende emner, er en god indikation af en velinformeret kandidat: understøttelse af Unicode til kodning, venstre mod højre vs. højre mod venstre, automatisering af oversættelse af valutaer, datoer og flertalsform samt parametrisering af oversatte strenge.

Beskriv forskellen mellem , og .

Svarene på dette spørgsmål er relateret til kandidatens viden om, hvordan JavaScript udføres i en webapplikation. Typisk udføres scripts sekventielt, og er teknikker til at indlæse scripts i en anden rækkefølge.

Why is it generally a good idea to position CSS <link href="">s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?</script>

Answers to this question demonstrate a high-level of understanding of HTML document structure. CSS links within <head> will make sure that any content within the page will be correctly structured from the very beginning of rendering (no temporary flashes of content). On the other hand, loading JS from the bottom of <body> will prompt the browser to execute JS after the content has been displayed.

Hvad er progressiv gengivelse?

Svarene skal vise, at ansøgeren er opmærksom på, hvordan deres anlæg fungerer. Progressive rendering er en teknik, der gør det muligt at indlæse de viste dele af sider hurtigere.

4.2 CSS-interviewspørgsmål og -svar

Hvad er CSS-selektivitet, og hvordan virker det?

Dette spørgsmål er designet til at fortælle, om en kandidat har haft mulighed for at bygge og/eller vedligeholde store websteder, hvor han/hun kan have været ansvarlig for flere stylesheets (potentielt modstridende). Hvis der er mange modstridende stylesheets, der anvendes på en bestemt blok, skal CSS afgøre, hvilket der er det vigtigste.

Hvad er forskellen mellem "nulstilling" og "normalisering" af CSS? Hvad ville du vælge, og hvorfor?

Svarene skal vise, om kandidaten har erfaring med at fjerne forskelle mellem browsere. Nulstilling er at fjerne standardstilarter, og normalisering er at ensrette resultaterne.

Beskriv flydere, og hvordan de fungerer.

Svarene afgør grundlæggende aspekter af CSS. Floats bestemmer, hvordan et element skal placeres i en container.

Beskrive BFC (Block Formatting Context) og hvordan det fungerer.

Svaret afgør, om kandidaten forstår, hvordan blokke strukturerer siden, og hvordan de kan tilpasses hinanden.

Hvad er de forskellige clearingteknikker, og hvilke er hensigtsmæssige i hvilken sammenhæng?

Svarene på dette spørgsmål viser grundlæggende kendskab til CSS. De 3 mest almindelige teknikker er: "clear: both", overflow-egenskaben og pseudo-selektoren ":after".

Hvordan vil du løse browser-specifikke stilproblemer?

Svarene på dette spørgsmål bør vedrøre, om kandidaten forstår, hvordan man sikrer et ensartet udseende og en ensartet følelse for brugerne på tværs af mange forskellige enheder. Et eksempel på en løsning kunne være normalize.css.

Hvordan serverer du dine sider for browsere med begrænsede funktioner?

Svarene skal vise, at kandidaterne er opmærksomme på, at nogle brugere måske bruger ældre versioner af browsere, og at CSS-funktionerne i kodebasen måske ikke er understøttet. Dette er af særlig betydning, når der skal oprettes store websteder som f.eks. nyhedsudgivelseswebsteder.

Hvilke teknikker/processer bruger du?

Graceful degradation - giver en fallback for en manglende browserfunktion, så hvis noget ikke er understøttet, leveres en lignende UX som muligt.

Progressiv forbedring - fokuserer på at levere funktioner til basisbrugere og kun tilføje nye funktioner, når en browser understøtter dem.

Hvad er de forskellige måder at skjule indhold visuelt på (og gøre det tilgængeligt kun for skærmlæsere)?

Svarene på dette spørgsmål tjekker, om kandidaten har erfaring med tilgængelighed til websteder (a11y), dvs. med at sikre en ligeværdig UX for handicappede. Dette særlige scenarie bør forekomme, hvor indholdet er visuelt synligt for seende brugere, og hvor der findes fallback-informationer til skærmlæsere, som kan give oplysninger.

Teknisk screening af HTML- og CSS-front-end-udviklerfærdigheder ved hjælp af en online-test5. Teknisk screening af HTML- og CSS-udviklerens færdigheder som front-end-udvikler ved hjælp af en online-test

Front-end-udviklere er til for at bygge forsiden af websider og apps. Selv om det er vigtigt at se, om en udvikler er klar over de væsentlige begreber, er det vigtigere at vide, om han/hun kan anvende dem i det konkrete arbejde. Dette kan gøres med enten en kodningstest eller programmering interview, men ikke alle platforme til disse tests er lige gode.

5.1 Hvilke HTML- og CSS-kodningstests skal du vælge for at teste front end-udviklerens færdigheder?

Når du leder efter den rigtige HTML- og CSS-kodningstest online, skal du sikre dig, at de opfylder følgende kriterier:

  • Prøven skal afspejle det reelle arbejde, der udføres med HTML og CSS i faktiske front-end-projekter.
  • Tidseffektivt - højst en eller to timer.
  • Sendes automatisk og kan tages med overalt for at give dig og din kandidat fleksibilitet.
  • Gå videre end til at kontrollere, om koden gengiver en side, men kontroller også kodens effektivitet, og hvor godt den vises på tværs af flere platforme.
  • Vær så tæt på det naturlige front-end udviklingsmiljø som muligt, og lad kandidaten få adgang til de ressourcer, som han/hun normalt ville have adgang til på arbejdspladsen.
  • Giv kandidaterne adgang til alle de biblioteker, frameworks og andre værktøjer, som de normalt vil bruge, herunder dem, der er vigtigst for jobbet
  • Match kandidatens evner med den relevante test

DevSkiller klar til brug online HTML- og CSS-kodningstests til at vurdere front-end-udviklerens færdigheder6. DevSkiller klar til brug online HTML- og CSS-kodningstests til vurdering af front-end-udviklerens færdigheder

DevSkillers RealLifeTestingTM-metode er udviklet til at teste udviklere, som om de allerede var på jobbet. Udviklerne får ikke test af en enkelt side for at nå et forudbestemt resultat. Hos DevSkiller testes frontend-udviklere med komplette projekter med flere filer, som de udvikler for at vise det fulde omfang af deres færdigheder. Her er nogle færdiglavede tests, der omfatter HTML og CSS.

TypeScript
JUNIOR
Testede færdigheder
Varighed
51 minutter max.
Evaluering
Automatisk
Testoversigt

Spørgsmål efter valg

vurdering af viden om Typeskrift

Huller i koden

vurdering af viden om JavaScript, React

Spørgsmål efter valg

vurdering af viden om HTML, CSS

Programmeringsopgave - Niveau:

TypeScript | React Hooks | Movies State Management - Komplet program til administration af film ved hjælp af React Hooks ved at implementere state management i eksisterende visninger.

.NET
SENIOR
Testede færdigheder
Varighed
49 minutter max.
Evaluering
Automatisk
Testoversigt

Spørgsmål efter valg

vurdering af viden om .NET, C#, Meddelelsesmønstre, WCF, Webapplikationer og webtjenester, Windows Communication Foundation, Metadata

Huller i koden

vurdering af viden om HTML, HTML5, CSS

Programmeringsopgave - Niveau: svær

.NET | RSA Decryption WCF Service - Færdig implementering af WCF-grænsefladen, som kan dekryptere og verificere data, der er krypteret med RSA.

JavaScript
MIDDLE
Testede færdigheder
Varighed
62 minutter max.
Evaluering
Automatisk
Testoversigt

Spørgsmål efter valg

vurdering af viden om JavaScript, Redux

Huller i koden

vurdering af viden om HTML, HTML5, CSS

Programmeringsopgave - Niveau: Medium

JavaScript | Redux Selectors | HR Department Training - Implementer redux redux reducers og selectors korrekt.

JavaScript
SENIOR
Testede færdigheder
Varighed
85 minutter max.
Evaluering
Automatisk
Testoversigt

Programmeringsopgave - Niveau: svær

HTML/CSS | Hjemmeside - Udfyld CSS-egenskabsdefinitioner, så siden viser den relevante splash-loader-skærm, før den viser hjemmesiden.

Programmeringsopgave - Niveau: svær

JavaScript | Funktionel memoisering - Skriv de to versioner af den generiske memoiseringsmekanisme.

Vue.js
JUNIOR
Testede færdigheder
Varighed
65 minutter max.
Evaluering
Automatisk
Testoversigt

Spørgsmål efter valg

vurdering af viden om JavaScript, HTML, CSS

Programmeringsopgave - Niveau:

JavaScript | Vue.js | Kalendernoter - Implementer en applikation, hvor brugeren kan tilføje en note til en dato, som han/hun vælger fra en kalender.

JavaScript
SENIOR
Testede færdigheder
Varighed
57 minutter max.
Evaluering
Automatisk
Testoversigt

Spørgsmål efter valg

vurdering af viden om ES6, JavaScript, HTML, CSS, Tilgængelighed

Programmeringsopgave - Niveau: svær

JavaScript | Funktionel memoisering - Skriv de to versioner af den generiske memoiseringsmekanisme.

PHP
MIDDLE
Testede færdigheder
Varighed
60 minutter max.
Evaluering
Automatisk
Testoversigt

Huller i koden

vurdering af viden om SQL

Spørgsmål efter valg

vurdering af viden om ES6, JavaScript, CSS, HTML, WCAG 2.0, Tilgængelighed på nettet

Programmeringsopgave - Niveau: Medium

PHP | Categories Repository - Implementer PDO-forespørgsler, der returnerer gyldige resultater om film til brugerne.

HTML
SENIOR
Testede færdigheder
Varighed
133 minutter max.
Evaluering
Automatisk
Testoversigt

Spørgsmål efter valg

vurdering af viden om AJAX, JavaScript, Webudvikling, ES6, Typeskrift, CSS, HTML

Programmeringsopgave - Niveau: svær

JavaScript | Social Media Queries | Find venner efter navn - Implementer en funktion til at finde brugerens venner efter deres navn.

Programmeringsopgave - Niveau: svær

CSS/HTML - Flexbox-navigationslinje - Komplet CSS-definition og brug af Flexbox til layout af komponenter.

Del indlæg

Få mere at vide om ansættelse af teknologiske medarbejdere

Tilmeld dig vores Learning Hub for at få nyttig viden direkte i din indbakke.

Kontroller og udvikl kodningsevner uden problemer.

Se DevSkiller-produkterne i aktion.

Sikkerhedscertificeringer og overholdelse. Vi sørger for, at dine data er sikre og beskyttede.

DevSkiller-logo TalentBoost-logo TalentScore-logo