Back to blog
Code Challenge: Responsiveness in HTML
The goal of this challenge is to test your knowledge on responsiveness and implementation of dropdowns to create interactive websites by accomplishing the goals listed in the next section. We have provided you a book club website in the sandbox below.
Goals
- For a viewport of 628px, implement a breadcrumb that toggles the navigation links on click. The links should be vertically aligned as commonly seen in mobile phones. Also, implement a dark background for the navbar.
- On screens >628px (larger screens), rather than have related information as navigation links, embed the links: Support us and Our partners as dropdowns inside the Get involved navigation link. The dropdown should be visible on hover.
- On click of the Support us dropdown link, it should navigate to the Subscribe to our newsletter.
Side notes
You can add new html elements in the html file and style them using any class names you desire. What matters is the output.
Code challenge solution
Verify your solution with the official solution in this sandbox.
More resources
We have made available these extra resources to improve your HTML coding skills:
Want to conduct interviews on this platform?
Check out CoderPad : pick any interview question or create your own, then invite your candidate to a shared live-coding session on an IDE like this one. You even get 2 free interviews per month forever using this registration link!