Basic CSS Tutorial with Responsive HTML simple portfolio page template (example) and CSS Style sheet
Basic CSS Tutorial with Responsive HTML simple portfolio page template (example) and CSS Style sheet
%20and%20CSS%20Style%20sheet.jpeg)
Basic CSS Tutorial with Responsive HTML simple portfolio page template (example) and CSS Style sheet.
HTML is the foundation Markup language of a webpage (Read more about HTML) while CSS is used to decorate the construction. CSS makes your webpage attractive. Below is given code example of basic HTML simple portfolio page template and CSS Style sheet.
Copy HTML code of your first portfolio website and paste in your code editor or notepad of your Windows PC (if you don’t have any code editor) and save the file as html file. (You can do it by changing extension of the file from .TXT to .HTML).
Copy CSS code of your first portfolio website and paste in your code editor or notepad of your Windows PC (if you don’t have any code editor) and save the file as styles.css (You can do it by renaming the file as styles and change extension of the file from .TXT to .CSS).
Create a New folder and save both files in that folder. It is necessary to save style sheet CSS file in the same folder with HTML index file of your portfolio. (You can also write your css code in your html file Read more to learn)
HTML
<!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>
<p>Web Developer</p>
</header>
<section id="about">
<h2>About Me</h2>
<p>Add a brief description about yourself here.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<!-- Add your project details here -->
<div class="project">
<h3>Project Title</h3>
<p>Description of the project.</p>
<a href="#">View Project</a>
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Email: email@example.com</p>
<p>LinkedIn: linkedin.com/yourprofile</p>
<p>GitHub: github.com/yourusername</p>
</section>
<footer>
<p>© 2023 Your Name</p>
</footer>
</body>
</html>
CSS (styles.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
h1 {
margin: 0;
}
section {
padding: 2em;
}
#about, #projects, #contact {
background-color: #f4f4f4;
}
h2 {
color: #333;
}
.project {
margin-bottom: 1em;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
Now play with it and create your first portfolio website.