This guide explains how to build a portfolio website using HTML and CSS, suitable for complete beginners. We'll cover the structure (HTML) and styling (CSS) of the website, explaining each component in detail.
Every HTML document follows this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta information goes here -->
</head>
<body>
<!-- Visible content goes here -->
</body>
</html><section>: Defines a section in the document<div>: A container for grouping elements<span>: An inline container for text<a>: Creates a hyperlink<img>: Embeds an image
- IDs must be unique, targeted with
#in CSS<div id="unique-element"></div>
- Classes can be reused, targeted with
.in CSS<div class="repeated-style"></div>
selector {
property: value;
}:root {
--background: #171619; /* Dark background color */
--foreground: #eee4dd; /* Light foreground color */
}Usage:
body {
background-color: var(--background);
}-
Display
display: flex; /* Makes element a flex container */ display: block; /* Makes element a block */
-
Positioning
position: relative; /* Relative to normal position */ position: absolute; /* Relative to nearest positioned ancestor */
-
Flexbox
display: flex; flex-direction: column; align-items: center; justify-content: center;
/* Import Google Font */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;...&display=swap");
/* Define variables */
:root {
--background: #171619;
--foreground: #eee4dd;
}
/* Basic reset */
html {
font-family: "Roboto", sans-serif;
}
body {
margin: 0;
background-color: var(--foreground);
}HTML:
<section id="splash-container">
<div id="splash-text">
<span>Hello! I am Aditya Jyoti</span>
<!-- More content -->
</div>
</section>CSS:
#splash-container {
min-height: 100vh;
position: relative;
overflow: hidden;
}
/* Background image with blur */
#splash-container::before {
content: "";
position: absolute;
background-image: url("/assets/background.png");
filter: blur(8px);
z-index: 1;
}
#splash-text {
position: relative;
z-index: 2; /* Above the blurred background */
}min-height: 100vhmakes the section full viewport height::beforecreates a pseudo-element for the backgroundz-indexcontrols layering of elements
HTML:
<section id="interests-container">
<div>
<div class="interest-header">Robotics</div>
<span>Description here...</span>
</div>
<div class="line"></div>
<!-- More interests -->
</section>CSS:
#interests-container {
display: flex;
align-items: center;
gap: 4rem;
width: 90%;
margin: 0 auto;
padding: 2rem;
}
.line {
height: 8rem;
border-right: 2px solid var(--background);
}- Flexbox for layout
margin: 0 autofor centering- CSS variables for consistent colors
CSS for project cards:
.project-details > a {
text-decoration: none;
color: var(--foreground);
background-color: var(--background);
padding: 0.5rem 4rem;
border-radius: 1rem;
}Used for one-dimensional layouts:
display: flex;
flex-direction: column; /* or row */
justify-content: center; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 1rem; /* space between items */position: relative; /* enables positioning context */
position: absolute; /* positions relative to parent */
top: 0;
left: 50%;
transform: translateX(-50%); /* center horizontally */rem: Relative to root font sizevh: Viewport height%: Percentage of parent element
#splash-container::before {
content: "";
/* styles for a decorative element */
}-
Use CSS Variables
:root { --main-color: #171619; }
-
Organize CSS by Component
/* Splash section styles */ #splash-container { ...; } /* Interests section styles */ #interests-container { ...; }
-
Use Meaningful Names
- IDs:
#splash-containerinstead of#sc - Classes:
.interest-headerinstead of.ih
- IDs:
-
Comment Your Code
/* Background image setup with blur effect */ #splash-container::before { /* properties here */ }
<script>
// Get element by ID
const typingElement = document.getElementById("typing-text");
// Animation logic here
</script>Building a portfolio website involves:
- Structuring content with HTML
- Styling with CSS
- Adding interactivity with JavaScript
Remember:
- Use semantic HTML
- Keep CSS organized
- Test across different devices
- Comment your code for clarity
- Learn responsive design
- Explore CSS animations
- Study CSS Grid for complex layouts
- Learn a CSS preprocessor like Sass
Now you're ready to start building your own portfolio website!