20 Students
IT Club Cohort
High school students trained hands-on in the school computer lab
01THE TEACHING SPRINT & NARRATIVE
From a Greenfield Proposal to 20 Live Websites
How pitching an outreach syllabus turned into a defining lesson in empathy, squad coordination, and demystifying code for raw beginners.
"Standing in front of a class as a trainer while still being a high school student myself carried a heavy sense of responsibility. But all the exhaustion and nervousness melted away during the final session. Watching the students' faces light up with relief and pride as they successfully built and displayed their very own personal websites was incredibly rewarding. Mastering a technical skill is great, but figuring out how to break down complex ideas so others can understand them brings a completely different level of fulfillment."
Chapter 01
The Greenfield Pitch & The Squad Pivot
In September 2025, through the 'IDN Mengajar' program, I had the opportunity to step into a teaching role at SMA Lazuardi GCS. The entire process started completely from scratch: we drafted the formal teaching proposal, outlined a progressive syllabus, and pitched it directly to the school administration. After a promising phone call, the administration invited us for an on-site survey at their computer laboratory and to officially sign the partnership agreement. Right then, we faced our first major hurdle: the school wanted their 20 IT club students to learn not just web development, but also networking and graphic design. Since my background is strictly in software engineering, I couldn't cover it all alone. To ensure the program's success, I quickly pulled in close friends from the networking and design majors to form a complete, well-rounded teaching squad.
Chapter 02
Beyond Copy-Paste: Deconstructing the Dark Screen
When it was time for my web development workshop, the classroom dynamic was fascinating. The students already had a decent eye for aesthetics and design, which made explaining visual layouts and UI balance much easier than I expected. The real struggle began during the coding phase. They had never stared at a dark Visual Studio Code screen before, and concepts like libraries, tags, or frameworks sounded like an alien language to them. I realized immediately that just having them copy and paste my code wouldn't help them learn anything. I had to slow down my pace, use everyday analogies, and break down the programming logic line by line until I saw it finally click in their heads.
Chapter 03
The Final Showcase & The Power of Simplicity
Standing in front of a class as a trainer while still being a high school student myself carried a heavy sense of responsibility. But all the exhaustion and nervousness melted away during the final session. Watching the students' faces light up with relief and pride as they successfully built, styled, and displayed their very own personal websites was incredibly rewarding. This teaching experience taught me an enduring lesson: mastering a technical skill is great, but figuring out how to break down complex ideas so others can understand them brings a completely different level of fulfillment.
02WORKSHOP CURRICULUM & PILLARS
Workshop Syllabus & Core Pillars
A structured 4-stage progression guiding raw beginners from basic web anatomy to independent website creation.
Module 01Structure
Semantic HTML & Page Anatomy
Understanding the skeleton of modern web pages, standard document structures (head, body, sections), and translating visual ideas into clean semantic tags.
- HTML5 Document Structure
- Headings & Paragraphs
- Hyperlinks & Media Embedding
- Lists & Container Tags
Module 02Styling
CSS Aesthetics & Layout Mechanics
Transforming raw unstyled markup into expressive, modern web pages using CSS selectors, box model principles, typography, and flexbox alignment.
- CSS Selectors & Cascade
- Box Model: Padding, Margin & Borders
- Color Palettes & Typography
- Flexbox for Clean Alignment
Module 03Developer Workflow
Demystifying VS Code & DevTools
Equipping students with a comfortable developer workflow in Visual Studio Code, live server preview extensions, and browser inspect element debugging.
- VS Code Shortcuts & Workspace
- Live Server Hot-Reload
- Browser Inspect Element
- Identifying & Fixing Syntax Bugs
Module 04Final Project
Personal Portfolio Showcase
Guiding each student through building and presenting an authentic personal bio website, combining their unique visual taste with the code they authored.
- Personal Brand Drafting
- Component Assembly
- Local Testing & Peer Review
- Live Projector Presentation
03PEDAGOGICAL RETROSPECTIVE
Pedagogical Insights & Retrospective
Core lessons on empathy, squad coordination, and the craft of explaining technology simply.
Simplicity Over Technical Jargon
Copy-paste teaching leaves beginners dependent and confused. Grounding abstract programming concepts in relatable, everyday analogies turns an intimidating dark screen into a canvas of creative confidence.
True Leadership is Knowing What to Delegate
When the school asked for networking and graphic design, trying to fake expertise would have hurt the students. Mobilizing peer specialists created a multidisciplinary squad that delivered a holistic learning experience.
Teaching Deepens Engineering Foundations
Explaining line-by-line why code behaves the way it does tested my foundational comprehension far more rigorously than writing code in isolation. You only truly master what you can explain simply.
04ON-SITE DOCUMENTATION & ARCHIVES
Classroom Sprints & On-Site Archives
Authentic photographic records documenting our on-site survey, computer lab training sessions, instructor squad collaboration, and the final student website showcase at SMA Lazuardi GCS.
Classroom Workshop
Interactive Lab Training & Code Deconstruction
Leading the interactive coding session in the computer lab, breaking down HTML tag hierarchy and CSS syntax line-by-line for the 20 IT club students.
1-on-1 Mentorship
Individual Debugging & Logic Walkthrough
Guiding a student directly at their workstation, explaining browser inspect tools and helping them diagnose layout alignment issues in Visual Studio Code.
Teaching Squad
Multidisciplinary Squad & Lab Coordination
Coordinating with fellow IDN student instructors across networking and graphic design majors during the on-site lab session to provide comprehensive IT support.
Student Showcase
Final Website Presentation & Student Accomplishment
Celebrating with students as they successfully presented their live personal profile websites to their peers, marking the triumphant conclusion of the workshop.