CodeWithJohn - Learn to code with John.

Welcome to CodeWithJohn — a coding tutorial site built for Thai developers who want to learn web development from scratch.

HTML & CSS

Learn the building blocks of the web. Structure your content with HTML and style it with CSS.

JavaScript basics

Add interactivity to your pages. Learn variables, functions, and how to work with the DOM.

React fundamentals

Build modern UIs with React. Understand components, state, and side effects.

Next.js basics

Go full-stack with Next.js. File-based routing, server components, and data fetching.

Whether you're writing your first line of code or leveling up your skills, CodeWithJohn walks you through each topic step by step — in a way that's clear, practical, and beginner-friendly.

Learning path

CodeWithJohn follows a structured path from the basics to building real projects. Each topic builds on the previous one, so it's best to work through them in order.

1. Start with the web fundamentals

Before writing any JavaScript or using a framework, you need a solid understanding of HTML and CSS. These are the languages browsers understand natively — every webpage is built on them.

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <title>สวัสดี CodeWithJohn</title>
  </head>
  <body>
    <h1>ยินดีต้อนรับ!</h1>
    <p>เริ่มต้นเรียน Web Development กับ CodeWithJohn</p>
  </body>
</html>

2. Learn JavaScript

Once you can build static pages, JavaScript lets you make them interactive. You'll learn how to handle user input, update the page dynamically, and fetch data from APIs.

ไม่ต้องกลัว!

JavaScript อาจดูน่ากลัวตอนแรก แต่เราจะเรียนทีละขั้นตอน เริ่มจากพื้นฐานก่อนเสมอ

3. Move on to React and Next.js

React and Next.js are the most in-demand tools for building modern web apps in Thailand and globally. After learning the fundamentals, these frameworks will feel like a natural next step.

Setting up your environment

Before you start, you'll need two tools installed on your computer: Node.js and VS Code.

Install Node.js

Node.js lets you run JavaScript outside the browser and is required for all modern web development tooling.

# Check if Node.js is already installed
node --version
npm --version

Download Node.js from nodejs.org if you don't have it. Install the LTS (Long Term Support) version.

Install VS Code

VS Code is a free code editor that works great for web development. Download it from code.visualstudio.com.

Windows users

If you're on Windows, install Git for Windows as well — it includes a Unix-style terminal (Git Bash) that works better with the commands used in these tutorials.

Your first project

Once your environment is ready, create a simple HTML file to make sure everything works.

mkdir my-first-project
cd my-first-project
touch index.html
code .

Open index.html in VS Code, add some HTML, and open the file in your browser. That's it — you're writing code!

Getting help

Stuck on something? Everyone gets stuck. Here's how to get unstuck.

Search first

Most errors you'll encounter have already been solved. Search the exact error message on Google. Stack Overflow and the official documentation are your best resources.

Join the community

Connect with other Thai developers who are learning alongside you. Ask questions, share your progress, and help others when you can. Learning in a community is much faster than learning alone.