Blog

Frontend Developer Interview Questions HTML

🗓 February 28, 2018⏱ 5 min readEdit this Post Opens in new tab

In this blog post I answered the HTML Questions from the Frontend Developer Interview Questions. This is a GitHub repo which contains helpful lists of frontend related questions to test yourself or extend your knowledge.

What does a DOCTYPE do?

The doctype makes sure the document gets parsed the same way by different browsers. It prevents the browser from switching into "quirks-mode" Opens in new tab when rendering a document.

How do you serve a page with content in multiple languages?

By using the lang attribute on the html element lang="en".

What kind of things must you be wary of when design or developing for multilingual sites?

You have to enable an easy way for users to change their language. There is also the possibility that people from different countries need different content.

What are data- attributes good for?

data- attributes ca be used to store extra information on standard, semantic HTML elements without using non-standard attributes.

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

MDN lists several groups which form the building blocks of HTML5 and contain many different technologies:

Semantics: allowing you to describe more precisely what your content is
Connectivity: allowing you to communicate with the server in new and innovative ways
Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently
Multimedia: making video and audio first-class citizens in the Open Web
2D/3D graphics and effects: allowing much more diverse range of presentation options
Performance and Integration: providing greater speed optimization and better usage of computer hardware
Device access: allowing for the usage of various input and output devices
Styling: letting authors write more sophisticated themes

Describe the difference between a cookie, sessionStorage and localStorage.

When using a Cookie, data is sent to the server and is primarly for server-side reading (but can also be read on the client side). The size must be less than 4KB.

When using sessionStorage, the data is stored in the browser and can only be read on the clientside. The stored data is only available for one session, so when the browser tab gets closed, the data gets deleted. The storage limit is larger than a Cookie (at least 5MB).

When using localStorage, the data gets also stored in the browser and can only be read on the clientside. But it has no expiration date and the storage limit is the maximum of the three.

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

The regular script tag is used to embed or reference executable code and is typically used to embed or refer to JavaScript code. When the browser comes during the HTML parsing by a script tag it stops the rendering and executes the JavaScript tag.

Using the script async tag will not block the rendering, but will run the script as soon as it is downloaded and available.

The script defer tag will defer the script and run it after the page is done parsing.

Why is it generally a good idea to position CSS links between head and JS scripts just before the body ends? Do you know any exceptions?

The CSS link has to be positioned in the head so it is downloaded and the styling is available as fast as possible. If the css link is positioned inside the body it is possible that the page is displayed without CSS for a short periode of time. This is called FOUC (Flash of unstyled content).

It is also a good idea to put the JS script before the closing body tag. If you put the JS script tag in the head or before the actual HTML content in the body, the browser will stop the rendering and first download all the JS.

So it could be the case that the web page is only half visible for a short periode of time because the rendering is blocked to download the JavaScript first.

Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.

The srcset attribute is used to provide the same image in different versions, depending on the viewport. So you can display the image with different width and quality for mobile and different width and quality for desktop.

With the srcset attribute you will allow the browser to choose between, and what size each image is. First you have to insert the file name, a space followed by the image's inherent width in pixels.

The additional attribute sizes adds a set of media queries and tells the browser what image size to choose when certain conditions are true. The sizes attribute contains the media condition (max-width: 680px), a space, followed by the width of the slot the image will fill when the media condition is true.

Sources & Further Reading

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco