jCoder - Learn to Code Website

A modern, responsive educational frontend website designed to help beginners start their coding journey. Created by Gaurav Joshi, jCoder provides curated resources, tutorials, and pathways for learning programming and web development.

🌟 Features

🏠 Home Page

• Interactive Carousel: Showcases key learning areas with direct links to authentic resources
  • Technology News & Trends
  • Database Technologies (MySQL, Firebase, MongoDB)
  • Python & Data Science with AI/ML
• Learning Cards: Quick access to popular topics with trimmed, uniform content
  • Bootstrap Templates & Frontend Development
  • UI/UX Design with Figma
  • Python Programming with Real Python (enhanced content)
  • Database Connectivity Fundamentals
• Responsive Design: Fully optimized for desktop, tablet, and mobile devices

👤 About Page

• Personal story from the creator
• Comprehensive learning resource directory with curated external links:
  • Coursera - University-level courses
  • Udemy - Practical skill courses
  • Code With Mosh - Clear programming tutorials
  • Pluralsight - Professional development
  • freeCodeCamp - Free certification programs
  • The Odin Project - Full-stack development
  • Codecademy - Interactive learning
  • Exercism - Practice with mentorship
  • LeetCode - Algorithm challenges
  • MDN Web Docs - Web development reference
  • CS50 Harvard - Computer science fundamentals

📧 Contact Page

• Modern contact form with validation
• Custom styling with gradient backgrounds
• Accessible form design with proper labeling
• Multiple query categories and user type classification

🎨 Design Features

• Modern UI: Clean, professional design with custom gradients
• Fancy Branding: Gradient text effect for the jCoder logo using CSS gradients
• Card Alignment: CSS flexbox system for uniform blog card heights
• Accessibility: Skip links, proper ARIA labels, semantic HTML
• Bootstrap 5.3.3: Latest Bootstrap framework for responsive design
• Dynamic Footer: Auto-updating copyright year

📁 Project Structure

Learn to Code Website/
├── index.html              # Homepage with carousel and uniform blog cards
├── about.html              # About page with creator info and resources
├── contact.html            # Contact form page
├── img/                    # Image assets
│   ├── 1.jpg, 2.jpg, 3.jpg # Carousel images
│   ├── ab1.jpg, ab2.jpg, ab3.jpg # About page images
│   ├── b1.jpg, b2.jpg, b3.jpg, b4.jpg # Blog/card images
│   └── cont.jpg            # Contact page image
└── README.md              # Project documentation

🛠️ Technologies Used

• HTML5: Semantic markup with accessibility features and page-specific titles
• CSS3: Custom styling with CSS variables, gradients, and flexbox layouts
• Bootstrap 5.3.3: Responsive framework with utility classes for spacing
• JavaScript: Dynamic year updates and interactive components
• External CDN Images: High-quality images optimized for performance

🔧 Installation & Setup

1. Clone the repository

   git clone https://github.com/joshiGaurav-2712/Learn-to-Code-Website-jCoder-.git

2. Navigate to project directory

   cd "Learn to Code Website"

3. Open in browser

   • Simply open index.html in your preferred web browser
   • Or use a live server extension in VS Code for development

🌐 External Resources Featured

The website curates links to authentic, popular learning platforms:

• News & Community: Hacker News, GitHub Programming Topics
• Documentation: MDN Web Docs, Python.org, MongoDB, Firebase
• Learning Platforms: Kaggle Learn, Real Python, Figma Learn, SQLBolt
• Practice: LeetCode, Exercism, freeCodeCamp
• Courses: Coursera, Udemy, Pluralsight, CS50