--- title: "Code Challenge: Responsiveness in HTML | CoderPad" description: "This coding challenge tests your knowledge on responsiveness and creating interactive websites. Take a stab at the tasks in this challenge!" canonical: "https://coderpad.io/blog/coding-challenges/coding-challenge-responsiveness-in-html/" last_modified: "2026-04-15 16:20:47" --- [Back to blog](https://coderpad.io/blog/) # Code Challenge: Responsiveness in HTML May 10, 2023 1 Minute Read By Umar Muhammed [Coding Challenges](https://coderpad.io/blog/coding-challenges/) 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](https://embed.coderpad.io/sandbox?question_id=248517&use_question_button). ## More resources We have made available these extra resources to improve your HTML coding skills: - [25+ HTML/CSS/JS Interview questions](https://coderpad.io/interview-questions/html-css-js-interview-questions/) ## 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](https://app.coderpad.io/register?source=Tiny+Interviews)! ## Subscribe for more CoderPad insights ## Trending Articles Previous slide Next slide [Coding Challenges ## Code Challenge: Toggle With CSS Test your understanding of HTML & CSS by completing the tasks in this code challenge. Read the post](https://coderpad.io/blog/coding-challenges/tiny-interview-toggle-with-css/) [Coding Challenges ## Code Challenge: Unsemantic Markup Semantic markup in HTML is a writing style for structuring your HTML applications. Improve the accessibility of a blog page in this tiny interview. Read the post](https://coderpad.io/blog/coding-challenges/code-challenge-unsemantic-markup/) [Coding Challenges ## Code Challenge: Mini Image Gallery A REST API is an interface that accepts connections via the internet, executes some business logic, and then returns a result. Test your knowledge of the REST API by improving the application in this code challenge. Read the post](https://coderpad.io/blog/coding-challenges/tiny-interview-mini-image-gallery/) [Coding Challenges ## Code Challenge: Vue Reusable Input Component Vue is a popular JavaScript library for building frontend applications and user interfaces. It builds on HTML, CSS and JavaScript and employs a declarative model for building components. Test your Vue knowledge by improving the input application in this tiny interview. Read the post](https://coderpad.io/blog/coding-challenges/code-challenge-vue-reusable-input-component/) [Coding Challenges ## Code Challenge: Hotel Booking Demand This two part challenge aims to test your understanding of how you can interact with data and explore it to unveil important hidden information as well as craft visualizations that spotlight various aspects of the dataset. Read the post](https://coderpad.io/blog/coding-challenges/code-challenge-hotel-booking-demand/) [Coding Challenges ## Code Challenge: Consuming API In Spring In Spring applications, consuming APIs is a common requirement for interacting with external services or fetching data from remote servers. Complete the API consumption methods for the students endpoints in this code challenge. Read the post](https://coderpad.io/blog/coding-challenges/code-challenge-consuming-api-in-spring/) [Coding Challenges ## Code Challenge: Django Models Django is a popular Python framework for building web applications. Test your knowledge of models by improving the Django application in this code challenge. Read the post](https://coderpad.io/blog/coding-challenges/code-challenge-django-models/) [Coding Challenges ## Code Challenge: Simple Search For this code challenge, you are provided with a website that has a vulnerability. Can you fix it? Read the post](https://coderpad.io/blog/coding-challenges/coding-challenge-simple-search/) [Coding Challenges ## Code Challenge: Python Longest Subarray In a street with colored houses, you want to take a picture containing the most houses, but without any duplicate colors. Can you solve this problem involving unique values? Read the post](https://coderpad.io/blog/coding-challenges/tiny-interview-python-longest-subarray/) [Coding Challenges ## Code Challenge: React Controlled Input State management is a method of controlling communication between different parts of state and their usage, including React components. Test your knowledge on state management by improving the React app in this code challenge. Read the post](https://coderpad.io/blog/coding-challenges/tiny-interview-react-controlled-input/) [Coding Challenges ## Code Challenge: Django Search Filter Django is a popular Python framework for building web applications. Test your Django knowledge by improving the search filter application in this tiny interview. Read the post](https://coderpad.io/blog/coding-challenges/tiny-interview-django-search-filter/) [Coding Challenges ## Code Challenge: Vue Counter App Vue is a popular JavaScript library for building frontend applications and user interfaces. It builds on HTML, CSS and JavaScript and employs a declarative model for building components. Test your Vue knowledge by improving the counter application in this code challenge. Read the post](https://coderpad.io/blog/coding-challenges/tiny-interview-vue-counter-app/) ## Hire with confidence. See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows. [Request a demo](https://coderpad.io/sales/)