ちゃんと学ぶHTML + CSS: 入門から実践まで完璧攻略 Part1 - 【基礎編】

This course is a full-stack level frontend project course that focuses on implementing Notion from start to finish using Vanilla JavaScript, going beyond simple UI cloning to deeply understand the internal operating principles. You'll implement all the core features of a real note-taking app using vanilla JS, including sidebar tree, nested document creation, auto-save, routing, trash, favorites, search modal, settings modal, theme switching, Export/Import, keyboard shortcuts, responsive layout, drag resize, and more. The goal is to solidly learn browser standard behaviors (event bubbling, DOM tree, local storage, Blob, FileReader, hash routing, etc.) that you must know before frameworks like React and Vue, so you can completely understand "why it works this way" and build the skills to debug effectively.

This course covers the Critical Rendering Path (CRP) process from start to finish, where the browser receives HTML to create the DOM, combines it with the CSSOM, and renders pixels on the screen. Beyond simple DOM manipulation, you'll learn how CSS and JS impact performance, image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and DevTools practice, gaining practical strategies to noticeably improve real web performance.

An Express.js journey from beginner to mastery, flowing like water! A backend journey where you learn properly by directly implementing from basic server concepts to completing a CRUD project.

Beyond simply using Express.js, this lecture will have you directly implementing its internal engine from scratch to finish, allowing you to truly internalize the operating principles of a real server. You will directly build all of Express's components, such as routers, middleware, request-response objects, static file handling, and template rendering, from the ground up, providing an experience that fosters growth as a server developer.

This course goes beyond simple DOM manipulation, deeply learning how to dynamically compose and react to web UIs within interactions with actual users. It's structured for you to learn by directly implementing common issues encountered in practice, from the essence of event systems, bubbling and capturing, event delegation, real-time UX feedback, to performance optimization using throttle & debounce. Based on an understanding of the DOM tree structure, you will develop the ability to flexibly connect event flow and state changes.

No matter how much you study React, Next.js, or Vue, if the code feels abstract and the structure isn't clearly understood, the root cause might be a lack of understanding of DOM. DOM is the foundation of all frontend frameworks and the entity that connects the structure and behavior of web pages. This lecture goes beyond simple selectors or manipulation methods, teaching step-by-step from the very beginning how HTML transforms into DOM objects and how to select, traverse, and manipulate this structure. It is the Part 1 introductory lecture of 'Complete DOM Mastery'. HTML tags are just structure, and JavaScript is just behavior, but DOM is the core that connects the two. If you clearly understand this connection, you'll be able to precisely grasp the true structure and flow within any framework you use.

📌 This course starts with a strategic AI Tic-Tac-Toe project and is a curriculum that completes the core concepts of object-oriented programming through practical examples. Through game implementation, you will train logic design and AI strategic thinking, and then directly experience OOP design techniques such as inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to go beyond syntax and grow into a 'designing developer' through a real project.

Through this course, students will broadly learn the basics and advanced concepts of JavaScript, from setting up the development environment to variables, conditional statements, functions, objects, and arrays. Through thorough review with practice exercises and quizzes, they will be able to develop problem-solving skills that can be immediately applied to web and mobile development practices.

This course systematically masters intermediate to advanced CSS techniques such as "CSS Position, Transition, Transform, Animation, Flexbox, Grid, and Responsive Web Design," and equips you with skills immediately applicable in real-world projects through various hands-on practice projects.

Through this course, students will broadly learn the basics and advanced concepts of JavaScript, from setting up the development environment to variables, conditional statements, functions, objects, and arrays. Through thorough review with practice exercises and quizzes, they will be able to develop problem-solving skills that can be immediately applied to web and mobile development practices.

This course systematically masters intermediate to advanced CSS techniques such as "CSS Position, Transition, Transform, Animation, Flexbox, Grid, and Responsive Web Design," and equips you with skills immediately applicable in real-world projects through various hands-on practice projects.

The ultimate full-stack course that teaches even beginners about web, server, mobile apps, and machine learning!! If you're not sure where to start with development, I highly recommend this course. It's all done with just Javascript!

🔥 Build a customized platform for Hanja learning! Leverage Google Gemini AI and Firestore to directly implement your own Hanja vocabulary book, stroke order animation, and even handwriting recognition!

This is a full-stack lecture series based on real-world web service development experience, aiming to help beginners develop web and app services to a level suitable for actual commercialization. As Part 2 of this series, this lecture thoroughly and solidly covers the latest HTML5, CSS3, vanilla Javascript + ES6, considering responsiveness and compatibility within the diverse landscape of frontend technologies.

To become a developer who creates websites, there are many skills to learn. Among those many skills, I will explain HTML and CSS, which are the basics of website creation and the first things you should learn. You will learn how to write HTML and CSS, and at the end, you will do a project to create a website similar to the actual Amazon website. And you can create a URL of the project you made and distribute it.

Now you can enjoy the easy and fun coding lectures of Young Cody Kim, a current star lecturer who has devoted himself to coding education for over 15 years, targeting elementary school students, high school students in IT software departments, college students in computer science departments, and job seekers who are not majoring in the field, not only offline but also online. With Young Cody Kim, who has produced over 500 front-end, back-end, full-stack, and web developers, your dream of becoming a developer will soon come true!

📌 This course starts with a strategic AI Tic-Tac-Toe project and is a curriculum that completes the core concepts of object-oriented programming through practical examples. Through game implementation, you will train logic design and AI strategic thinking, and then directly experience OOP design techniques such as inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to go beyond syntax and grow into a 'designing developer' through a real project.

For over 15 years, Young Codi Kim, a star coding instructor, has been dedicated to coding education for elementary school students, high school students in IT software departments, university students in computer science, and job seekers without a major in the field. Now, you can experience Kim's easy and fun coding lectures not only offline but also online. With Young Codi Kim, who has trained over 500 front-end, back-end, full-stack, and web developers, your dream of becoming a developer will soon become a reality!

We create a project site to create and distribute a psychological test site using only HTML/JS/CSS.

You can learn HTML and CSS quickly by directly cloning and coding the best shopping mall designs posted on Cafe 24. The course is structured so that you can learn the basic theories of HTML + CSS and complete the shopping mall design through direct cloning and apply what you learned in the theory, and solidify the framework of HTML and CSS.

This is a practical exam specialist lecture that is optimized for the practical exam content that exactly matches the exam criteria implemented until the Web Designer Qualification Exam Criteria (2025.1.1~2025.12.31), and the HTML+CSS+JQUERY Publishing, Coding Works Web Designer Qualification Exam Practical Exam Lecture is different. It includes both the perfectly produced D-type and E-type classes added in 2023 and the perfectly produced F-type classes added in 2024.

It is aimed at beginners of html/css, and it builds a solid foundation, and of course, you can learn practical responsive layout creation.

This is the most solid foundation course for beginners who want to learn JavaScript properly. This course will be the starting point for understanding the language called JavaScript, and you can perfectly prepare the basics to become a front-end (Vue, React, Angular) developer and server (Node.js) developer.

A three-in-one class where you can create web games and learn front-end web development skills! This class has been created to teach you how to create games using JavaScript, CSS, and HTML with your own ideas!

Learning by Doing: 정보처리산업기사 I have prepared everything for passing the 정보처리산업기사 course-evaluation practical exam.

We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

💡 Even non-developers can go from startup MVP to monetized service in just 10 hours with AI! 💰 Development that used to cost tens of millions in outsourcing fees now completely solved for 120,000 won 🎯 Complete 5 real business projects including business card recognition, sentiment analysis, and location analysis 🔥 If you're a planner, marketer, or aspiring entrepreneur, implement ideas without developers ⚡ Start now and acquire lifelong development independence skills!

This class is for anyone who wants to become a SW instructor and provides a curriculum, materials, and the know-how and tips from a 15-year veteran instructor.

Data can be processed and presented in tabular form, but the most important thing is to present the data in a way that humans can understand at a glance.