A portfolio webpage is an essential tool for anyone looking to showcase their skills, projects, and achievements. Whether you're a developer, designer, artist, or writer, having a well-structured portfolio can help you stand out in a competitive job market. In this tutorial, we'll create a simple portfolio webpage using HTML and CSS. ## Setting Up the Project Start by creating a new folder for your portfolio project. Inside this folder, create two files: - `index.html` - `styles.css` ### Folder Structure ``` portfolio/ │ ├── index.html └── styles.css ``` ## HTML Structure Open `index.html` and add the following code to create the basic structure of your portfolio webpage: ```html ``` <html lang="en">
<head> ``` Your Name - Portfolio ``` </head>
<body> ```

Your Name

Web Developer | Designer | [Your Profession]

About Me

A brief introduction about yourself, your skills, and your professional background.

My Projects

Project Title 1

Description of your project, what technologies you used, and your role in it.

View Project

Project Title 2

Description of your project, what technologies you used, and your role in it.

View Project

Contact Me

If you'd like to get in touch, feel free to email me at your-email@example.com.

© 2024 Your Name

``` </body>
</html> --- ### Explanation: - The `
` contains your name and navigation links. - Each `
` (About, Projects, Contact) serves as a separate part of your portfolio. - The `
` includes copyright information. ## Styling with CSS Next, open `styles.css` and add the following styles to make your portfolio visually appealing: ```css body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } header nav ul { list-style: none; padding: 0; } header nav ul li { display: inline; margin: 0 15px; } header nav ul li a { color: #fff; text-decoration: none; } section { padding: 20px; margin: 20px; } .project { margin-bottom: 20px; } footer { text-align: center; padding: 10px; background-color: #333; color: #fff; position: relative; bottom: 0; width: 100%; } ``` ### Explanation: - The CSS styles set the font family, line height, and margins for a clean layout. - The header and footer have a dark background with white text for contrast. - The navigation links are styled for better visibility. ## Adding Content Now that you have the basic structure and styling, you can customize your portfolio by adding your personal information: 1. **About Me:** Write a short paragraph about yourself, highlighting your skills and background. 2. **Projects:** Include details about the projects you want to showcase. Make sure to provide links to live demos or repositories. 3. **Contact Information:** Include your email or a contact form (you can explore using form elements later). ### Example Project Section You might want to add more projects by copying the existing `.project` divs and modifying their contents: ```html

Project Title 3

Description of your project, what technologies you used, and your role in it.

View Project
``` ## Conclusion Congratulations! You’ve created a simple portfolio webpage using HTML and CSS. This project not only showcases your work but also provides an opportunity to demonstrate your skills to potential employers or clients. ### Next Steps - **Enhance with JavaScript:** Consider adding interactivity, such as animations or a dynamic project filter. - **Optimize for Mobile:** Use media queries to make your portfolio responsive for mobile devices. - **Deploy Your Portfolio:** Host your portfolio online using platforms like GitHub Pages, Netlify, or Vercel to share it with others. Creating a portfolio is a continuous process; make sure to update it regularly with new projects and experiences. Happy coding!