Build Web Development from Scratch: HTML · JavaScript · Node · DB · Next.js

Learn by Building: Your First Steps in Web Development — Hands-on Introduction to HTML, JavaScript, Node.js, SQLite, Next.js

• This course is not simply about learning code.
  Through HTML, CSS, JavaScript, Node.js, SQLite, and Next.js
  it's a hands-on course where you learn how the web works by building it yourself.

  Understand the flow between frontend and backend at a glance,
  and complete the process of how data travels through servers and databases to be displayed on screen.
  We focused on learning through hands-on experience rather than complex theory.

💡 Features and Differentiators of This Course

• Learn Web Development by Building — From HTML, JavaScript, Node.js, SQLite to Next.js

• A hands-on course focused on "working experience" rather than complex grammar

• Step-by-step explanations and realistic examples that even beginners can understand

• Theory over results-focused — Learning structure through the sense of completion

• Unlike other introductory courses, you'll develop your intuition by directly implementing actual service flows.

💡 Students who need this course

💭 "I know some HTML and JS, but I don't know what to actually build."
For those who have studied code but don't have a feel for how the web actually works.
This course provides an "Ah, this is how it all connects!" aha! experience for those people.

💭 "I've done CRUD, but I don't understand how it connects like a real service."
For those who want to get a feel for how Node.js, DB, and frontend work together.
This course lets you experience the entire process
of data passing through the server and being displayed on screen by writing code directly from start to finish.

💭 "Next.js looks too difficult, I can't even get started."
Even those encountering Next.js for the first time
can learn data binding through simple practice without complex concepts.
This course focuses on experiencing the basic flow of Next.js.

💭 "Rather than learning perfectly, you need the experience of actually building something."
If you've studied but still lack hands-on building experience,
complete a fully functional web project through this course.
Ultimately, development grows from 'completion experience' rather than just 'understanding'.

🌱 Taking this course will bring about these changes

'Web development' will no longer feel vague.
You'll see with your own eyes and experience with your own hands
what roles HTML, JavaScript, Node.js, DB, and Next.js play
and how they connect to each other.
Now you'll have a clear picture in your mind of how the web works.

✅ You'll break free from the state of 'not knowing what to build with what you've learned.'
This course lets you directly build small, actually working services
so you can experience "Ah, this is how things connect together."
Your studying transforms from 'understanding' to 'completion experience.'

✅ You'll no longer be intimidated by Next.js and server integration.
Even if you're new to Next.js,
you can easily learn the basic flow of displaying and binding data to the screen
and get a feel for it.

✅ You'll gain confidence that 'I can really build websites.'
Since this is a hands-on structured course where every part is verified with actual code,
you'll have the experience of directly completing a project when you finish the course.
This experience will serve as a foundation
for quickly understanding the flow of any technology you learn in the future.

✅ What you learn becomes your portfolio directly.
The results created in this course
are not simple examples but actual working web structures,
so you can use them as your first web project portfolio.

Practice Environment

• The course is conducted based on macOS, but
  you can follow along identically in Windows or Linux environments as well.
  (There are only slight path differences depending on the OS, but all the practical content is identical.)

• I will explain using the Cursor editor.
  Cursor is a code editor with built-in AI features,
  and it has almost the same interface as VS Code,
  so even first-time users can follow along without difficulty.

• In the course, we provide step-by-step guidance on how to
  directly install and run bun, Node.js, SQLite, Redis, Next.js.

• No separate Docker or virtual environment setup is required.
  You can start practicing right away with just a simple local environment.

Learning Materials

• All course source code and practice files are provided as attachments.
  You can download and use the required example code for each lecture unit as is.

Prerequisites and Precautions

• Very basic syntax of HTML, CSS, JavaScript knowledge will help you
  follow the course content more easily.
  But it's okay even if you're a complete beginner.
  You'll naturally learn by practicing step by step from the beginning.

• It would be helpful if you have used the terminal (command input window) at least once or twice.
  This is because the process includes installing and running bun, Node.js, and SQLite.

• No programming experience? No problem!
  This course focuses on getting an intuitive understanding of
  "how the web works" rather than understanding code.

• However, if you want to study the Next.js part more deeply
  I recommend learning React's basic syntax separately later.

📘 Reference Notes for Course Learning

1️⃣ Practice Environment

• Operating System: The course is conducted based on macOS, but you can practice identically on Windows and Linux as well.

• Editor: The course is explained based on Cursor Editor.
  Cursor is a VS Code-based editor with built-in AI features, so even first-time users can follow along without difficulty.

• Execution Environment: Without separate Docker setup,
  bun, Node.js, SQLite, Redis, Next.js are directly installed and practiced in the local environment.

• Recommended Specifications: A typical laptop or desktop is sufficient.
  (CPU i5 or higher, 8GB RAM or more recommended)

2️⃣ Learning Materials

• All source code and practice examples are provided as attachments for each lecture.
  You can immediately download the necessary code for each section and follow along.

• Commands, DB schemas, configuration files, etc. used in the lectures are
  provided together in document format organized according to the lecture sequence.

• Official documentation links (Next.js, Tailwind CSS, SQLite, etc.) are
  attached together in the lecture notes at the bottom.

3️⃣ Prerequisites and Important Notes

• It will be easier if you know the basic syntax of HTML, CSS, and JavaScript.
  However, even complete beginners will have no problem.
  The course proceeds as a "learning process by building directly."

• It would be helpful if you have experience with terminal commands.

• It's okay if you don't know React.
  In the Next.js section, instead of complex structures,
  we only cover "the minimal flow of displaying DB data on screen."

• All hands-on exercises are conducted in a free tools and open source environment,
  so no separate paid subscriptions or commercial tools are required.

Anyone can create a web service directly with just their own laptop in this course.
From environment setup, code writing, data integration, to screen display
the focus is on learning the basic flow of the web through hands-on practice.