Day 7: Advanced HTML & Final Project

Goal

Learn advanced HTML features and put everything together to build a complete personal portfolio page.

Topics

• Iframes: <iframe> to embed external content
• Meta tags for SEO: <meta charset="UTF-8">, <meta name="description">
• Embedding Google Maps, YouTube videos, or other external media
• HTML best practices: semantic structure, accessibility, clear navigation

Iframes Example

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video" frameborder="0" allowfullscreen></iframe>

Meta Tags for SEO

Use meta tags to improve search engine optimization and define page metadata.

<meta charset="UTF-8">
<meta name="description" content="Portfolio of John Doe, showcasing skills and projects">

Practice

Build your personal portfolio page with the following elements:

• Header with your name and navigation links
• About section describing yourself
• List of skills using <ul> or <ol>
• Table with your experience or projects
• Contact form to allow visitors to reach you
• Embedded media like a YouTube video or Google Map
• Footer with copyright information

Example Portfolio Structure

<header>
  <h1>John Doe</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="about">
    <h2>About Me</h2>
    <p>I am a web developer passionate about HTML, CSS, and JavaScript.</p>
  </section>

  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>HTML </li>
      <li>CSS </li>
      <li>JavaScript </li>
    </ul>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <table border="1">
      <tr><th>Project</th><th>Year</th><th>Description</th></tr>
      <tr><td>Portfolio Site</td><td>2026</td><td>Personal website</td></tr>
      <tr><td>Game App</td><td>2025</td><td>Simple browser game</td></tr>
    </table>

    <h3>Demo Video</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="YouTube video" frameborder="0" allowfullscreen></iframe>
  </section>

  <section id="contact">
    <h2>Contact Me</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email"><br><br>
      <label for="message">Message:</label><br>
      <textarea id="message" rows="4" cols="30"></textarea><br><br>
      <button type="submit">Send</button>
    </form>
  </section>
</main>

<footer>
  <p>© 2026 John Doe</p>
</footer>

Tips & Best Practices

• Use semantic HTML throughout for clarity and SEO.
• Always include alt text for images and descriptive titles for iframes.
• Keep your layout organized using sections and clear headings.
• Test your portfolio in different browsers and screen sizes.