How to screen front end developer skills – HTML and CSS

記入例 9月 8, 2020 #!31水, 21 10月 2020 09:56:57 +0200p5731#31水, 21 10月 2020 09:56:57 +0200p-9Europe/Warsaw3131Europe/Warsawx31 21am31am-31水, 21 10月 2020 09:56:57 +0200p9Europe/Warsaw3131Europe/Warsawx312020水, 21 10月 2020 09:56:57 +02005695610am水曜日=588#!31水, 21 10月 2020 09:56:57 +0200pEurope/Warsaw10#10月 21st, 2020#!31水, 21 10月 2020 09:56:57 +0200p5731#/31水, 21 10月 2020 09:56:57 +0200p-9Europe/Warsaw3131Europe/Warsawx31#!31水, 21 10月 2020 09:56:57 +0200pEurope/Warsaw10# コーディングテスト, フロントエンド開発者, インタビューの質問, IT人材紹介
How to screen front end developer skills - HTML and CSS Blog

HTML and CSS are two of the most fundamental front end developer 技能. 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.

Despite what some may think, it’s becoming increasingly valuable for developers to possess in-depth knowledge and expertise of theses two languages. Verifying a developer’s HTML and CSS skills is as important as ascertaining skills in languages like Java and C++. Surely, anyone vaguely technical should have a basic understanding of HTML and CSS. In the end, that’s all you need, right? Not exactly.

HTML and CSS make up the backbone of front end development along with JavaScript. In fact, you’ll also find quite a lot of back-end developers who use these languages on a regular basis. While you will never find a developer who solely uses these languages, HTML and CSS are critical enough to modern software development to ensure that front end developers are able to use them effectively. While they are 簡明 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.

目次

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 デザイン 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 申し込み 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 勧誘員 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
金型CSS 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 此処.

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.

CSSの「リセット」と「正規化」の違いは?あなたならどちらを選びますか?

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 container.

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 重み 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 コーディングテスト 或いは 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 オンライン 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 醸し出す to show off the full extent of their skills. Here are some premade tests that incorporate HTML and CSS.

JavaScript
シニア
テストされたスキル
持続時間
57 分以内
評価
自動
テストの概要

選択問題

知識評価 イーエスエルシックス, JavaScript, エッチエムティーエル, シーエスエス, Accessibility

プログラミングタスク - レベル: ハード

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

Javascript
ミドル
ピーエッチピーエス
ミドル
テストされたスキル
持続時間
60 分以内
評価
自動
テストの概要

コードギャップ

知識評価 エスエッチエル

選択問題

知識評価 イーエスエルシックス, JavaScript, シーエスエス, エッチエムティーエル, WCAG2., ウェブアクセシビリティ

プログラミングタスク - レベル。中程度

PHP | Categories Repository - 映画に関する有効な結果をユーザーに返す PDO クエリを実装します。

エッチエムティーエル
シニア
テストされたスキル
持続時間
133 分以内
評価
自動
テストの概要

選択問題

知識評価 AJAX, JavaScript, ウェブ開発, イーエスエルシックス, タイプスクリプト, シーエスエス, エッチエムティーエル

プログラミングタスク - レベル: ハード

JavaScript|Social Media Queries|名前から友達を探す - 名前から友達を探す機能を実装する。

プログラミングタスク - レベル: ハード

CSS/HTML - Flexboxナビゲーションバー - 完全なCSS定義とFlexboxを使用してコンポーネントをレイアウトします。

ピーエッチピーエス
ジュニア
テストされたスキル
持続時間
41 分以内
評価
自動
テストの概要

コードギャップ

知識評価 エスエッチエル, シーエスエス, エッチエムティーエル

選択問題

知識評価 JavaScript

プログラミングタスク - レベル。簡単

PHP|Faker|基本的なデータ操作 - app/Fakerクラスのすべてのメソッドを実装します。

パイソン
ミドル
テストされたスキル
持続時間
168 分以内
評価
自動
テストの概要

選択問題

知識評価 シーエスエス, エッチエムティーエル

プログラミングタスク - レベル。中程度

Python|Django|休暇申請アプリ|基本CRUD - Djangoフレームワークを使って社員の休暇申請を管理するアプリを完成させます。

プログラミングタスク - レベル。中程度

JavaScript|Social Media Queries|「いいね!」の可能性を探す - 「いいね!」の可能性があると思われる本を探す機能を実装する。

パイソン
ジュニア
テストされたスキル
持続時間
65 分以内
評価
自動
テストの概要

選択問題

知識評価 シーエスエス, エッチエムティーエル

プログラミングタスク - レベル。簡単

Python|Django|通貨交換サービス - 実装完了 ジャンゴ モディフィンの両替申請 シービーブイ ビューを表示し、サービスロジックを完成させます。

プログラミングタスク - レベル。簡単

JavaScript | Orders analyzer | Find an average ordered quantity for every weekday - 注文データセットを分析して、商品の平日の平均注文数量のマップを返すメソッドを実装します。

JavaScript
ミドル
テストされたスキル
持続時間
95 分以内
評価
自動
テストの概要

選択問題

知識評価 シーエスエス, エッチエムティーエル

プログラミングタスク - レベル。中程度

JavaScript|Orders Analyzer|平日ごとの平均注文値を探す - 曜日名をキーにして、合計注文値の平均をマップで返すメソッドを実装します。

プログラミングタスク - レベル。中程度

HTML/CSS - Flexbox ナビゲーションバー - 完全な CSS 定義と Flexbox を使用してコンポーネントをレイアウトします。

シーエスエス
ジュニア
テストされたスキル
持続時間
15 分以内
評価
自動
テストの概要

選択問題

知識評価 シーエスエス

プログラミングタスク - レベル。簡単

CSS|基本的なDIVスタイリング - 編集 シーエスエス 基本的なCSSのルールとプロパティを使用したスタイルシート