CSS Styling HTML Elements Project - Student Portfolio

Last Updated : 12 Sep, 2026

Create a simple Student Portfolio and Registration Page that presents a student's profile, skills, academic details, and registration form in a clean and user-friendly way. The project will use the concepts learned in the Styling HTML Elements module, including text formatting, image styling, lists, tables, forms, and links.

Module Articles Used

Step-by-Step Implementation

1. Create the Profile Section

Start with a profile image, heading, introduction, and a link to view more information.

HTML 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Portfoliotitle>

    <style>
        .profile {
            width: 700px;
            margin: 40px auto;
            padding: 25px;
            text-align: center;
            background-color: #f4f8fc;
            border: 1px solid #d5e0ea;
        }

        .profile img {
            width: 150px;
            height: 150px;
            max-width: 100%;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        .profile h1 {
            margin: 10px 0;
            color: #222;
            font-size: 30px;
            text-transform: capitalize;
        }

        .intro {
            color: #555;
            font-size: 16px;
            line-height: 1.6;
            letter-spacing: 0.3px;
        }
    style>
head>

<body>

    <div class="profile">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png"
        alt="profile image">

        <h1>Mohith1>

        <p class="intro">
            Computer Science student interested in web development
            and software design.
        p>

        <a href="#" class="profile-link">View Profilea>
    div>

body>
html>

Here, text formatting is used for the heading and introduction, while the image is given a circular shape and responsive width.

2. Add Skills and Academic Details

Use a list for skills and a table for academic details.

HTML 


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
--Driver Code Ends-->

        .skills {
            padding-left: 25px;
            list-style-type: square;
        }

        .skills li {
            margin: 8px 0;
        }

        table {
            width: 100%;
            margin: 20px 0;
            border-collapse: collapse;
        }

        caption {
            caption-side: top;
            margin-bottom: 10px;
            font-weight: bold;
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #c8d2dc;
            text-align: center;
        }

        th {
            background-color: #e8f1f8;
        }

--Driver Code Starts-->
    style>
head>

<body>

    <div class="profile">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png"
        alt="Profile image">

        <h1>Mohith1>

        <p class="intro">
            Computer Science student interested in web development
            and software design.
        p>

        <a href="#">View Profilea>
    div>

    <h2>My Skillsh2>

    <ul class="skills">
        <li>HTMLli>
        <li>CSSli>
        <li>JavaScriptli>
        <li>Problem Solvingli>
    ul>

    <h2>Academic Detailsh2>

    <table>
        <caption>Semester Performancecaption>

        <tr>
            <th>Semesterth>
            <th>Courseth>
            <th>Gradeth>
        tr>

        <tr>
            <td>1td>
            <td>Web Developmenttd>
            <td>Atd>
        tr>

        <tr>
            <td>2td>
            <td>Programmingtd>
            <td>Atd>
        tr>

        <tr>
            <td>3td>
            <td>Database Systemstd>
            <td>B+td>
        tr>
    table>

body>
html>

3. Create the Registration Form

Add a simple form where a student can enter their details.

HTML 


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .profile {
            text-align: center;
        }

        .profile img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }

        .skills {
            padding-left: 25px;
            list-style-type: square;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #c8d2dc;
            text-align: center;
        }

--Driver Code Ends-->

        form {
            margin-top: 20px;
        }

        label {
            display: block;
            margin: 12px 0 6px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="email"] {
            width: 90%;
            padding: 12px;
            margin-bottom: 8px;
            border: 1px solid #b8c5d0;
            border-radius: 6px;
            background-color: #fff;
            color: #222;
        }

        input[type="text"]:focus,
        input[type="email"]:focus {
            border: 2px solid #2878c8;
            background-color: #f2f8ff;
        }

        button {
            margin-top: 12px;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            background-color: #2878c8;
            color: white;
        }

--Driver Code Starts-->
    style>
head>

<body>

    <div class="profile">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png" 
        alt="Profile image">

        <h1>Mohith1>

        <p>
            Computer Science student interested in web development
            and software design.
        p>
    div>

    <h2>My Skillsh2>

    <ul class="skills">
        <li>HTMLli>
        <li>CSSli>
        <li>JavaScriptli>
        <li>Problem Solvingli>
    ul>

    <h2>Academic Detailsh2>

    <table>
        <tr>
            <th>Semesterth>
            <th>Courseth>
            <th>Gradeth>
        tr>
        <tr>
            <td>1td>
            <td>Web Developmenttd>
            <td>Atd>
        tr>
        <tr>
            <td>2td>
            <td>Programmingtd>
            <td>Atd>
        tr>
        <tr>
            <td>3td>
            <td>Database Systemstd>
            <td>B+td>
        tr>
    table>

    <h2>Register for the Courseh2>

    <form>
        <label for="name">Namelabel>
        <input type="text" id="name" placeholder="Enter your name">

        <label for="email">Emaillabel>
        <input type="email" id="email" placeholder="Enter your email">

        <label for="course">Courselabel>
        <input type="text" id="course" placeholder="Enter your course">

        <button type="submit">Registerbutton>
    form>

body>
html>

The list is styled with custom markers, while the table uses borders, padding, alignment, and collapsed borders for better readability.

The form uses attribute selectors to target different input types. The :focus selector changes the input appearance when the user selects a field.

Add links for navigation and style their different states.

HTML 


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .profile {
            text-align: center;
        }

        .profile img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }

        .skills {
            padding-left: 25px;
            list-style-type: square;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #c8d2dc;
            text-align: center;
        }

        form {
            margin-top: 20px;
        }

        label {
            display: block;
            margin: 12px 0 6px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="email"] {
            width: 90%;
            padding: 12px;
            margin-bottom: 8px;
            border: 1px solid #b8c5d0;
            border-radius: 6px;
        }

        button {
            margin-top: 12px;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            background-color: #2878c8;
            color: white;
        }

--Driver Code Ends-->

        .links {
            margin-top: 25px;
            text-align: center;
        }

        .links a {
            display: inline-block;
            margin: 5px;
            padding: 8px 15px;
            background-color: #e8f1f8;
            color: #2878c8;
            border-radius: 5px;
            text-decoration: none;
        }

        .links a:visited {
            color: #2878c8;
        }

        .links a:hover {
            background-color: #2878c8;
            color: white;
        }

        .links a:active {
            background-color: #18558f;
        }

--Driver Code Starts-->
    style>
head>

<body>

    <div class="profile">
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png"
        alt="Profile image">

        <h1>Mohith1>

        <p>
            Computer Science student interested in web development
            and software design.
        p>
    div>

    <h2>My Skillsh2>

    <ul class="skills">
        <li>HTMLli>
        <li>CSSli>
        <li>JavaScriptli>
        <li>Problem Solvingli>
    ul>

    <h2>Academic Detailsh2>

    <table>
        <tr>
            <th>Semesterth>
            <th>Courseth>
            <th>Gradeth>
        tr>
        <tr>
            <td>1td>
            <td>Web Developmenttd>
            <td>Atd>
        tr>
        <tr>
            <td>2td>
            <td>Programmingtd>
            <td>Atd>
        tr>
        <tr>
            <td>3td>
            <td>Database Systemstd>
            <td>B+td>
        tr>
    table>

    <h2>Register for the Courseh2>

    <form>
        <label for="name">Namelabel>
        <input type="text" id="name" placeholder="Enter your name">

        <label for="email">Emaillabel>
        <input type="email" id="email" placeholder="Enter your email">

        <label for="course">Courselabel>
        <input type="text" id="course" placeholder="Enter your course">

        <button type="submit">Registerbutton>
    form>

    <div class="links">
        <a href="#">Homea>
        <a href="#">Coursesa>
        <a href="#">Contacta>
    div>

body>
html>

The links are styled like navigation buttons. Their appearance changes when the user hovers over or clicks them.

Final Source Code

HTML 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Portfolio & Registrationtitle>

    <style>
        body {
            margin: 0;
            background-color: #ffffff;
            font-family: Arial, sans-serif;
            color: #333;
        }

        .container {
            width: 700px;
            margin: 40px auto;
            padding: 25px;
            border: 1px solid #d5e0ea;
            background-color: #f9fbfd;
        }

        .profile {
            padding: 25px;
            text-align: center;
            background-color: #f4f8fc;
            border: 1px solid #d5e0ea;
        }

        .profile img {
            width: 150px;
            height: 150px;
            max-width: 100%;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        .profile h1 {
            margin: 10px 0;
            color: #222;
            font-size: 30px;
            text-transform: capitalize;
        }

        .intro {
            color: #555;
            font-size: 16px;
            line-height: 1.6;
            letter-spacing: 0.3px;
        }

        h2 {
            margin-top: 30px;
            color: #222;
            text-decoration: underline;
            text-decoration-color: #2878c8;
        }

        .skills {
            padding-left: 25px;
            list-style-type: square;
        }

        .skills li {
            margin: 8px 0;
        }

        table {
            width: 100%;
            margin: 20px 0;
            border-collapse: collapse;
        }

        caption {
            caption-side: top;
            margin-bottom: 10px;
            font-weight: bold;
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #c8d2dc;
            text-align: center;
        }

        th {
            background-color: #e8f1f8;
        }

        form {
            margin-top: 20px;
        }

        label {
            display: block;
            margin: 12px 0 6px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="email"] {
            width: 90%;
            padding: 12px;
            margin-bottom: 8px;
            border: 1px solid #b8c5d0;
            border-radius: 6px;
            background-color: #fff;
            color: #222;
        }

        input[type="text"]:focus,
        input[type="email"]:focus {
            border: 2px solid #2878c8;
            background-color: #f2f8ff;
        }

        button {
            margin-top: 12px;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            background-color: #2878c8;
            color: white;
        }

        .links {
            margin-top: 25px;
            text-align: center;
        }

        .links a {
            display: inline-block;
            margin: 5px;
            padding: 8px 15px;
            background-color: #e8f1f8;
            color: #2878c8;
            border-radius: 5px;
            text-decoration: none;
        }

        .links a:visited {
            color: #2878c8;
        }

        .links a:hover {
            background-color: #2878c8;
            color: white;
        }

        .links a:active {
            background-color: #18558f;
        }
    style>
head>

<body>

    <div class="container">

        <div class="profile">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png" 
            alt="Profile image">

            <h1>Mohith1>

            <p class="intro">
                Computer Science student interested in web development
                and software design.
            p>
        div>

        <h2>My Skillsh2>

        <ul class="skills">
            <li>HTMLli>
            <li>CSSli>
            <li>JavaScriptli>
            <li>Problem Solvingli>
        ul>

        <h2>Academic Detailsh2>

        <table>
            <caption>Semester Performancecaption>
            <tr>
                <th>Semesterth>
                <th>Courseth>
                <th>Gradeth>
            tr>
            <tr>
                <td>1td>
                <td>Web Developmenttd>
                <td>Atd>
            tr>
            <tr>
                <td>2td>
                <td>Programmingtd>
                <td>Atd>
            tr>
            <tr>
                <td>3td>
                <td>Database Systemstd>
                <td>B+td>
            tr>
        table>

        <h2>Register for the Courseh2>

        <form>
            <label for="name">Namelabel>
            <input type="text" id="name" placeholder="Enter your name">

            <label for="email">Emaillabel>
            <input type="email" id="email" placeholder="Enter your email">

            <label for="course">Courselabel>
            <input type="text" id="course" placeholder="Enter your course">

            <button type="submit">Registerbutton>
        form>

        <div class="links">
            <a href="#">Homea>
            <a href="#">Coursesa>
            <a href="#">Contacta>
        div>

    div>

body>
html>


Output:

Note:

  • Text Formatting: Control text color, size, alignment, spacing, and decoration.
  • Images: Style images using width, height, borders, radius, and responsive sizing.
  • Lists: Customize list markers and spacing.
  • Tables: Improve table readability using borders, padding, alignment, and border-collapse.
  • Forms: Style inputs and create focus effects using attribute selectors and :focus.
  • Links: Use link states such as :link, :visited, :hover, and :active to provide visual feedback.
Comment

Explore