Como fazer o screen front end de habilidades de desenvolvedor - HTML e CSS

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

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 design 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.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 application 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.

Fonte: Unsplash - Safar Safarov

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

The first hint that many recruiters 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.

3.1 HTML and CSS Glossary for technical recruiters

Front-end frameworks	Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
CSS preprocessors	Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
HTML5 frameworks	Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animations	Responsive Web Design (RWD)
Acessibilidade	A11Y
Conventions	Block Element Modifier
Ferramentas	CSS modules, CSS in JS
Others/Miscellaneous	HTML5 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

4. HTML/CSS interview questions and answers

You can find these questions and more aqui.

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.

Qual é a diferença entre "reiniciar" e "normalizar" o CSS? Qual você escolheria, e por quê?

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

5. 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 coding test 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 online 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

6. 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 develop to show off the full extent of their skills. Here are some premade tests that incorporate HTML and CSS.