intro-frontend-course

Introduction

Welcome to your first project in the “Intro to Frontend Development” course. In this project, you will create a simple personal webpage using basic HTML elements. This task will help you apply the HTML knowledge you’ve gained and give you hands-on experience in building and structuring a webpage from scratch.

Objective

Build a personal webpage that includes a brief introduction about yourself, a list of your hobbies or interests, and a contact section. You’ll use a variety of HTML elements to structure your content effectively.

Requirements

Text Editor: Use any text editor like VSCode, Sublime Text, or Atom for coding.
Web Browser: To view your webpage (Chrome, Firefox, Safari, etc.).

Instructions

1. Setup Your Project

Create a folder on your computer named PersonalWebpage under the Web Development folder you created initially.
Open the PersonalWebpage folder using VSCode. Then, create a file named index.html. This will be your main HTML file.

2. Create the Basic HTML Structure

Open your index.html file in your text editor.
Start by typing the basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
    <title>Your Name - Personal Webpage</title>
</head>
<body>
    <!-- We will add more content here -->
</body>
</html>

3. Add Content

Hobbies or Interests: Use a list to display your hobbies or interests.

<section>
    <h2>My Interests</h2>
    <ul>
        <li>Hobby 1</li>
        <li>Hobby 2</li>
        <li>Hobby 3</li>
    </ul>
</section>

Contact Information: Add a section with your contact details or a link to your professional profile.

<footer>
    <h2>Contact Me</h2>
    <p>Email: [Your Email]</p>
    <p>LinkedIn: <a href="your-linkedin-url">View my profile</a></p>
</footer>

4. Enhance Your Page

Add an image of yourself or something related to your interests.

<img src="path/to/your-image.jpg" alt="Description of the image">

Consider using additional HTML elements you’ve learned about, such as <table> or <strong>, to enhance certain parts of your content.

5. Test Your Webpage

Open your index.html file in a web browser to see how it looks.
Make adjustments as needed to improve the structure or aesthetics.

6. Document Your Project

Take notes on what you’ve learned during this project.
Document any challenges you faced and how you resolved them.

By completing this project, you’ll have created a functional personal webpage that showcases your ability to use HTML effectively. This webpage can serve as the foundation for more complex projects as you advance in your frontend development studies. Enjoy the process of building and customizing your own webpage—it’s a great way to learn and demonstrate your growing skills!