HTML Tasks

🛠️ Task 1: Conceptual Warm-Up (Block vs. Inline)

Objective: Understand how block-level and inline elements behave in the browser layout.

1. Create an HTML file named layout_practice.html.
2. Add three block elements: a heading (<h1>), a paragraph (<p>), and a division (<div>).
3. Inside the paragraph, include two inline elements: <span> and <a> (link).
4. Challenge/Question to answer: Add a solid background color to all elements using basic CSS or inline styles. Observe which elements take up the full width of the screen (block) and which only take up as much space as their content (inline).

🎨 Task 2: Student Profile Card (Divs, Classes, and IDs)

Objective: Master structural layout using <div> and styling/identifying elements with class and id attributes.

Create a student profile card containing:

1. A main container <div id="profile-card">.
2. A unique header section <div id="profile-header"> with your name (<h2>) and major (<h3>).
3. An “About Me” section <div class="card-section"> with a paragraph description.
4. A “Skills” section <div class="card-section"> containing an unordered list (<ul>) of your top 3 skills.
5. Apply the class .card-section to multiple sections to group similar styles, while using id for unique elements like #profile-card.

📋 Task 3: Interactive Recipe & Grocery List (Lists)

Objective: Practice working with nested, ordered, and unordered lists.

Create a webpage for a simple recipe containing:

1. An Unordered List (<ul>) for the Ingredients, using bullet points.
2. An Ordered List (<ol>) for the Step-by-Step Instructions, numbered sequentially.
3. Nested List Challenge: Inside one of the ingredient list items, create a sub-list (<ul>) listing optional substitutes for that ingredient (e.g., Milk $\rightarrow$ Almond Milk / Oat Milk).

📊 Task 4: Course Schedule & Grades (Tables)

Objective: Build structured data using HTML table tags (<table>, <tr>, <th>, <td>).

Create a university weekly course schedule table with the following requirements:

1. A table header (<thead>) with column titles: Course Code, Course Name, Day/Time, and Credits.
2. At least 4 rows of course data in the table body (<tbody>).
3. A table footer (<tfoot>) with a single row calculating the Total Credits.
4. Use the colspan attribute in the footer to merge cells across the first three columns so the total aligns cleanly.

Task 5:The Personal Bio Profile (Text Tags & Attributes)

Objective: Practice basic text structure, headings, paragraphs, line breaks, and hyperlinks using attributes.

Instructions:

1. Create an HTML file and set up a basic page structure (<!DOCTYPE html>, <html>, <head>, <body>).
2. Add an <h1> heading with your full name.
3. Add a <p> paragraph describing what you are studying or your hobbies. Make your favorite hobby text bold using the <strong> tag.
4. Add an anchor (<a>) tag that links to your favorite website (like GitHub or Google). Use the href attribute for the URL and add the target="_blank" attribute so it opens in a new tab.

Task 2: The Picture Gallery (Image Tags & Attributes)

Objective: Learn how to embed images and control their presentation using attributes.

Get Ade Code’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Instructions:

1. Find a sample image online or use a local image file in your project folder.
2. Use the <img> tag to display the image on your page.
3. Use the src attribute to specify the image path or URL.
4. Add an alt attribute with a descriptive text description of what is in the image (important for accessibility).
5. Add width and height attributes to set the display dimensions of the image (e.g., width="300" or height="200").

Form Tasks:

Task 1: Student Account Registration (Basic Input Types)

Objective: Build a clean, semantic user registration form using standard input types and proper labeling.

1. Create an HTML file named register.html.
2. Create a <form> element containing:

• Full Name: Text input (type="text").
• University Email: Email input (type="email").
• Password: Password input (type="password").
• Date of Birth: Date input (type="date").

1. Accessibility Best Practice: Ensure every input is explicitly wrapped in or paired with a <label> element using the for and id attributes.
2. Add a submit <button>.

🔘 Task 2: Campus Event Survey (Selection & Choice Elements)

Objective: Master alternative input types like radio buttons, checkboxes, dropdown menus, and multiline text areas.

Create an event feedback survey form containing:

1. Radio Buttons (type="radio"): A group of options asking "What is your academic year?" (Freshman, Sophomore, Junior, Senior) sharing the exact same name attribute.
2. Checkboxes (type="checkbox"): A group allowing users to select multiple workshop topics they are interested in (e.g., Python, Web Dev, AI, Data Science).
3. Dropdown Select (<select> & <option>): A menu to select your primary "Department of Study" (Computer Science, Engineering, Business, Arts).
4. Textarea (<textarea>): A multi-line box for "Additional Comments or Feedback".

🔒 Task 3: Student Profile & Security Settings (Form Attributes)

Objective: Control form behavior, data validation, and user interaction using essential form attributes.

Create a profile settings form using the following attributes:

1. required: Make the student ID number and username fields mandatory.
2. placeholder: Add helpful placeholder text inside inputs (e.g., placeholder="e.g., J.Doe123").
3. readonly & disabled: Add an email field set to readonly (so it can't be changed) and a tier status field set to disabled.
4. maxlength & min / max: Add a student bio box restricted by maxlength="150", and a graduation year number input restricted with min="2026" and max="2030".
5. action & method: Set the <form> tag attributes to simulate submitting data securely (action="/submit-profile" and method="POST").

🚀 Final Capstone Project: University Dormitory Application Form

Objective: Combine elements, input types, attributes, and structural grouping (<fieldset> and <legend>) into a complete, professional application portal.

Build a comprehensive Dormitory Room Application Form structured with:

• Section 1 (Personal Details): Name, Student ID, Contact Number (type="tel"), and Emergency Contact. Group these using a <fieldset> and a descriptive <legend>.
• Section 2 (Room Preferences): Use radio buttons for room types (Single, Double, Suite) and checkboxes for add-ons (AC unit, Mini-fridge, Parking permit).
• Section 3 (Validation & Submission): Use the required attribute on mandatory fields, a range slider (type="range") or number input for expected check-in time, and a final submit button.