Building My Personal Resume Website Using HTML & CSS & Deploying It to GitLab

🧑‍💻 Building My Personal Resume Website Using HTML & CSS & Deploying It to GitLab

Creating a resume is important—but creating one using HTML and CSS takes it to the next level! Today, I built a clean, responsive resume website from scratch and uploaded it to GitLab for version control and collaboration.

In this blog, I’ll walk through the process, share the code, and explain how I pushed it to GitLab. Whether you're a beginner or looking to sharpen your front-end skills, this guide will help you get started.

🛠️ Tools & Tech Used

HTML5
CSS3
VS Code
Git & GitLab

🧱 Step 1: HTML Structure

I started by writing the basic structure of the resume using HTML. Here's a simple version of the layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>My Resume</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <header>
      <h1>Your Name</h1>
      <p>Web Developer | Designer | Coder</p>
    </header>

    <section class="contact">
      <h2>Contact</h2>
      <ul>
        <li>Email: your.email@example.com</li>
        <li>Phone: +1234567890</li>
        <li>GitHub: github.com/yourusername</li>
      </ul>
    </section>

    <section class="education">
      <h2>Education</h2>
      <p>Bachelor of Technology, Computer Science - XYZ University</p>
    </section>

    <section class="experience">
      <h2>Experience</h2>
      <p>Frontend Developer Intern at ABC Company</p>
    </section>

    <section class="skills">
      <h2>Skills</h2>
      <ul>
        <li>HTML, CSS, JavaScript</li>
        <li>React.js</li>
        <li>Git & GitLab</li>
      </ul>
    </section>
  </div>
</body>
</html>

🎨 Step 2: Styling with CSS

Next, I styled the layout using CSS to make it visually appealing and responsive.

/* style.css */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  color: #333;
}

.container {
  width: 80%;
  margin: 20px auto;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  color: #2c3e50;
}

h2 {
  color: #34495e;
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

🔧 Step 3: Git Init and Push to GitLab

Once my resume was ready, I initialized a Git repository and pushed the project to GitLab. Here are the commands I used:

git init
git add .
git commit -m "Initial commit - HTML resume"
git remote add origin https://gitlab.com/yourusername/resume-project.git
git branch -M main
git push -u origin main

DEV Community

Building My Personal Resume Website Using HTML & CSS & Deploying It to GitLab