Create a Personal Website for Free

TemplatesJungleTemplatesJungle
3 min read

Creating a personal website using free templates is a fantastic way to showcase your skills, portfolio, or resume. Below, I'll guide you through the process of building a personal website using free HTML templates.

Step 1: Find a Free Personal Website Template

Visit TemplatesJungle.com to browse their collection of free HTML templates. They offer a variety of modern and responsive templates suitable for personal websites.

For this example, let's assume you've downloaded a free personal portfolio template from TemplatesJungle.com.

Step 2: Download and Extract the Template

  1. Go to TemplatesJungle.com.

  2. Choose a template (e.g., "Daniel" or "Creative CV").

  3. 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 lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Your Name - Personal Portfolio</title>
      <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
      <!-- Header -->
      <header>
          <div class="container">
              <h1>Your Name</h1>
              <p>Web Developer | Designer</p>
              <nav>
                  <ul>
                      <li><a href="#about">About</a></li>
                      <li><a href="#portfolio">Portfolio</a></li>
                      <li><a href="#contact">Contact</a></li>
                  </ul>
              </nav>
          </div>
      </header>

      <!-- About Section -->
      <section id="about">
          <div class="container">
              <h2>About Me</h2>
              <p>Hello! I'm [Your Name], a passionate web developer and designer based in [Your Location]. I specialize in creating responsive and user-friendly websites.</p>
          </div>
      </section>

      <!-- Portfolio Section -->
      <section id="portfolio">
          <div class="container">
              <h2>Portfolio</h2>
              <div class="projects">
                  <div class="project">
                      <img src="images/project1.jpg" alt="Project 1">
                      <h3>Project 1</h3>
                      <p>Description of Project 1.</p>
                  </div>
                  <div class="project">
                      <img src="images/project2.jpg" alt="Project 2">
                      <h3>Project 2</h3>
                      <p>Description of Project 2.</p>
                  </div>
              </div>
          </div>
      </section>

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

      <!-- Footer -->
      <footer>
          <div class="container">
              <p>&copy; 2023 Your Name. All rights reserved.</p>
          </div>
      </footer>
  </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 css/style.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!

Why Use TemplatesJungle.com?

  • Free Resources: TemplatesJungle offers a wide range of free personal website templates for personal and professional use.

  • Responsive Designs: Their templates are mobile-friendly and modern.

  • Easy to Customize: The templates are well-documented and easy to modify.

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

0
Subscribe to my newsletter

Read articles from TemplatesJungle directly inside your inbox. Subscribe to the newsletter, and don't miss out.

personalwebsiteHTML CSS JAVASCRIPTBootstrap 5

Written by

TemplatesJungle
TemplatesJungle