In the world of education, a marksheet is more than just a document—it is a reflection of a student’s hard work, an institution’s credibility, and a source of pride for parents and teachers alike. With digital platforms evolving rapidly, having a visually compelling and responsive marksheet in web form is becoming essential for schools, colleges, and academic institutions. This tutorial will walk you through how to design a student marksheet using HTML and CSS, ensuring it’s professional, elegant, and user-friendly.
Whether you’re a student learning front-end development or a school administrator exploring better digital solutions, this tutorial will guide you through the process of designing a functional, attractive marksheet using basic HTML structure, Bootstrap components, and customized CSS styles.
Follow this video for complete guidance :
1. Why Design a Marksheet with HTML and CSS?
Before we dive into the structure, it’s important to understand why one would want to create a marksheet with HTML and CSS:
- Paperless Process : Digitizing student records streamlines administration and reduces paper usage.
- Responsiveness: HTML & CSS, combined with frameworks like Bootstrap, help create mobile-friendly layouts.
- Customization: Tailor the look and feel of your marksheet based on branding, school themes, or data structures.
- Export Possibilities: You can later integrate JavaScript or server-side scripts to convert HTML to PDF or print-friendly formats.
This project not only teaches layout design but also strengthens your knowledge of web fundamentals like grids, tables, typography, and semantic HTML.
Marksheet Design – Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Marksheet</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
font-family: 'Segoe UI';
}
.marksheet {
max-width: 800px;
margin: 20px auto;
background-color: white;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
border-radius: 10px;
overflow: hidden;
}
.marksheet-header {
background: linear-gradient(135deg, #3a8eba 0%, #2c3e50 100%);
color: white;
padding: 20px;
text-align: center;
position: relative;
}
.marksheet-logo {
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.student-photo {
width: 100px;
height: 120px;
border: 3px solid white;
position: absolute;
right: 20px;
top: 20px;
background-color: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
}
.marksheet-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
.student-info {
background-color: #f8f9fa;
padding: 15px 20px;
border-bottom: 1px solid #dee2e6;
}
.info-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}
.info-item {
flex: 1;
min-width: 200px;
margin-bottom: 5px;
}
.info-label {
font-weight: 600;
color: #495057;
}
.marks-table th {
background-color: #3a8eba;
color: white;
font-weight: 500;
}
.grade-a {
color: #28a745;
font-weight: bold;
}
.grade-b {
color: #17a2b8;
font-weight: bold;
}
.grade-c {
color: #fd7e14;
font-weight: bold;
}
.grade-f {
color: #dc3545;
font-weight: bold;
}
.result-section {
background-color: #f8f9fa;
padding: 15px 20px;
border-top: 1px solid #dee2e6;
}
.result-box {
background-color: #28a745;
color: white;
border-radius: 5px;
padding: 10px 15px;
display: inline-block;
font-weight: bold;
}
.signature-section {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-bottom: 10px;
}
.signature {
text-align: center;
width: 150px;
}
.signature-line {
width: 100%;
border-top: 1px solid #000;
margin-bottom: 5px;
}
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 100px;
opacity: 0.03;
color: #000;
pointer-events: none;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="marksheet position-relative">
<div class="watermark">MARKSHEET</div>
<!-- Header -->
<div class="marksheet-header">
<div class="marksheet-logo">
<i class="fas fa-graduation-cap fa-3x" style="color:#3a8eba;"></i>
</div>
<div class="marksheet-title">EXCELLENCE ACADEMY</div>
<div>Academic Year 2024-2025</div>
<div class="mt-2">STUDENT MARKSHEET</div>
<div class="student-photo">
<i class="fas fa-user fa-3x text-secondary"></i>
</div>
</div>
<!-- Student Information -->
<div class="student-info">
<div class="info-row">
<div class="info-item">
<div class="info-label">Student Name:</div>
<div>John Smith</div>
</div>
<div class="info-item">
<div class="info-label">Roll Number:</div>
<div>EXA2024001</div>
</div>
<div class="info-item">
<div class="info-label">Class:</div>
<div>12th Grade</div>
</div>
</div>
<div class="info-row">
<div class="info-item">
<div class="info-label">Date of Birth:</div>
<div>15-May-2007</div>
</div>
<div class="info-item">
<div class="info-label">Father's Name:</div>
<div>Robert Smith</div>
</div>
<div class="info-item">
<div class="info-label">Mother's Name:</div>
<div>Sarah Smith</div>
</div>
</div>
</div>
<!-- Marks Table -->
<div class="table-responsive">
<table class="table table-bordered marks-table mb-0">
<thead>
<tr>
<th>Subject Code</th>
<th>Subject</th>
<th>Max Marks</th>
<th>Min Marks</th>
<th>Obtained</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>ENG101</td>
<td>English</td>
<td>100</td>
<td>35</td>
<td>87</td>
<td class="grade-a">A</td>
</tr>
<tr>
<td>MATH102</td>
<td>Mathematics</td>
<td>100</td>
<td>35</td>
<td>95</td>
<td class="grade-a">A+</td>
</tr>
<tr>
<td>PHY103</td>
<td>Physics</td>
<td>100</td>
<td>35</td>
<td>78</td>
<td class="grade-b">B+</td>
</tr>
<tr>
<td>CHEM104</td>
<td>Chemistry</td>
<td>100</td>
<td>35</td>
<td>82</td>
<td class="grade-a">A</td>
</tr>
<tr>
<td>CS105</td>
<td>Computer Science</td>
<td>100</td>
<td>35</td>
<td>92</td>
<td class="grade-a">A+</td>
</tr>
</tbody>
<tfoot>
<tr class="table-secondary">
<td colspan="2" class="text-end fw-bold">Total</td>
<td class="fw-bold">500</td>
<td class="fw-bold">175</td>
<td class="fw-bold">434</td>
<td></td>
</tr>
<tr class="table-secondary">
<td colspan="2" class="text-end fw-bold">Percentage</td>
<td colspan="3" class="fw-bold">86.8%</td>
<td class="grade-a">A</td>
</tr>
</tfoot>
</table>
</div>
<!-- Result Section -->
<div class="result-section">
<div class="d-flex justify-content-between">
<div>
<div class="mb-2"><strong>Grading Scale:</strong></div>
<div class="small">
<div><span class="grade-a">A+ (90-100)</span> - Outstanding</div>
<div><span class="grade-a">A (80-89)</span> - Excellent</div>
<div><span class="grade-b">B+ (70-79)</span> - Very Good</div>
<div><span class="grade-b">B (60-69)</span> - Good</div>
<div><span class="grade-c">C (50-59)</span> - Average</div>
<div><span class="grade-c">D (40-49)</span> - Below Average</div>
<div><span class="grade-f">F (Below 40)</span> - Fail</div>
</div>
</div>
<div class="text-end">
<div class="mb-3">
<div class="result-box">
PASS <i class="fas fa-check-circle ms-1"></i>
</div>
</div>
<div>
<div class="fw-bold">Issue Date: 04-April-2025</div>
<div>Certificate No: EA-2425-00123</div>
</div>
</div>
</div>
<!-- Signature Section -->
<div class="signature-section">
<div class="signature">
<div class="signature-line"></div>
<div>Class Teacher</div>
</div>
<div class="signature">
<div class="signature-line"></div>
<div>Principal</div>
</div>
<div class="signature">
<div class="signature-line"></div>
<div>Examination Controller</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. Structure Overview of the Marksheet
Let’s look at how the layout of the marksheet is divided. The entire marksheet is wrapped inside a central container that is centered using margins and given a maximum width to keep it consistent across devices.
Key Sections:
- Marksheet Header
- Student Details Section
- Marks Table
- Results and Grades
- Signatures
- Watermark & Visual Effects
Each section plays a vital role in presenting the content effectively and is styled to give a formal, printed-document feel.
3. Designing the Marksheet Header
The header is the most eye-catching part of the marksheet and often contains the institution’s name, logo, academic year, and sometimes a student’s photo.
To make it visually appealing:
- A gradient background is used with contrasting white text.
- The institution’s logo is placed inside a circular badge to add a premium look.
- The student photo is floated to the right with borders and a subtle shadow effect.
- Font Awesome icons are used to enhance visual aesthetics without using any images.
This section sets the tone for the entire document.
4. Displaying Student Information Neatly
Under the header, the student information section is structured using flexbox. It neatly divides details like:
- Student Name
- Roll Number
- Class
- Date of Birth
- Father’s Name
- Mother’s Name
By using a flexible layout, each piece of information adjusts according to screen size without breaking the design. Background colors and padding make it distinct from other sections, helping viewers quickly focus on key personal details.
5. Creating the Marks Table
One of the most important elements of the marksheet is the table displaying academic performance. Here’s how it’s structured:
- Column Headers: Subject Code, Subject Name, Maximum Marks, Minimum Marks, Marks Obtained, Grade.
- The table uses Bootstrap’s table classes for responsiveness and clarity.
- Rows include individual subjects, with alternating styling for readability.
- A footer row is added to calculate total marks and percentage.
For enhanced visual feedback, grade colors are introduced using classes (A, B+, F, etc.). These are color-coded to quickly differentiate between excellent and poor performance.
6. Grading System and Result Box
To provide better understanding for students and parents, a grading scale is listed just below the marks table. It explains what each grade symbol means in terms of score range.
This is followed by a highlighted result box, displaying whether the student has passed or failed. A green “PASS” box with a checkmark icon adds visual affirmation.
The right side of this section includes metadata like the issue date and certificate number, adding legitimacy to the document.
7. Signature Section
No academic document is complete without authorization. At the bottom of the marksheet:
- Three signature blocks are placed horizontally—for the Class Teacher, Principal, and Examination Controller.
- Each has a horizontal line and label underneath.
- Spacing and alignment are carefully managed to ensure that the section is balanced and ready for print or digital approval.
This adds formality and ensures that the document is ready for real-world institutional use.
8. Adding a Subtle Watermark
A great design detail is the “MARKSHEET” watermark, subtly embedded into the background.
- It is positioned centrally using
absolutepositioning. - Rotated to appear diagonally using
transform. - Opacity is reduced to avoid distraction.
This watermark serves both aesthetic and security purposes, making the document look more authentic and harder to forge.
9. Mobile Responsiveness with Bootstrap
One of the key benefits of using Bootstrap is automatic responsiveness. All layout elements adapt well to different screen sizes:
- The table becomes scrollable on smaller screens.
- Flexbox layouts wrap nicely to fit mobile widths.
- Font sizes and margins adjust without manual tweaks.
This means your marksheet can be viewed on smartphones, tablets, and desktops without compromising design integrity.
10. Styling and Fonts
The CSS styling focuses on simplicity, elegance, and readability. A few key techniques include:
- Using soft shadow and rounded corners for modern UI.
- Font family ‘Segoe UI’ for a clean, professional look.
- Color-coded grades to help assess performance at a glance.
- White backgrounds with light grays and blues to avoid overwhelming the viewer.
11. Enhancements You Can Add
Once your basic marksheet is done, consider these advanced improvements:
- Print or PDF Export: Use JavaScript libraries like
html2pdf.jsor browser print styles. - Database Integration: Pull student data dynamically from a database using PHP or Node.js.
- Admin Panel: Create an interface where faculty can generate marksheets for each student.
- QR Code Generation: Add QR codes that link to online verification portals.
- Auto-Grading System: Automatically calculate grades based on obtained marks.
Designing a marksheet with HTML and CSS is an excellent project for beginners and intermediate web developers. It teaches you how to think structurally, organize data visually, and enhance usability with design principles.
Such projects go beyond just styling—they prepare you to develop web-based report cards, admin dashboards, and other data-centric documents.
If you are a student, try experimenting with more subjects or interactive UI elements. If you are a teacher or developer for an educational institute, this design can serve as a solid base for integrating backend functionality.
What You’ll Learn From This Tutorial:
- Real-world application of HTML structure and CSS layout
- Use of Bootstrap for mobile responsiveness
- Visual design thinking (colors, spacing, typography)
- Creating tables and managing tabular data effectively
- Combining icons, colors, and flex layout for modern UI
This marksheet design is more than just an academic record—it’s a digital document designed to inspire confidence, clarity, and professionalism. Whether you’re building it as a developer portfolio piece or an institutional product, this project is a perfect blend of practical need and design innovation.
Happy coding!
