Chapters
Build a Personal Portfolio Website in Just 1 Day — Step-by-Step Guide for Beginners
📘 Chapter 4: Building the Core Pages — HTML & CSS Basics
🧭 What You’ll Learn
By the end of this chapter, you’ll be able to:
- Create
and structure the essential pages of a personal portfolio
- Write
clean, semantic HTML to build your content
- Apply
CSS styles for layout, color, and responsiveness
- Understand
the roles of tags, classes, and basic design patterns
- Build
a solid, mobile-friendly portfolio framework using pure HTML and CSS
🏗️ The Core Pages of a
Portfolio Website
A standard portfolio site typically includes these 4–5
sections/pages:
|
Page |
Purpose |
|
Home |
Introduce yourself and
make a strong first impression |
|
About |
Share your
story, goals, and values |
|
Projects |
Showcase selected work
or side projects |
|
Contact |
Let visitors
reach out to you |
|
Resume (Optional) |
Provide a downloadable
or viewable resume |
📁 Folder & File
Structure (Recommended)
bash
portfolio/
├── index.html
├── about.html
├── projects.html
├── contact.html
├── css/
│ └── style.css
├── images/
│ ├──
profile.jpg
│ └── project1.png
└── resume/
└── resume.pdf
Keep your files organized to make development and deployment
easier.
🧱 Writing Semantic HTML
Basic HTML Template
html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet"
href="css/style.css">
</head>
<body>
<!-- Your content here -->
</body>
</html>
Essential HTML Elements
|
Element |
Purpose |
Example |
|
<h1>–<h6> |
Headings |
<h1>Welcome</h1> |
|
<p> |
Paragraphs |
<p>Hello
there!</p> |
|
<a> |
Hyperlinks |
<a
href="about.html">About</a> |
|
<img> |
Display
images |
<img src="profile.jpg"
alt="Me"> |
|
<ul><li> |
Lists |
<ul><li>HTML</li></ul> |
|
<section> |
Content
grouping |
<section
id="projects">...</section> |
🎯 Building Your
index.html (Home Page)
html
<body>
<header>
<h1>Hi, I’m Alex.</h1>
<p>Frontend Developer | UI/UX
Designer</p>
<nav>
<a
href="about.html">About</a>
<a
href="projects.html">Projects</a>
<a
href="contact.html">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Welcome to My
Portfolio</h2>
<p>I create clean, responsive
websites for startups and small businesses.</p>
</section>
</main>
</body>
👤 about.html
html
<section>
<h2>About Me</h2>
<img src="images/profile.jpg"
alt="Profile Photo">
<p>I’m a web developer passionate about
code and design. I focus on accessibility and simplicity.</p>
</section>
💼 projects.html
html
<section>
<h2>Featured Projects</h2>
<div class="project">
<h3>To-Do App</h3>
<img src="images/project1.png"
alt="To-Do App Screenshot">
<p>A productivity app built using
React and Firebase.</p>
<a
href="https://github.com/username/todoapp"
target="_blank">View on GitHub</a>
</div>
</section>
📬 contact.html
html
<section>
<h2>Contact Me</h2>
<form
action="https://formspree.io/f/mayvlxkj" method="POST">
<input type="text"
name="name" placeholder="Your Name" required>
<input type="email"
name="email" placeholder="Your Email" required>
<textarea name="message"
placeholder="Your Message" required></textarea>
<button
type="submit">Send</button>
</form>
</section>
🎨 Styling With CSS
Basic CSS File (style.css)
css
body
{
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
background-color: #f7f9fc;
color: #333;
}
header
{
background-color: #2c3e50;
color: white;
padding: 2rem;
text-align: center;
}
nav
a {
color: white;
margin: 0 10px;
text-decoration: none;
}
img
{
max-width: 100%;
height: auto;
}
form
input, form textarea {
width: 100%;
margin-bottom: 1rem;
padding: 10px;
}
📱 Adding Mobile
Responsiveness
Add a media query:
css
@media
(max-width: 600px) {
header, section {
padding: 1rem;
}
nav {
display: flex;
flex-direction: column;
}
}
🖼️ Layouts: Flexbox
Example
css
.project
{
display: flex;
gap: 2rem;
margin-bottom: 2rem;
}
.project
img {
width: 300px;
border-radius: 8px;
}
🔠 Fonts and Icons
Google Fonts
html
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
css
body
{
font-family: 'Roboto', sans-serif;
}
Font Awesome Icons
html
<script
src="https://kit.fontawesome.com/yourkit.js"
crossorigin="anonymous"></script>
<i
class="fas fa-envelope"></i>
🧪 Testing and Debugging
- Open
in multiple browsers (Chrome, Firefox, Safari)
- Test
mobile view with DevTools (F12 → Toggle device toolbar)
- Validate
HTML: validator.w3.org
- Use
Lighthouse for performance check
🧠 Pro Tips
- Use
meaningful class names: .nav-link, .hero-section, .project-card
- Keep
CSS modular — organize sections clearly
- Start
with mobile-first design
- Don’t
use inline styles unless absolutely necessary
- Don’t
forget alt attributes for accessibility
📊 HTML Tags vs CSS
Properties Table
|
HTML Element |
Purpose |
CSS Property
Examples |
|
<h1> |
Page heading |
font-size, color,
margin |
|
<img> |
Display image |
border-radius,
width, box-shadow |
|
<nav> |
Navigation bar |
background-color,
padding, flex |
|
<form> |
Input form |
input {
border, padding, width } |
|
<section> |
Grouped content |
margin, padding, background-color |
✅ Summary: What You've Built So
Far
|
Page |
Elements Covered |
|
Home |
Header, Navigation,
Introduction |
|
About |
Image,
Paragraph, Section Heading |
|
Projects |
Grid/Flex layout,
Links, Images, Buttons |
|
Contact |
Forms,
Inputs, Responsive Design |
|
Resume |
Linked Download Button
or Embedded PDF (optional) |
You’ve now got a clean foundation for a fully responsive
personal portfolio site using just HTML and CSS.
Next up, we’ll dive into styling and branding your site
to make it truly your own.
FAQs
❓1. Can I really build a complete portfolio website in just one day?
Answer:
Yes! With the right structure, pre-written content, and a simple template, you
can absolutely build and launch a functional personal portfolio site in 6–8
hours.
❓2. Do I need to know how to code to build a portfolio site?
Answer:
Not necessarily. You can use free HTML templates and just customize the text
and images. But basic knowledge of HTML and CSS will help you make edits and
personalize it further.
❓3. What sections should I include in my portfolio?
Answer:
A simple portfolio should include:
- A
homepage
- About
section
- Skills
or services
- Projects
or work samples
- Contact
info (or a form)
❓4. Where can I find free templates to speed up the process?
Answer:
You can find high-quality templates on sites like HTML5 UP, BootstrapMade,
Templatemo, or search GitHub
for “portfolio template.”
❓5. How do I host my website for free?
Answer:
You can use GitHub Pages—it’s completely free and perfect for static
websites. Simply upload your HTML/CSS files to a public GitHub repository and
enable Pages in the settings.
❓6. Can I use my own domain name with a free portfolio site?
Answer:
Yes! You can register a domain from providers like Namecheap or GoDaddy and
point it to your GitHub Pages site using a CNAME file and DNS settings.
❓7. What tools or software do I need to build the site?
Answer:
At minimum, you’ll need:
- A
text editor (like VS Code)
- A
browser for previewing
- Optional:
GitHub for hosting
You won’t need any paid software.
❓8. Should I include my resume on the portfolio site?
Answer:
Yes, it’s a good idea to include a downloadable PDF version of your resume or
link to it via Google Drive. It makes it easier for recruiters to access.
❓9. How can I make my portfolio stand out visually?
Answer:
Use clean design, modern fonts (like Google Fonts), high-quality images, and
consistent spacing. You don’t need fancy animations—clarity and simplicity win.
❓10. What should I do after my site is live?
Answer:
- Share
it on LinkedIn, Twitter, and in your email signature
- Add
it to your resume
- Keep
updating it with new projects
- Ask
for feedback from peers or mentors
Comments(0)