Advanced Practice Problems: Integrating Your HTML Skills

Congratulations on completing the foundational lessons of this week! To further solidify your understanding and challenge your newly acquired HTML skills, we have prepared an advanced set of practice problems. These exercises are designed to combine all the concepts you've learned over the past three days—including document structure, links, images, lists, and the distinction between block and inline elements—into comprehensive and realistic projects. By tackling these integrated challenges, you'll enhance your ability to create well-structured, functional, and visually appealing web pages. Dive in and apply everything you've learned to build projects that showcase your growing expertise in HTML!

Problem 7: Personal Portfolio Page

File Name: portfolio.html

Instructions:

HTML Structure:
- Begin with the standard HTML structure (<!DOCTYPE html>, <html>, <head>, <body>).
- Set the <title> to “My Portfolio”.
Head Section:
- Include a <meta> tag for character set (UTF-8) and viewport settings for responsiveness.
Body Section:
a. Header:
- Add a <header> containing a navigation menu.
- Use an unordered list (<ul>) with list items (<li>) for navigation links: “Home”, “About”, “Projects”, “Contact”.
- Each navigation link should use the <a> tag with href pointing to corresponding section IDs (e.g., #home, #about).
b. Main Content:
- Home Section:
  - Add a <section id="home">.
  - Include a <h1> heading with your name.
  - Add a <p> introducing yourself, utilizing both block and inline elements (e.g., <strong>, <em>).
- About Section:
  - Add a <section id="about">.
  - Include a <h2> heading titled “About Me”.
  - Insert an image (<img>) of yourself or a relevant graphic with src, alt, and appropriate width.
  - Add a <p> detailing your background or interests.
- Projects Section:
  - Add a <section id="projects">.
  - Include a <h2> heading titled “My Projects”.
  - Create an ordered list (<ol>) of at least three projects.
  - Each list item (<li>) should contain:
    - The project name as a <strong> element.
    - A brief description in a <p>.
    - A link (<a>) to the project’s live site or repository, opening in a new tab (target="_blank").
- Contact Section:
  - Add a <section id="contact">.
  - Include a <h2> heading titled “Contact Me”.
  - Create an unordered list (<ul>) with contact methods:
    - Email: Display your email address as a mailto link.
    - LinkedIn: Link to your LinkedIn profile.
    - GitHub: Link to your GitHub profile.
Footer:
- Add a <footer> with a paragraph stating “© 2025 [Your Name]. All rights reserved.”

Objective:

Combine HTML structure, headings, paragraphs, images, links, lists, and semantic elements to create a cohesive and navigable personal portfolio page.
Practice using both block and inline elements within various sections.
Enhance accessibility with meaningful alt text and appropriate link attributes.

Problem 8: Recipe Webpage

File Name: recipe.html

Instructions:

HTML Structure:
- Set up the standard HTML structure.
- Set the <title> to “Delicious Pancake Recipe”.
Head Section:
- Include necessary <meta> tags for character set and viewport.
- (Optional) Link to an external CSS file for basic styling.
Body Section:
a. Header:
- Add a <header> with a <h1> titled “Pancake Recipe”.
b. Introduction:
- Add a <p> introducing the recipe, using inline elements like <strong> to highlight key points.
c. Ingredients List:
- Add a <h2> titled “Ingredients”.
- Create an unordered list (<ul>) listing all ingredients with measurements.
d. Instructions:
- Add a <h2> titled “Instructions”.
- Create an ordered list (<ol>) outlining the step-by-step process to make the pancakes.
- Within at least two <li> items, include hyperlinks (<a>) to external resources, such as a video tutorial or a substitute ingredient.
e. Image:
- Insert an image (<img>) of the finished pancakes with appropriate src, alt, and width.
f. Tips Section:
- Add a <div> (block element) containing a <h3> titled “Tips for Perfect Pancakes”.
- Inside the <div>, add a paragraph with additional tips, using inline elements like <em> for emphasis.
Sidebar:
- Add a <aside> element containing a list of related recipes.
- Use an unordered list (<ul>) with list items (<li>) that include links (<a>) to other recipe pages (use # as placeholders).
Footer:
- Add a <footer> with contact information and a link back to the top of the page.

Objective:

Integrate various HTML elements, including headings, paragraphs, images, links, lists, block and inline elements, to create a structured and informative recipe webpage.
Utilize semantic HTML elements like <header>, <section>, <aside>, and <footer> to organize content meaningfully.
Practice embedding images and links within lists and paragraphs for enhanced content richness.

Problem 9: Event Announcement Page

File Name: event.html

Instructions:

HTML Structure:
- Begin with the standard HTML structure.
- Set the <title> to “Community Meetup Event”.
Head Section:
- Include <meta> tags for character set and viewport settings.
- (Optional) Add a <link> to an external stylesheet for styling purposes.
Body Section:
a. Header:
- Add a <header> with a <h1> titled “Join Our Community Meetup!”.
b. Event Details:
- Add a <section id="details"> containing:
  - A <h2> titled “Event Details”.
  - A <p> describing the event, using inline elements like <strong> to emphasize important information.
  - An image (<img>) related to the event (e.g., venue or past event photo) with src, alt, and width.
c. Schedule:
- Add a <section id="schedule"> containing:
  - A <h2> titled “Schedule”.
  - An unordered list (<ul>) with list items (<li>) detailing the event schedule (e.g., Registration, Opening Remarks, Networking).
  - Within each <li>, include the time of each activity in a <span> with a distinct style (use the style attribute for inline CSS, e.g., style="font-weight: bold;").
d. Speakers:
- Add a <section id="speakers"> containing:
  - A <h2> titled “Featured Speakers”.
  - Create an ordered list (<ol>) of speakers.
  - Each <li> should include:
    - Speaker’s name as a <strong> element.
    - A brief bio in a <p>.
    - A link (<a>) to the speaker’s LinkedIn profile, opening in a new tab (target="_blank").
e. Registration:
- Add a <section id="registration"> containing:
  - A <h2> titled “Register Now”.
  - A paragraph explaining the registration process.
  - A link (<a>) styled as a button (use inline CSS for basic styling) that directs users to a registration form (use href="#" as a placeholder).
f. Footer:
- Add a <footer> with:
  - Contact information.
  - Social media links using an unordered list (<ul>) with inline list items (<li>) containing <a> tags and small icon images (<img>) representing each platform (e.g., Facebook, Twitter).

Objective:

Combine multiple HTML elements and structures to create a detailed event announcement page.
Utilize lists (ordered and unordered) to organize schedules and speaker information.
Incorporate images and links effectively to enhance the page’s functionality and visual appeal.
Practice using block and inline elements within various sections to format content appropriately.
Implement semantic HTML elements to ensure the page is well-structured and accessible.

Review, Prof. Development, Extra practice