Learning how to style About Me section with CSS is one of the most practical and frequently used skills in any CSS tutorial for beginners — the “About Me” section is where you introduce yourself, share your story, skills, and personality, and it’s usually the second thing visitors see after the header. In this hands-on guide, you’ll recreate the demonstration website’s About Me section using pure HTML and CSS: a clean two-column layout (profile photo on one side, bio text on the other), yellow background boxes, responsive stacking on mobile, proper spacing, and modern typography.
This is Section 2 of our full HTML CSS website project series — building directly on your css-practice folder, you’ll create a professional, reusable “About Me” section that looks great on desktop and mobile.
Prerequisites – Style About Me Section with CSS
- Your css-practice project folder from previous lessons:
- index.html (with header section already added)
- css/styles.css
- images/ folder
- A large profile image (recommended 600–800px wide):
- Save it as large-profile.jpeg in images/
- Visual Studio Code with Live Server extension (highly recommended)
- Modern browser (Chrome/Edge/Firefox)
1. Add About Me HTML Structure
Open index.html and add the following code after your closing </header> tag (or after the header <div> if you didn’t use <header>):
<!-- Section 2: About Me -->
<section class="about-section">
<div class="column-2 text-column">
<h2>About Me</h2>
<p>Hi! I'm Zain, a passionate front-end developer from Karachi, Pakistan. By day I work with modern HTML, CSS, and JavaScript, and by night I experiment with creative web designs and UI animations.</p>
<p>This site is part of my learning journey with Progressive Robot's CSS tutorials. Feel free to replace this text with your own story, skills, and goals.</p>
<ul class="skills-list">
<li>HTML5 & Semantic Markup</li>
<li>CSS3 (Flexbox, Grid, Animations)</li>
<li>Responsive & Mobile-First Design</li>
<li>UI/UX Fundamentals</li>
<li>Git & Version Control</li>
</ul>
</div>
<div class="column-2 image-column">
<!-- Large profile photo as background -->
</div>
</section>
Notes for beginners:
- <section> — semantic tag for major content blocks (improves accessibility & SEO)
- .column-2.text-column — left side with text
- .column-2.image-column — right side with photo (styled as background)
- <ul class=”skills-list”> — simple bullet list for skills
2. Style About Me Section with CSS – Two-Column Layout
Open css/styles.css and add these rules below your existing header styles:
/* === About Me Section === */
.about-section {
padding: 80px 20px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 60px;
max-width: 1400px;
margin: 0 auto;
}
.column-2 {
flex: 1;
min-width: 300px; /* prevents columns from shrinking too much on mobile */
padding: 40px;
}
/* Text column styling */
.text-column {
background-color: #fede00; /* yellow from demo */
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.text-column h2 {
font-size: 3rem;
margin-bottom: 30px;
color: #112d4e;
}
.text-column p {
font-size: 1.2rem;
margin-bottom: 25px;
line-height: 1.8;
color: #333;
}
.skills-list {
list-style: none;
padding: 0;
}
.skills-list li {
font-size: 1.1rem;
margin-bottom: 12px;
padding-left: 25px;
position: relative;
}
.skills-list li::before {
content: "✔";
position: absolute;
left: 0;
color: #0066cc;
}
/* Image column – large profile photo as background */
.image-column {
background: url('../images/large-profile.jpeg') center/cover no-repeat;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
min-height: 500px; /* adjust based on your image */
}
Save and refresh — you should now see:
- Two side-by-side columns on desktop (yellow text box left, photo right)
- Mobile: columns stack vertically (responsive thanks to flex-wrap: wrap)
- Clean typography, spacing, and subtle shadows
3. Make It Responsive & Mobile-Friendly
Add media query for small screens:
@media (max-width: 768px) {
.about-section {
flex-direction: column;
padding: 60px 15px;
}
.column-2 {
padding: 30px;
}
.text-column h2 {
font-size: 2.5rem;
}
.image-column {
min-height: 400px;
}
}
Now on phones/tablets the layout stacks naturally — text on top, photo below.
4. Best Practices & Modern Tips – Style About Me Section with CSS
- Use flex or grid for two-column layouts — avoid old float
- Set min-width on columns to prevent squishing on narrow screens
- Use background: url(…) center/cover for perfect photo fit
- Add object-fit: cover if using <img> instead of background
- Always include meaningful alt text on profile photos
- Test contrast — yellow background + dark text passes WCAG
- Use clamp() for fluid font sizes:
font-size: clamp(1.8rem, 5vw, 3rem);
How to Style About Me Section with CSS – FAQ (2025–2026)
- How do I style About Me section with CSS?
Use Flexbox: display: flex; gap: 60px; on parent, flex: 1; min-width: 300px; on columns. - How do I make two-column layout responsive with CSS?
flex-wrap: wrap; + media query to change flex-direction: column on mobile. - How do I use image as background in About Me section with CSS?
background: url(‘…’) center/cover no-repeat; - What’s the best way to center text in About Me section with CSS?
text-align: center; or display: flex; align-items: center; justify-content: center; - How do I add skills list in About Me section with CSS?
Custom bullets with ::before pseudo-element for checkmarks or icons.
Summary
You now know exactly how to style About Me section with CSS: two-column Flexbox layout, profile photo background, bio text, skills list, responsive stacking, and modern spacing/shadows.
Mastering how to style About Me section with CSS gives your website a personal, professional introduction — essential for portfolios, resumes, and personal brands.
Keep your css-practice folder open — in the next tutorials you’ll build the Projects grid, Experience section, and more — turning your HTML CSS website project into a real portfolio.
