DEV Community

Sahil
Sahil

Posted on

Create a personal website for Free

#html #webdev #programming #beginners

Building a personal website quickly using free personal website templates is a great way to showcase your skills, portfolio, or resume. Here's a step-by-step guide to help you get started:

Step 1: Choose a Free HTML Template

There are many websites offering free HTML templates. Some popular sources include:

For this example, let's use a simple template from HTML5 UP.

Step 2: Download and Extract the Template

  1. Go to TemplatesJungle and choose a template (e.g., "Julia").
  2. Download the template and extract the ZIP file to your working directory.

Step 3: Customize the Template

Open the extracted folder in a code editor like VS Code. Here's how to customize the template:

1. Update the index.html File

  • Replace the placeholder content with your personal information.

  • Example:

     <!DOCTYPE html>
 <html>
 <head>
     <title>Your Name - Personal Website</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="stylesheet" href="assets/css/main.css" />
 </head>
 <body>
     <!-- Header -->
     <header id="header">
         <div class="top">
             <!-- Logo -->
             <div id="logo">
                 <span class="image avatar48"><img src="images/avatar.jpg" alt="Your Avatar" /></span>
                 <h1 id="title">Your Name</h1>
                 <p>Your Profession</p>
             </div>
             <!-- Nav -->
             <nav id="nav">
                 <ul>
                     <li><a href="#about" id="about-link">About Me</a></li>
                     <li><a href="#portfolio" id="portfolio-link">Portfolio</a></li>
                     <li><a href="#contact" id="contact-link">Contact</a></li>
                 </ul>
             </nav>
         </div>
     </header>

     <!-- Main Content -->
     <div id="main">
         <!-- About Section -->
         <section id="about">
             <div class="container">
                 <header class="major">
                     <h2>About Me</h2>
                 </header>
                 <p>Hello! I'm [Your Name], a [Your Profession] based in [Your Location]. I specialize in [Your Skills].</p>
             </div>
         </section>

         <!-- Portfolio Section -->
         <section id="portfolio">
             <div class="container">
                 <header class="major">
                     <h2>Portfolio</h2>
                 </header>
                 <p>Here are some of my recent projects:</p>
                 <div class="features">
                     <article>
                         <a href="#" class="image"><img src="images/project1.jpg" alt="Project 1" /></a>
                         <div class="inner">
                             <h4>Project 1</h4>
                             <p>Description of Project 1.</p>
                         </div>
                     </article>
                     <article>
                         <a href="#" class="image"><img src="images/project2.jpg" alt="Project 2" /></a>
                         <div class="inner">
                             <h4>Project 2</h4>
                             <p>Description of Project 2.</p>
                         </div>
                     </article>
                 </div>
             </div>
         </section>

         <!-- Contact Section -->
         <section id="contact">
             <div class="container">
                 <header class="major">
                     <h2>Contact Me</h2>
                 </header>
                 <p>Feel free to reach out to me at <a href="mailto:your.email@example.com">your.email@example.com</a>.</p>
             </div>
         </section>
     </div>

     <!-- Footer -->
     <footer id="footer">
         <p>&copy; [Your Name]. All rights reserved.</p>
     </footer>

     <!-- Scripts -->
     <script src="assets/js/jquery.min.js"></script>
     <script src="assets/js/browser.min.js"></script>
     <script src="assets/js/main.js"></script>
 </body>
 </html>

2. Replace Images

  • Replace the placeholder images in the images folder with your own (e.g., avatar, portfolio projects).
  • Update the image paths in the HTML file if necessary.

3. Update Styles (Optional)

  • Open the assets/css/main.css file to customize colors, fonts, or layout.

  • Example:

     body {
     font-family: 'Arial', sans-serif;
     background-color: #f4f4f4;
     color: #333;
 }
 h1, h2, h3 {
     color: #007BFF;
 }

Step 4: Test Your Website

  1. Open the index.html file in your browser to preview your website.
  2. Ensure all links, images, and sections are working correctly.

Step 5: Host Your Website

To make your website live, you can use free hosting services:

  • GitHub Pages:

    1. Upload your project to a GitHub repository.
    2. Go to the repository settings and enable GitHub Pages.
    3. Your site will be live at https://username.github.io/repository-name.

  • Netlify:

    1. Drag and drop your project folder into the Netlify dashboard.
    2. Your site will be deployed instantly.

  • Vercel:

    1. Upload your project and deploy it with a few clicks.

Step 6: Share Your Website

Once your website is live, share the link on your social media, resume, or portfolio to showcase your work!

Example Template Sources

Here are some free templates you can use:

By following these steps, you can quickly build and deploy a professional personal website using free HTML templates. Happy coding! 🚀

Top comments (0)

Read next

rohan_jee_085655230 profile image

Top 5 Google Cloud Certifications for 2025: A Complete Guide

Skill Tester Techy -

sydalwedaie profile image

I Finished The Odin Project's Foundation Track

Sayed Ali -

rage profile image

Prompt Engineering: The Art of Talking to AI

Arman khan -

contrastchecker profile image

Free Tools to Improve Color Accessibility on Your Website

Contrast Checker -