30 HTML Basic Exercises for Intermediate with Solutions
Master intermediate HTML skills with our comprehensive list of top 30 exercises. Dive into coding challenges that improve your understanding and proficiency in HTML, setting a solid foundation for advanced challenges. Start your journey to HTML mastery today!
Learning Objectives:
By the end of these exercises, you will be proficient in intermediate HTML concepts, such as tables, forms, multimedia integration, and semantic elements.
Exercise Instructions:
- Start with the first exercise and attempt to solve it before checking the hint or solution.
- Ensure you understand the logic behind each solution, as this will help you in more complex problems.
- Use these exercises to reinforce your learning and identify areas that may require further study.
1. Create a webpage with a main container (<div>) and two side-by-side sections (<section>) using inline CSS for width and float properties.
Required Input:
A main container with two sections, styled side by side.Expected Output:
The webpage displays two sections positioned side by side within a main container.
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.
2. Add a form that collects user feedback with fields for "Name," "Email," and "Feedback," along with a submit button.
Required Input:
A feedback form with name, email, and feedback fields, plus a submit button.Expected Output:
The webpage displays a feedback form with the specified fields and submit 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.
3. Include an image gallery with three images side by side using <img> tags and inline styles for layout.
Required Input:
Three images arranged side by side.Expected Output:
The webpage displays three images side by side.
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.
4. Create a navigation bar with links to "Home," "About," and "Contact" using an unordered list styled with inline CSS.
Required Input:
A styled navigation bar with three links.Expected Output:
The webpage displays a horizontal navigation bar with "Home," "About," and "Contact."
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.
5. Add a dropdown menu within the navigation bar, listing three sub-pages under "About."
Required Input:
A dropdown menu with three sub-links under "About."Expected Output:
The webpage displays a dropdown menu under "About" in the 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.
6. Create a responsive table with three columns ("Product," "Price," "Description") and use colspan to merge cells in the header.
Required Input:
A table with merged header cells.Expected Output:
The webpage displays a responsive table with merged header cells for product details.
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.
7. Add a form with input validation for an email field using the required attribute and pattern matching.
Required Input:
A form with validated email input.Expected Output:
The form only submits if a valid email is entered.
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.
8. Use the <figure> and <figcaption> tags to create a captioned image display.
Required Input:
An image with a caption.Expected Output:
The webpage displays an image with a caption below it.
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.
9. Add a section with a background image using inline CSS.
Required Input:
A section with a background image.Expected Output:
The webpage displays a section with a background image.
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.
10. Create a <details> and <summary> section to show or hide text content.
Required Input:
A details section with a summary.Expected Output:
The webpage displays a toggleable section with hidden text.
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.
