Educational

Category: Projects

  • Photo Gallery

    A page displaying multiple images in rows/columns.

    <img>, layouts, alt text.

    Example:

    <!DOCTYPE html>
<html>
<head>
  <title>Photo Gallery</title>
</head>
<body>
  <h1>My Photo Gallery</h1>
  <img src="img1.jpg" alt="Image 1" width="200">
  <img src="img2.jpg" alt="Image 2" width="200">
  <img src="img3.jpg" alt="Image 3" width="200">
</body>
</html>

  • HTML Resume

    A resume made only with HTML.

    Lists, tables, links, sections.

    Example:

    <!DOCTYPE html>
<html>
<head>
  <title>My Resume</title>
</head>
<body>
  <h1>John Doe</h1>
  <p>Email: [email protected] | Phone: 123-456-7890</p>

  <h2>Education</h2>
  <ul>

    &lt;li&gt;Bachelor in Computer Science&lt;/li&gt;
&lt;li&gt;Intermediate in Pre-Engineering&lt;/li&gt;
      </ul>

  <h2>Experience</h2>
  <table border="1">

    &lt;tr&gt;
  &lt;th&gt;Company&lt;/th&gt;&lt;th&gt;Role&lt;/th&gt;&lt;th&gt;Years&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td&gt;ABC Tech&lt;/td&gt;&lt;td&gt;Intern&lt;/td&gt;&lt;td&gt;2024-2025&lt;/td&gt;
&lt;/tr&gt;
      </table>
</body>
</html>

  • Basic Landing Page

    A homepage for a website (like a company or product).

    Headings, sections, navigation links, images.

    Example:

    <!DOCTYPE html>
<html>
<head>
  <title>My Startup</title>
</head>
<body>
  <header>

    &lt;h1&gt;Welcome to My Startup&lt;/h1&gt;
&lt;nav&gt;
  &lt;a href="#"&gt;Home&lt;/a&gt; |
  &lt;a href="#"&gt;About&lt;/a&gt; |
  &lt;a href="#"&gt;Contact&lt;/a&gt;
&lt;/nav&gt;
      </header>

  <section>

    &lt;h2&gt;Our Mission&lt;/h2&gt;
&lt;p&gt;We build awesome web apps for everyone!&lt;/p&gt;
&lt;img src="startup.jpg" alt="Startup" width="300"&gt;
      </section>

  <footer>

    &lt;p&gt;© 2025 My Startup&lt;/p&gt;
      </footer>
</body>
</html>

  • Simple Registration Form

    A form to collect user details (name, email, password).

    <form>, <input>, <button>, attributes like type.

    ✔ Example:

    <!DOCTYPE html>
<html>
<head>
  <title>Registration Form</title>
</head>
<body>
  <h1>Register Here</h1>
  <form>

    Name: &lt;input type="text" name="name"&gt;&lt;br&gt;&lt;br&gt;
Email: &lt;input type="email" name="email"&gt;&lt;br&gt;&lt;br&gt;
Password: &lt;input type="password" name="password"&gt;&lt;br&gt;&lt;br&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;
      </form>
</body>
</html>

  • Personal Portfolio Page

    A simple webpage that introduces you (name, skills, contact info).

    Using headings, paragraphs, links, lists, and images.

    Example:

    <!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
</head>
<body>
  <h1>Welcome to My Portfolio</h1>
  <img src="me.jpg" alt="My Photo" width="200">
  <p>Hello! My name is Saim. I am learning web development.</p>

  <h2>My Skills</h2>
  <ul>

    &lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
      </ul>

  <h2>Contact</h2>
  <a href="mailto:[email protected]">Email Me</a>
</body>
</html>