User Profile Page Design in HTML with Source Code

This tutorial will guide you through creating a user profile page design using HTML, CSS, and JavaScript. We’ll build a visually appealing and informative profile page, perfect for showcasing your online presence. The target audience for this tutorial is beginner web developers.

Step 1: Setting up the Project

Adding Header Assets

First, let’s include the necessary assets in the header of your HTML document. This will include the Ionicons library for social media icons.

<!-- Ionicons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Step 2: Building the HTML Structure

Next, we’ll create the basic HTML structure for the profile page. This will include sections for the profile picture, bio, stats, social links, an about section, and a skills section.

<!-- Header Cover -->
  <div class="profile-header"></div>

  <!-- Profile Card -->
  <div class="profile-card" align="center">
    <img src="https://www.w3frontend.com/img/asif-mughal.jpg" alt="Profile Picture" class="profile-img">
    <h2 class="profile-name">Asif Mughal</h2>
    <p class="profile-bio">Web Developer • Tech Enthusiast • Creator</p>

    <div class="profile-info">
      <div>
        <h4>120</h4>
        <p>Posts</p>
      </div>
      <div>
        <h4>5.6k</h4>
        <p>Followers</p>
      </div>
      <div>
        <h4>1.2k</h4>
        <p>Following</p>
      </div>
    </div>

    <!-- Social -->
    <div class="social-links">
      <a href="#"><ion-icon name="globe-outline"></ion-icon></a>
      <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
      <a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
      <a href="#"><ion-icon name="logo-github"></ion-icon></a>
    </div>
  </div>

  <!-- About Section -->
  <div class="section about">
    <h2>About Me</h2>
    <p>
      Hi, I’m Asif – a passionate Web Developer with a love for creating clean, modern, and interactive web applications. 
      I enjoy turning complex problems into simple, beautiful interfaces. 
      Always exploring new technologies and sharing knowledge with the community.
    </p>
  </div>

  <!-- Skills Section -->
  <div class="section skills-section">
    <h2>Skills & Interests</h2>
    <div class="skills">
      <span class="skill">HTML5</span>
      <span class="skill">CSS3</span>
      <span class="skill">JavaScript</span>
      <span class="skill">PHP</span>
      <span class="skill">MySQL</span>
      <span class="skill">React</span>
      <span class="skill">Node.js</span>
      <span class="skill">WordPress</span>
      <span class="skill">UI/UX</span>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    © 2025 Asif Mughal — All Rights Reserved
  </footer>

Step 3: Styling with CSS

Now, let’s add some style to our HTML using CSS. We’ll use CSS to create the layout, colors, fonts, and overall visual appeal of the user profile page.

body {
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
      background: #f4f6fb;
      color: #333;
    }

    /* Header Cover */
    .profile-header {
      background: url('https://picsum.photos/1200/400?blur') center/cover no-repeat;
      height: 250px;
      position: relative;
    }

    .profile-header::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
    }

    /* Profile Card */
    .profile-card {
      max-width: 900px;
      margin: -100px auto 40px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      padding: 30px;
      position: relative;
      z-index: 99;
      
    }

    .profile-img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 5px solid #fff;
      object-fit: cover;
      margin-top: -110px;
    }

    .profile-name {
      font-size: 1.8rem;
      font-weight: 600;
      margin: 10px 0 5px;
    }

    .profile-bio {
      font-size: 1rem;
      color: #666;
      margin-bottom: 15px;
    }

    .profile-info {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin: 20px 0;
    }

    .profile-info div {
      text-align: center;
    }

    .profile-info h4 {
      margin: 0;
      color: #333;
      font-size: 1.3rem;
    }

    .profile-info p {
      margin: 0;
      color: #777;
      font-size: 0.85rem;
    }

    /* Social Links */
    .social-links {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 15px;
    }

    .social-links a {
      color: #764ba2;
      font-size: 1.6rem;
      transition: 0.3s;
    }

    .social-links a:hover {
      color: #667eea;
    }

    /* Sections */
    .section {
      max-width: 900px;
      margin: 0 auto 40px;
      background: #fff;
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

    .section h2 {
      margin-top: 0;
      color: #764ba2;
      font-size: 1.3rem;
    }

    .about p {
      line-height: 1.6;
      color: #555;
    }

    /* Skills */
    .skills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .skill {
      background: #f0ebfa;
      color: #764ba2;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 500;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 20px;
      font-size: 0.85rem;
      color: #666;
    }

Congratulations! You’ve successfully created a user profile page design using HTML, CSS, and (optionally) JavaScript.