![Login and Registration Form](https://abduldev.com/wp-content/uploads/2024/08/Login-and-Registration-Form.jpg)
Creating a Stunning Portfolio Website with HTML and CSS
![Portfolio Website](https://abduldev.com/wp-content/uploads/2024/02/How-to-Create-Portfolio-Website-Using-HTML-and-CSS-1-1024x576.png)
In today’s digital age, having a captivating online portfolio website is essential for showcasing your skills, experience, and projects to potential clients or employers. Whether you’re a designer, developer, writer, or any other creative professional, a well-crafted portfolio website can make all the difference in standing out from the crowd. In this tutorial, I’ll walk you through the process of creating your own portfolio website using HTML and CSS, and the best part is, it’s completely free!
Check Out Those Useful Articles
Creating a Stunning Portfolio Website Using HTML and CSS (Source Code)
Before diving into coding, take some time to plan out the design and structure of your portfolio website. Consider factors such as color scheme, layout, navigation, and the content you want to showcase. Sketching out your ideas on paper or using digital tools can be helpful in visualizing the final outcome.
Below are the steps to get started:
- Create an HTML file named “index.html” and ensure it carries the .html extension.
- Insert the provided HTML code into your “index.html” file. This code snippet lays the groundwork for the Multiple Text Typing Animation.
- Create a CSS file Named “style.css” file.
- Insert the provided CSS code into your “style.css” file.
- For ease of access, you can download the source code files for this animation by clicking the download button below.
These steps will establish the necessary structure for Portfolio website.
First, Copy the bellow HTML code and paste the codes into your index.html file.
Portfolio Web Site By AbdulDev
I am Abdul Mabud
Web Designer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate autem nemo facilis dolore a quo? Ducimus dolore architecto blanditiis, nesciunt sit in eaque optio commodi corrupti?
Second, Copy the bellow CSS code and paste the codes into your style.css file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header-sec{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 80px;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
overflow-x: hidden;
z-index: 100;
}
nav{
background: transparent;
height: 90px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 86px;
font-weight: bold;
}
.logo span{
color: #ff0077;
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 5px;
}
nav ul li a{
text-decoration: none;
list-style: none;
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #ff0077;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: #ff0077;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media screen and (max-width: 952px){
.header-sec{
padding: 0 40px;
}
label.logo{
font-size: 26px;
}
nav ul li a{
font-size: 20px;
}
}
@media screen and (max-width: 858px) {
.checkbtn{
display: block;
font-size: 26px;
margin-top: 5px;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2b2b2b;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 10px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #df003b;
}
#check:checked ~ ul{
left:0;
}
}
.hero{
background-color: #0000004c;
background-image: url(Image/bgimage.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: color;
height: 100vh;
display: flex;
align-items: center;
padding: 0 80px;
}
.hero-content{
width: 600px;
}
.hero-content h1{
color: #ebebeb;
font-size: 50px;
font-weight: 700;
line-height: 60px;
padding-top: 80px;
}
.hero-content h2{
color: #ff0077;
font-size: 34px;
font-weight: 600;
}
.hero-content p{
font-size: 16px;
color: #ebebeb;
line-height: 26px;
margin: 20px 0 40px;
}
.btn-box{
display: flex;
justify-content: space-between;
width: 350px;
height: 50px;
}
.btn-box a{
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 150px;
height: 100%;
background: #ff0077;
border: 2px solid #ff0077;
border-radius: 8px;
font-size: 18px;
color: #ebebeb;
text-decoration: none;
letter-spacing: 1px;
font-weight: 600;
z-index: 1;
overflow: hidden;
transition: 0.5s;
}
.btn-box a:hover{
color: #fff;
}
.btn-box a:nth-child(2){
background: transparent;
color: #ff0077;
}
.btn-box a:nth-child(2):hover{
color: #ebebeb;
}
.btn-box a:nth-child(2)::before{
background: #ff0077;
}
.btn-box a::before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background: #000;
z-index: -1;
border-radius: 8px;
transition: 0.5s;
}
.btn-box a:hover::before{
width: 100%;
}
.social-icon{
position: absolute;
bottom: 40px;
width: 170px;
display: flex;
justify-content: space-between;
}
.social-icon a{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ff0077;
font-size: 20px;
width: 40px;
height: 40px;
background: transparent;
border: 2px solid #ff0077;
text-decoration: none;
border-radius: 50%;
z-index: 1;
overflow: hidden;
transition: 0.5s;
}
.social-icon a:hover{
color: #ebebeb;
}
.social-icon a::before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background-color: #ff0077;
z-index: -1;
transition: 0.5s;
}
.social-icon a:hover:before{
width:100%;
}
/* Responsive Code */
@media screen and (max-width: 952px) {
.hero{
padding: 0 40px;
}
.hero h1{
padding: 60px 0 0 0;
}
}
Conclusion
Creating your own portfolio website using HTML and CSS is not only a rewarding learning experience but also a powerful way to showcase your skills and projects to the world. Throughout this tutorial, I’ve covered everything you need to know, from planning your design to coding and styling your website.
By following the steps outlined in this tutorial and utilizing the free source code provided, you can create a stunning portfolio website that reflects your unique personality and showcases your talents effectively. Remember to experiment with different design elements, incorporate your own creativity, and tailor the website to suit your needs and preferences.
Whether you’re a designer, developer, writer, or any other creative professional, having a well-crafted portfolio website is essential for building your online presence and attracting potential clients or employers. So don’t hesitate – dive in, start coding, and unleash your creativity on the web!
Share on Social Media
FAQs
A portfolio website is an online platform where individuals showcase their work, skills, projects, and achievements to potential clients or employers. It serves as a digital resume or portfolio.
While coding experience is helpful, it’s not mandatory. This tutorial provides a beginner-friendly guide to creating a portfolio website using HTML and CSS, with step-by-step instructions.
Yes, you can use pre-made templates, but creating your own portfolio website from scratch allows for greater customization and personalization to better reflect your style and personality.
The design of your portfolio website is crucial as it creates the first impression on visitors. A visually appealing and well-organized design can significantly enhance the user experience and make your work stand out.
Yes, including a contact form allows potential clients or employers to reach out to you easily. It’s a convenient way for them to inquire about your services or discuss potential collaborations.
Related Articles
![Login and Registration Form](https://abduldev.com/wp-content/uploads/2024/08/Login-and-Registration-Form.jpg)
Create a Responsive Website: Integrate Login and Registration Form
Learn how to create a responsive website with integrated login and registration forms using HTML, CSS, and JavaScript. Free Source
![Responsive Testimonial](https://abduldev.com/wp-content/uploads/2024/08/Responsive-Testimonials.jpg)
How to Create Responsive Testimonials Using HTML and CSS
Learn how to create stunning and fully responsive testimonials using HTML and CSS. Perfect for showcasing client feedback on any
![Autoplay Card Slider](https://abduldev.com/wp-content/uploads/2024/08/Auto-play-Card-Slider-For-Team-Section-Using-HTML-CSS-and-Swiper-JS.jpg)
How to Create an Autoplay Card Slider for the Team Section using HTML, CSS, and Swiper JS
Autoplay card slider for your team section using HTML, CSS, and Swiper JS. Enhance your website’s design with a dynamic
3 thoughts on “Creating a Stunning Portfolio Website with HTML and CSS”
Pingback: Responsive Portfolio Website with HTML, CSS, and JavaScript
Its like you learn my mind! You appear to understand a loot
appproximately this, such as you wrote the guide in it or
something. I think that you just could do with some %
to force the message hopuse a bit, buut other than that, that is wonderful blog.
An excellent read. I’ll definitely be back. https://www.Waste-ndc.pro/community/profile/tressa79906983/
Pingback: Responsive Vertical Timeline Design using HTML and CSS