21. Create a sticky header that remains at the top of the page while scrolling, with inline CSS for styling.
Required Input:
A sticky header at the top of the page.Expected Output:
The webpage displays a header that stays fixed at the top while scrolling.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
22. Design a footer with three social media icons aligned horizontally, each linking to a different social media page.
Required Input:
A footer with social media links.Expected Output:
The webpage displays a footer with three horizontally aligned social media icons.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
23. Add a section with three floating action buttons (e.g., add, edit, delete), using inline CSS to position them in a row.
Required Input:
A section with three action buttons.Expected Output:
The webpage displays three action buttons aligned in a row with icons and labels.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
24. Use <map> and <area> to create an image map, with each area linking to a different section of a webpage.
Required Input:
An image map with multiple clickable areas.Expected Output:
The webpage displays an image with clickable areas that navigate to different sections.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
25. Implement a newsletter signup form with validation for email input, styled with inline CSS, including a placeholder.
Required Input:
A signup form with email validation.Expected Output:
The webpage displays a styled signup form with email validation.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
26. Add an icon next to each item in a list, with custom spacing between icons and text.
Required Input:
A list with icons and spacing.Expected Output:
The webpage displays a list with icons and appropriate spacing.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
27. Design a responsive card layout where each card has a title, image, and button, with inline CSS for card styling.
Required Input:
A responsive card layout with images and text.Expected Output:
The webpage displays a set of cards with titles, images, and buttons.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
28. Create a single-page scrolling website with three sections and anchor links for navigation.
Required Input:
A single-page layout with navigation links.Expected Output:
The webpage displays a single-page layout where each link scrolls to the respective section.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
29. Use <output> to display the result of a number range input slider, which updates the value in real-time.
Required Input:
A range slider with output.Expected Output:
The webpage displays a slider with the current value shown as it is adjusted.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
30. Add a custom-styled breadcrumb navigation at the top of the page, displaying a path like “Home > Products > Category > Item.”
Required Input:
Breadcrumb navigation.Expected Output:
The webpage displays a breadcrumb navigation bar.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
