Muhammad Sufiyan's Blog

Assignments - HTML

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

6 min read

Important Links to follow

Code with Harry - Html, Css, JavaScript Playlist

https://www.youtube.com/playlist?list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg

Apna College - Html, Css, JavaScript Playlist

https://www.youtube.com/playlist?list=PLfqMhTWNBTe3H6c9OGXb5_6wcc1Mca52n

Codehelp by Love Babbar - Html, Css, JavaScript Playlist

https://www.youtube.com/playlist?list=PLDzeHZWIZsTo0wSBcg4-NMIbC0L8evLrD

Saylani Course - Html, Css, JavaScript by Sir Ghous

https://www.youtube.com/playlist?list=PLKDx0iHXzgE3c4YRo6Try8bMhGQ5CjZzz

Saylani Course - Html, Css, JavaScript by Sir Saad

https://www.youtube.com/playlist?list=PLKDx0iHXzgE3c4YRo6Try8bMhGQ5CjZzz

A pretty useful certification in html, css, javaScript by 10 pearls

https://10pearlsuniversity.org/courses/web-development-for-beginners/

Assignment 1: Create a Resume in HTML

Objective: Apply the HTML concepts learned so far to create a simple, well-structured resume. This will help you practice using various HTML elements and formatting techniques.

Requirements:

  1. Header Section:

    • Include your name, contact information, and a profile picture using the <img> tag.

  2. Education Section:

    • Use a <table> to list your education history, including the school, degree, and year of graduation.

  3. Experience Section:

    • List your previous jobs with descriptions. Use a combination of headings (<h3>) and paragraphs (<p>) for clear formatting.

  4. Skills Section:

    • Use a <table> or an unordered list (<ul>) to outline your skills and their proficiency levels.

  5. Portfolio Section:

    • Include images of your previous projects using the <img> tag.

    • Provide a brief description of each project.

  6. Contact Form:

    • Include a contact form using the <form> element. The form should have fields for the user's name, email, and message.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Resume</title>
</head>
<body>
    <header>
        <h1>John Doe</h1>
        <p>Contact: john.doe@example.com | Phone: (123) 456-7890</p>
        <img src="profile.jpg" alt="Profile Picture">
    </header>

    <section>
        <h2>Education</h2>
        <table>
            <tr>
                <th>School</th>
                <th>Degree</th>
                <th>Year</th>
            </tr>
            <tr>
                <td>XYZ University</td>
                <td>Bachelor of Science</td>
                <td>2020</td>
            </tr>
            <tr>
                <td>ABC High School</td>
                <td>High School Diploma</td>
                <td>2016</td>
            </tr>
        </table>
    </section>

    <section>
        <h2>Experience</h2>
        <h3>Job Title 1</h3>
        <p>Description of job responsibilities and achievements.</p>
        <h3>Job Title 2</h3>
        <p>Description of job responsibilities and achievements.</p>
    </section>

    <section>
        <h2>Skills</h2>
        <ul>
            <li>Skill 1</li>
            <li>Skill 2</li>
            <li>Skill 3</li>
        </ul>
    </section>

    <section>
        <h2>Portfolio</h2>
        <img src="project1.jpg" alt="Project 1">
        <p>Description of Project 1</p>
        <img src="project2.jpg" alt="Project 2">
        <p>Description of Project 2</p>
    </section>

    <section>
        <h2>Contact</h2>
        <form action="submit_form.php" method="post">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email"><br>
            <label for="message">Message:</label>
            <textarea id="message" name="message"></textarea><br>
            <input type="submit" value="Send">
        </form>
    </section>
</body>
</html>

Assignment 2: Create a Portfolio Website

Objective: Create a personal portfolio website using the HTML tags you have learned so far.

Requirements: Your portfolio should include the following sections on separate pages:

  1. Home Page:

    • Create a homepage with a welcoming message.

    • Include navigation links to the About Me, Skills, Projects, and Contact pages.

    • Use headings (<h1> to <h6>) for the title and subtitles.

  2. About Me Page:

    • Write a brief introduction about yourself.

    • Add a profile picture using the <img> tag.

  3. Skills Page:

    • List your skills using an unordered list (<ul>).

  4. Projects Page:

    • List your projects using an ordered list (<ol>).

  5. Contact Page:

    • Provide your contact information.

    • Include a mailto link to your email address.

    • Include a contact form using the <form> element.

Example Structure:

  1. Home Page (index.html):

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Welcome to My Portfolio</title>
 </head>
 <body>
     <header>
         <h1>Welcome to My Portfolio</h1>
         <nav>
             <ul>
                 <li><a href="about.html">About Me</a></li>
                 <li><a href="skills.html">Skills</a></li>
                 <li><a href="projects.html">Projects</a></li>
                 <li><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
     </header>
     <section>
         <h2>Introduction</h2>
         <p>Hello! Welcome to my portfolio website. Here you will find information about me, my skills, projects, and how to contact me.</p>
     </section>
 </body>
 </html>

  2. About Me Page (about.html):

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Me</title>
 </head>
 <body>
     <header>
         <h1>About Me</h1>
         <nav>
             <ul>
                 <li><a href="index.html">Home</a></li>
                 <li><a href="skills.html">Skills</a></li>
                 <li><a href="projects.html">Projects</a></li>
                 <li><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
     </header>
     <section>
         <h2>Biography</h2>
         <img src="profile.jpg" alt="Profile Picture">
         <p>My name is John Doe. I am a web developer with a passion for creating beautiful and functional websites.</p>
     </section>
 </body>
 </html>

  3. Skills Page (skills.html):

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My Skills</title>
 </head>
 <body>
     <header>
         <h1>My Skills</h1>
         <nav>
             <ul>
                 <li><a href="index.html">Home</a></li>
                 <li><a href="about.html">About Me</a></li>
                 <li><a href="projects.html">Projects</a></li>
                 <li><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
     </header>
     <section>
         <h2>Skills</h2>
         <ul>
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
         </ul>
     </section>
 </body>
 </html>

  4. Projects Page (projects.html):

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My Projects</title>
 </head>
 <body>
     <header>
         <h1>My Projects</h1>
         <nav>
             <ul>
                 <li><a href="index.html">Home</a></li>
                 <li><a href="about.html">About Me</a></li>
                 <li><a href="skills.html">Skills</a></li>
                 <li><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
     </header>
     <section>
         <h2>Projects</h2>
         <ol>
             <li>Project 1: A website for a local business.</li>
             <li>Project 2: An e-commerce site.</li>
             <li>Project 3: A personal blog.</li>
         </ol>
     </section>
 </body>
 </html>

  5. Contact Page (contact.html):

     <!DOCTYPE html

Contact Me

Contact Information

Email: john.doe@example.com

Phone: (123) 456-7890

Contact Form

Name:
Email:
Message:

```

Submission:

  • Create a video of your working project.

  • Upload it on LinkedIn and WhatsApp.

  • Share the links.

Assignment 3: Create a Periodic Table Using HTML Tables

Objective: Apply your knowledge of HTML tables to create a representation of the periodic table.

Requirements:

  1. Use the <table> element to create the structure of the periodic table.

  2. Use <thead>, <tbody>, <tr>, <th>, and <td> elements appropriately.

  3. Include styling to visually distinguish between different groups of elements (optional).

Example:

Free Printable Periodic Table Of Elements [Excel, PDF, Word] With Names

Instructions:

  1. Create a new HTML file named periodic_table.html.

  2. Use a <table> element to create the structure of the periodic table.

  3. Add rows (<tr>) and cells (<th> for headers, <td> for data) to represent each element.

  4. Optionally, use CSS or Table Styles to style the table and make it visually appealing.

Submission:

  • Create a video of your working periodic table.

  • Upload it on LinkedIn and WhatsApp.

  • Share the links.

Assignment 4: Create Olx Website using HTML Tags

  • Create Different Pages like Olx, use img tags, link all pages through anchoring

  • Create Signup, login, Product selling forms through form tag

Assignment 5: Create a Chess Board

Objective: Create a chessboard using the HTML <table> tag.

Instructions:

  • Use HTML tables to create an 8x8 grid representing the chessboard.

Example Elements to Include:

  • Table rows (<tr>)

  • Table data cells (<td>)

Setting Up the Pieces

Submission:

  • Create a video of your working chessboard, upload it on LinkedIn and WhatsApp, and share the links.

Assignment 6: Create Replica of Saylani Form

Assignment 7: Multi-Steps Form

In this Assignment You have to build Multiple steps Forms ==>> Here is some explanations of the Assignment,

  • Multiple Steps Forms

  • Make one folder.

  • Create one file, named should be index.html.

  • Create Three Forms and link all of them together.(Find the attachment below)

  • You can find Example images and Button Images below.(Find the Attachement Below)

  • Submission would be done , by deploying on Netlify. (Do Research on how to deploy on Netlify)

PS: Make sure to name first file as an "index.html"

Assets used for above forms are below

Good luck with your assignments!

saylanismitHTML5assignments