Student-Portal-figma-to-html-css

KO | EN

gitlite — search

#chatbot #php #graphql #javascript #deep-learning #artificial-intelligence #reactjs #database #awesome-list #large-language-models

Student-Portal-figma-to-html-css

(★ 10)

No description available.

File Explorer

ZIP Download

- albert-einstein0.png
- bell0.svg
- bill-gates0.png
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- image-30.png
- index.html
- IPhone1617ProMax16.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- spider-man0.png
- style.css
- sundar-pichai0.png
- svg0.svg
- svg1.svg
- svg10.svg
- svg11.svg
- svg12.svg
- svg14.svg
- svg16.svg
- svg18.svg
- svg2.svg
- svg20.svg
- svg21.svg
- svg22.svg
- svg23.svg
- svg24.svg
- svg3.svg
- svg4.svg
- svg5.svg
- svg6.svg
- svg7.svg
- svg8.svg
- svg9.svg
- vars.css
- vector0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- images-10.png
- index.html
- IPhone1617ProMax20.html
- style.css
- vars.css
- bell0.svg
- group0.svg
- group1.svg
- group2.svg
- group3.svg
- group4.svg
- group5.svg
- group6.svg
- group7.svg
- group8.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- index.html
- IPhone1617ProMax5.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- rectangle-170.svg
- rectangle-560.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- vector10.svg
- vector11.svg
- vector12.svg
- vector13.svg
- vector14.svg
- vector15.svg
- vector2.svg
- vector3.svg
- vector4.svg
- vector5.svg
- vector6.svg
- vector7.svg
- vector8.svg
- vector9.svg
- bell0.svg
- filter0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- image-10.png
- image-220.png
- image-230.png
- image-240.png
- image-250.png
- image-260.png
- image-300.png
- index.html
- IPhone1617ProMax11.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- rectangle-10.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- bell0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- image-30.png
- index.html
- IPhone1617ProMax6.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- mdi-file-text-outline0.svg
- streamline-pixel-interface-essential-call-center-contact-help0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- bell0.svg
- codicon-session-in-progress0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- index.html
- IPhone1617ProMax7.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- bell0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- image-110.png
- image-120.png
- image-170.png
- image-180.png
- image-190.png
- image-200.png
- image-210.png
- image-220.png
- index.html
- IPhone1617ProMax12.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- bell0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- index.html
- IPhone1617ProMax9.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- vector2.svg
- apple-music-icon0.svg
- background0.svg
- bg0.svg
- bg1.svg
- group-650.svg
- i-os-dark-icon0.svg
- i-os-dark-icon2.svg
- i-os-dark-icon3.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- image-10.png
- images-10.png
- index.html
- IPhone1617ProMax3.html
- style.css
- vars.css
- vector0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- image-10.png
- index.html
- IPhone1617ProMax2.html
- line-md-chevron-up0.svg
- style.css
- vars.css
- clarity-eye-hide-line0.svg
- group-22120.svg
- group0.svg
- group1.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- images-removebg-preview-4-10.png
- index.html
- IPhone1617ProMax1.html
- style.css
- vars.css
- vector0.svg
- bell0.svg
- container0.svg
- container10.svg
- container13.svg
- container16.svg
- container4.svg
- container7.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- index.html
- IPhone1617ProMax18.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- vector2.svg
- bell0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- index.html
- IPhone1617ProMax10.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- mdi-file-text-outline0.svg
- mdi-file-text-outline1.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- vector2.svg
- vector3.svg
- bell0.svg
- group0.svg
- group1.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- image-30.png
- index.html
- IPhone1617ProMax17.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- vector2.svg
- vector3.svg
- vector4.svg
- vector5.svg
- 1.png
- 10.png
- 11.png
- 12.png
- 13.png
- 14.png
- 15.png
- 17.png
- 18.png
- 19.png
- 2.png
- 3.png
- 4.png
- 5.png
- 6.png
- 7.png
- 8.png
- 9.png
- Project_ScreenShot.png
- bell0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- index.html
- IPhone1617ProMax14.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- bell0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- index.html
- IPhone1617ProMax8.html
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- bell0.svg
- group0.svg
- home-indicator0.svg
- icon0.svg
- icon1.svg
- icon2.svg
- icon3.svg
- index.html
- IPhone1617ProMax13.html
- line-140.svg
- material-symbols-light-assignment-outline0.svg
- material-symbols-light-home-outline0.svg
- style.css
- vars.css
- vector0.svg
- vector1.svg
- vector2.svg
- vector3.svg
- vector4.svg
Project video.mp4
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A modern **Student Portal UI** designed in **Figma** and exported to **HTML & CSS**. This project contains multiple responsive screens that demonstrate the complete user interface of a student management application.

---

## 📌 Project Overview

This project showcases the frontend design of a Student Portal application. It includes various screens such as login, attendance, notifications, profile, timetable, complaints, events, and more.

The main objective of this project was to convert a complete Figma design into HTML & CSS while maintaining a clean, responsive, and user-friendly interface.

---

## ✨ Features

- 🎨 Modern UI Design
- 📱 Responsive Layout
- 📄 Multiple Screens
- 💻 HTML & CSS Implementation
- 📚 Well Organized Project Structure
- ⚡ Lightweight & Fast

---

## 🛠️ Tech Stack

- HTML5
- CSS3
- Figma

---

## 📂 Project Structure

```
Student-Portal-UI/
│
├── app home ui/
├── app open/
├── attendance/
├── calender/
├── complaints/
├── current issue/
├── events/
├── helpline/
├── home screen/
├── Lock screen/
├── login/
├── notifications/
├── previous issues/
├── profile/
├── resolutions/
├── resolution2/
├── timetable/
│
├── Project ScreenShots/
│   ├── 1.png
│   ├── 2.png
│   ├── ...
│   └── 18.png
│
├── Project video.mp4
└── README.md
```

---

## 📸 Project Screenshots

All screenshots are available inside the **Project ScreenShots** folder.

| Screen | Preview |
|---------|---------|
| Login | `Project ScreenShots/1.png` |
| Home | `Project ScreenShots/2.png` |
| Attendance | `Project ScreenShots/3.png` |
| Timetable | `Project ScreenShots/4.png` |
| Notifications | `Project ScreenShots/5.png` |
| Profile | `Project ScreenShots/6.png` |
| Complaints | `Project ScreenShots/7.png` |
| Events | `Project ScreenShots/8.png` |
| And More... | Screens **9 - 18** |

---

## Design Link:

https://www.figma.com/design/ToZjAzHkTK8ysRrZzHX3VR/main--Copy-?m=auto&t=4TdPeHQTfiFuxAY3-1

---

## 🎥 Project Demonstration

A complete project walkthrough is available in:

```
Project video.mp4
```

---

## 🚀 Getting Started

1. Clone the repository

```bash
git clone https://github.com/Devanshu-Saini-07/Student-Portal-figma-to-html-css.git
```

2. Open the project folder.

3. Open the required screen folder.

4. Launch the HTML file inside your browser.

---

## 🎯 Purpose

- Convert Figma Design into HTML & CSS
- Practice Frontend Development
- Improve UI Implementation Skills
- Build a Portfolio Project

---

## 📌 Future Improvements

- JavaScript Functionality
- Backend Integration
- Authentication
- Database Connectivity
- Dark Mode
- Responsive Improvements

---

## 👨‍💻 Author

### Devanshu Saini

**GitHub:** https://github.com/Devanshu-Saini-07

---

## ⭐ Support

If you like this project, consider giving it a ⭐ on GitHub.

Student-Portal-figma-to-html-css

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Student-Portal-figma-to-html-css

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README