Comment évaluer les compétences des développeurs frontaux - HTML et CSS

Par septembre 8, 2020 #!31mer, 21 Oct 2020 09:56:57 +0200p5731#31mer, 21 Oct 2020 09:56:57 +0200p-9Europe/Warsaw3131Europe/Warsawx31 21 31 -31mer, 21 Oct 2020 09:56:57 +0200p9Europe/Warsaw3131Europe/Warsawx312020mer, 21 Oct 2020 09:56:57 +02005695610 mercredi=254#!31mer, 21 Oct 2020 09:56:57 +0200pEurope/Warsaw10#octobre 21st, 2020#!31mer, 21 Oct 2020 09:56:57 +0200p5731#/31mer, 21 Oct 2020 09:56:57 +0200p-9Europe/Warsaw3131Europe/Warsawx31#!31mer, 21 Oct 2020 09:56:57 +0200pEurope/Warsaw10# Test de codage, Développeur d'entrée de gamme, Questions d'entretien, Recrutement informatique
How to screen front end developer skills - HTML and CSS Blog

HTML et CSS are two of the most fundamental front end developer compétences. You’d be hard-pressed to come across a web developer who doesn’t have at least a basic understanding of the two stalwarts. However, some believe that HTML and CSS shouldn’t be given the same respect as other languages because neither requires any internal logic. That’s because HTML and CSS are declarative languages that instruct a web browser to render web pages rather than use computational code.

Malgré ce que certains peuvent penser, il devient de plus en plus précieux pour les développeurs de posséder une connaissance et une expertise approfondies de ces deux langues. La vérification des compétences d'un développeur en HTML et CSS est aussi importante que celle des compétences dans des langages comme Java et C++. Il est certain que toute personne vaguement technique devrait avoir une compréhension de base du HTML et du CSS. En fin de compte, c'est tout ce dont vous avez besoin, n'est-ce pas ? Pas exactement.

Le HTML et le CSS constituent l'épine dorsale du développement du front de page, avec JavaScript. En fait, vous trouverez également un grand nombre de développeurs qui utilisent régulièrement ces langages. Bien que vous ne trouverez jamais un développeur qui utilise uniquement ces langages, le HTML et le CSS sont suffisamment essentiels au développement de logiciels modernes pour garantir que les développeurs d'applications frontales are able to use them effectively. While they are simple to get started with, advanced applications require in-depth skill and understanding. It’s essential to verify that your developer has this understanding.

Check out more qualities of a software engineer.

Table des matières

What are HTML and CSS?1. What are HTML and CSS and what are they used for?

1.1 What is HTML?

HTML or HyperText Markup Language is the standard markup language for creating web pages and web applications. Markup languages are different from programming languages in that they do not perform any logic. Instead, HTML is designed to create a structured document using elements such as images, forms, lists, etc. It’s up to the browser to then interpret this document to create the web pages that you end up viewing (like the one you’re reading right now).

1.2 What is CSS?

CSS or Cascading Style Sheets provide a standard definition for how the different elements should appear on the page. What do I mean? Imagine you want a painter to paint your house, you could tell them the color you want of each individual wall. This would be similar to giving your instructions only using HTML. It would require a lot of instructions for your painters and would take longer to write.

But If you’re like me, you want all of the walls of your house to be the same color. In that case, you’d tell your painter to paint every wall a set color. This would be like giving instructions using CSS. With CSS, you can define a standard look of an element on your page so that whenever you create a new element, all of your conception standards will be intact. It requires fewer instructions and means that new elements, like colors and fonts, will be consistent with the rest of the page.

1.3 What are HTML and CSS used for?

Used together, HTML and CSS are the cornerstones of the World Wide Web. They’re both very popular, and the basic concepts are simple to learn. Taken with JavaScript, they are two of the three essential front end developer skills. But a front end developer needs to know more than just the basic concepts to do a good job.

2. What is important for an IT recruiter to know about front end developer skills HTML and CSS?2. What is important for an IT recruiter to know about front end developer skills HTML and CSS?

2.1 Standards

The World Wide Web Consortium (W3C) is the international standards organization that creates HTML and CSS standards. That said, the latest version of HTML is HTML5, which follows the WHATWG standard (so-called HTML Living Standard) rather than the W3C standard. There is no single version of CSS because since CSS 3, it’s divided into modules, and each module is versioned independently. 

Almost every developer, let alone a front end developer, should have at least a basic understanding of HTML and CSS. A HTML or CSS developer is rarely a stand-alone position. Most of the time, it’s just one of the skills of a front end or full-stack developer or a graphic/web designer.

Standards do not change very often. However, new features arrive regularly, so developers need to stay up to date. In recent years, there has been a consistent flow of new CSS features and updates. So much so that back end developers may not even be aware of how powerful the technology has become.

2.2 Tools

Each browser interprets CSS and HTML in a slightly different way. The developer should know the differences between different browsers and their support of different HTML/CSS versions. Additionally, developers should know which tools they can use to create cross-browser HTML/CSS content. 

Frontend developers who use JavaScript frameworks usually work with libraries that are full of ready-to-use components. However, creating a production-ready candidature requires style adaption for the design of the product. This kind of adaptation often requires advanced knowledge of CSS.

To ease and speed up web pages, developers often use additional tools like front end frameworks (i.e. Bootstrap) or style sheet language (i.e. LESS or SCSS).

2.3 User experience (UX)

UX is a vital component of front end development. A competent front end developer should possess the ability to view web pages or applications from the user’s perspective. That means optimizing the UX holistically. Suggesting improvements to the application, like removing unnecessary clicks or improving performance by optimizing page load speed, are two examples of optimization. 

Responsive Web Design (RWD) is another important technique front end developers need to consider for UX. It is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform, and orientation. 

Finally, a11y (which is an abbreviation of the term ‘accessibility’) is becoming a widely discussed movement within tech circles and another important UX consideration. It does not refer to a specific standard, measurement, or law that has to do with technology but rather a change in the way websites are built to account for people with disabilities. The project aims to make web pages more digestible, up-to-date, and forgiving for those who have disabilities, be it visual impairment or another form of ailment. 

Front end developer skills

Source: Unsplash – Safar Safarov

3. Screening a front end developer’s HTML and CSS skills using their resume

The first hint that many recruteurs have of a front end developer’s HTML and CSS knowledge is what is written in the candidate’s resume. Beyond simple HTML and CSS skills (which should be a given for any front end developer), it’s vital to see how knowledgeable and up to date the candidate is with the front end tech stack. Here is a glossary of skills to look out for and a rundown of everything your candidate should know to help you better understand what to look for in a front end developer.

HTML and CSS Glossary for technical recruiters3.1 HTML and CSS Glossary for technical recruiters

Front-end frameworksBootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
CSS preprocessorsSass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
HTML5 frameworksSkeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animations Responsive Web Design (RWD)
Accessibility A11Y
ConventionsBlock Element Modifier
OutillageCSS modules, CSS in JS
Others/MiscellaneousHTML5 Boilerplate

 

3.2 HTML standards – types of HTML

  • HTML 4 – the basic version of HTML recommended by W3C in 1997
  • XHTML – an extension of HTML4, just a stricter version of HTML 4. It incorporated some features of XML into HTML.
  • HTML5 – latest version of the HTML standard. The most widely used.

3.3 CSS standards

  • CSS 2 – CSS level 2 specification published by the W3C in 1998
  • CSS 2.1 – CSS level 2 revision 1, fixed errors in CSS2
  • CSS 3 – splits the specification into different sections called modules, a major change. CSS 3 introduced many new features like new selectors, new properties, changes to the box model, and a lot more.

3.4 HTML and CSS Frameworks

Basic HTML and CSS are easy to code, but the level of complexity found in modern websites can be very time-consuming to code outright. Luckily, developers aren’t required to create everything from scratch. There are frameworks available that offer help with ready-to-use components and provide an easy way to customize the look of a page.

The most popular Frameworks to look for are: 

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

3.5 Other areas of HTML and CSS your front end developer should know about

As CSS basics are quite easy to learn, there are some areas of CSS that require extra effort to be used efficiently by developers. These include:

  • CSS Flexbox model
  • CSS grid
  • CSS Box model
  • Layout elements with absolute positioning
  • Layout elements with floats
  • CSS animations

HTML/CSS interview questions and answers4. HTML/CSS interview questions and answers

You can find these questions and more ici.

4.1 HTML Interview questions and answers

What does a doctype do?

Doctype determines which version of HTML the document refers to.

What kind of things should you be wary of when designing or developing for multilingual sites?

A candidate’s answers to this question should demonstrate whether or not they have experience with building large-scale sites from different regions of the world. Answers that include the following topics are a good indication of an informed candidate: supporting Unicode for encoding, left-to-right vs right-to-left, automating translation of currencies, dates and plural form, and parametrizing translated strings

Describe the difference between <script>, <script async> and <script defer>.

Answers to this question are related to a candidate’s knowledge of how JavaScript is executed within a web application. Typically, scripts are executed sequentially, <script async> and <defer> are techniques to load scripts in a different order. 

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

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. 

What is progressive rendering?

Answers will demonstrate a candidate’s attention to the performance of their sites. Progressive rendering is a technique to load viewed pieces of pages faster.

4.2 CSS interview questions and answers

What is CSS selector specificity, and how does it work?

This question is designed to tell if a candidate has had the opportunity to build and/or maintain big websites where they may have been responsible for several stylesheets (potentially conflicting). If there are many conflicting stylesheets applied to a certain block, CSS needs to determine which is the more important.

Quelle est la différence entre "réinitialiser" et "normaliser" les CSS ? Lequel choisiriez-vous et pourquoi ?

Answers will demonstrate whether a candidate has experience with removing differences between browsers. Resetting is removing default styles and normalizing is unifying the results.

Describe Floats and how they work.

Answers determine fundamental aspects of CSS. Floats determine how to place an element within a conteneur.

Describe BFC (Block Formatting Context) and how it works.

The answer determines whether the candidate understands how blocks structure the page and how they can adjust to each other.

What are the various clearing techniques, and which is appropriate for what context?

Answers to this question demonstrate fundamental knowledge of CSS. The 3 most common techniques are; “clear: both”, overflow property and “:after” pseudo-selector.

How would you approach fixing browser-specific styling issues?

Answers to this question should relate to whether not the candidate understands how to guarantee a consistent look and feel for users across many different devices. An example solution could be normalize.css.

How do you serve your pages for feature-constrained browsers?

Answers will demonstrate the candidates’ awareness that some users might use older versions of browsers and that the CSS features within the codebase might not be supported. This is of particular importance when creating large-scale sites like news publishing sites.

What techniques/processes do you use?

Graceful degradation – provides a fallback for a missing browser feature so that if something is not supported a similar UX as possible is provided.

Progressive enhancement – focuses on providing features for base users and adding new functionality only when a browser supports them.

What are the different ways to visually hide content (and make it available only for screen readers)?

Answers to this question verify if the candidate has experience with providing accessibility to websites (a11y) i.e. ensuring an equal UX for people with disabilities. This particular scenario should occur where content is visually apparent for sighted users and fallback information is available for screen readers to provide information.

Technical screening of HTML and CSS front end developer skills using an online test5. Technical screening of HTML and CSS front end developer skills using an online test

Front end developers exist to build the front end of web pages and apps. While it’s important to see if a developer is aware of the essential concepts, it’s more important to know if they can apply them to actual work. This can be done with either a test de codage ou programming interview, but not all platforms for these tests are created equal.

5.1 Which HTML and CSS coding tests should you choose to test front end developer skills?

When looking for the right HTML and CSS en ligne coding test, you should make sure they match the following criteria:

  • The test should reflect the real work being done, utilizing HTML and CSS in actual front end projects.
  • Time-efficient – one or two hours max.
  • Sent automatically and can be taken anywhere to give you & your candidate flexibility.
  • Go beyond checking whether the code renders a page but also check the efficiency of the code and how well it renders across multiple platforms.
  • Be as close to the natural front end development environment as possible and let the candidate access the kinds of resources they normally would at work.
  • Provide candidates with access to all the libraries, frameworks, and other tools they usually would use, including the ones most important to the job
  • Match the candidate’s abilities to the appropriate test

DevSkiller ready-to-use online HTML and CSS coding tests to assess front end developer skills6. DevSkiller ready-to-use online HTML and CSS coding tests to assess front end developer skills

DevSkiller’s RealLifeTestingTM methodology is built to test developers like they were already on the job. Developers are not given single-page tests to reach a predetermined outcome. At DevSkiller, front end developers are tested with full, multi-file projects they développer to show off the full extent of their skills. Here are some premade tests that incorporate HTML and CSS.

JavaScript
SENIOR
Des compétences éprouvées
Durée
57 minutes max.
Évaluation
Automatique
Aperçu des tests

Questions sur le choix

l'évaluation de la connaissance des ES6, JavaScript, HTML, CSS, Accessibility

Tâche de programmation - Niveau : Difficile

JavaScript | Functional memoization - Write the two versions of generic memoization mechanism.

PHP
MIDDLE
Des compétences éprouvées
Durée
60 minutes max.
Évaluation
Automatique
Aperçu des tests

Lacunes dans les codes

l'évaluation de la connaissance des SQL

Questions sur le choix

l'évaluation de la connaissance des ES6, JavaScript, CSS, HTML, WCAG 2.0, Accessibilité du Web

Tâche de programmation - Niveau : Moyen :

PHP | Categories Repository - Mettre en place des requêtes PDO qui retourneront aux utilisateurs des résultats valides sur les films.

HTML
SENIOR
Des compétences éprouvées
Durée
133 minutes max.
Évaluation
Automatique
Aperçu des tests

Questions sur le choix

l'évaluation de la connaissance des AJAX, JavaScript, Développement web, ES6, Dactylographie, CSS, HTML

Tâche de programmation - Niveau : Difficile

JavaScript | Social Media Queries | Trouver ses amis par leur nom - Mettre en place une fonction pour trouver les amis de l'utilisateur par leur nom.

Tâche de programmation - Niveau : Difficile

CSS/HTML - Barre de navigation Flexbox - Complétez la définition CSS et utilisez Flexbox pour mettre en page les composants.

PHP
JUNIOR
Des compétences éprouvées
Durée
41 minutes max.
Évaluation
Automatique
Aperçu des tests

Lacunes dans les codes

l'évaluation de la connaissance des SQL, CSS, HTML

Questions sur le choix

l'évaluation de la connaissance des JavaScript

Tâche de programmation - Niveau : Facile

PHP | Faker | Manipulation de données de base - Implémente toutes les méthodes de la classe app/Faker.

Python
MIDDLE
Des compétences éprouvées
Durée
168 minutes max.
Évaluation
Automatique
Aperçu des tests

Questions sur le choix

l'évaluation de la connaissance des CSS, HTML

Tâche de programmation - Niveau : Moyen :

Python | Django | Application de demande de congé | CRUD de base - Complétez une application de gestion des demandes de congé des employés à l'aide de Django Framework.

Tâche de programmation - Niveau : Moyen :

JavaScript | Social Media Queries | Find potential likes - Mettre en place une fonction pour trouver des livres qui sont considérés comme des ouvrages à aimer.

Python
JUNIOR
Des compétences éprouvées
Durée
65 minutes max.
Évaluation
Automatique
Aperçu des tests

Questions sur le choix

l'évaluation de la connaissance des CSS, HTML

Tâche de programmation - Niveau : Facile

Python | Django | Currency Exchange Service - Fin de la mise en œuvre de Django demande d'échange de devises par modyfing CBV et compléter la logique de service.

Tâche de programmation - Niveau : Facile

JavaScript | Analyseur de commandes | Trouver une quantité commandée moyenne pour chaque jour de la semaine - Mettre en œuvre une méthode qui analysera l'ensemble des données relatives aux commandes et qui retournera une carte avec la quantité commandée moyenne d'un produit pour chaque jour de la semaine.

JavaScript
MIDDLE
Des compétences éprouvées
Durée
95 minutes max.
Évaluation
Automatique
Aperçu des tests

Questions sur le choix

l'évaluation de la connaissance des CSS, HTML

Tâche de programmation - Niveau : Moyen :

JavaScript | Orders Analyzer | Trouver une valeur moyenne de commande pour chaque jour de la semaine - Mettre en œuvre une méthode qui retournera une carte avec un nom de jour de la semaine comme clé et une valeur moyenne totale de commande.

Tâche de programmation - Niveau : Moyen :

HTML/CSS - Barre de navigation Flexbox - Compléter la définition CSS et utiliser Flexbox pour mettre en page les composants