Let AI turn your idea into a full-featured web app
Topics
What is the best way to host a personal website online?
Do I need to know JavaScript to build a portfolio website?
Can I use Tailwind CSS with my existing HTML project?
Ready to build your personal website using HTML and CSS?Take control of your online presence with a custom site that reflects your skills, not just your profiles. This guide walks you through every step—simply.
Most professionals have strong skills, yet still feel invisible online.
Many depend only on social media or basic platforms that offer little control. That limits how clients and employers see their full potential.
What’s the missing piece in building a strong digital presence?
In today’s world, having a website is often expected. It shows your work clearly and puts you in control of how you're seen.
This article on how to create personal website using HTML and CSS will help you take that step. You’ll learn how to build a clean HTML structure, style it with CSS, and organize your layout. You’ll also see how to turn your site into a working app version using Rocket.
You’ll follow each step clearly and practically. Keep reading to start building with confidence.
Learn to create a portfolio website from scratch using HTML and CSS
Understand the structure of an HTML document and how stylesheets work
Style your site with a responsive layout, images, and fonts
Build an HTML + CSS app using Rocket with one prompt
Make your portfolio accessible to potential clients and search engines
To create a website, you need two core technologies: HTML and CSS.
HTML (HyperText Markup Language) defines the structure and content inside the web page.
CSS (Cascading Style Sheets) adds style, layout, colors, spacing, and more.
An HTML document is a structured HTML file that the browser reads to display your web page.
Here's a basic structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="Personal Portfolio Website"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Portfolio</title> <link href="style.css" rel="stylesheet"> </head> <body> <header> <h1>Hello, I’m Alex</h1> <p class="intro">A frontend developer creating beautiful websites</p> </header> <section> <h2>About Me</h2> <p class="bio">I build responsive portfolio websites using HTML, CSS, and JavaScript.</p> </section> </body> </HTML>
Use
<!DOCTYPE HTML>to define HTML5, and HTML lang="en" to help with accessibility and search engines.
To create a personal portfolio website, start with a basic page layout.
Break it down into sections:
| Section | Purpose |
|---|---|
<header> | Name, logo, intro |
<section> | About, projects, services |
<img> | Showcase work with visuals |
<footer> | Contact info, social links |
Add classes and IDs to div elements for structure and CSS styling:
1 2 3 4<div class="portfolio-section"> <img src="images/project1.jpg" alt="Project screenshot"> <p class="project-description">Built using HTML and CSS only</p> </div>
Use the img src attribute to embed images and keep your layout visually engaging.
You’ll need a separate stylesheet (e.g., style.css). Link it in your HTML’s <head> with:
1<link href="style.css" rel="stylesheet">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18body { font-family: Arial, sans-serif; background-image: url("images/bg.jpg"); font-size: 16px; margin: 0; padding: 0; } h1 { font-size: 2.5em; } .portfolio-section { max-width: 1200px; margin: auto; display: flex; flex-direction: column; }
Key Properties:
font-family: Controls font style
font-size: Adjusts text size (in px, em, rem)
max-width: Limits layout stretch on large screens
background-image: Adds depth and identity
display: flex: Helps create responsive designs
Organize your project like this:
1 2 3 4 5 6/portfolio-site ├── index.html ├── style.css ├── /images │ ├── logo.jpg │ ├── project1.jpg
Keep CSS files separate from HTML files
Use logical names for images, like profile.jpg or banner.jpg
Upload your site to GitHub or Netlify for online portfolio access
Meta tags help your website perform well in search engines:
1 2 3<meta name="description" content="Digital portfolio of Alex, frontend developer."> <meta name="keywords" content="portfolio, HTML, CSS, frontend developer"> <meta name="author" content="Alex Dev">
Always use meaningful title and meta tags
Use alt with img src for accessibility and SEO
A clean, responsive layout keeps users engaged
A portfolio isn’t complete without contact info and service details.
1 2 3 4 5<section id="contact"> <h2>Contact Me</h2> <p class="p class">Email: alex@example.com</p> <p class="p class">LinkedIn: <a href="<https://linkedin.com/in/alex>" target="_blank">Connect</a></p> </section>
Mention services like “Web design”, “Responsive layout”, or “Custom HTML & CSS builds”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="Freelance Developer Portfolio Website"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Alex Dev - Portfolio</title> <link href="style.css" rel="stylesheet"> </head> <body> <header> <img src="images/logo.jpg" alt="Logo"> <h1>Welcome to My Portfolio</h1> <p class="p class">Showcasing web projects and designs</p> </header> <section> <h2>Projects</h2> <img src="images/project1.jpg" alt="Project 1 Screenshot"> <p class="p class">Built with HTML, CSS, and JavaScript</p> </section> <footer> <p>Contact: alex@example.com</p> </footer> </body> </HTML>
Rocket doesn’t just give you code, it generates a fully functional, visually polished portfolio website based on your prompt. The site includes everything a serious freelancer or professional needs to impress clients and close deals faster.
Go to https://rocket.new
Choose “landing page” as your use case
Input a prompt like:
“Create a personal portfolio site with projects, skills, and a contact form.”
Rocket generates:
A hero section with a headline, trust indicators, and clear call-to-action buttons
Statistics like total projects, satisfaction rate, and average delivery time
A section addressing common client frustrations
A project methodology timeline
A project showcase grid
Skill bars for technical expertise
Testimonial cards with avatars
A pricing comparison section with clearly defined cards
FAQ accordion with toggle-based interactivity
A contact form
Integrated footer with social links, branding, and quick navigation options
Once your app is generated, you can:
Use the visual editor to adjust styles, sections, or colors
Type prompts like:
“Change font size of header to 36px”
“Update my background image on the hero section”
Rocket executes these instantly, updating the HTML and Tailwind classes in real time.
To upload your website:
| Platform | Free Tier | Custom Domain Support |
|---|---|---|
| GitHub Pages | Yes | Yes |
| Netlify | Yes | Yes |
| Vercel | Yes | Yes |
If you're building manually, ensure your index.html file is in the root directory and all assets like CSS files, images, and href links are correctly referenced.
If you’re using Rocket, deployment is even faster.
After generating your portfolio with Rocket, you can deploy it on Netlify with one click, directly from the Rocket dashboard. This eliminates setup time and makes your site live instantly.
If you’ve been relying solely on social media or basic platforms, now’s the time to take control of your digital presence. This guide showed you how to go beyond the limitations of generic profiles by using HTML and CSS to build a personalized, professional website that reflects your skills and potential.
Creating your own site gives you full ownership, better visibility, and the freedom to showcase your work exactly how you want. Whether you’re a freelancer, student, or job seeker, a custom portfolio helps you stand out in a crowded digital space.
Don't wait to be discovered—make it easy for employers, clients, or collaborators to find and trust you. Start building your website today, and give your online presence the upgrade it deserves.
