Hur man granskar färdigheter för front-end-utvecklare - HTML och CSS

Publicerad: Senast uppdaterad:

HTML och CSS är två av de mest grundläggande färdigheterna för front-end-utvecklare. Det är svårt att hitta en webbutvecklare som inte har åtminstone en grundläggande förståelse för dessa två grundstenar. Vissa anser dock att HTML och CSS inte bör ges samma respekt som andra språk eftersom inget av dem kräver någon intern logik. Detta beror på att HTML och CSS är deklarativa språk som instruerar en webbläsare att återge webbsidor i stället för att använda beräkningskod.

Trots vad vissa kanske tror blir det alltmer värdefullt för utvecklare att ha djupgående kunskaper och expertis i dessa två språk. Det är lika viktigt att kontrollera en utvecklares kunskaper i HTML och CSS som att kontrollera kunskaper i språk som Java och C++. Alla som är lite tekniska bör ha en grundläggande förståelse för HTML och CSS. I slutändan är det allt man behöver, eller hur? Inte precis.

HTML och CSS utgör ryggraden i front-end-utvecklingen tillsammans med JavaScript. Faktum är att många backend-utvecklare använder dessa språk regelbundet. Du kommer aldrig att hitta en utvecklare som enbart använder dessa språk, men HTML och CSS är tillräckligt viktiga för modern programvaruutveckling för att säkerställa att utvecklare av front-end kan använda dem effektivt. De är enkla att börja använda, men avancerade tillämpningar kräver djupgående kunskaper och förståelse. Det är viktigt att kontrollera att din utvecklare har denna förståelse.

Läs mer om egenskaperna hos en programvaruingenjör.

Vad är HTML och CSS?1. Vad är HTML och CSS och vad används de till?

1.1 Vad är HTML?

HTML eller HyperText Markup Language är standardspråket för att skapa webbsidor och webbprogram. Markupspråk skiljer sig från programmeringsspråk genom att de inte utför någon logik. I stället är HTML utformat för att skapa ett strukturerat dokument med hjälp av element som bilder, formulär, listor osv. Det är upp till webbläsaren att sedan tolka detta dokument för att skapa de webbsidor som du till slut tittar på (som den du läser just nu).

1.2 Vad är CSS?

CSS eller Cascading Style Sheets ger en standarddefinition för hur de olika elementen ska se ut på sidan. Vad menar jag med det? Tänk dig att du vill att en målare ska måla ditt hus, du kan tala om för dem vilken färg du vill ha på varje enskild vägg. Detta skulle likna att ge dina instruktioner fast med hjälp av HTML. Det skulle kräva många instruktioner för dina målare och skulle ta längre tid att skriva.

Men om du är som jag vill du att alla väggar i huset ska ha samma färg. I det fallet skulle du be din målare att måla alla väggar i samma färg. Detta skulle vara som att ge instruktioner med hjälp av CSS. Med CSS kan du definiera ett standardutseende för ett element på din sida så att när du skapar ett nytt element kommer alla dina designstandarder att vara intakta. Det kräver färre instruktioner och innebär att nya element, som färger och typsnitt, kommer att överensstämma med resten av sidan.

1.3 Vad används HTML och CSS till?

Tillsammans är HTML och CSS hörnstenarna i World Wide Web. De är båda mycket populära och de grundläggande begreppen är enkla att lära sig. Tillsammans med JavaScript är de två av de tre viktigaste färdigheterna för front-end-utvecklare. Men en front end-utvecklare måste kunna mer än bara de grundläggande begreppen för att göra ett bra jobb.

2. Vad är viktigt för en IT-rekryterare att veta om front end-utvecklarens färdigheter i HTML och CSS?2. Vad är viktigt för en IT-rekryterare att veta om front end-utvecklarens färdigheter i HTML och CSS?

2.1 Standarder

World Wide Web Consortium (W3C) är den internationella standardiseringsorganisation som skapar HTML- och CSS-standarder. Den senaste versionen av HTML är dock HTML5, som följer WHATWG-standarden (så kallad HTML Living Standard) snarare än W3C-standarden. Det finns ingen enda version av CSS eftersom den sedan CSS 3 är uppdelad i moduler och varje modul versioneras oberoende av varandra.

Nästan alla utvecklare, och ännu mindre front-end-utvecklare, bör ha åtminstone en grundläggande förståelse för HTML och CSS. En HTML- eller CSS-utvecklare är sällan en fristående befattning. Oftast är det bara en av färdigheterna hos en front-end- eller fullstackutvecklare eller en grafisk/webbdesigner.

Standarderna ändras inte särskilt ofta. Nya funktioner kommer dock regelbundet, så utvecklarna måste hålla sig uppdaterade. Under de senaste åren har det funnits ett konstant flöde av nya CSS-funktioner och uppdateringar. Så mycket att backendutvecklare kanske inte ens är medvetna om hur kraftfull tekniken har blivit.

2.2 Verktyg

Varje webbläsare tolkar CSS och HTML på lite olika sätt. Utvecklaren bör känna till skillnaderna mellan olika webbläsare och deras stöd för olika HTML/CSS-versioner. Dessutom bör utvecklare veta vilka verktyg de kan använda för att skapa HTML/CSS-innehåll för olika webbläsare.

Frontend-utvecklare som använder JavaScript-ramverk arbetar vanligtvis med bibliotek som är fulla av färdiga komponenter. För att skapa en produktionsklar applikation krävs dock en anpassning av stilen till produktens utformning. Denna typ av anpassning kräver ofta avancerade kunskaper i CSS.

För att underlätta och snabba upp webbsidor använder utvecklare ofta ytterligare verktyg som ramverk för frontenden (t.ex. Bootstrap) eller formatmallsspråk (t.ex. LESS eller SCSS).

2.3 Användarupplevelse (UX)

UX är en viktig del av utveckling av front-end. En kompetent front end-utvecklare bör ha förmågan att se webbsidor eller program från användarens perspektiv. Det innebär att UX optimeras på ett holistiskt sätt. Att föreslå förbättringar av applikationen, som att ta bort onödiga klick eller förbättra prestandan genom att optimera sidans laddningshastighet, är två exempel på optimering.

Responsive Web Design (RWD) är en annan viktig teknik som front-end-utvecklare måste ta hänsyn till för UX. Det är ett tillvägagångssätt som innebär att design och utveckling bör reagera på användarens beteende och miljö baserat på skärmstorlek, plattform och orientering.

Slutligen är a11y (som är en förkortning av begreppet "tillgänglighet") på väg att bli en mycket omdiskuterad rörelse inom tekniska kretsar och en annan viktig UX-aspekt. Det hänvisar inte till en specifik standard, mätning eller lag som har med teknik att göra, utan snarare till en förändring av hur webbplatser byggs för att ta hänsyn till personer med funktionshinder. Projektet syftar till att göra webbsidor mer lättförståeliga, uppdaterade och förlåtande för dem som har funktionshinder, oavsett om det handlar om synnedsättning eller någon annan form av åkomma.

Kunskaper som front-end-utvecklare

Källa: Unsplash - Safar Safarov

3. Granska en front end-utvecklares HTML- och CSS-färdigheter med hjälp av deras CV.

Många rekryterare får en första fingervisning om en front end-utvecklares kunskaper i HTML och CSS genom vad som står i kandidatens CV. Utöver enkla HTML- och CSS-kunskaper (som borde vara en självklarhet för alla front end-utvecklare) är det viktigt att se hur kunnig och uppdaterad kandidaten är i fråga om front end-tekniken. Här är en ordlista över färdigheter som du bör se upp för och en genomgång av allt som din kandidat bör veta för att du bättre ska förstå vad du ska leta efter hos en front-end-utvecklare.

HTML- och CSS-ordlista för tekniska rekryterare3.1 HTML- och CSS-ordlista för tekniska rekryterare

Ramverk för front-end Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
CSS-preprocessorer Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
HTML5-ramar Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animationer Responsiv webbdesign (RWD)
Tillgänglighet A11Y
Konventioner Modifiering av blockelement
Verktyg CSS-moduler, CSS i JS
Övrigt/Diverse HTML5 Boilerplate

3.2 HTML-standarder - typer av HTML

  • HTML 4 - grundversionen av HTML som rekommenderades av W3C 1997.
  • XHTML - en förlängning av HTML4, bara en striktare version av HTML4. Vissa funktioner från XML har införlivats i HTML.
  • HTML5 - den senaste versionen av HTML-standarden. Den mest använda.

3.3 CSS-standarder

  • CSS 2 - CSS-nivå 2-specifikation som publicerades av W3C 1998.
  • CSS 2.1 - CSS nivå 2 revision 1, korrigerade fel i CSS2
  • CSS 3 - delar upp specifikationen i olika delar som kallas moduler, en stor förändring. CSS 3 introducerade många nya funktioner som nya selektorer, nya egenskaper, ändringar i boxmodellen och mycket mer.

3.4 Ramverk för HTML och CSS

Grundläggande HTML och CSS är lätta att koda, men den komplexitet som finns på moderna webbplatser kan vara mycket tidskrävande att koda. Som tur är behöver utvecklare inte skapa allt från grunden. Det finns ramverk tillgängliga som erbjuder hjälp med färdiga komponenter och ger ett enkelt sätt att anpassa utseendet på en sida.

De mest populära ramverken att leta efter är:

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

3.5 Andra områden inom HTML och CSS som din front-end-utvecklare bör känna till

Även om CSS-grunderna är ganska lätta att lära sig finns det vissa områden inom CSS som kräver extra ansträngning för att kunna användas effektivt av utvecklare. Dessa inkluderar:

  • CSS Flexbox-modell
  • CSS-galler
  • CSS Box-modell
  • Layoutelement med absolut positionering
  • Layoutelement med flytande element
  • CSS-animationer

Frågor och svar från intervjuer om HTML/CSS4. Frågor och svar från intervjuer om HTML/CSS

Du kan hitta dessa frågor och fler här.

4.1 Frågor och svar från HTML-intervjuer

Vad gör en doctype?

Doctype bestämmer vilken version av HTML som dokumentet hänvisar till.

Vilka saker bör du vara försiktig med när du utformar eller utvecklar flerspråkiga webbplatser?

Kandidaternas svar på denna fråga bör visa om de har erfarenhet av att bygga storskaliga webbplatser från olika delar av världen. Svar som omfattar följande ämnen är en bra indikation på en kunnig kandidat: stöd för Unicode för kodning, vänster till höger respektive höger till vänster, automatiserad översättning av valutor, datum och pluralform samt parametrering av översatta strängar.

Beskriv skillnaden mellan DevSkillers logotyp TalentBoost logotyp TalentScore-logotyp