This repository is a curated collection of web development projects that showcase my evolution as a developer. From foundational HTML & CSS to interactive JavaScript applications, each project represents a milestone in my journey toward full-stack mastery.
Building the web, one project at a time
| Project | Description | Skills Demonstrated |
|---|---|---|
| Accordian Project | Interactive, collapsible FAQ display with smooth animations and responsibe design | Dark Theme, Icon Rotation, Tailwind CSS |
| Restricted Text Area | A sleek, interactive text input with real-time validation | Character Limit, Visual Feedback, Real-time Validation |
| Cookie Consent | A responsive cookie consent popup with preference storage | Cookies API, Animations, User Preferences |
| Tabs Component | A lightweight, customizable tabs interface with a clean design | Vanilla JS, CSS Transitions, DOM Manipulation |
| Tooltip UI | A sleek implementation of tooltips with smooth transitions | CSS Animations, Responsive Design |
| GitHub Profile Viewer | A tool to visualize GitHub profile statistics | API Integration, Async JavaScript |
- Description: An elegant, interactive FAQ accordion component.
- Key Features:
- ✨ Sleek Dark Theme (Black background with white text)
- 🚀 Smooth open/close animations
- 🔄 Icon rotation to indicate state (chevron icons)
- 📱 Fully responsive design for all devices
- 🎨 Font Awesome icons for scalable vectors
- Technologies: HTML5, Tailwind CSS (CDN), Vanilla JavaScript, Font Awesome 5
- Inspiration: Accordian Project on roadmap.sh
- Preview:
- Implementation: Simple JavaScript toggles content visibility and icon state.
- How to Use: Open
index.htmlin a modern browser.# Clone the repository git clone [https://github.com/TheRealSaiTama/SimpleHTML.git](https://github.com/TheRealSaiTama/SimpleHTML.git) # Navigate to the project directory cd SimpleHTML/AccordianProject # Open index.html in your browser open index.html
- License: MIT License
- Author: @TheRealSaiTama
- Description: A sleek, interactive text area component with character count restriction.
- Key Features:
- ⚡ Real-time character countdown
- 🎨 Visual feedback with color changes
- 🛑 Character limit enforcement (200 characters)
- ✨ Clean, modern design with elegant transitions
- 📱 Responsive layout that works on all devices
- 🔄 Instant border color changes based on input length
- Technologies: Pure HTML5, CSS3, and Vanilla JavaScript
- Inspiration: Restricted Text Area Project on roadmap.sh
- How to Use: Navigate to the
RestrictedTextAreadirectory and openindex.html. - Learn More: Restricted Text Area README
|
|
- Description: An elegant cookie consent popup with user preference storage.
- Key Features:
- 🚀 Lightweight and responsive design
- 🎨 Smooth animations and transitions
- 🔒 Cookie storage for user preferences
- 🔄 Remembers user choice for 30 days
- 📱 Mobile-friendly interface
- 🎭 Font Awesome icons integration
- Inspiration: Cookie Consent Project on roadmap.sh
- How to Use: Navigate to the
CookieConsentdirectory and openindex.html. - Learn More: Cookie Consent README
- Description: A lightweight, customizable tabs interface built with vanilla JavaScript.
- Key Features:
- ✨ Clean, minimalist design
- 🚀 Vanilla JavaScript - no dependencies
- 📱 Responsive and mobile-friendly
- 🎨 Easily customizable
- ⚡ Lightweight and fast
- Inspiration: Simple Tabs Project on roadmap.sh
- How to Use: Navigate to the
Tabsdirectory and openindex.html. - Learn More: Tabs README
- Description: A sleek implementation of tooltips using pure HTML and CSS.
- Key Features:
- Responsive design that adapts to different screen sizes
- Smooth transitions with fade-in and fade-out effects
- Customizable styling to match project aesthetics
- Inspiration: Tooltip UI Project on roadmap.sh
- How to Use: Navigate to the
TooltipUIdirectory and openindex.html. - Learn More: Tooltip UI README
- Description: A responsive image grid implementation using CSS Grid Layout.
- Key Features: Responsive design, customizable layout, stylish UI.
- Inspiration: Image Grid Project on roadmap.sh
- How to Use: Navigate to the
ImageGridLayoutdirectory and openindex.html. - Learn More: ImageGridLayout README
- Description: An interactive carousel to showcase multiple images.
- Key Features: Smooth navigation, responsive design, customizable images.
- How to Use: Navigate to the
ImageSliderdirectory and openindex.html. - Learn More: ImageSlider README
- Description: A visual tool for exploring GitHub profiles.
- Key Features: Fetches and displays user data including avatar, followers, following, and repos.
- How to Use: Navigate to the
GitHubProfileViewerdirectory and openindex.html. - Learn More: GitHubProfileViewer README
- Description: An intuitive application for personal finance management.
- Key Features: Add, categorize, and analyze expenses in a clean tabular format.
- How to Use: Navigate to the
ExpenseTrackerdirectory and openindex.html. - Learn More: ExpenseTracker README
- Description: A demonstration of local storage functionality in web applications.
- Key Features: Save and retrieve text data through browser sessions.
- How to Use: Navigate to the
DataRetrievaldirectory and openindex.html. - Learn More: DataRetrieval README
- Description: A real-time countdown timer with a sleek interface.
- Key Features: Displays days, hours, minutes, and seconds; customizable target date.
- How to Use: Navigate to the
CountDowndirectory and openindex.html. - Learn More: CountDown README
- Description: A responsive calculator with a modern design.
- Key Features: Arithmetic operations, percentage calculations, clear functions.
- How to Use: Navigate to the
CalculatorAppdirectory and openindex.html. - Learn More: CalculatorApp README
- Description: Client-side form validation ensuring data integrity.
- Key Features: Username, email, and password validation with real-time feedback.
- How to Use: Navigate to the
FormValidationdirectory and openindex.html. - Learn More: FormValidation README
- Description: A professional website template for web agencies.
- Key Features: Modern design, services section, portfolio showcase.
- How to Use: Navigate to the
WebBrandingProjectdirectory and openindex.html. - Learn More: WebBrandingProject README
- Description: A demonstration of accessible form design principles.
- Key Features: Semantic HTML, proper labeling, ARIA attributes, password visibility toggle.
- Inspiration: Accessible Forms UI Project on roadmap.sh
- How to Use: Navigate to the
AccessibleFormsUIdirectory and openindex.html. - Learn More: AccessibleFormsUI README
- Description: A customizable date selection interface.
- Key Features: Intuitive calendar navigation, responsive design.
- Inspiration: DatePicker UI Project on roadmap.sh
- How to Use: Navigate to the
DatePicker-UIdirectory and openindex.html. - Learn More: DatePicker-UI README
- Description: A collection of visually appealing testimonial designs.
- Key Features: Multiple layout variations, responsive styling.
- How to Use: Navigate to the
TestimonialsCardsdirectory and openindex.html. - Learn More: TestimonialsCards README
- Description: A modern interface for displaying random user profiles.
- Key Features: API integration, neumorphic design, dynamic content updates.
- How to Use: Navigate to the
RandomUserdirectory and openindex.html. - Learn More: RandomUser README
- Description: An educational tool demonstrating JavaScript event handling.
- Key Features: Keypress logging, session controls, event display.
- How to Use: Navigate to the
Keyloggerdirectory and openindex.html. - Learn More: Keylogger README
- Description: A chronological record of project updates and improvements.
- Key Features: Timeline layout, detailed entries, easy navigation.
- Inspiration: Changelog Project on roadmap.sh
- How to Use: Navigate to the
Changelogdirectory and openindex.html. - Learn More: Changelog README
- Description: A showcase of professional skills and accomplishments.
- Key Features: Responsive design, custom typography, portfolio sections.
- Inspiration: Portfolio Website Project on roadmap.sh
- How to Use: Navigate to the
PersonalPortfoliodirectory and openindex.html. - Learn More: PersonalPortfolio README
- Description: A foundational multi-page website demonstrating HTML structure.
- Key Features: Navigation system, content organization, page linking.
- How to Use: Navigate to the
BasicHTMLWebSitedirectory and openindex.html. - Learn More: BasicHTMLWebSite README
- Description: A minimalist resume template focused on readability.
- Key Features: Clean layout, professional formatting, print-friendly design.
- Inspiration: Single Page CV Project on roadmap.sh
- How to Use: Navigate to the
OnePageCVdirectory and openindex.html. - Learn More: OnePageCV README
# Clone the repository
git clone https://github.com/TheRealSaiTama/SimpleHTML.git
# Navigate to the project directory
cd SimpleHTML
# Choose any project folder
cd RestrictedTextArea
# Open in your browser
open index.html # or double-click the file in your file explorerSimpleHTML Project Timeline
│
├─ Q1 2023: Basic HTML & CSS Projects (Projects 1-3)
│
├─ Q2 2023: JavaScript Fundamentals (Projects 4-7)
│
├─ Q3 2023: UI Components & Accessibility (Projects 8-10)
│
├─ Q4 2023: Interactive Applications (Projects 11-15)
│
├─ Q1 2024: Advanced UI & API Integration (Projects 16-19)
│
├─ Q2 2024: Component Development (Projects 20-21)
│ └─ Tabs Component & Cookie Consent
│
├─ Q3 2024: Interactive UI Elements (Project 22)
│ └─ Restricted Text Area
- Backend Integration: Adding server-side functionality with Node.js and Express
- Database Projects: Implementing MongoDB and SQL database connections
- React Components: Rebuilding select projects using React
- Authentication Systems: Creating secure login and registration flows
- Mobile-First Applications: Developing PWAs for cross-platform compatibility
I welcome contributions to improve these projects! Here's how you can help:
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
Thank you for exploring my web development journey! 🙏
Connect with me on GitHub for more exciting projects.
Links: