Submission deadline : Tuesday 15th of October 2024
OBJECTIVE:
To assess your understanding of basic HTML tags, forms, tables, lists, and the fundamental concepts of CSS for styling.
INSTRUCTIONS:
Create a webpage that consists of three sections:
1. A profile information form using various HTML form elements. 2. A table to display a simple summary of data. 3. A formatted article using basic HTML tags and styled with CSS. Use HTML to structure the content and CSS for basic styling.
PART 1: PROFILE INFORMATION FORM
Create a form to collect user information. Use the following fields:
1. Full Name (input text)
2. Email Address (input email) 3. Password (input password) 4. Date of Birth (input date) 5. Gender (radio buttons: Male, Female, Other) 6. Hobbies (checkboxes: Reading, Traveling, Music, Sports) 7. Country (select dropdown with at least 4 options) 8. Profile Picture (file upload) 9. Short Bio (textarea) 10. Phone Number (input tel) 11. Favorite Color (input color) 12. Website URL (input url)
Include:
A submit button A reset button
Requirements:
Use appropriate HTML input types for each field.
Include labels for each input field. Ensure the form is properly grouped using fieldset and legend. PART 2: DATA SUMMARY TABLE Create a table that summarizes user information:
Field Description Value
Full Name User's full name (Your Input) Email Address User's email address (Your Input) Date of Birth User's date of birth (Your Input) Add at least 5 more rows to the table using data from the form (e.g., gender, hobbies, etc.). Use the <table>, <thead>, <tbody>, and <tfoot> tags. Apply basic CSS to style the table (e.g., borders, padding, alternating row colors).
PART 3: FORMATTED ARTICLE WITH LISTS
Write a short article on "The Importance of Learning Web Development."
Structure the article with:
A Heading (<h1>) A Subheading (<h2>) At least one paragraph (<p>) describing the topic An unordered list (<ul>) of benefits (e.g., increased job opportunities, creativity, problem-solving) An ordered list (<ol>) of steps to start learning web development (e.g., 1. Learn HTML, 2. Practice CSS, 3. Explore JavaScript, etc.) An image (<img>) relevant to web development with proper alt text A link (<a>) to an external resource on web development
Part 4: Basic CSS Styling
Add basic styling to your webpage using CSS:
1. Set the font style for the whole page to Arial.
2. Center-align the main heading (<h1>). 3. Apply a background color to the form section. 4. Set the width of the form to 500px and add padding and margins. 5. Add borders to the table and style the header row differently. 6. Add a hover effect to the link in the article (e.g., change color on hover). 7. Use CSS Flexbox or CSS Grid to create a responsive layout. 8. Add any other custom styling to enhance the visual appearance of the page.
Submission Guidelines:
Submit the HTML file and an external CSS file.
Ensure your code is well-formatted and includes comments where necessary. Sample Output of The Webpage (Students can change styles or add some more feature if they want)
