WinterARC 🎯

A two-month online tech adventure by GDGC MBCET, packed with coding, AI, and problem-solving challenges that'll push your creativity and skills to the next level!

🌟 About

WinterARC is an interactive web development learning platform designed to guide beginners through the fundamentals of HTML, CSS, and modern web design. This project serves as both an educational resource and a practical demonstration of front-end development best practices.

✨ Features

• Interactive Learning Sections: Comprehensive guides on HTML, CSS, Flexbox, and Grid
• Task-Based Learning: Hands-on tasks including quizzes, personal webpage building, and CSS modules
• Modern UI/UX: Beautiful, responsive design with smooth animations powered by AOS (Animate On Scroll)
• Smooth Navigation: React Scroll integration for seamless page navigation
• Responsive Design: Mobile-first approach ensuring great experience across all devices
• Material-UI Components: Professional UI components with custom theming

🛠️ Tech Stack

Core

• React 19 - Modern UI library
• Vite - Lightning-fast build tool
• React Router - Client-side routing

UI & Styling

• Material-UI (MUI) - Component library
• Tailwind CSS - Utility-first CSS framework
• Emotion - CSS-in-JS styling
• AOS - Animate On Scroll library

Additional Libraries

• React Scroll - Smooth scrolling navigation
• React Snowfall - Winter-themed animations
• React Responsive - Responsive design utilities
• Flowbite React - Additional UI components

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/Flash500x/WinterARC.git
cd WinterARC

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

📦 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📚 Learning Path

The platform covers:

1. Web Development Fundamentals

   • Front-end vs Back-end
   • HTML, CSS, and JavaScript basics
   • Semantic HTML and accessibility

2. Modern CSS

   • Flexbox layouts
   • CSS Grid systems
   • Responsive design with media queries
   • Modern styling techniques

3. Developer Tools

   • Command Line basics
   • Git & GitHub
   • VS Code and extensions
   • Browser DevTools

4. Hands-on Tasks

   • HTML & CSS Fundamentals Quiz
   • Build an "About Me" webpage
   • CSS Learning Module
   • Expanded Personal Showcase Webpage

🎨 Project Structure

WinterARC/
├── public/          # Static assets
├── src/
│   ├── components/  # Reusable React components
│   ├── pages/       # Page components
│   ├── assets/      # Images, fonts, etc.
│   ├── App.jsx      # Main application component
│   ├── main.jsx     # Application entry point
│   └── index.css    # Global styles
├── package.json
└── vite.config.js

🤝 Contributing

This project is maintained by GDGC MBCET. For contributions or suggestions, please reach out to the team.

📧 Contact

• Email: gdgcmbcet@gmail.com
• Instagram: @gdgcmbcet
• LinkedIn: GDGC MBCET

📄 License

© 2025 GDGC-MBCET. All Rights Reserved.

🌐 Community

Join our community: GDG on Campus - MBCET

---

Built with ❤️ by Google Developer Groups on Campus - MBCET