If you’ve learned HTML/CSS, it’s time to make web pages interactive with JavaScript. Build a solid foundation in JavaScript by learning programming basics such as variables, functions, arrays, conditional statements, and loops, along with controlling DOM elements, handling events, and implementing UI components like tabs and accordions—then take the next step toward frontend learning with React and other technologies.
20 learners
Level Basic
Course period Unlimited
JavaScript Fundamentals
You can select elements using JavaScript.
You can change the element’s style.
Various events can be applied.
Can implement UI/UX effects
If you’ve built a webpage’s structure with HTML and designed it with CSS, it’s now time to add behavior and interactivity to the webpage with JavaScript.
A webpage where the screen changes when a button is clicked, the content changes based on user input, and tabs or accordion menus move. JavaScript is the key language for implementing these features.
In this course, you will go beyond simply memorizing syntax,
JavaScript basics → DOM element control → events → real-world UI implementation
You will learn in the following order.
See firsthand how variables and functions are used on actual web pages, and experience the process of making static pages built with HTML/CSS interactive with JavaScript.
We are now in an era where AI can quickly generate JavaScript code.
However, to understand why AI-generated code works, modify it to implement the desired functionality, and find the problem when an error occurs, you need to understand the fundamental principles of JavaScript.
In particular, frontend technologies such as React and Next.js are also based on JavaScript.
By developing the ability to ask AI for code, along with the fundamentals needed to read, understand, and modify generated code, you can use AI as an even more effective development tool.
Those learning JavaScript for the first time
This course is suitable for those who have finished learning HTML/CSS and are starting programming for the first time.
For those who want to expand their web publishing skills
Recommended for those who want to create interactive web pages that respond to clicks, input, scrolling, and more, beyond static pages.
For those who have learned JavaScript syntax but struggle to apply it
This course is helpful for anyone who knows variables, functions, and conditional statements but is unsure how to apply them to actual HTML elements.
Those who want to learn frontend technologies such as React
You can learn the fundamental concepts of JavaScript, the DOM, and events needed before studying React.
Start with the core JavaScript syntax that forms the foundation of programming.
Variables and Operators
Functions and objects
Creating and Using Arrays
Conditional statements and logical operators
Loops such as for, while, forEach, and for...of
Rather than memorizing every piece of syntax, we focus on understanding the flow of the code.
Learn string manipulation and time-based behavior frequently used in web development.
String Extraction and Concatenation
Changing string content
JavaScript Timers
Understand the basic principles of processing data with JavaScript and executing code at specific times.
Connect the syntax you learned earlier with actual HTML/CSS.
Selecting DOM Elements
Change the style of the selected element
Controlling Multiple Elements Using Loops
Events such as click, mouseover, and mouseout
Input element events such as change
From this point on, you will get hands-on experience with how JavaScript syntax is actually used on web pages. In the current course as well, DOM selection, style changes, and events are covered in separate lessons. Inflearn
Learn the key ES6 syntax to understand modern JavaScript code.
let, const
Template literals
Arrow functions
Learn more concise and modern ways to write JavaScript by comparing them with traditional syntax.
Combine the syntax, DOM, and events you have learned so far to implement UI elements commonly found on real websites.
Back to Top
Implement a feature that uses scrolling and events to move to the top of the page.
Tabs
Implement a tab UI where the content changes when a menu is selected.
Accordion
Implement an accordion UI where content expands and collapses when clicked.
Rather than simply following and writing completed code, see how the JavaScript you learned earlier connects to implementing actual UIs.
Cookies & Don’t Show Again Today
Learn the basic concepts and behavior of cookies, and how to create, retrieve, and delete cookies using JavaScript. Based on this, you will directly implement the “Don’t show again today” feature commonly used in event pop-ups on real websites.
Rather than simply following along with completed code, you’ll see how the JavaScript you learned earlier connects to actual UI functionality and user state management.
After completing the course, you will understand the main syntax of JavaScript and be able to write code yourself, as well as control program flow using conditional statements and loops.
You will also develop the foundational skills to select and modify DOM elements, implement functionality that responds to user events, and combine HTML/CSS with JavaScript to create web pages that actually work.
Above all, you can build a strong foundation in JavaScript for learning next-level web development technologies such as jQuery, React, and TypeScript.
Even beginners who are learning JavaScript for the first time can take this course.
However, because the exercises involve directly controlling HTML elements and CSS styles with JavaScript, knowing the basic syntax of HTML and CSS will make learning easier.
No prior experience with JavaScript is required.
For the exercises, we use Visual Studio Code and the latest web browsers, such as Chrome, and recommend that you not simply watch the lectures but also write and run the example code yourself.
If you’re new to HTML/CSS, you can start by learning the free beginner courses first.
Implementing Moving Tabs
Implementing an Accordion
Implementing a Back to Top Scroll Animation
JavaScript is a programming language for dynamically manipulating web pages. By adding interactions and logic to the static structures created with HTML and CSS, you can implement mouse clicks, button actions, animation effects, and more.
This course is designed to require foundational web publishing knowledge (HTML·CSS), so knowing the basic document structure will make it easier to learn.
This course covers the following topics:
Basic syntax such as variables, operators, functions, objects, and arrays
Building logical flows with conditional statements and loops
Selecting HTML elements and changing their styles
Event handling (click, hover, etc.)
Implement simple practical examples such as a back-to-top button, tab menus, and accordions
By taking this course, you will develop the ability to control HTML elements like a program.
For example:
Changing the content when a button is clicked
Tab menu switching
Apply effects based on scrolling
and implement interactive UIs directly in code.
If you understand JavaScript’s basic syntax, the DOM, and events, expand your learning to the next step based on your goals.
If you want to learn web publishing in greater depth
you can learn how to implement various practical UIs, such as tabs, accordions, and sliders, using jQuery.
If you want to expand into frontend development
learn about React components, Props, State, and more, then take on the challenge of building a real-world project.
Who is this course right for?
Those who have learned the basics of HTML
Those who have learned the basics of CSS
Those who want to implement dynamic effects on a webpage
Those who want to get a job as a web publisher
Those aspiring to become frontend developers
Need to know before starting?
HTML
CSS
Career Verified
3,007
Learners
78
Reviews
4
Answers
4.9
Rating
15
Courses
I am a frontend instructor specializing in teaching everything from web publishing to practical JavaScript and React, as well as AI-assisted development.
I have taught non-majors, beginners, and job seekers at ESTSOFT KDT and Green Computer Academy, among others. I break down complex concepts into small hands-on exercises and focus on project-based classes in which learners complete the final product themselves.
HTML/CSS Web Publishing
JavaScript Fundamentals and Web Interactions
React-based frontend development
Implementing web services using Firebase
Figma UI Design and Development Integration
Web Development with Generative AI
Web Design Technician Practical Exam
We provide training for corporate practitioners, KDT programs, and special lectures at universities and academies.
We structure the curriculum and hands-on projects according to the target audience’s prior knowledge, instructional hours, and desired outcomes. We offer in-person classes, live online instruction, and recorded educational content production.
We carry out the following online educational content production tasks.
Lecture curriculum and learning objective design
Creation of course materials and presentations
Organizing step-by-step practice code and example projects
Writing lecture scripts for filming
Lecture filming and content delivery
ESTSOFT KDT Front-End Course
Green Computer Academy Web Publishing and Front-End Course
Operation of the web publishing YouTube channel ‘ezweb’
Authored books in web publishing and web design
2025.11 · 2026 SD Edu Yuseonbae Web Design Technician Practical Exam Tutoring Notes · Sidae Gosi Planning
2024.11 · 2025 SD Edu Yuseonbae Web Design Technician Practical Exam Tutoring Notes · Sidae Gosi Planning Co.
2023.10 · 2024 SD Edu Yuseonbae Web Design Technician Practical Exam Tutoring Notes · Sidae Gosi Planning
2022.08 · For those new to coding with web publishing · Youngjin Publishing Co.
2021.07 · The Complete Guide to Using Figma for Web Design & Web Publishing · BJ Public
We accept inquiries about delivering lectures at companies and institutions, as well as producing online educational content.
Inquiries: ezwebpub@gmail.com
All
15 lectures ∙ (5hr 37min)
Course Materials:
All
1 reviews
Check out other courses by the instructor!
Explore other courses in the same field!
25% off for new members
$11.00
25%
$11.00
![[Web Development Full Stack Course] From Pure JavaScript Basics to PracticeCourse Thumbnail](https://cdn.inflearn.com/public/courses/330076/cover/e46f4bde-0146-42d6-a2fa-64d9bd510d27/vanila-javascript-1 (1).jpg?w=420)
![From Events to SPAs, the Essential Engine of the Interactive Web - [Mastering the DOM Part 2]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338102/cover/01k1bjkdeb2ap7p4b0vb2fck06?w=420)
