21. Add an SVG graphic directly in the HTML to display a simple shape.
Required Input:
An SVG shape embedded within HTML.Expected Output:
The webpage displays an SVG shape, such as a circle or rectangle.
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. Use the <progress> tag to show a loading bar with a label indicating loading progress.
Required Input:
A progress bar with a label.Expected Output:
The webpage displays a progress bar showing loading progress.
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. Implement an accordion with multiple <details> and <summary> sections.
Required Input:
An accordion with expandable sections.Expected Output:
The webpage displays an accordion with expandable and collapsible 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.
24. Add a table with a zebra striping effect on rows using inline CSS.
Required Input:
A table with alternating row colors.Expected Output:
The webpage displays a table with rows in alternating colors.
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. Create a custom checkbox and radio button with a stylized appearance using inline CSS.
Required Input:
Custom-styled checkbox and radio button.Expected Output:
The webpage displays a custom-styled checkbox and radio button.
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 a sticky footer that stays at the bottom of the page, regardless of content length.
Required Input:
A sticky footer positioned at the bottom.Expected Output:
The webpage displays a footer that sticks to the bottom of the page.
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. Use <datalist> with an <input> field to create a dropdown list of suggested options.
Required Input:
An input field with suggested options.Expected Output:
The webpage displays an input with a dropdown of suggestions.
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. Add a contact form with an interactive phone number field that formats the number as the user types.
Required Input:
A phone input with automatic formatting.Expected Output:
The webpage displays a phone input that formats as (xxx) xxx-xxxx as the user types.
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. Implement a multi-step form with three steps and "Next" and "Back" buttons for navigation.
Required Input:
A multi-step form with navigation.Expected Output:
The webpage displays a form with steps and navigation 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.
30. Create a print-friendly version of the page that hides specific elements using media="print" in inline styles.
Required Input:
A webpage with elements hidden when printed.Expected Output:
Elements marked as hidden are not shown when printing the page.
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.
