
Coding for the First Time with Web Publishing - CSS
ezweb
You will learn everything from CSS basics to animations and responsive design. Through practical examples, you will review what you've learned and build a solid foundation.
Beginner
HTML/CSS
First steps in React for publishers! Learn everything from basic syntax to building and deploying a responsive shopping mall website all at once. This is not just a collection of fragmented React examples; you will learn and apply the core syntax necessary for actual web page production.
21 learners
Level Basic
Course period Unlimited


A solid understanding of core React concepts (Components, Props, State, Events)
Completion of a card list-oriented shopping mall website
Experience in JSON API data integration and acquisition of Context API basics.
Deploy the completed project to Vercel to obtain a live service URL.
Category, brand, and price range filtering
Pagination
Subscribe & Like & Comment Event
Complete a simple mission and receive a 50% discount coupon immediately. Grab this all-time great benefit offered for a limited time right now!
Participate in the event: https://forms.gle/wcD2wRVeaG7B7fSj7
Publisher-friendly explanations: Naturally connecting React concepts from existing HTML/CSS mindsets
Practical Project-Oriented: Learn React by directly building a shopping mall UI
Portfolio Completion: Providing results that can be used immediately for job applications
Shopping mall design examples
Understand the reasons for learning React and the environment for learning preparation.
Clearly identify why React is necessary from a publisher's perspective.
Key Content
Purpose of learning React, preparing development tools, perspective on transitioning from publisher to front-end developer
Learn the core syntax and concepts for React development.
The goal is to become familiar with the component-based mindset.
Key Content
Vite + React environment setup, JSX syntax, component structure, Props, State, event handling
Learn focusing on rendering patterns frequently used by publishers in practice.
Naturally connect HTML/CSS experience to React.
Key Content
Conditional rendering, list rendering (map), key concepts, CSS application methods (CSS Module, etc.)
Apply React fundamentals to actual UI implementation.
Experience the professional workflow through a shopping mall structure.
Key Content
Header/GNB configuration, product card list, shopping cart button, category filtering, responsive UI
Deployment experience using Vercel
Summarize the learning content based on the completed project.
Then, suggest a direction for future frontend learning.
Key Content
Project review, code cleanup points, and frontend expansion roadmap guide
Card list-centered shopping mall website
Responsive Design (PC / Mobile)
Implementation of shopping cart button and category filter functions
Fetching real data through API integration
Deployed portfolio project
Final deployment preview: https://ez-shop-three.vercel.app/
HTML / CSS / JavaScript Basics
Installing Node.js & VS Code
GitHub Account (for deployment)
Instead of simply learning React syntax, you will implement the entire main page of a website just like a real-world project. While building the project, the course proceeds in an order that allows you to learn the know-how of structuring HTML based on a design, the styling expertise to write CSS that matches the design perfectly, and the logic for writing scripts according to specific functions.
Implement the project by referring to the design.
Create a project using React, and implement the project using HTML, CSS, and React (JavaScript).
VS Code Development
Based on what was learned in the React basics section, product information is retrieved and products are displayed through list rendering (map). From the displayed product list, filtering and sorting are implemented according to specific conditions.
filtering, sorting
From the displayed product list, specific products are output based on conditions, and clicking a button displays the products for that corresponding page.
pagination
Adjust the number of products displayed to fit various devices using media queries.
responsive
A. An understanding of basic syntax (if, for, functions, arrays, objects) is required.
However, advanced syntax or algorithm-level knowledge is not required, and I plan to focus on explaining the JavaScript concepts essential for learning React.
Please learn the basics in the lecture below.
Yes, it will be very helpful.
This course is designed to help you understand React from the perspective of an HTML/CSS-focused publisher, making it an excellent starting point for expanding your career as a front-end developer.
It is no problem at all.
Class components will not be covered; instead, we will provide step-by-step explanations of functional components and essential Hooks such as useState and useEffect.
Since designs are provided, there are no resources you need to prepare.
It is based on the examples and structures provided in the lecture, and it is designed to help you focus on UI implementation and understanding React syntax.
Yes, it can be utilized.
The shopping mall mini-project includes component separation, state management, and the deployment process, making it suitable for use as a portfolio example.
Yes, we do cover it.
We will guide you through the process of deploying a React project using Vercel, allowing you to experience the actual service deployment workflow.
I recommend learning in the following order: Next.js, TypeScript, state management libraries (Zustand, Redux), and then API integration.
I will also provide a frontend learning roadmap in the final part of the lecture.
Who is this course right for?
A publisher who has learned HTML/CSS/JS but finds React unfamiliar
Those who want to add a React-based project to their portfolio
Web designers/web publishers preparing to expand their careers into front-end development
Need to know before starting?
HTML / CSS / JavaScript Basics
Installing Node.js & VS Code
GitHub Account (for deployment)
Career Verified
2,925
Learners
72
Reviews
4
Answers
4.9
Rating
14
Courses
■ [Current] ESTSOFT KDT Frontend Instructor
■ Green Computer Art Academy Web Publishing and Frontend Instructor
■ Operator of Web Publishing YouTube Channel 'Rock's Easyweb'
■ The Joeun Computer Academy Web Publishing Instructor
■ Hanbit Computer Academy Web Publishing Instructor
■ Frontend Publisher, Professional Frontend Publishing Instructor
■ UI/UX Web Design Portfolio Instructor
[ Books ]
Published on 2021.07.19 / The Complete Figma Guide for Web Design & Web Publishing / BJ Public
Published on 2022.08.25 / Coding for the First Time with Web Publishing / Youngjin Publishing
Published 2023.10 /2024 SD Edu Yu-seonbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning
2024.11 Reprint /2025 SD Edu Yoo-Sunbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning
2025.11 Reprint /2026 SD Edu Yoo-Sunbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning
[ Awards ]
2022.08 Green Computer Art Academy Jongno Branch - Outstanding Instructor 2021.06 Green Computer Art Academy Jongno Branch - Outstanding Instructor 2018.06 Green Computer Academy Sinchon Branch - Outstanding Instructor 2017.05 Green Computer Academy Sinchon Branch - Outstanding Instructor 2016.05 Green Computer Academy Sinchon Branch - Outstanding Instructor 2015.10 Green Computer Academy Sinchon Branch - Outstanding Instructor
All
33 lectures ∙ (9hr 28min)
Course Materials:
All
2 reviews
Check out other courses by the instructor!
Explore other courses in the same field!