Learn Web Development the Fun Way 🎨
CodeLearn is a fully responsive, interactive educational website designed to help university students learn HTML, CSS, and JavaScript through hands-on practice and engaging content.
- HTML Course: 8 interactive lessons covering tags, elements, forms, and semantic HTML
- CSS Course: 10 lessons on styling, layouts, flexbox, grid, and responsive design
- JavaScript Course: 12 lessons including DOM manipulation, events, and a to-do app project
- Live Code Editor: Write and run code instantly with real-time output
- Progress Tracking: Monitor completion status with localStorage persistence
- Interactive Quizzes: Test knowledge with 10 questions per technology
- Instant Feedback: Get immediate results and explanations
- Fully Responsive: Works perfectly on desktop, tablet, and mobile
- Beautiful UI: Modern gradient design with smooth animations
- Accessible: Keyboard navigation and screen reader friendly
- Fast Loading: Optimized CSS and JavaScript for performance
- Beginner-Friendly: No prior experience required
- Structured Learning: Carefully designed curriculum progression
- Self-Paced: Learn at your own speed with saved progress
- Free Access: Complete education platform at no cost
- HTML5: Semantic markup and modern web standards
- CSS3: Flexbox, Grid, animations, and responsive design
- Vanilla JavaScript: No frameworks - pure JavaScript functionality
- LocalStorage: Client-side progress and quiz score persistence
- Google Fonts: Poppins font family for modern typography
codelearn/
├── index.html # Homepage with hero and features
├── about.html # About page with mission and story
├── courses.html # Course selection with progress display
├── quiz.html # Interactive quiz system
├── html-course.html # HTML course with lessons
├── css-course.html # CSS course with lessons
├── js-course.html # JavaScript course with lessons
├── css/
│ └── style.css # Complete responsive stylesheet
├── js/
│ ├── main.js # Core functionality and navigation
│ ├── quiz.js # Quiz system and scoring
│ └── editor.js # Code editor and course management
└── assets/
└── README.md # Assets documentation
- Clone or download the project files
- Open
index.htmlin any modern web browser - Start learning - no setup or installation required!
# Clone the repository
git clone [repository-url]
# Navigate to project directory
cd codelearn
# Open in browser (or use a local server)
open index.html
# For local server (optional)
python -m http.server 8000
# or
npx serve .- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- Start with Courses: Visit the courses page to see available topics
- Follow the Path: Begin with HTML, then CSS, then JavaScript
- Practice Coding: Use the interactive editor in each lesson
- Track Progress: Your completion status is automatically saved
- Take Quizzes: Test your knowledge and earn scores
- Learn at Your Pace: No time limits or pressure
- Assign Courses: Direct students to specific course pages
- Monitor Progress: Students can share their completion percentages
- Supplement Teaching: Use as homework or practice material
- Customize Content: Modify lessons to fit your curriculum
- Primary: #4f46e5 (Indigo)
- Accent: #9333ea (Purple)
- Background: #f8fafc (Light Gray)
- Text: #111827 (Dark Gray)
- Success: #10b981 (Green)
- Error: #ef4444 (Red)
- Font Family: Poppins (Google Fonts)
- Headings: 700 weight for impact
- Body: 400-500 weight for readability
- Code: Courier New monospace
- Mobile: 480px and below
- Tablet: 768px and below
- Desktop: 1024px and above
- Update Course Data: Add lesson objects to the course JavaScript
- Create Content: Write lesson HTML and example code
- Update Sidebar: Add lesson items to the navigation
- Test Functionality: Ensure progress tracking works
- CSS Variables: Update colors in
:rootselector - Responsive Design: Modify media queries as needed
- Animations: Adjust transition timings and effects
- Layout: Customize grid and flexbox properties
- Update Quiz Data: Add questions to
quizDataobject - Set Correct Answers: Specify the correct option index
- Test Questions: Verify answer validation works
- Update Scoring: Adjust scoring logic if needed
After completing CodeLearn courses, students will be able to:
- ✅ Create semantic HTML documents
- ✅ Use forms and input elements effectively
- ✅ Implement proper document structure
- ✅ Apply accessibility best practices
- ✅ Style web pages with colors and typography
- ✅ Create responsive layouts with Flexbox and Grid
- ✅ Add animations and transitions
- ✅ Implement mobile-first design
- ✅ Write functions and handle events
- ✅ Manipulate the DOM dynamically
- ✅ Store data with localStorage
- ✅ Build interactive web applications
We welcome contributions to improve CodeLearn:
- Report Bugs: Submit issues for any problems found
- Suggest Features: Propose new functionality or improvements
- Add Content: Create new lessons or quiz questions
- Improve Design: Enhance UI/UX and accessibility
- Fix Code: Submit pull requests for bug fixes
- Code Style: Follow existing formatting and naming conventions
- Testing: Test all changes across different browsers and devices
- Documentation: Update README and comments for new features
- Accessibility: Ensure all changes maintain accessibility standards
This project is open source and available under the MIT License.
- Google Fonts for the beautiful Poppins typography
- CSS Grid and Flexbox for modern layout capabilities
- LocalStorage API for client-side data persistence
- University students worldwide who inspired this project
For questions, suggestions, or support:
- Issues: Use GitHub issues for bug reports
- Discussions: Join community discussions for questions
- Email: Contact the development team
- Documentation: Check this README and code comments
Made with ❤️ for students learning web development
CodeLearn - Your first step into frontend development 🚀