Ahmed Mahrous Watch on YouTube

كيفية عمل موقع خاص بيك || how to build portfolio website by HTML & CSS

3 min read 4 hours ago
Published on Oct 10, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through the process of building a personal portfolio website using only HTML and CSS. A well-designed portfolio can significantly enhance your visibility to potential employers, showcasing your skills and experience in a personalized manner. By following these steps, you'll create a professional online presence that reflects your unique capabilities.

Step 1: Setting Up Your Project

  • Create a New Folder: Start by creating a new folder on your computer for your portfolio project.
  • Create HTML and CSS Files: Inside this folder, create two files:
    • index.html for the main webpage.
    • styles.css for styling the webpage.

Step 2: Structuring Your HTML

  • Open index.html in your text editor and set up the basic HTML structure:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Your Portfolio</title>
</head>
<body>
    <header>
        <h1>Your Name</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="about">
        <h2>About Me</h2>
        <p>Brief description about yourself.</p>
    </section>
    <section id="portfolio">
        <h2>My Work</h2>
        <p>Highlights of your projects.</p>
    </section>
    <section id="contact">
        <h2>Contact Me</h2>
        <p>Contact details here.</p>
    </section>
    <footer>
        <p>&copy; 2023 Your Name</p>
    </footer>
</body>
</html>

Step 3: Adding Style with CSS

  • Open styles.css to add styles to your HTML elements. Here’s a simple example:
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background: #35424a;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

section {
    padding: 20px;
    margin: 10px;
    background: #ffffff;
    border-radius: 5px;
}

footer {
    text-align: center;
    padding: 10px;
    background: #35424a;
    color: #ffffff;
}

Step 4: Adding Content

  • About Section: Describe who you are. Include your background, skills, and interests.
  • Portfolio Section: Showcase your projects. Include images and links to live demonstrations or repositories.
  • Contact Section: Provide a way for visitors to reach you, such as an email address or social media links.

Step 5: Testing Your Website

  • Open in Browser: Open your index.html file in a web browser to see how it looks.
  • Check Responsiveness: Resize your browser window to ensure the website is responsive and looks good on different screen sizes.

Step 6: Publishing Your Website

  • Choose a Hosting Service: Consider services like GitHub Pages, Netlify, or Vercel for free hosting.
  • Upload Your Files: Follow the instructions provided by your chosen service to upload your index.html and styles.css files.

Conclusion

You now have a basic personal portfolio website built with HTML and CSS. Remember to update your site regularly with new projects and information to keep it fresh and relevant. As a next step, consider learning JavaScript to add interactivity to your site or exploring more advanced CSS techniques to enhance your designs.

Table of Contents

Recent