# HOW TO CREATE A PORTFOLIO WEBSITE: USING HTML AND CSS (LANDING PAGE)
**STEPS IN CREATING A PORTFOLIO WEBSITE(LANDING PAGE)**
1. When creating a portfolio website, you should be doing the external css styling.
2. The first thing you'll do is create a folder to hold our project, and the base file of our site, called index.html.
3. Then write out the basic structure of a webpage and start adding other semantic tags enclosing almost each element inside a div, giving each div or tag a class so hat it can be styled.
4. you'll create a file with the .css extension in your project folder then and link the file with the link tag within the head of your html document.
5. To choose a font style, you'll go to a site that has a html code format for that font stle and use it within the head of your browser and then call it withinthe specified spot you want that particular text to be used.
Every class called within a div should be styled if not it's not needed.
**THINGS TO NOTE**
**CLASS**: THis is an attribute that allows you to select multiple HTML elements and apply the same styling to them simultaneously. This helps simplify web development by enabling you to reuse existing designs without writing new styles from scratch.
**COMMENTS**: These are Used to add explanatory notes or disable specific styling within the CSS file.
code example of a portfolio website.
```
<!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="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<title>SEDICRYPTIC'S PORTFOLIIO</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header -->
<header>
<nav class="nav-links">
<div class="logo">
<span class="sedi">SEDICRYPTIC</span>
</div>
<div class="nav-items">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Resume</a>
<a href="#">Services</a>
<a href="#">Skills</a>
<a href="#">Projects</a>
<a href="#">My blog</a>
<a href="#">Contact</a>
</div>
</nav>
</header>
<div class="info">
<div class="inform">
<p>Hello!</p>
<h1>I'm SEDICRYPTIC</h1> <br>
<h2>A Freelance Web Developer</h2> <br>
<button>HIRE ME</button>
<button class="btn2">MY WORKS</button>
</div>
<div class="myself">
<img src="img/1737709526536.jpg" alt="my pic">
</div>
</div>
</body>
</html>
```
an external css style sheet. below....
```
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
height: 100vh;
background-color: #040404;
font-family: "prompt", sherif;
}
.nav-links{
display: flex;
justify-content: space-between;
padding: 15px 50px;
align-items: center;
padding: 15px 50px;
margin: 0 100px;
}
.nav-items{
display: flex;
gap: 40px;
}
span{
color: white;
}
a{
text-decoration: none;
}
span, a{
color: white;
font-family: "prompt", sherif;
}
a:hover{
text-decoration: underline;
color: #ffbb3b;
}
.sedi{
font-weight: 900;
}
.info{
display: flex;
margin: 300px;
}
.info p{
color: #e9660f;
font-size: 1rem;
font-weight: bold;
}
.info h1{
color: orange;
font-weight: 300px;
}
.info h2{
color: white;
}
.info button{
width: 100PX;
height: 50PX;
font-weight: bold;
background-color: orange;
border: none;
border-radius: 30px;
cursor: pointer;
}
.info button:hover{
background-color: rgb(196, 128, 4);
transition: ease 0.5s;
}
.info .btn2{
border: 1px solid gray;
background-color: black;
color: white;
}
.info .btn2:hover{
background-color: rgb(46, 46, 46);
}
.myself img{
width: 500px;
height: 500px;
margin-left: 310px;
border-radius: 50px;
margin-bottom: 300px;
position: relative;
}
```
*conclusion*: In summary, HTML and CSS are fundamental for web development. HTML provides the structure of web pages, allowing you to organize content effectively, while CSS adds the style, making your sites attractive and user-friendly. By combining these two, you can create engaging and interactive web experiences. Remember, the best way to improve your skills is through practice. So, start building your own websites and experimenting with different HTML and CSS techniques to see what works best for you. Happy coding!
Sign in with Wallet
Connect another wallet