ITKia
中
HomeSubjectsChaptersPlaygroundForumAbout中

INTERACTIVE FRONTEND LEARNING

From zero, learn
frontend interactively.

Write as you learn and see results instantly.

Start your first exerciseView learning path

VALUE

ITKia is an interactive frontend learning platform

Connecting lessons, practice, preview and feedback to help you truly understand and write code.

  1. 01

    Understand

    Key examples and instant quizzes to confirm understanding

  2. 02

    Write

    Follow-along exercises with live preview

  3. 03

    Complete

    Finish challenges and get continuous feedback

WHY ITKia

Why choose ITKia?

Learning that is more efficient, fun and rewarding

Progress tracking

Progress saved automatically

A visual learning path shows every step of your growth.

Learning data synced

Live code sandbox

Write and preview instantly

A real coding environment: edit and preview instantly.

Instant rendering

Gamified learning

Small tasks drive continuous feedback

Quests, achievements and badges keep you motivated.

Achievement unlocked

Bilingual learning

Switch freely between Chinese and English

Bilingual content with a free language switch for barrier-free learning.

Language preference saved

OLD vs NEW

Traditional vs Interactive learning

An evolution in learning: more efficient, more fun, more rewarding

OLD WAY

Traditional learning

  1. Watch a tutorial
  2. Open your editor
  3. Keep switching
  • Tutorial and coding are separate
  • You must install and set up your own environment
  • Constant switching between video, web and editor

ITKia WAY

Interactive learning

  1. Read tutorial
  2. Code side by side
  3. Live preview
  • Tutorial + online coding on one screen
  • No install: code right in your browser
  • Live preview, progress saved automatically

CORE TECHNOLOGIES

Core technologies

Modern technology builds a real learning environment that is stable and reliable.

  • Astro

    Static multi-page app

    Built as a static MPA with Astro for blazing-fast loading.

  • React

    Islands architecture

    Islands architecture activates components on demand for better interactivity.

  • Supabase

    Relational database

    A powerful backend database and storage service: secure, reliable, scalable.

  • Monaco

    Code editor

    Built-in Monaco editor for a professional coding experience.

  • i18n

    Multilingual

    Built-in multilingual support with free Chinese/English switching.

  • Prism

    Syntax highlighting

    The forum showcase uses Prism to make code clear and readable.

FAQ

FAQ

Do I need to install an editor or set up an environment?
No. Code online in your browser: tutorial and editor are on the same page.
Can a complete beginner learn here?
Yes. Start from HTML basics and follow the learning path step by step.
Will I see my code's result right away?
Yes. A live preview sits next to the editor and updates instantly.
Is my progress saved?
Yes. Lesson progress and quiz scores are recorded.

WHO IT IS FOR

  • Complete beginners

    Start even if you have never coded

  • Students

    Extra practice alongside class

  • Career switchers

    A clear route, fewer detours

  • Developers filling gaps

    Close gaps, reinforce the core

CAPABILITIES

What you can do on ITKia

Rich learning and practice experiences to help you grow faster

Learning & progress

A structured path with clear progress tracking

  • Learning pathA clear route from basics to advanced
  • Progress trackingVisual progress
  • Bilingual learningSwitch freely between Chinese and English

Practice & experiments

Hands-on practice to test ideas and truly learn

  • Interactive sandboxWrite and preview instantly
  • Free practiceA safe place to practice and experiment
  • Responsive designWorks on desktop and mobile

Assessment & unlocks

Multi-dimensional assessment, unlock achievements, keep improving

  • Lesson quizzesCheck what you have learned
  • Quiz after the lessonFinish a lesson to unlock its quiz
  • Smooth experienceStay focused with fewer distractions

Community

Connect, share and grow together

  • Discussion forumShare experience and ask questions
  • Roles & permissionsStudents and admins each have their own role
  • Admin dashboardContent upkeep for a high-quality environment

LEARNING PATH

Learning path

From beginner to advanced, step by step, building your complete frontend skill set

LearnBeginnerPracticeIntermediateExploreAdvancedStart: zero experienceGoal: build projects independently

  1. STAGE 1 · Learn

    Learn

    Understand core concepts and principles to build your knowledge

    Output → Notes

  2. STAGE 2 · Practice

    Practice

    Apply what you learned to deepen understanding and memory

    Output → Code projects

  3. STAGE 3 · Explore

    Explore

    Explore advanced topics and solve real problems

    Output → Personal project

Learning is not a sprint. Stay curious and keep iterating; with ITKia you will keep growing and build work of your own.

CONSTELLATION QUIZ

Constellation quiz: every right answer lights a star

Each round has 5 random questions that form a constellation. Correct answers light up and connect; wrong ones split in two and dim, with an explanation.

  • Your best score is kept; retake as often as you like
  • Quizzes unlock after you finish a lesson
  • Perfect scores unlock bronze, silver and gold achievements

✦ FROM STRUCTURE TO INTERACTION ✦

Three core subjects

From structure to visuals to interaction logic: master core frontend skills step by step

  • HTML Structure

    Build the skeleton and content of a page
    Learn tags and semantic structure

    Enter

  • CSS Styling

    Style pages and control layout
    Layout and responsive design

    Enter

  • JavaScript Interaction

    Bring pages to life
    Logic, events and data handling

    Enter

LAUNCH SEQUENCE

Learn frontend, starting with ITKia

Make learning fun and efficient!

Start practicing
  • Write & see
  • Instant feedback
  • Achievement unlocked
  • Bilingual