30 Web Developer Interview Questions (With Answers)
Gedalya Krycer
Posted on January 4, 2021
Overview
I don't know about you, but technical interviews are not my favorite. That said, they can be an effective way to discover new areas of improvement.
My routine after each interview is to research any question(s) that I didn't feel confident answering and write a short summary about them.
The following are some of those interview questions and a few additional ones I have seen online.
Quick Links:
Experince Level
I have about 1 year of almost daily coding experience (Bootcamp + Freelancing) with some additional misc web knowledge from being a web designer.
Why Write Another "Interview Question" List?
To help myself further instill these concepts, by re-writing them.
To help others at a similar level know what to expect.
I still encourage you to research your own answers, which is why each section has handy research links for you to dive deeper. 😁
Feel free to chime in below with how you would answer these differently. I am eager to learn additional best practices from this awesome developer community. 💪
Questions
HTML Section
2. What does the <DOCTYPE> tag in HTML do?
3. Optimize this HTML code with proper semantic elements.
4. What are Open Graph meta tags?
5. What are different ways to use the <script> tag in HTML?
CSS Section
6. How comfortable are you with Bootstrap?
7. How would you override a Bootstrap button style?
8. What is the box-sizing property?
9. In what ways do you use CSS Animations effectively and efficiently?
10. How would you rewrite this CSS code in SCSS, using BEM naming conventions?
11. What values of the display property do you know and how are they unique?
JavaScript Section
13. Explain the difference between the For, While, and Do...While loops.
14. How do you parse data as JSON in Node.js?
15. Explain the difference between var, let, and const.
16. How does this behave differently in arrow functions, in comparison to regular functions?
React Section
17. What happens if you change state directly in React?
18. How do you send information to a child component in React?
19. If one component gets props and is re-rendered, does anything else get rendered again?
20. How do you share state between components?
21. How would you debug an issue in a React-Redux application?
Backend Section
22. What's the purpose of Mongoose?
24. Explain Middleware and how you would use it in an application.
25. What are HTTP Server Response Status Codes?
MISC Development Section
27. How could you improve SEO?
28. What testing framework are you comfortable with?
29. How can you improve a website's load time?
30. How would you navigate a codebase?
HTML Section
1. Why is alt text important?
<img src="libary.jpg" alt="Young woman in the library sitting by a table of books."/>
They give an image a description that both browsers and screen readers can see.
This is important because unlike text, images can't provide a lot of context about what they are about. So this is very helpful for both SEO and accessibility.
Browsers will also display this alt tag when an image breaks, which helps improve the user experience.
2. What does the <DOCTYPE> tag in HTML do?
<!DOCTYPE html>
<html lang="en">
<head>
...
This is a tag we specify at the very top of the HTML files in order to let the browser know what version of HTML we are using. This helps the browser understand the syntax in the file.
3. Optimize this HTML code with proper semantic elements.
<!-- Orginal Code -->
<div>
<div>
<div>This is a blog Title</div>
<div>This is the main blogs body text...</div>
<img src="cars.jpg" />
<div>Image caption</div>
<div>This is a blog subtitle</div>
<div>More body text...</div>
</div>
<div>
<div>Categories</div>
<div>
<a href="#">Category 1</a>
<a href="#">Category 2</a>
<a href="#">Category 3</a>
</div>
</div>
</div>
<!-- Refactored Code -->
<section>
<article>
<h1>This is a blog Title</h1>
<p>This is the main blogs body text...</p>
<figure>
<img src="cars.jpg" alt="3 cars driving down a hilly road."/>
<figcaption>Image caption</figcaption>
</figure>
<h2>This is a blog subtitle</h2>
<p>More body text...</p>
</article>
<aside>
<h3>Categories</h3>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</aside>
</section>
Changes
A
<section>tag was used to wrap all blog content since they go together.-
An
<article>tag was used to signal the main blog content.- An
<h1>tag was given to the title since it needs the most semantic value. - An
<h2>was used on the subhead since it is important but less so than the title. - An
<p>tag was used to wrap all regular article copy. - An
<alt>attribute was added to the image for enhanced accessibility and SEO benefits. - A
<figure>and<figcaption>was used to associate the image and caption together.
- An
-
An
<aside>was used to wrap the category elements, since it only indirectly relates to the main blog content.- An
<h3>was used for the category title as it has the least semantic impact of all the titles. -
<ul>and<li>tags were used to wrap the category links for improved accessibility.
- An
4. What are Open Graph meta tags?
<head>
<!-- Primary Meta Tags -->
<title>trust4leaders</title>
<meta name="title" content="trust4leaders">
<meta name="description" content="We are on a mission to improve outcomes by developing trust between people.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="changeforleaders.com">
<meta property="og:title" content="trust4leaders">
<meta property="og:description" content="We are on a mission to improve outcomes by developing trust between people.">
<meta property="og:image" content="/assets/img/og-image.jpg">
<!-- Twitter -->
<meta property="twitter:url" content="changeforleaders.com">
<meta property="twitter:title" content="trust4leaders">
<meta property="twitter:description" content="We are on a mission to improve outcomes by developing trust between people.">
<meta property="twitter:image" content="/assets/img/og-image.jpg">
<meta property="twitter:card" content="summary_large_image">
</head>
These are special meta tags that can be used in the HTML <head> to display information in a media-rich card on social media sites. Information can include an image, title, description, URL, and type.
Facebook established the Open Graph (OG) meta tags and most platforms use them. However, it is worth noting that Twitter provides its own syntax. (Shown above.)
Many platforms also provide a "debugger" that will scrape the URL for these tags and preview what the post will look like.
5. What are different ways to use the <script> tag in HTML?
Wrapping
<body>
...
<script>let Alert = ReactBootstrap.Alert;</script>
</body>
Wrapping client-side scripting languages (like JS) in <script></script> tags will run the code. This is placed at the bottom of the body, as to not block the DOM from rendering.
Importing
<body>
...
<script src="./index.js"></script>
</body>
An external script can be imported by adding an src attribute to the script tag. This is the preferred method as it lets you cleanly modularize the code and not bind it to a single HTML file.
Defering Import
<head>
...
<!-- Will run after DOM loads -->
<script defer src="./script1.js"></script>
<!-- Will run after DOM and script1.js loads -->
<script defer src="./script2.js"></script>
</head>
<body>
...
</body>
The defer attribute will stop the script from running until all the content on the HTML file (DOM) has rendered. However, it will still download from the server in parallel to the DOM and then run in synchronous order.
This is really helpful for performance and also means that the script will then have ample access to any HTML elements it needs to attach handlers to.
Async Import
<head>
...
<!-- Will run second since it downloads slower -->
<script async src="./longScript.js"></script>
<!-- Will run first since since it downloads faster -->
<script async src="./shortScript.js"></script>
</head>
<body>
...
</body>
The async attribute will load and run the script at the same time as the page. It will also asynchronously run its script before any other scripts have finished loading. It is really good for 3rd party features that our site does not rely on. (Such as Google Analytics.)
CSS Section
6. How comfortable are you with Bootstrap?
I feel pretty comfortable with the framework. I have used it on several sites via a CDN link, as well as locally hosting the source files and theming them with SASS.
On a few React projects, I also used the react-bootstrap version of the framework.
Lately, I have been focusing more on using "vanilla" CSS tools like Flexbox and CSS Grids. This allows me to understand the inner workings of the framework more and not be dependent on it.
7. How would you override a Bootstrap button style?
CSS Overides
.btn {
border-radius: .75rem;
}
.btn-primary {
background-color: #1f48bb;
}
#heroBanner .btn-primary {
background-color: #1f48bb;
}
I can target the .btn class and variations of it like .btn-primary with my own CSS, as long as my CSS file is below the bootstrap CDN link.
In certain cases, there might be specificity issues and then I string other selectors like an ID to increase the specificity.
SCSS Overides
$btn-border-radius: 10rem;
.btn {
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.15);
font-weight: 700;
&:hover {
box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.15);
background: $brandGradient1;
}
}
Preferably I would instead target Bootstrap styles and SASS Variables directly.
Here I would not modify the original framework files, because in a Bootstrap update my changes might get overwritten. Instead, I would still create a seperate SCSS file for my button overrides and put the new styles there.
8. What is the box-sizing property?
This affects how big an element will be, by determining what parts of the CSS box model are included in the overall size.
/* Size: 100x100px */
.box1 {
display: border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 1px solid black;
}
/* Size: 142x142px */
.box2 {
display: content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 1px solid black;
}
The
border-boxvalue includes the border, content, and padding dimensions in the overall size.The
content-boxvalue only includes the size of the content. If a border or padding is present, their additional size would be added to the overall dimensions.
9. In what ways do you use CSS Animations effectively and efficiently?
CSS animations should not execute in a way that will repaint the page unnecessarily. For example, pushing an item down by adjusting the
margin-topwill push all other items below it down, thereby re-painting those parts of the page. Instead, atransform: translateY()would be more efficient.Another thing to avoid is tying the
filter: blur()(or any filter properties) to a long scroll-based animation. I once tried to blur a hero image on a scroll and it slowed the whole page, especially on Safari.Use variations in timing and animating in opposing directions can bring interest. You can adjust the cubic-bezier to have elements start and end at different speeds. And by having one element subtly moving down and another up at the same time can create a nice tension.
10. How would you rewrite this CSS code in SCSS, using BEM naming conventions?
/* Orginal Code */
.button {
height: 40px;
max-width: 200px;
font-size: 20px;
}
.button-with-icon {
color: black;
background-color: white;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
.primary-button {
color: white;
background-color: green;
}
.danger-button {
color: white;
background-color: red;
}
.button:hover,
.primary-button:hover,
.primary-button-with-icon:hover {
background-color: blue;
}
.big-danger-button:hover {
opacity: 0.5;
}
/* Refactored Code */
.button {
height: 40px;
max-width: 200px;
font-size: 20px;
&__icon {
color: black;
background-color: white;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
&--primary {
color: white;
background-color: green;
}
&:hover {
background-color: blue;
}
&--danger {
color: white;
background-color: red;
&:hover {
opacity: 0.5;
}
}
}
This solution uses the BEM methodology of breaking out blocks, elements, and modifiers into their own classes while keeping a contextual relationship. With SASS's nesting features, I was able to shorten the amount of code needed as well.
11. What values of the display property do you know and how are they unique?
.box {
display: inline;
display: block;
display: inline-block;
display: flex;
display: grid;
display: none;
}
The
inlinevalue will make an element take up the width of its content and sits next to otherinlineorinline-blockelements.<span>tags areinlineby default.The
blockvalue takes up the full width available, pushing other elements to the next line. They can have their hights/widths adjusted andmargin-top/bottomis respected.<div>tags areblockby default.The
inline-blockvalue has all the features of ablockvalue, except they do not push other elements to the next line.<button>tags areinline-blockby default.The
flexvalue enables a large kit of powerful CSS properties that affect the layout, alignment, and order of both parents and their child elements.The
gridvalue is very similar toflexwith some changes in syntax and features. For example, it also lets you target the gap size between elements in a grid.The
nonevalue will hide the element it is assigned to completely.
JavaScript Section
12. What is Event Delegation?
When dealing with interactive elements, (like a button) we typically attach a unique event listener to the element, allowing us to execute some code when fired.
However, this can cause major performance issues if we have a large group of buttons or a table that has hundreds of clickable cells.
Event Delegation allows us to significantly optimize this issue, by only assigning one event listener to handle all clicks.
We can instead assign a single event listener to the parent/container of the group of elements we want to click on. (For example, a div that holds several buttons.)
document.getElementById('parent')
.addEventListener('click', event => {
if (event.target.className === 'buttons') {
// Code executed here
}
});
In order to do this, we use a process called Event Propagation, where any item that is targeted (clicked) will send an event back up to the root element in the DOM. This is known as "bubbling" or "bubble up from the target", which the parent element can then listen for.
ROOT | Window ^
| Document | Event
| <html> | Bubbling
| <body> | Back Up
| <div> |
TARGET v <button> |
13. Explain the difference between the For, While, and Do...While loops.
For Loop
This loop cycles through a block of code until a specified numeral condition is met. We can set up a starting variable, a condition or endpoint for it, and then an amount it should increment each loop.
for(let i = 1; i <= 5; i++) {
console.log(`This ran ${i} times!`);
}
While Loop
This loop cycles through a block of code until the condition it is checking against returns false. This is good to use when don't have a specific amount to set a condition to.
let cats = 5;
while(cats <= 0) {
console.log(`There are still ${cats} here!`);
cats--;
}
Do...While Loop
This loop will execute a block of code and then check a condition. It will keep executing the code and checking (in that order) until the condition is false.
let cats = 5;
do {
console.log(`There are still ${cats} here!`);
cats--;
} while(cats <= 0)
14. How do you parse data as JSON in Node.js?
I would use the JSON.parse() method to take a JSON string and converts it into an object or array. I could then use JSON.stringify() to turn the array or object back into a string.
const json = '{"result":true, "count":42}';
// Parsing
const object = JSON.parse(json);
console.log(object.count); // expected output: 42
// Stringify
const string = JSON.stringify(object);
console.log(string); // expected output: '{"result":true, "count":42}'
15. Explain the difference between var, let, and const.
varis a legacy type of variable that does not respect block scoping.letandconstare both ES6 variables that respect block scoping. The Let variable allows you to update it later on and theconstdoes not.Functions are often set to
constbecause they won't stop being a function. Whereas a loop might use aletto assign and update changing information.
16. How does this behave differently in arrow functions, in comparison to regular functions?
Arrow functions preserve the this context to the outer function.
If we used a regular function for the callback, using this in it would refer to the callback function instead.
const myObject = {
myMethod(items) {
console.log(this); // logs myObject
const callback = () => {
console.log(this); // still logs myObject
};
}
};
React
17. What happens if you change state directly in React?
It can lead to bugs. useState and setState do not always immediately update the state. Rather, they create something called a "pending state transition" and put the state change in a queue.
So if you directly mutate the state before React had a chance to do so from the queue, it could very well get overwritten.
State should always be treated as "immutable".
18. How do you send information to a child component in React?
Using props on the child component allows you to send data from the parent component. The child component often sets up the structure to receive data inputs via the props from the parent level.
Information cannot be sent back up via props to the parent component, however.
19. If one component gets props and is re-rendered, does anything else get rendered again?
Any child components of that component receiving props will also re-render. We can prevent re-renders with a number of methods...
The lifecycle method
shouldComponentUpdate()lets us usenextState&nextPropsto compare if anything changed. If it returns false, then no render will happen.Class-based components can also use a PureComponent to only render if the previous props and state are different.
The
useMemohook also lets us prevent re-renders if props/state has not changed in a functional component.
20. How do you share state between components?
You can leverage the
useContexthook and make the state available to specific components via a provider.State can be passed down through props, although this can get complex if we are moving multiple levels down.
State can be stored in the react Redux store, via dispatching action payloads. Then other components can consume this state with the
mapStateToPropsfunction.
21. How would you debug an issue in a React-Redux application?
I would use the Chrome Redux Dev Tools extension to visualize where states are not firing correctly.
Once narrowing down in the process there is a bug, I would check the reducers, store, and action creators for errors.
If they look ok, I would then look at the components that are dispatching and accessing the store.
Backend Section
22. What's the purpose of Mongoose?
Mongoose is an ODM that provides schema validation and structure to MongoDB. It manages the relationships of the data since MongoDB doesn't inherently offer a lot of structure.
23. Explain RESTful routing.
This is where we can use HTTP verbs (GET, POST, PUT and DELETE) and map them to server-side CRUD actions.
By setting up separate routes for different actions, we can establish logical ports to perform certain operations.
Such as receiving an array of all users from a GET route vs removing a specific user with a DELETE route.
// FRONT-END
axios.get('/users')
.then(response => {
// do something
})
.catch(err => {
// do something
})
axios.delete(`/user/${userId}`)
.then(response => {
// do something
})
.catch(err => {
// do something
})
// BACKEND
router
.route("/user/:id")
// gets a user by id
.get(userController.findById)
//delete user
.delete(userController.remove);
24. Explain Middleware and how you would use it in an application.
Middleware is like a gatekeeper between a requester and a service.
It intercepts the request, performs some sort of check on it, and then passes it along to the next point or rejects it.
Example
Let's say the client requests access to a page. We can use an authentication middleware like Passport, which validates that request to see if the user is signed in.
If they are not, they might be redirected to the login screen. If they are authenticated then the Passport middleware will allow the request through the server.
25. What are HTTP Server Response Status Codes?
These are numeric codes that the server sends to the client about the status of a request.
For example, a 200 status code means the request has been received ok. Whereas a 404 means that a page is not found.
There are many requests, some helpful and others are plain silly. (418 means "I'm a teapot"). 🫖
MISC Development Section
26. What is lazy loading?
Lazy loading is the process of delaying content and data from loading into the page until a specific parameter is met.
This is used in conjunction with the Intersection Observer API to tell when content is intersecting with different parts of the viewport. It is at this point when the front-end starts making requests to load data.
This helps save on bandwidth costs, load time, and data download costs. Since only content that is being viewed will be downloaded from the server.
27. How could you improve SEO?
Using
alttext on imagesAdding a
titlemeta tag to the pageAdding a meta description to the page
Making sure the font sizes are readable (16-18px for most body and no smaller than 12px)
Having click zones be large enough for mobile (35-45px height is a good target area)
Having quality and unique content that adds value. (Just having reposts and affiliate links can be damaging)
Having copy that is written with local verbiage. (Sites in England vs the United States should mind the spelling of common words: color vs. colour)
Giving links descriptive verbiage (“Read SEO Report” vs “click here")
Using good semantic HTML structure, instead of putting everything in a
div.Making sure all relevant pages are not being blocked for indexing
Submitting a sitemap to Google Search Console
Adding video embeds to articles that encourage users to stay on the page. Longer on-page time can improve rankings.
28. What testing framework are you comfortable with?
I have used Jest a little bit in my Bootcamp, along with Enzyme for React. I also went over concepts like Unit Testing, Test Driven Development, and Separation of Concerns.
While I don't have a lot of experience with these frameworks yet, I am eager to learn more.
29. How can you improve a website's load time?
Properly compress images with Photoshop and then tinyjpeg.com. (Jpeg file format, 72dpi, double-width/height for retina displays )
Use Gzip on Node applications to compress all files sent over the network.
Use proper script loading orders so that heavy scripts don’t load too early if possible.
Implement Lazy load on images and below the fold content
Serving files from CDN so the servers are located closer to the user
Reduce the number of fonts being used
Minify CSS & JS
Utilize a dedicated server instead of a shared server to reduce throttling and higher bandwidth capacities
If the site is WordPress, reduce the number of plugins being used
30. How would you navigate a codebase?
I would first see if there is a mentor on my team who could help walk through what are the important areas that affect my tasks and to whom I could send questions to.
Then I would assess what types of technologies are being used in those areas. I'd also ask if there are any documentation or guidelines to keep in mind when studying the code.
If an issue arises, I spend around 15-20 min debugging before asking for help. That way I am giving an honest shot to work through the issue, but not wasting 4 hours of company time solving a problem that might have already been resolved some other way.
Additional Questions Seen At:
What Do You Need to Know as a Junior Frontend Developer + Bonus Interview Questions
70 JavaScript Interview Questions
Header image designed with Adobe Photoshop and Unsplash
Posted on January 4, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
