Practice Problems

Create a new HTML file for each problem to apply semantic concepts.

Problem 1: Simple Webpage Structure

File Name: problem1.html
Use <header> for your page’s title or branding.
Include a <nav> with at least three links (e.g., Home, About, Contact).
Place a <main> tag containing at least one <section> describing yourself.
End with a <footer> that contains any relevant contact details or a copyright.

Problem 2: Article Layout

File Name: problem2.html
Create a webpage with an <article> representing a blog post.
Include a <header> inside <article> with a post title and publication date.
Write a few paragraphs of placeholder text, and a <footer> inside <article> for an author’s name or social links.
Add a separate <section> on the page for “Related Posts” or “Further Reading,” containing a simple list of links.

Problem 3: Multi-Section Page

File Name: problem3.html
Design a landing page with:
- A <header> at the top (include a <nav> menu).
- A <main> containing:
  - At least two <section> elements (e.g., “Services,” “Testimonials”).
  - One <article> for a featured update or news.
- A <footer> summarizing the page or including site-wide links.
Focus on logical structuring. Add headings (<h2>, <h3>) to clarify each section’s content.

Assignment Submission

After completing these exercises, call Mike over for feedback on your newly created HTML documents.

Advance Problems

Problem 4: Personal Portfolio Page

File Name: problem4.html

Instructions:

Overall Structure:
- Use the standard HTML document structure.
- Include a <header>, <main>, and <footer> for a complete page layout.
Header:
- Inside the <header>, add a site title (e.g., your name or “My Portfolio”).
- Include a <nav> with at least four links (e.g., Home, About, Projects, Contact).
Main Content:
- Create a <section> titled “About Me” using an <h2> heading.
  - Add a paragraph or two describing yourself.
- Create another <section> titled “Projects” using an <h2> heading.
  - Within this section, use one or more <article> elements to represent individual projects.
  - Each <article> should include:
    - A <header> with the project name and date.
    - A brief description in a <p>.
    - A <footer> with a link (e.g., “Read More”) or additional project details.
Footer:
- In the <footer>, include your contact details or a short copyright notice.

Objective:

Build a portfolio page that clearly distinguishes different content areas using semantic elements, improving both readability and accessibility.

Problem 5: News Portal Homepage

File Name: problem5.html

Instructions:

Overall Structure:
- Set up the HTML document with <header>, <main>, and <footer>.
Header:
- Add a <header> that includes the news portal’s name (e.g., “Daily News”).
- Include a <nav> menu with links to different news categories (e.g., World, Sports, Entertainment, Technology).
Main Content:
- Within <main>, create a featured news <article> that includes:
  - A <header> with the article title and publication date.
  - Several paragraphs of placeholder text to simulate a news story.
  - A <footer> within the article for the author’s name or social share links.
- Create a <section> titled “Latest Headlines” using an <h2>.
  - Inside this section, list multiple news items as individual <article> elements.
  - Each <article> should include a brief headline (using an <h3>) and a one-sentence summary.
Footer:
- Add a <footer> with additional navigation links (e.g., About Us, Contact, Privacy Policy) or copyright information.

Objective:

Design a news portal homepage that effectively uses semantic elements to separate featured news from other headlines, ensuring a logical and accessible content structure.

Problem 6: Educational Resource Page

File Name: problem6.html

Instructions:

Overall Structure:
- Begin with the standard HTML structure.
- Use semantic tags including <header>, <main>, <article>, <section>, and <footer>.
Header:
- In the <header>, add a title for the page (e.g., “Learning Resources”).
- Include a <nav> with links to various resource categories (e.g., Tutorials, Articles, Videos, eBooks).
Main Content:
- Create a <main> area that includes:
  - An introductory <section> with a welcoming message and an overview of the resources available.
  - Multiple <article> elements, each representing an individual resource.
    - Each <article> should have:
      - A <header> with the resource title and type (e.g., “Tutorial”).
      - A paragraph summarizing the resource.
      - A link for “Read More” or “View Resource” inside the article’s <footer>.
  - Optionally, include a <section> for “Featured Resources” with a distinct layout or style.
Footer:
- In the <footer>, provide contact information, a feedback link, or social media links.

Objective:

Create an educational resource page that uses semantic HTML to logically separate introductory content, individual resources, and site-wide footer information, ensuring clear navigation and improved accessibility.

Day 7 - Semantic HTML