How To Build Personal Portfolio website Using HTML and CSS

Table of contents

1. Article Description
2. Article Title
3. Introduction
4. Prerequisites
5. Article Body
6. Conclusion
7. References and Resources

### Article Description
Inthis article we are going to build a simple personal portfolio using HTML ,CSS and Javascript. It will help us have better understanding of the HTML ,CSS and Javascript.

### Article Title
How To Build Portfolio Using HTML,CSS and Javascript.

### Introduction

In today's digital age,a well-designed online portfolio is essential for showcasing your skills and accomplishments potential clients or employers. This article will guide us through the process of creating an impressive portfolio using HTML and CSS, allowing us to stand out in the competitive world of web development.

### Prerequisites
⦁ Strong background of Html, CSS and Js.
⦁ Having editor already installed in your desktop.

### Article Body

1. HTML Structure:

We will tart by structuring our portfolio using semantic HTML. Clearly defining sections such as "About", and "Contacts". This provides a solid foundation for organizing our content, making it accessible and easily navigable.

<div class="link">
<a href="#" target="_self">Home</a>
<a href="about.html" target="_self">About</a>
<a href="contact.html" target="_self">Contact</a>
</div>

2. CSS Styling:

We will utilize CSS to enhance the visual appeal of our portfolio. Employing a clean and modern design with a consistent color scheme and topography. Ensuring responsiveness by using media queries to adapt the layout for various screen sizes.

.link{
        text-align: right;
        font-size: 20px;
    }
    .head{
        text-align: left;
        font-size: 30px;
    }
    .cont{
        text-align: right;
        padding-top: 10px;

    }
    .container{
        display: flex;

3. Project Showcase:

In this section, we will include titles, descriptions, and links to Github or demos. In our case we have used the Github link to demonstrate and represent the project.

            <h1><b>PROJECTS</b></h1>
            <ul>
                <li>Used Car Price Prediction Using Machine Learning.</li>
                <p>I was able to come up with a solution to the world of automotive by creating a web application which
                    predicted the price of used car using machine learning. The system was able to predict the price by
                    using the user's input data. <a href="https://github.com/mkwasi5930/car_price_prediction">Here</a> it is.

PROJECTS

        <ul>
            <li>Used Car Price Prediction Using Machine Learning.</li>
            <p>I was able to come up with a solution to the world of automotive by creating a web application which
                predicted the price of used car using machine learning. The system was able to predict the price by
                using the user's input data. <a href="https://github.com/mkwasi5930/car_price_prediction">Here</a> it is.
            </p>
        </ul>

## 4. Responsive Design
:
We will make sure that our portfolio looks great on various devices. 

@media only screen and (max-width: 100%) {
.text {font-size: 11px}
}

## 5. Contact Form:
we will make sure that anyone want to reach us will follow on various social media so that he or she can be in touch with us easily. We will enable this by linking our portfolio to our social medias through links.

X

Emperor

LinkedIn

ABEDNEGO TATI

Meta

MC Firemaker

GitHub

Mkwasi5930

**### Conclusion:**
By combining HTML and CSS, we can create a professional and engaging online portfolio that effectively showcases our skills and projects. Regularly update your portfolio to reflect your latest work and accomplishments, ensuring that it remains a powerful tool for  making a lasting impression in the competitive field of web development.

### **References and Resources**
When creating your online portfolio with HTML, CSS, and JavaScript, it's important to leverage various resources and references to enhance your development process and stay informed about best practices. Here are some valuable resources that you can explore:

Online Tutorials and Documentation:
MDN Web Docs: A comprehensive resource providing documentation on HTML and CSS. It's an excellent reference for understanding the core concepts of web development.
W3Schools: An interactive learning platform with tutorials and references for HTML and CSS, and many other web technologies.


That’s it, you got a complete portfolio website built with HTML and CSS.

If you want to see more tutorials like this follow me:

GitHub: 

      

        
          
        
      
    

      

        
          mkwasi5930 (Abednego Tati) · GitHub
        
      
        

          full stack developer, Django-python,flutter-dart and Javascript. Machine learning solutions. 
Skilled in ERP- Microsoft dynamic 365 central business Nav.  - mkwasi5930
        
      

          
        github.com
      
    


Twitter: 



    

      twitter.com

    

Comments

[Abednego Tati]

Hey Dev.to community! I hope you found the article helpful in crafting your online portfolio. I'd love to hear your thoughts, suggestions, or any additional tips you might have for creating an impressive portfolio with HTML, CSS, and JavaScript.

Feel free to share your portfolio links or projects – I'm genuinely excited to see the amazing work this community is doing. Let's learn from each other and grow together!

If you have any questions or face challenges while implementing the techniques discussed in the article, drop a comment below, and I'll do my best to help out. Happy coding, everyone!