Come valutare le competenze di uno sviluppatore front-end - HTML e CSS

Pubblicato: Ultimo aggiornamento:

HTML e CSS sono due delle competenze fondamentali dello sviluppatore front-end. È difficile imbattersi in uno sviluppatore web che non abbia almeno una conoscenza di base di questi due capisaldi. Tuttavia, alcuni ritengono che HTML e CSS non debbano essere considerati alla stregua di altri linguaggi perché nessuno dei due richiede una logica interna. Questo perché l'HTML e il CSS sono linguaggi dichiarativi che istruiscono il browser web per il rendering delle pagine web, piuttosto che utilizzare codice computazionale.

A dispetto di quanto si possa pensare, per gli sviluppatori è sempre più importante possedere una conoscenza approfondita di questi due linguaggi. Verificare le competenze di uno sviluppatore in HTML e CSS è importante quanto accertare le competenze in linguaggi come Java e C++. Di certo, chiunque sia vagamente tecnico dovrebbe avere una conoscenza di base di HTML e CSS. In fin dei conti, non serve altro, giusto? Non esattamente.

HTML e CSS costituiscono la spina dorsale dello sviluppo front-end insieme a JavaScript. In realtà, troverete anche molti sviluppatori back-end che utilizzano regolarmente questi linguaggi. Anche se non troverete mai uno sviluppatore che utilizza esclusivamente questi linguaggi, l'HTML e il CSS sono abbastanza importanti per lo sviluppo del software moderno da garantire che sviluppatori front-end sono in grado di usarli in modo efficace. Sebbene siano semplici da utilizzare, le applicazioni avanzate richiedono competenze e conoscenze approfondite. È essenziale verificare che il vostro sviluppatore abbia queste conoscenze.

Scoprite altre qualità di un ingegnere del software.

Cosa sono l'HTML e i CSS?1. Cosa sono l'HTML e i CSS e a cosa servono?

1.1 Che cos'è l'HTML?

L'HTML o HyperText Markup Language è il linguaggio di markup standard per la creazione di pagine web e applicazioni web. I linguaggi di markup sono diversi dai linguaggi di programmazione in quanto non eseguono alcuna logica. L'HTML è invece progettato per creare un documento strutturato utilizzando elementi come immagini, moduli, elenchi, ecc. È compito del browser interpretare questo documento per creare le pagine web che vengono visualizzate (come quella che state leggendo).

1.2 Che cos'è il CSS?

I CSS o fogli di stile a cascata forniscono una definizione standard di come i diversi elementi devono apparire sulla pagina. Che cosa intendo? Immaginiamo che vogliate che un imbianchino dipinga la vostra casa: potreste dirgli il colore che volete per ogni singola parete. Questo sarebbe simile a dare istruzioni solo utilizzando l'HTML. Ciò richiederebbe molte istruzioni per l'imbianchino e la sua stesura sarebbe più lunga.

Ma se siete come me, volete che tutte le pareti della vostra casa siano dello stesso colore. In questo caso, direte all'imbianchino di dipingere ogni parete di un determinato colore. Sarebbe come dare istruzioni usando i CSS. Con i CSS, è possibile definire l'aspetto standard di un elemento della pagina, in modo che ogni volta che si crea un nuovo elemento, tutti gli standard di progettazione saranno intatti. Richiede meno istruzioni e significa che i nuovi elementi, come i colori e i caratteri, saranno coerenti con il resto della pagina.

1.3 A cosa servono HTML e CSS?

Utilizzati insieme, HTML e CSS sono le pietre miliari del World Wide Web. Sono entrambi molto popolari e i concetti di base sono semplici da imparare. Insieme a JavaScript, sono due delle tre competenze essenziali per uno sviluppatore front-end. Ma per fare un buon lavoro, uno sviluppatore front-end deve conoscere molto di più dei concetti di base.

2. Che cosa è importante che un selezionatore IT sappia sulle competenze degli sviluppatori front-end HTML e CSS?2. Che cosa è importante che un selezionatore IT sappia sulle competenze degli sviluppatori front-end HTML e CSS?

2.1 Norme

Il World Wide Web Consortium (W3C) è l'organizzazione internazionale che crea gli standard HTML e CSS. Tuttavia, l'ultima versione dell'HTML è l'HTML5, che segue lo standard WHATWG (il cosiddetto HTML Living Standard) piuttosto che lo standard W3C. Non esiste un'unica versione di CSS, perché a partire da CSS 3 è diviso in moduli e ogni modulo viene aggiornato in modo indipendente.

Quasi tutti gli sviluppatori, per non parlare di quelli front-end, dovrebbero avere almeno una conoscenza di base di HTML e CSS. Uno sviluppatore HTML o CSS è raramente una posizione a sé stante. Nella maggior parte dei casi, è solo una delle competenze di uno sviluppatore front-end o full-stack o di un grafico/web designer.

Gli standard non cambiano molto spesso. Tuttavia, le nuove funzionalità arrivano regolarmente, quindi gli sviluppatori devono tenersi aggiornati. Negli ultimi anni si è assistito a un flusso costante di nuove funzionalità e aggiornamenti dei CSS. Tanto che gli sviluppatori back-end potrebbero non essere nemmeno consapevoli di quanto sia diventata potente questa tecnologia.

2.2 Strumenti

Ogni browser interpreta CSS e HTML in modo leggermente diverso. Lo sviluppatore deve conoscere le differenze tra i vari browser e il loro supporto alle diverse versioni di HTML/CSS. Inoltre, gli sviluppatori devono sapere quali strumenti possono utilizzare per creare contenuti HTML/CSS cross-browser.

Gli sviluppatori di frontend che utilizzano framework JavaScript di solito lavorano con librerie piene di componenti pronti all'uso. Tuttavia, la creazione di un'applicazione pronta per la produzione richiede un adattamento dello stile per il design del prodotto. Questo tipo di adattamento richiede spesso una conoscenza avanzata dei CSS.

Per semplificare e velocizzare le pagine web, gli sviluppatori utilizzano spesso strumenti aggiuntivi come framework front-end (ad esempio Bootstrap) o linguaggi per fogli di stile (ad esempio LESS o SCSS).

2.3 Esperienza utente (UX)

La UX è una componente vitale di sviluppo front-end. Un competente sviluppatore front-end deve possedere la capacità di vedere le pagine web o le applicazioni dal punto di vista dell'utente. Ciò significa ottimizzare la UX in modo olistico. Suggerire miglioramenti all'applicazione, come eliminare i clic inutili o migliorare le prestazioni ottimizzando la velocità di caricamento della pagina, sono due esempi di ottimizzazione.

Il Responsive Web Design (RWD) è un'altra tecnica importante che gli sviluppatori front-end devono considerare per la UX. Si tratta di un approccio che suggerisce che la progettazione e lo sviluppo debbano rispondere al comportamento e all'ambiente dell'utente in base alle dimensioni dello schermo, alla piattaforma e all'orientamento.

Infine, l'a11y (abbreviazione del termine "accessibilità") sta diventando un movimento ampiamente discusso nei circoli tecnologici e un'altra importante considerazione UX. Non si riferisce a uno standard specifico, a una misurazione o a una legge che ha a che fare con la tecnologia, ma piuttosto a un cambiamento nel modo in cui i siti web vengono costruiti per tenere conto delle persone con disabilità. Il progetto mira a rendere le pagine web più digeribili, aggiornate e indulgenti per chi è affetto da disabilità, sia essa una disabilità visiva o un'altra forma di disturbo.

Competenze di sviluppatore front-end

Fonte: Unsplash - Safar Safarov

3. Esaminare le competenze HTML e CSS di uno sviluppatore front-end utilizzando il suo curriculum.

Il primo indizio che molti selezionatori hanno della conoscenza di HTML e CSS di uno sviluppatore front end è ciò che è scritto nel curriculum del candidato. Al di là delle semplici competenze in HTML e CSS (che dovrebbero essere scontate per qualsiasi sviluppatore front end), è fondamentale vedere quanto il candidato sia informato e aggiornato sullo stack tecnologico del front end. Ecco un glossario delle competenze da ricercare e un elenco di tutto ciò che il candidato deve sapere per aiutarvi a capire meglio cosa cercare in uno sviluppatore front-end.

Glossario HTML e CSS per i reclutatori tecnici3.1 Glossario HTML e CSS per i reclutatori tecnici

Framework di front-end Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
Preprocessori CSS Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
Quadri HTML5 Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animazioni Progettazione web reattiva (RWD)
Accessibilità A11Y
Convenzioni Modificatore dell'elemento di blocco
Utensili Moduli CSS, CSS in JS
Altro/Varie Boilerplate HTML5

3.2 Standard HTML - Tipi di HTML

  • HTML 4 - la versione di base dell'HTML raccomandata dal W3C nel 1997.
  • XHTML - un'estensione dell'HTML4, solo una versione più rigida dell'HTML 4. Ha incorporato alcune caratteristiche dell'XML nell'HTML.
  • HTML5 - ultima versione dello standard HTML. La più utilizzata.

3.3 Standard CSS

  • CSS 2 - Specifica CSS di livello 2 pubblicata dal W3C nel 1998.
  • CSS 2.1 - Revisione 1 del livello 2 dei CSS, corretti gli errori in CSS2
  • CSS 3 - divide le specifiche in diverse sezioni chiamate moduli, un cambiamento importante. CSS 3 ha introdotto molte nuove funzionalità, come nuovi selettori, nuove proprietà, modifiche al modello di box e molto altro ancora.

3.4 Framework HTML e CSS

L'HTML e il CSS di base sono facili da codificare, ma il livello di complessità dei siti web moderni può richiedere molto tempo. Fortunatamente, gli sviluppatori non sono obbligati a creare tutto da zero. Esistono framework che offrono assistenza con componenti pronti all'uso e forniscono un modo semplice per personalizzare l'aspetto di una pagina.

I framework più popolari da cercare sono:

  • Bootstrap (v4)
  • Fondazione (ultima versione 6)

3.5 Altre aree di HTML e CSS che lo sviluppatore front-end dovrebbe conoscere

Mentre le basi dei CSS sono abbastanza facili da imparare, ci sono alcune aree dei CSS che richiedono uno sforzo supplementare per essere utilizzate in modo efficiente dagli sviluppatori. Queste includono:

  • Modello CSS Flexbox
  • Griglia CSS
  • Modello CSS Box
  • Elementi di layout con posizionamento assoluto
  • Elementi di layout con galleggianti
  • Animazioni CSS

Domande e risposte alle interviste su HTML/CSS4. Domande e risposte alle interviste su HTML/CSS

Potete trovare queste e altre domande qui.

4.1 Domande e risposte del colloquio HTML

Cosa fa un doctype?

Il doctype determina la versione di HTML a cui si riferisce il documento.

Di quali cose bisogna diffidare quando si progetta o si sviluppa per siti multilingue?

Le risposte del candidato a questa domanda devono dimostrare se ha o meno esperienza nella costruzione di siti su larga scala di diverse regioni del mondo. Le risposte che includono i seguenti argomenti sono una buona indicazione di un candidato informato: supporto di Unicode per la codifica, da sinistra a destra rispetto a destra a sinistra, automatizzazione della traduzione di valute, date e forma plurale e parametrizzazione delle stringhe tradotte.

Descrivere la differenza tra , e .

Le risposte a questa domanda riguardano la conoscenza del modo in cui JavaScript viene eseguito all'interno di un'applicazione web. In genere, gli script vengono eseguiti in sequenza; e sono tecniche per caricare gli script in un ordine diverso.

Perché è generalmente una buona idea posizionare il CSS <link href="">tra <head></head> e JS <script>s just before </body>? Do you know any exceptions?</script>

Le risposte a questa domanda dimostrano un alto livello di comprensione della struttura dei documenti HTML. Collegamenti CSS all'interno di <head> farà in modo che qualsiasi contenuto della pagina sia strutturato correttamente fin dall'inizio del rendering (senza flash temporanei di contenuto). D'altra parte, il caricamento di JS dalla parte inferiore di <body> chiederà al browser di eseguire JS dopo la visualizzazione del contenuto.

Che cos'è il rendering progressivo?

Le risposte dimostreranno l'attenzione del candidato alle prestazioni dei propri siti. Il rendering progressivo è una tecnica per caricare più velocemente le pagine visualizzate.

4.2 Domande e risposte alle interviste sui CSS

Che cos'è la specificità dei selettori CSS e come funziona?

Questa domanda serve a capire se un candidato ha avuto l'opportunità di costruire e/o gestire siti web di grandi dimensioni in cui può essere stato responsabile di diversi fogli di stile (potenzialmente in conflitto). Se ci sono molti fogli di stile in conflitto applicati a un determinato blocco, il CSS deve determinare quale sia il più importante.

Qual è la differenza tra "resettare" e "normalizzare" i CSS? Quale scegliereste e perché?

Le risposte dimostreranno se il candidato ha esperienza nell'eliminazione delle differenze tra i browser. Ripristinare significa rimuovere gli stili predefiniti e normalizzare significa unificare i risultati.

Descrivere i galleggianti e il loro funzionamento.

Le risposte determinano gli aspetti fondamentali dei CSS. I galleggianti determinano come posizionare un elemento all'interno di un contenitore.

Descrivere il BFC (Block Formatting Context) e il suo funzionamento.

La risposta determina se il candidato comprende come i blocchi strutturano la pagina e come possono adattarsi l'uno all'altro.

Quali sono le varie tecniche di clearing e quali sono appropriate per ogni contesto?

Le risposte a questa domanda dimostrano una conoscenza fondamentale dei CSS. Le 3 tecniche più comuni sono: "clear: both", proprietà overflow e pseudo-selettore ":after".

Come affrontereste la correzione dei problemi di stile specifici del browser?

Le risposte a questa domanda devono riguardare la comprensione o meno da parte del candidato di come garantire un aspetto coerente agli utenti su diversi dispositivi. Un esempio di soluzione potrebbe essere normalize.css.

Come servite le vostre pagine per i browser con caratteristiche limitate?

Le risposte dimostreranno che i candidati sono consapevoli del fatto che alcuni utenti potrebbero utilizzare versioni vecchie dei browser e che le funzioni CSS all'interno del codice potrebbero non essere supportate. Questo aspetto è particolarmente importante quando si creano siti su larga scala come quelli di pubblicazione di notizie.

Quali tecniche/processi utilizza?

Graceful degradation - fornisce un fallback per una funzionalità mancante del browser, in modo che se qualcosa non è supportato venga fornita una UX simile a quella possibile.

Miglioramento progressivo - si concentra sulla fornitura di funzionalità per gli utenti di base e sull'aggiunta di nuove funzionalità solo quando il browser le supporta.

Quali sono i diversi modi per nascondere visivamente i contenuti (e renderli disponibili solo per gli screen reader)?

Le risposte a questa domanda verificano se il candidato ha esperienza nel fornire accessibilità ai siti web (a11y), ossia nel garantire una UX uguale per le persone con disabilità. Questo particolare scenario dovrebbe verificarsi quando il contenuto è visivamente evidente per gli utenti vedenti e sono disponibili informazioni di ripiego per gli screen reader per fornire informazioni.

Screening tecnico delle competenze di sviluppatore front-end HTML e CSS mediante un test online.5. Screening tecnico delle competenze di sviluppatore front-end HTML e CSS mediante un test online.

Gli sviluppatori front-end esistono per costruire il front-end delle pagine web e delle applicazioni. Se da un lato è importante verificare se uno sviluppatore è a conoscenza dei concetti essenziali, dall'altro è più importante sapere se è in grado di applicarli al lavoro vero e proprio. Questo può essere fatto con un test di codifica o intervista di programmazionema non tutte le piattaforme per questi test sono uguali.

5.1 Quali test di codifica HTML e CSS scegliere per verificare le competenze degli sviluppatori front-end?

Quando si cerca il giusto test di codifica HTML e CSS online, bisogna assicurarsi che corrisponda ai seguenti criteri:

  • Il test deve riflettere il lavoro reale svolto, utilizzando HTML e CSS in progetti front-end reali.
  • Efficienza in termini di tempo: una o due ore al massimo.
  • Inviati automaticamente, possono essere portati ovunque per dare flessibilità a voi e al vostro candidato.
  • Non limitatevi a verificare se il codice rende una pagina, ma controllate anche l'efficienza del codice e la sua resa su più piattaforme.
  • Siate il più possibile vicini all'ambiente naturale di sviluppo del front-end e permettete al candidato di accedere alle risorse che normalmente utilizza al lavoro.
  • Fornite ai candidati l'accesso a tutte le librerie, i framework e gli altri strumenti che utilizzano abitualmente, compresi quelli più importanti per il lavoro.
  • Abbinare le capacità del candidato al test appropriato.

DevSkiller: test di codifica HTML e CSS online pronti all'uso per valutare le competenze degli sviluppatori front-end.6. DevSkiller: test di codifica HTML e CSS online pronti all'uso per valutare le competenze degli sviluppatori front-end.

La metodologia RealLifeTestingTM di DevSkiller è costruita per testare gli sviluppatori come se fossero già al lavoro. Agli sviluppatori non vengono somministrati test di una sola pagina per raggiungere un risultato predeterminato. In DevSkiller, gli sviluppatori front-end vengono messi alla prova con progetti completi e multi-file che sviluppano per mostrare l'intera portata delle loro capacità. Ecco alcuni test predefiniti che includono HTML e CSS.

TypeScript
JUNIOR
Competenze testate
Durata
51 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Domande a scelta

valutare la conoscenza di Dattiloscritto

Lacune nel codice

valutare la conoscenza di JavaScript, Reagire

Domande a scelta

valutare la conoscenza di HTML, CSS

Attività di programmazione - Livello: Facile

TypeScript | React Hooks | Gestione dello stato dei film - Applicazione completa per la gestione dei film utilizzando React Hooks e implementando la gestione dello stato nelle viste esistenti.

.NET
SENIOR
Competenze testate
Durata
49 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Domande a scelta

valutare la conoscenza di .NET, C#, Modelli di messaggio, WCF, Applicazioni web e servizi web, Fondazione Windows Communication, Metadati

Lacune nel codice

valutare la conoscenza di HTML, HTML5, CSS

Attività di programmazione - Livello: Difficile

.NET | RSA Decryption WCF Service - Implementazione finale dell'interfaccia WCF in grado di decifrare e verificare i dati crittografati con RSA.

JavaScript
MEDIO
Competenze testate
Durata
62 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Domande a scelta

valutare la conoscenza di JavaScript, Redux

Lacune nel codice

valutare la conoscenza di HTML, HTML5, CSS

Attività di programmazione - Livello: Medio

JavaScript | Redux Selectors | Formazione del reparto HR - Implementare correttamente i riduttori e i selettori redux.

JavaScript
SENIOR
Competenze testate
Durata
85 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Attività di programmazione - Livello: Difficile

HTML/CSS | Pagina iniziale - Completare le definizioni delle proprietà CSS in modo che la pagina visualizzi la schermata splash loader appropriata prima di visualizzare la pagina iniziale.

Attività di programmazione - Livello: Difficile

JavaScript | Memorizzazione funzionale - Scrivere le due versioni del meccanismo di memorizzazione generica.

Vue.js
JUNIOR
Competenze testate
Durata
65 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Domande a scelta

valutare la conoscenza di JavaScript, HTML, CSS

Attività di programmazione - Livello: Facile

JavaScript | Vue.js | Calendar Notes - Implementare un'applicazione con cui l'utente può aggiungere una nota per una data scelta da un calendario.

JavaScript
SENIOR
Competenze testate
Durata
57 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Domande a scelta

valutare la conoscenza di ES6, JavaScript, HTML, CSS, Accessibilità

Attività di programmazione - Livello: Difficile

JavaScript | Memorizzazione funzionale - Scrivere le due versioni del meccanismo di memorizzazione generica.

PHP
MEDIO
Competenze testate
Durata
60 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Lacune nel codice

valutare la conoscenza di SQL

Domande a scelta

valutare la conoscenza di ES6, JavaScript, CSS, HTML, WCAG 2.0, Accessibilità web

Attività di programmazione - Livello: Medio

PHP | Repository di categorie - Implementare query PDO che restituiscano agli utenti risultati validi sui film.

HTML
SENIOR
Competenze testate
Durata
133 minuti al massimo.
Valutazione
Automatico
Panoramica del test

Domande a scelta

valutare la conoscenza di AJAX, JavaScript, Sviluppo web, ES6, Dattiloscritto, CSS, HTML

Attività di programmazione - Livello: Difficile

JavaScript | Social Media Queries | Trova amici per nome - Implementare una funzione per trovare gli amici dell'utente in base al loro nome.

Attività di programmazione - Livello: Difficile

CSS/HTML - Barra di navigazione Flexbox - Completare la definizione dei CSS e utilizzare Flexbox per impaginare i componenti.

Condividi post

Per saperne di più sulle assunzioni nel settore tecnologico

Iscrivetevi al nostro Learning Hub per ricevere utili approfondimenti direttamente nella vostra casella di posta elettronica.

Verifica e sviluppo delle competenze di codifica senza soluzione di continuità.

Guardate i prodotti DevSkiller in azione.

Certificazioni di sicurezza e conformità. Ci assicuriamo che i vostri dati siano sicuri e protetti.

Logo DevSkiller Logo TalentBoost Logo TalentScore