Prepare for web development interviews with a comprehensive review of key technologies, enhanced through practical exercises and project-based learning.

Become a Web Developer

This module equips you with everything needed to ace web developer interviews. You’ll start by reinforcing your foundational knowledge of HTML, CSS, and JavaScript through structured challenges and projects that simulate real-world problems. These exercises will help sharpen your skills in rendering, layout creation, and scripting.

Additionally, you’ll dive into SQL and PHP, practicing essential tasks like database manipulation and server-side logic. By the end of this module, you’ll be well-prepared for technical interviews, with a solid grasp on the critical concepts that interviewers look for in web developers.

Web Development Interview Questions

## Styling
Let's put the finishing touches to our component.

We'll start with the styling. Comparing the tooltip we've built to the model Medium has, I notice they add some rounded corners, add some padding, and use a dimmer color for the divider, so it doesn't stand out so much as our's does.

:root {
  --tool-tip-color: #323230;
  --tool-tip-divider-color: #666;
}

.tooltip {
  user-select: none;
  width: 10rem;
  height: 2rem;
  background: var(--tool-tip-color);
  text-align: center;
  position: absolute;
  border-radius: 5px;
  padding: 0.2rem;
  padding-top: 0.5rem;
}

.tooltip__tail {
  width: 0; 
  height: 0; 
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  border-top: 10px solid var(--tool-tip-color);
}

.tooltip__icon {
  vertical-align: bottom;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  text-align: center;
}

.tooltip__divider {
  display: inline-block;
  width: 0.1rem;
  height: 80%;
  vertical-align: top;
  border-left: 1px solid var(--tool-tip-divider-color);
}

.tooltip__icon__svg {
  width: 100%;
  height: 100%;
  fill: white;
}

.article {
  margin: 0 auto;
  width: 500px;
  background: yellow;
  margin-top: 5rem;
}

<html>
<head>
</head>
<body>
  <div class="article">
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sem pellentesque, ultricies dolor egestas, malesuada mauris. Fusce lorem felis, egestas tincidunt purus et, sodales luctus lectus. Praesent a congue eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae malesuada urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris justo. Curabitur rutrum, est nec viverra rutrum, dolor est volutpat dolor, vitae auctor urna nulla nec nibh. Nunc convallis libero luctus purus auctor, sed aliquet lectus fermentum. Nunc a massa ac sapien viverra consequat.
    </div>
    <br>
    <div>
      Aliquam arcu mi, vehicula a sodales ut, dictum sit amet ex. Sed nec enim sed elit dapibus porta at eu felis. Quisque faucibus vel sem in bibendum. Nulla dictum, nunc in mattis tincidunt, nisi sapien blandit metus, ut bibendum tortor metus non nunc. Duis eu ultricies risus, quis mollis magna. Duis efficitur congue ante ut imperdiet. Vestibulum at sodales eros. Etiam id dictum ligula.
    </div>
  </div>
</body>
</html>

codemirror

## Changelist
- Defined a divider color.
  - Sometimes, even if something is used once, it could make sense to create a variable for it. This is especially true if the context is unclear
- Separate divider into its own div
  - Since you can't set percentage heights for borders, I let the divider occupy its own div to do so. Otherwise, the border would've looked like this: 
  - ![](/api/collection/5750244981604352/5757334940811264/page/5655608640405504/image/5711312218750976)
  - I should note there's probably hacky ways to do it, like set a gradient that only has the middle 80% colored, and the rest is set to the background color to blend in. You want to avoid these sorts of solutions as much as possible, though. How do you recognize unconventional solutions? It simply comes from experience. Usually, it's something new you haven't done or seen before and makes you feel uneasy about its brittleness.
- Wrap the `svg`'s in divs
  - It is useful when defining excessive divs early on. In this case, our SVG content was not perfectly flush to the space it occupied, which made positioning more difficult
  - To demonstrate, this is the svg with the background set to blue:
  - ![](/api/collection/5750244981604352/5757334940811264/page/5655608640405504/image/5678807906254848)
- Add padding and rounded corners
  - Not much to say here. I will note, however, one small detail. Notice how I've defined `padding: x` and then `padding-top: y` right below it. To me, this is cleaner than `padding: y x x x`, which would've been equivalent. This is purely based on taste, though.

# Styling
Let's put the finishing touches to our component.

We'll start with the styling. Comparing the tooltip we've built to the model Medium has, I notice they add some rounded corners, add some padding, and use a dimmer color for the divider, so it doesn't stand out so much as our's does.

# Changelist
- Defined a divider color.
  - Sometimes, even if something is used once, it could make sense to create a variable for it. This is especially true if the context is unclear
- Separate divider into its own div
  - Since you can't set percentage heights for borders, I let the divider occupy its own div to do so. Otherwise, the border would've looked like this: 
  - ![](/api/collection/5750244981604352/5757334940811264/page/5655608640405504/image/5711312218750976)
  - I should note there's probably hacky ways to do it, like set a gradient that only has the middle 80% colored, and the rest is set to the background color to blend in. You want to avoid these sorts of solutions as much as possible, though. How do you recognize unconventional solutions? It simply comes from experience. Usually, it's something new you haven't done or seen before and makes you feel uneasy about its brittleness.
- Wrap the `svg`'s in divs
  - It is useful when defining excessive divs early on. In this case, our SVG content was not perfectly flush to the space it occupied, which made positioning more difficult
  - To demonstrate, this is the svg with the background set to blue:
  - ![](/api/collection/5750244981604352/5757334940811264/page/5655608640405504/image/5678807906254848)
- Add padding and rounded corners
  - Not much to say here. I will note, however, one small detail. Notice how I've defined `padding: x` and then `padding-top: y` right below it. To me, this is cleaner than `padding: y x x x`, which would've been equivalent. This is purely based on taste, though.

This lesson will help you learn how to make your tooltip look pretty so it delivers a great user experience!

HTML

CSS

JavaScript

JavaScript Project: Building Tooltips

Databases

PHP

Conclusion

Adding Styling

Styling

Changelist