A curated collection of web development projects to practice HTML, CSS, and more. Starting with small components like the QR Code Card, this repo will grow with larger projects as I advance in front-end development.
This repository is my front-end learning portfolio, with all projects organized under the project/ subfolder (e.g., 1-qr-code-card). It showcases my progress from simple, responsive designs to future complex web applications.
Here are some of the frontend challenges I've completed:
| # | Project Title | Path |
|---|---|---|
| 🔹 1 | QR Code Card | 01-qr-code-card/ |
| 🔹 2 | Card Project | 02-card-project/ |
| 🔹 3 | YouTube Header Clone | 03-youtube-header/ |
| 🔹 4 | Column Preview Card Component | 04-column-preview-card-component/ |
| 🔹 5 | CSS Grid Testimonial Section | 05-css-grid-testimonial-section/ |
| 🔹 6 | E-Commerce Product Card | 06-e-commerce-card/ |
| 🔹 7 | Custom Search Bar | 07-custom-search-bar/ |
| 🔹 8 | Profile Card with Share Button | 08-profile-card-with-share-functionality/ |
| 🔹 9 | Tooltips in CSS | 09-tooltips/ |
| 🔹 10 | Custom Dropdown Menu | 10-custom-dropwon/ |
| 🔹 11 | Responsive-navigation-barar | 11-responsive-navigation-barar/ |
| 🔹 12 | Grid-card | 12-grid-card/ |
More projects coming soon...
- Clone:
git clone https://github.com/sudhanshuverse/frontend-projects.git
- Navigate: cd frontend-projects/project/1-qr-code-card
- View: Open index.html in a browser.
frontend-projects/
├───
│ ├── 1-qr-code-card/
│ │ ├── index.html # Main HTML file for the QR code component
│ │ ├── style.css # Stylesheet for QR code card styling
│ │ ├── image.png # QR code image used in the project
│ │ ├── screenshot.png # Screenshot preview of the project
├── README.md # Overview of the repository and projects
- Add more projects to project/ (e.g., 2-product-card).
- Include larger projects in a future advanced-projects/ folder.
- Host live demos via GitHub Pages.
Feedback welcome! Connect with me:
- GitHub: sudhanshuverse
Thanks for exploring my projects! 🚀