🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3: Flexbox, Grid, Animations, Custom Properties
• JavaScript: ES6+, DOM Manipulation, Event Handling
• Frameworks: Bulma CSS
• Deployment: Netlify

📁 Project Structure

Each project follows a simple structure:

project-name/
├── index.html          # Main HTML file
├── css/
│   └── style.css      # Styles
├── js/
│   └── main.js        # JavaScript logic
└── assets/            # Images, fonts, etc.

🏁 Getting Started

Prerequisites

• A modern web browser
• Code editor (optional)
• Basic knowledge of HTML, CSS, JavaScript

Running Projects Locally

# Clone the repository
git clone https://github.com/theakshaymore/Frontend-Mentor.git

# Navigate to any project directory
cd Frontend-Mentor/project-name

# Open index.html in your browser
# Or use a local server (e.g., Live Server in VS Code)

Using Live Server (Recommended)

1. Install the Live Server extension in VS Code
2. Right-click on index.html
3. Select "Open with Live Server"

💡 Key Features

Responsive Design

All projects are built with mobile-first approach and work seamlessly across devices.

Modern CSS Techniques

• CSS Grid and Flexbox for layouts
• CSS Custom Properties for theming
• CSS Animations and Transitions
• Neumorphism and glassmorphism effects

JavaScript Interactions

• DOM manipulation
• Event handling
• LocalStorage for data persistence
• Form validation
• Dynamic content rendering

Performance Optimized

• Minimal dependencies
• Optimized assets
• Efficient CSS and JavaScript
• Fast loading times

📚 Learning Resources

These projects explore various frontend concepts:

CSS

• Layout systems (Flexbox, Grid)
• Animation and transitions
• Responsive design patterns
• Modern design trends

JavaScript

• DOM manipulation

• Event listeners

• ES6+ features

• State management

• Browser APIs (LocalStorage, etc.)

• Design

• UI/UX principles

• Color theory

• Typography

• Spacing and layout

🎨 Design Patterns Explored

• Neumorphism: Soft UI design trend
• Glassmorphism: Frosted glass effects
• Dark Mode: Theme switching patterns
• Micro-interactions: Subtle animations
• Card Layouts: Modern content organization
• Hero Section: Landing page patterns