기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
도도(코딩루팡)
React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!
Basic
Next.js, React, TailwindCSS
Cafe 24 Best Shopping Mall Design Clone Coding (HTML + 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.
Reviews from Early Learners
What you will learn!
HTML + CSS Core Theory
We can design any layout no matter how complex it may be.
Create your own portfolio
Deploying a project via GIT
Clone coding = dictation? NO!
The foundation of HTML and CSS, completed through direct coding 🏃
Cafe 24 Best Shopping Mall
I don't take dictation, I make it myself🔥
I believe the fastest way to learn coding is to apply what you've learned by creating something yourself, rather than simply reading about theories. You'll learn the core HTML and CSS theories needed to clone Cafe24's best shopping mall designs. Based on what you've learned, you'll clone the designs yourself, ultimately creating your own online store .
I guess I'll end up taking dictation?
I'll show you step by step why you should write it this way.
I think the downside of clone coding is that it ends up being "dictation."
To prevent this from happening, we'll carefully draw out the layouts, step by step, explaining why code needs to be written this way. After completing the course, I believe you'll be able to easily apply the concepts to other complex layouts on your own projects without fear :)
After attending the lecture, you will 💡
- Massive amounts of HTML and CSS will no longer be scary.
- You can even create websites with complex layouts yourself.
- Later, when you learn Javascript, you will be able to freely manipulate HTML elements.
Unique lecture features of Together Coding ⭐
Through clone coding
Learn
You can learn coding accurately and quickly by creating your own projects using the theories you have learned through clone coding .
Just let it go
No
This course is designed for beginners and non-major developers. I'll cover everything thoroughly, without skipping over any points I assume you already know .
Chapter-by-Chapter Learning Content 📚
Chapter 1. Theory of HTML tags and various attributes
- How HTML works
- Tags and attributes
- Semantic tags
- How to study a large amount of tags
Chapter 2. CSS Theory for Clone Coding
- CSS application method and grammar
- margin and padding
- box structure
- flex box
- transition and transform
- animation
Chapter 3. Time for some serious cloning 🔥
- Layout from a given photo
- How to write CSS for layout implementation
- Efficient CSS file management methods and CSS methodology
- Write reusable CSS code and complete a subpage in 5 minutes.
Chapter 4. Deploying the Webpage I Created via Git
- How HTML works
- Tags and attributes
- Semantic tags
- How to study a large amount of tags
Frequently Asked Questions ✅
Q. Can beginners learn coding as well?
This course is designed for beginners or non-majors in web development :) The course is conducted step by step, without skipping over parts that are assumed to be familiar, so that anyone can easily follow along.
Q. How is clone coding done?
Rather than starting from a template, you'll write code from scratch. You'll learn by looking at a photo of the layout you need to complete and then gradually building a layout like the photo. :)
Q. Is pre-study necessary?
No prior knowledge is required. Chapters 1 and 2 of the lecture cover the fundamentals of HTML and CSS necessary for clone coding. Additional theory that you might need during the clone coding process will be covered in detail in the corresponding sections, so don't worry.
Recommended for
these people
Who is this course right for?
For those new to coding
Anyone who wants to become a web developer or full-stack developer
Need to know before starting?
Want to learn coding?
135
Learners
8
Reviews
2
Answers
5.0
Rating
1
Course
웹개발자로 이것저것 프로젝트를 만드는 것을 좋아하는사람이에요
직접 부딫혀가며 쌓아온 웹개발 지식을 공유 해드리고 있습니다 :)
Curriculum
All
47 lectures ∙ (6hr 17min)
Course Materials:
Lecture resources
16. About the box
07:43
19. About padding
02:35
20. id and class
06:05
22. flex box
14:33
25. pseudo-class
05:36
27. About transform
08:02
28. Animate elements
05:49
Published:
Last updated:
Reviews
All
8 reviews
5.0
8 reviews
빠른 까치Reviews 1
∙
Average Rating 5.0
- jaekon seo
Reviews 4
∙
Average Rating 5.0
- 소연
Reviews 1
∙
Average Rating 5.0
- 유영재
Reviews 6
∙
Average Rating 5.0
- 김대관
Reviews 1
∙
Average Rating 5.0
$26.40
Similar courses
Explore other courses in the same field!
![모던 웹 인터렉티브 CSS3 [PART1/3]Course Thumbnail](https://cdn.inflearn.com/public/courses/335744/cover/32ae213b-41d5-4c80-8408-b64b8d286b58/335744.jpg?f=avif&w=420)
![풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]Course Thumbnail](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Course Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[환상의족발] 디자인부터 코딩까지Course Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
