Loading repository data…
shekhawatmuskan / repository
A curated collection of beginner-friendly HTML & CSS projects showcasing modern web development techniques including Flexbox, custom typography, responsive design, and interactive elements. Perfect for learning fundamental front-end skills!
An interactive birthday celebration website with animated GIF elements and modern styling.
https://github.com/user-attachments/assets/6adf5e75-c1fc-4bb3-81c4-efa3b0673391
• Flexbox Layouts
- flex-direction
- align-items
• Visual Effects
- Text shadows
- Background gradients
- Hover transitions
• Accessibility
- ARIA roles for images
A professional digital business card with clean layout and polished styling.
• Flexbox Mastery
- justify-content
- align-items centering
• Image Optimization
- Sizing & borders
- Padding & spacing
• CSS Fundamentals
- Margin/padding shorthand
- Utility classes
- CSS inheritance
- Web-safe fonts
A hometown showcase website integrating multiple HTML/CSS techniques.
• Comprehensive Integration
- Multiple CSS concepts
- Page layout & structure
• Design Principles
- Color schemes
- Typography choices
- Content organization
• Responsive Techniques
- Flexible layouts
- Mobile-first approach
A space-themed website featuring custom typography and advanced visual effects.
https://github.com/user-attachments/assets/7e52d837-b8c2-4242-bcc6-5ff5660025a8
• Custom Typography
- @font-face
- Google Fonts integration
• Advanced Styling
- Text shadows for readability
- Button styling
- ID selectors
• Page Structure
- Semantic HTML
- Terms & conditions layout
- Element centering
# All you need is a modern web browser!
- Chrome (recommended)
- Firefox
- Safari
1️⃣ Clone the repository
git clone https://github.com/shekhawatmuskan/HTML-CSS-PROJECTS.git
2️⃣ Navigate to a project
cd HTML-CSS-PROJECTS/Birthday-website
3️⃣ Open in your browser
# Simply open the index.html or project-specific HTML file
# Or use a live server extension in your code editor
VS Code Users: Install the "Live Server" extension for instant hot-reload!
Learning Path: Start with Business Card → Birthday Website → Hometown Homepage → Space Exploration
📦 HTML-CSS-PROJECTS
┃
┣ 📂 Birthday-website
┃ ┣ 📄 birthday-website.html
┃ ┣ 🎨 birthday-website.css
┃ ┗ 📁 images/
┃ ┣ 🎁 gift1.gif
┃ ┣ 🎁 gift2.gif
┃ ┗ 🎁 ...
┃
┣ 📂 Business-card
┃ ┣ 📄 business-card.html
┃ ┣ 🎨 business-card.css
┃ ┗ 📁 images/
┃ ┗ 🖼️ profile.jpg
┃
┣ 📂 Hometown-homepage
┃ ┗ 📁 images/
┃ ┣ 🏙️ city-view.jpg
┃ ┗ 🖼️ ...
┃
┣ 📂 Space-exploration
┃ ┣ 📄 index.html
┃ ┣ 📄 space.html
┃ ┣ 🎨 space.css
┃ ┣ 🎨 styles.css
┃ ┣ ⚙️ index.js
┃ ┗ 📁 images/
┃ ┣ 🚀 galaxy.webp
┃ ┣ 🪐 spacex.png
┃ ┗ 🌌 ...
┃
┗ 📋 README.md
Happy Coding! 💻✨
Selected from shared topics, language and repository description—not editorial ratings.
mcarbonell /
A curated collection of high-performance, modern website templates featuring 3D effects, stunning designs, and zero build steps. Production-ready HTML and React templates.
hallowshaw /
Explore a curated collection of mini web projects showcasing HTML, CSS, and JavaScript fundamentals. From animated coffee cups to vintage-inspired layouts, each project offers hands-on learning experiences in web development.