DEV Community

Cover image for 30 Web Developer Interview Questions (With Answers)
Gedalya Krycer
Gedalya Krycer

Posted on • Updated on

30 Web Developer Interview Questions (With Answers)

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?

  1. To help myself further instill these concepts, by re-writing them.

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

1. Why is alt text important?

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

12. What is Event Delegation?

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?

23. Explain RESTful routing.

24. Explain Middleware and how you would use it in an application.

25. What are HTTP Server Response Status Codes?

MISC Development Section

26. What is lazy loading?

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."/>
Enter fullscreen mode Exit fullscreen mode

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.

Dive Deeper 🔎

Back to 🔝


2. What does the <DOCTYPE> tag in HTML do?

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
Enter fullscreen mode Exit fullscreen mode

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.

Dive Deeper 🔎

Back to 🔝


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>
Enter fullscreen mode Exit fullscreen mode
<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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

Dive Deeper 🔎

Back to 🔝


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>
Enter fullscreen mode Exit fullscreen mode

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.

Dive Deeper 🔎

Back to 🔝


5. What are different ways to use the <script> tag in HTML?

Wrapping

<body>
  ...
  <script>let Alert = ReactBootstrap.Alert;</script>
</body>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Dive Deeper 🔎

Back to 🔝


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.

Dive Deeper 🔎

Back to 🔝


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;
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Dive Deeper 🔎

Back to 🔝


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;
}
Enter fullscreen mode Exit fullscreen mode
  • The border-box value includes the border, content, and padding dimensions in the overall size.

  • The content-box value only includes the size of the content. If a border or padding is present, their additional size would be added to the overall dimensions.

Dive Deeper 🔎

Back to 🔝


9. In what ways do you use CSS Animations effectively and efficiently?

  1. CSS animations should not execute in a way that will repaint the page unnecessarily. For example, pushing an item down by adjusting the margin-top will push all other items below it down, thereby re-painting those parts of the page. Instead, a  transform: translateY() would be more efficient.

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

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

Dive Deeper 🔎

Back to 🔝


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;
}
Enter fullscreen mode Exit fullscreen mode
/* 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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Dive Deeper 🔎

Back to 🔝


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;
}
Enter fullscreen mode Exit fullscreen mode
  • The inline value will make an element take up the width of its content and sits next to other inline or inline-block elements. <span> tags are inline by default.

  • The block value takes up the full width available, pushing other elements to the next line. They can have their hights/widths adjusted and margin-top/bottom is respected. <div> tags are block by default.

  • The inline-block value has all the features of a block value, except they do not push other elements to the next line. <button> tags are inline-block by default.

  • The flex value enables a large kit of powerful CSS properties that affect the layout, alignment, and order of both parents and their child elements.

  • The grid value is very similar to flex with some changes in syntax and features. For example, it also lets you target the gap size between elements in a grid.

  • The none value will hide the element it is assigned to completely.

Dive Deeper 🔎

Back to 🔝


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
    }
  });
Enter fullscreen mode Exit fullscreen mode

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>  |
Enter fullscreen mode Exit fullscreen mode

Dive Deeper 🔎

Back to 🔝


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!`);
}
Enter fullscreen mode Exit fullscreen mode

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--;
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Dive Deeper 🔎

Back to 🔝


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}'
Enter fullscreen mode Exit fullscreen mode

Dive Deeper 🔎

Back to 🔝


15. Explain the difference between var, let, and const.

  • var is a legacy type of variable that does not respect block scoping. 

  • let and const are both ES6 variables that respect block scoping. The Let variable allows you to update it later on and the const does not.

  • Functions are often set to const because they won't stop being a function. Whereas a loop might use a let to assign and update changing information.

Dive Deeper 🔎

Back to 🔝


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
    };
  }
};

Enter fullscreen mode Exit fullscreen mode

Dive Deeper 🔎

Back to 🔝


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

Dive Deeper 🔎

Back to 🔝


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.

Dive Deeper 🔎

Back to 🔝


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

  1. The lifecycle method shouldComponentUpdate() lets us use nextState & nextProps to compare if anything changed. If it returns false, then no render will happen.

  2. Class-based components can also use a PureComponent to only render if the previous props and state are different.

  3. The useMemo hook also lets us prevent re-renders if props/state has not changed in a functional component.

Dive Deeper 🔎

Back to 🔝


20. How do you share state between components?

  • You can leverage the useContext hook 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 mapStateToProps function. 

Dive Deeper 🔎

Back to 🔝


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.

Dive Deeper 🔎

Back to 🔝


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.

Dive Deeper 🔎

Back to 🔝


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);

Enter fullscreen mode Exit fullscreen mode

Dive Deeper 🔎

Back to 🔝


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.

Dive Deeper 🔎

Back to 🔝


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"). 🫖

Dive Deeper 🔎

Back to 🔝


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. 

Dive Deeper 🔎

Back to 🔝


27. How could you improve SEO?

  • Using alt text on images

  • Adding a title meta tag to the page

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

Dive Deeper 🔎

Back to 🔝


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.

Dive Deeper 🔎

Back to 🔝


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

Dive Deeper 🔎

Back to 🔝


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.

Dive Deeper 🔎

Back to 🔝


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

Discussion (16)

Collapse
bookercodes profile image
Alex Booker

Would be amazing if you linked my post on React interview questions at the bottom, for those looking to keep going and nail the more specific React interview!

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Hey Alex, that bottom section is really more for questions that I pulled from online and used within this post to also answer. However, I did just read your React Interview Question article and it is really good, explaining a lot of concepts clearly.

If I do a React Resources post in the future this will definitely go into it. 👍

Collapse
bookercodes profile image
Alex Booker

No worries, Gedalya. Thanks for considering it :)

Collapse
letsjuscode profile image
Kamal Sharma • Edited on

Hey, it was very useful and helped brush my knowledge. Here are few more questions I was practicing from InterviewBit on HTML

1 - How to handle events in HTML?
2 - How to include javascript code in HTML?
3 - Difference between link tag and anchor tag ? 4 - What is the ‘class’ attribute in HTML? 5 - What is the difference between tag and tag?

Collapse
darkwiiplayer profile image
DarkWiiPlayer • Edited on

Here's my best attempt at getting them all wrong:

1. Why is alt text important?

So users know what they're missing out on when your admin fucks up and takes the
image server offline.

2. What does the <DOCTYPE> tag in HTML do?

It reminds you what type of file you're working on at the moment.

3. Optimize this HTML code with proper semantic elements.

add class="container header", class="container article", etc. to the divs

4. What are Open Graph meta tags?

Metainformatin that allows you to make your phishing site look more legitimate.

5. What are different ways to use the <script> tag in HTML?

<script>, <SCRIPT> <Script>, etc.

6. How comfortable are you with Bootstrap?

I usually write CSS at my desk in my office chair, which is very comfortable,
but I might occasionally do work outside, in which case I cannot guarantee my
comfyness while using Bootstrap.

7. How would you override a Bootstrap button style?

!important

8. What is the box-sizing property?

It's a CSS property that allows e-commerce sites like amazon to add semantic
information about the dimensions of a product so the user can expect what they
will be getting.

9. In what ways do you use CSS Animations effectively and efficiently?

Mostly with flash, which is very efficient by default. I also used animated gifs
with the background-image property before the industry overall abandoned that
pattern and it became considered bad practice.

10. How would you rewrite this CSS code in SCSS, using BEM naming conventions?

.BEM.buttin {, .BEM.button-with-icon {, etc.

11. What values of the display property do you know and how are they unique?

display: hidden and display: visible

12. What is Event Delegation?

The busyness practice when a new ticket is opened and the boss delegates it to
an employee matching issue-importance to employee-motivation (i.e. important
issues go to motivated employees, less important issues got to less motivated
employees and UX issues go directly to the janitor)

13. Explain the difference between the For, While, and Do...While loops.

The Four-loop repeats a block of code exactly 4 times. The while loop repeats
the code while a condition is true and the do..while loop makes sure to actually
do what you tell it to while the condition is true.

14. How do you parse data as JSON in Node.js?

eval

15. Explain the difference between var, let, and const.

var declares a new variable, let lets go of a variable (frees its memory)
and const creates a new variable and throws an error if the user tries to
let it go.

16. How does this behave differently in arrow functions, in comparison to
regular functions?

*proceeds to rant 5 minutes about whatever the interviewer is holding in their
hand as they say "this" (presumably a pen, glass of water, or maybe interview
notes)*


Okay, that's about the extent of my stamina for making up stupid answers. Maybe
someone else can take over from question 17 onward? 😉

Collapse
_dsasko profile image
Denis Šaško

Thanks for the post.

Small correction in 3. Optimize this HTML code with proper semantic elements.
<h2>This is a blog subtitle</h2> is neither semantic nor in the original part of the code.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

No problem and thank you for catching that typo! I’ll add the subhead in the original code shortly. :)

Could you elaborate on how it would not be semantic? To my understanding, text that summarizes or leads into a topic specific block of text, would be a good candidate for headline tags. And the less impactful a headline is to the main subject, the smaller designation it would get. (From h1-h6).

But eager to learn something new about it if that understanding is not correct. Thanks!

Collapse
_dsasko profile image
Denis Šaško

I agree with what you said, but the word "subtitle" is what bugs me. Headings should use the h1-h6 tags, yet subheadings (or subtitles) should be put in a regular p tags. So imho either the text inside your h2 is wrong or the h2 itself is.

Thread Thread
gedalyakrycer profile image
Gedalya Krycer Author

Ah, that makes sense now. I can see how "subhead/subtitle" could communicate something different.

My intention was for a "level 2 headline/title" vs text that follows a headline/title. I agree that in the latter case a <p> tag would be better served. :)

Collapse
davidedelpapa profile image
Davide Del Papa

Very nicely done!

One typo in the code: in the async section of <script> loading, it reads defer, not async.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thank you for catching that! Just fixed it. :)

Collapse
techtalks profile image
Ankit Kumar

Nice Collection for refreshing basics 👌👏

Collapse
amirkhan81 profile image
Amir Khan

Nicely done, with 10+ years of experience high-level articles like this are still refreshing.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thank you! Indeed, sometimes coming back to the basics can be really valuable.

Collapse
mhasan profile image
Mahmudul Hasan

Very helpful post, thanks 🙂

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

You’re welcome! Best of luck!