Bakoding - Web Development Learning Platform

A clean, modern, and responsive website for learning web development. Originally created as a Submission for Dicoding's "Belajar Dasar Pemrograman Web" course in 2021, this project has been completely revamped in 2025 from a basic HTML/CSS/jQuery site to a professional, performance-optimized learning platform with clean architecture.

Live Demo

Current (Revamped 2025): https://bakoding.vercel.app/

Key Features

• Clean, Modern Design - Minimalist aesthetic with professional color scheme
• Fully Responsive - Optimized for desktop, tablet, and mobile devices
• Performance Optimized - Vanilla JavaScript (removed jQuery dependency)
• Consistent Architecture - Clean CSS architecture with semantic naming
• Interactive Learning Paths - Frontend and Backend developer roadmaps
• 8 Essential Learning Tips - Organized in clean card grid layout
• External Resources - Curated links to quality learning materials
• Uniform Visual Sizing - All sections have consistent appearance

Target Audience

Indonesian programming beginners looking for structured learning paths in web development.

Technologies Used

• HTML5 - Semantic markup with consistent structure
• CSS3 - Modern CSS with custom properties, Grid, and Flexbox
• Vanilla JavaScript - No framework dependencies
• SVG Icons - Custom contextual icons for each tip
• Responsive Design - Mobile-first approach

Design System

• Colors: Professional blue palette (#2563eb, #1d4ed8)
• Typography: Inter font family with proper hierarchy
• Layout: CSS Grid for card layouts, Flexbox for components
• Spacing: Consistent spacing scale using CSS custom properties
• Interactions: Subtle hover effects and smooth transitions

Complete Rebuild (2025)

This project underwent a complete architectural rebuild to solve structural inconsistencies and visual sizing issues.

Major Improvements Made:

Clean CSS Architecture

• Before: Inconsistent class naming (.card, .cardInfo, .tipCard, .cardinfoContainer)
• After: Semantic, consistent naming (.section, .resource-card, .tip-card, .resource-grid)
• Result: Maintainable, scalable CSS with clear hierarchy

Uniform Visual Sizing

• Before: Frontend/Backend sections appeared smaller than Main Intro/Tips
• After: All sections have identical visual weight and spacing
• Solution: Consistent .section wrapper with uniform padding (2rem → 2.5rem → 3rem)

Structural Consistency

<!-- Consistent Structure Across All Sections -->
<div class="container">
  <section class="section">
    <h1 class="section-title">...</h1>
    <img class="featured-image">
    <p class="content-text">...</p>
    <div class="resource-grid">...</div> <!-- Only for Frontend/Backend -->
  </section>
</div>

Performance & Code Quality

• Removed jQuery dependency (reduced bundle size)
• Implemented vanilla JavaScript for smooth scrolling
• Optimized images with lazy loading
• Clean, semantic HTML structure
• Removed all dead code and unused CSS

User Experience

• Tips & Tricks: Clean card grid (8 tips) with contextual SVG icons
• Better Navigation: Streamlined 2-item navigation menu
• Content Flow: Added "Jalur Belajar Web Development" bridge section
• Responsive Grid: Perfect layouts across all devices (4-2-1 pattern)

Visual Design

• Modern Color Palette: Professional blue gradient theme
• Clean Typography: Inter font with proper hierarchy
• Contextual Icons: Custom SVG icons for each learning tip
• Minimal Aesthetic: Removed visual clutter and noise
• Consistent Branding: Unified "Web Development" terminology

Project Structure

bakoding-revamp/
├── index.html              # Main HTML file
├── css/
│   └── index.css          # Main stylesheet with clean architecture
├── js/
│   └── index.js           # Vanilla JavaScript functionality
├── icons/                 # Custom SVG icons for tips
│   ├── patience.svg
│   ├── target.svg
│   ├── book.svg
│   ├── steps.svg
│   ├── schedule.svg
│   ├── community.svg
│   ├── write.svg
│   └── practice.svg
├── image/                 # Images and assets
│   ├── developer.jpg      # Main intro image
│   ├── front-end-pic.jpg  # Frontend section image
│   ├── back-end-pic.jpg   # Backend section image
│   └── push-button.png    # Resource card button icon
├── favicon.svg            # Site favicon
└── README.md              # This file

Getting Started

1. Clone the repository

   git clone https://github.com/yourusername/bakoding-revamp.git
   cd bakoding-revamp

2. Open in browser

   # Simply open index.html in your browser
   # Or use a local server like Live Server in VS Code

Learning Paths Covered

Frontend Development

• Roadmap guidance - roadmap.sh/frontend
• Dicoding courses - Structured learning with certification
• SKO.DEV resources - Free coding tutorials in Indonesian
• MDN documentation - Comprehensive web development docs

Backend Development

• Server-side roadmap - roadmap.sh/backend
• Industry-standard resources - Professional development platforms
• Documentation and tutorials - Comprehensive learning materials

Essential Learning Tips

1. Patience - Take time to understand concepts deeply
2. Clear Goals - Set specific, achievable learning objectives
3. Fundamentals First - Master the basics before advanced topics
4. Small Targets - Break down learning into manageable steps
5. Consistent Schedule - Establish regular practice routine
6. Community - Join learning groups and seek peer support
7. Documentation - Write and share your knowledge
8. Daily Practice - Code consistently every day, even 30 minutes

File Cleanup

Files to Keep (Production Ready)

index.html               # Main HTML
css/index.css           # Main stylesheet with clean architecture  
js/index.js             # JavaScript functionality
favicon.svg             # Site favicon
icons/*.svg (8 files)   # Custom tip icons
image/developer.jpg     # Main image
image/front-end-pic.jpg # Frontend image
image/back-end-pic.jpg  # Backend image
image/push-button.png   # Button icon
README.md               # Documentation

UI Comparison Screenshots (2021 Original Version)

Figure 1: Original 2021 main intro section with basic styling

Figure 2: Original 2021 frontend section with inconsistent sizing

Figure 3: Original 2021 backend section showing layout inconsistencies

Figure 4: Original 2021 tips section with accordion-style layout

Design Principles Applied

1. Semantic HTML - Meaningful tags and structure
2. Mobile-First CSS - Progressive enhancement approach
3. Component-Based Design - Reusable, consistent components
4. Performance Optimization - Minimal dependencies, optimized assets
5. Accessibility - Proper focus states, semantic markup, alt texts
6. Maintainability - Clean code, consistent naming conventions

Technical Highlights

• CSS Custom Properties for consistent theming
• CSS Grid & Flexbox for modern layouts
• Responsive Images with proper sizing and lazy loading
• Smooth Scrolling with vanilla JavaScript
• Mobile Navigation with hamburger menu
• Touch-Friendly Interactions for mobile devices
• Progressive Enhancement for all screen sizes

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Acknowledgments

• Original submission (2021) for Dicoding's "Belajar Dasar Pemrograman Web" course
• Complete architectural rebuild (2025) with modern web development practices
• Custom SVG icons designed for contextual learning guidance
• Clean CSS architecture following industry best practices
• Inspired by current web standards and accessibility guidelines

UI Comparison: 2021 vs 2025

Visual Documentation

The screenshots in image/Screenshot (3126-3129).png provide visual documentation of the transformation:

• Original 2021 Design: Basic layout with jQuery dependencies and inconsistent styling
• Revamped 2025 Design: Modern, clean interface with consistent visual hierarchy

Before (2021 Version)

• Basic HTML/CSS structure with jQuery
• Inconsistent section sizing and styling
• Mixed class naming conventions
• Limited responsive design
• Basic color scheme and typography

After (2025 Rebuild)

• Modern CSS architecture with custom properties
• Uniform section sizing and consistent visual weight
• Semantic naming conventions throughout
• Mobile-first responsive design
• Professional color palette and typography
• Performance optimizations and vanilla JavaScript

Before vs After Metrics

Key Metrics Improved

• CSS Lines: Reduced from 1065+ lines to clean, organized architecture
• File Structure: Simplified from complex nesting to semantic structure
• Visual Consistency: All sections now have uniform appearance
• Maintainability: Clean, semantic naming conventions throughout
• Performance: Removed jQuery dependency, optimized assets
• User Experience: Consistent interactions across all screen sizes

The 2025 rebuild successfully transformed a basic 2021 project into a modern, professional web development learning platform with clean architecture and consistent user experience.