This is a highly concentrated curriculum from a ‘real’ bootcamp that has produced over 300 developers in a year. With just this one class, you will be able to grow to the level of a junior developer in the field and gain the ability and knowledge to use the front-end technology stack. [InflearnX Code Camp] has prepared this so that anyone can build a career regardless of their social, economic, or educational background :)
1,892 learners
Level Beginner
Course period Unlimited
Reviews from Early Learners
5.0
수달
Hello. I am a first-year junior backend developer. I was studying the front-end field due to the company's needs and personal desires, and I happened to come across this course, so I purchased it and am currently taking it. It definitely felt unfamiliar at first because the flow was different from the back-end field, but it is getting more and more interesting and faster because it teaches the principles and usage of the language called JavaScript. It is better because it is a method of studying while creating things together rather than just learning the principles, so even when I don't understand it well, I can learn by touching this and that on my own. Thanks to the good curriculum, after listening to all of these courses, I expect to be able to achieve the position of a back-end developer who can understand the logic of the front-end at least. Thank you for the good course.
5.0
감자도리
Wondu Mentor..... You came to Inflearn. Wondu Mentor, whom I trust and listen to, your lectures ㅠㅠㅠ How are you? I miss you so much. Thanks to you, I got a job as a front-end developer and I've been doing well at the company for a yearㅠㅠ! I was browsing Inflearn and your lecture suddenly came up so I quickly paid for it! I'll keep the front-end and study the back-end❤️ I listened to the first part again and your voice and face are so homesick... I'm so happy that I can see you even like this!!! Following you, I'll study hard again and jump up to full stack!!!!! I'll go greet you soon! I respect you, Mentor!😍
5.0
움냐
I am a graduate who completed the offline CodeCamp Full Stack course! I heard through text that Mentor Wondu's lecture was uploaded to Inflearn, so I came running. As a developer, I would like to talk about this curriculum from the perspective of a developer. If you want to become a junior who considers the performance of a project, it seems to be the perfect curriculum! In addition to memoization used in React, which juniors can often encounter, I also learned repaint and reflow based on browser rendering principles, so the range of things I can consider when refactoring has definitely expanded! And you taught me patterns that can help me write code in a way that is a little more advantageous for maintenance, and you gave me tips, so I am personally using them well! I can't believe I'm seeing this lecture againㅠ I don't know if Mentor Wondu remembers me, but I miss youㅜㅜㅜ No Wondu! No Gain! Forever!
2 practical portfolios
8 Projects Built Using the Latest Tech Stack
Complete understanding of the overall development cycle
Enhance practical communication skills
+α Learn the basics of CRUD in the backend
Even for those with no base and no major
Career Jump as a Front-end Developer! ⭐
The new Front-End Bootcamp course for 2025 has been re-launched with more powerful and detailed content!
Grow quickly and with practical learning content in the 'Complete Front-End Course' consisting of 4 parts.
[Start with Free Camp], [CSS&Javascript Master]. [Web Front-end Bootcamp], [Hybrid App Bootcamp]
We are continuing to provide over 150 hours of intensive front-end lectures, from complete beginner level to hybrid app course:)
Take a higher career jump in 2025🚀
CodeCamp supports your growth.
💥 Attention!
This course is a curriculum that is actually used in coding bootcamps and can be taken by anyone from beginners to non-majors and junior developers.
✅ Studying is like working! A practical lecture that teaches you how to apply it to work.
✅ A step-by-step curriculum that can be understood by everyone from non-majors to majors
✅ [React, Next.js, Graphql] Learning languages and implementing projects using the latest technologies
✅ The curriculum is based on a certified 'real' bootcamp with a 92% employment rate .
✅ Growth from complete basics that even no-base can achieve to developer employment level
A to Z,
I want a professional lecture.
Development..? I don't know anything
I want to grow to a job level.
The techniques used in practice
I want to learn real know-how.
Next.js is a framework for the React library . Unlike React, Next.js basically does Server-Side Rendering (SSR), so it is good for search engine optimization (SEO) . It also allows you to retrieve pages with data rendered in advance through pre-rendering, so it is also advantageous in terms of user experience.
In addition to this , it provides page-based routing, image optimization, built-in-css, etc. to improve project performance and provide a convenient development environment for developers, allowing for efficient and high-performance development :)
"I don't even know the 'code' of coding... Will I be able to get a job as a developer?" Put those worries aside right now. This course starts with a solid foundation so that even complete beginners can grow to the level of working developers!
🧩 Basic application step 01.
What is coding? From program installation to building the basics
We will learn the basics of web and app development, the basic grammar and usage of HTML, CSS, and Javascript, and based on what we have learned, we will implement membership registration and a mini-homepage.
🧩 Step 02 of spreading the foundation.
CSS with over 60 cutting-edge properties!
Let's review what we learned today today! After attending the lecture, we will help you fully absorb it through sufficient practice.
🧩 Basic application step 03.
Enrich your web pages with Javascript.
This is a time to learn about the tools we use together, how Javascript works, how to write code, and to make what you have learned completely your own by implementing a d-day counter and to-do list.
#01. React Basics
Let's start with the basics of React. First, install various packages. Then, understand Node.js, a Javascript runtime environment, and create a project with React.
#02. Data Communication
Understand the difference between Rest-API and GraphQL, and learn how to communicate with the backend through Apollo Client.
#03. Routing and Re-Rendering
You can understand and utilize the differences between Router and Dynamic Routing, which are page movement methods.
#04. Folder structure, props, and component reusability
Understand the Container/Presenter pattern and learn how to reuse components to increase efficiency.
#05. TypeScript
Understand the different types in TypeScript and apply them to my portfolio.
#06. Framework/Library and Layout
structure
Various libraries for decorating web pages. Learn how to use them and implement pagination and infinite scroll for usability.
#07. Components and Life Cycle
Understand the difference between the lifecycle of a class component and the lifecycle of a functional component, and learn how to utilize it based on this.
#08. Backend Structure and Firebase
You can create your own API and understand the basics of the backend. You will also utilize Firebase, a BAAS service. A frontend developer who understands the backend! Isn't that so attractive?
#09. Upload image
'I want to upload a pretty image on my homepage!' You can understand the process of uploading images and upload them yourself after verification.
#10. Search
A search function is a must on any webpage. Understand the search process and apply debouncing to enhance your webpage.
#11. Login and Permissions Branching
Understand the login process using the JWT token method. You can also set up authorization branching based on login status and manage Globalstate using Recoil.
#12. Form Library
You can improve your service more efficiently by refactoring existing codes using React-Hook-Form and yup.
#13. custom hooks
You can create custom hooks using destructuring assignment and TypeScript's generic types.
#14. Kakao Map and Web Editor
Do you know SSR and CSR? Understand the difference and learn how to use Kakao Map and Web Editor.
#15. Payment and Event Loop
The core of the e-commerce platform! Understand and implement the payment process. Also, learn more about the operating principles of JavaScript.
#16. Refresh Token
Learn a practical login process using refresh tokens.
#17. Performance Optimization
You can refactor existing codes as if you were working in real life by using useMemo, useCallback, and temporary image URLs.
* Provides a separate API for classes.
#18. Test code and deployment
I'm going to create a test code using jest and cypress. This will allow me to test my code by performing unit tests and integration tests.
☝🏻 All About Free Bulletin Board
You can directly implement a bulletin board that is indispensable anywhere on the web, such as blogs and communities. It is impossible to do coding only with theory! Through project practice, you can fill in your own code with various functions such as pagination and infinite scroll. In addition, you can decorate it with a UI that suits your personality, so not only interest but also skill will increase, right?
✌🏻 An e-commerce platform created with a bulletin board
"By any chance... Are you a carrot?🥕" Do you know how E-commerce platforms like Coupang and Carrot Market are created ? You can implement an E-commerce website with many functions such as membership registration, login, payment, and community with your own hands . It may seem daunting at first, but after taking this course, you will have created a wonderful portfolio.
🎯 This is the portfolio you get from this course.
· 01. Free Bulletin Board - Implement the most core functions of the web, such as UI, list-up, pagination, and post editing and deletion, and complete a portfolio based on these.
· 02. Secondhand Market - This is a portfolio that upgrades the bulletin board created as the first portfolio into a secondhand market. It implements functions such as login, permission division, payment, and image processing.
It is difficult to understand multiple languages at once. In this course, you will complete your own web page by directly utilizing various stacks such as Javascript, Typescript, React, Next.js, and Graphql through a project. You will learn how to use languages that are organically connected to implement a single function, and you will understand it naturally.
In real practice, you need to be able to use various languages appropriately and achieve the best efficiency!
* version: This is the version used when taking the course. (Please refer to this if necessary!)
- next 12.1.0 - react": 17.0.2 - react-dom": 17.0.2 - typescript": ^4.8.4 - @types/node": 17.0.2 - @types/react": 17.0.2 - @apollo/client": ^3.6.9 - @emotion/styled": ^11.10.0 - @material-ui/core": 4.12.4 - antd": ^4.22.8 - eslint": ^8.0.1 - prettier": 2.7.1
It's okay if you don't understand 'Version' and its technology stack. I'll explain it to you in detail and kindly in the lecture :)
📑 Section-by-section learning materials
This is a resource that helps you understand the content while taking the class. Since it is a resource that actual boot camp students also use, if you use it well, it will be of great help even if you miss something.
📑 Section-by-section assignment materials
Let's review what we learned today today! After attending the lecture, we will help you fully absorb it through sufficient practice.
📑 Portfolio by section
This is a reference material that you can use when creating a portfolio using the features you learned in each section. Add two projects to your portfolio with this lecture!
🎨 Artipul
This is a service that allows you to easily purchase art works by art students. In addition to the main page, it enables point charging and payment through an open payment API, and even implemented a real-time bidding function using Socket.io.
📙 Flog
It is a travel guidebook service consisting of a travel schedule, household account book, and travel log. If you create a travel schedule with the drag&drop function, it will be saved in the DB in real time, which increases usability. In addition, it has been implemented so that you can share your schedule with other users!
🙆🏻♀️ 2 portfolios that can be used immediately in practice
👨🏻🎓 Build a solid development knowledge base that can help you grow on your own
💁🏻♀️ Junior developer with smooth communication in practice
👨🏻💻 Front-end developer with excellent collaboration skills with other departments
🙋🏻♀️ Developing an E-commerce Platform that You Can Do on Your Own
If you have understood the latest front-end technology stack and development cycle using the practice API, learn more about the back-end centered on Node.js and Nest. We will teach you everything about the back-end, such as how to create the necessary API yourself, how to handle data, search, payment, and distribution. Complete the back-end course and jump higher in your career as a full-stack developer🚀
💡 Please check your computer specifications .
· Mac OS specifications are irrelevant.
· If you are using Window OS, you need to install git-bash.
- Please refer to Class Materials > Environment Settings.
- Intel Core i5 9th generation or higher / AMD RYZEN 5 2nd generation or higher
- RAM 16GB or more recommended
💡 I recommend that you create a schedule and study regularly and consistently .
💡 Please create an account for the collaboration tool ‘Notion’ to receive learning materials.
💡 Learning materials required for the course are provided through Notion (link) .
※ The copyright of the learning materials belongs to Code Camp. Unauthorized use, distribution, or reproduction is prohibited.
Q. Can I take the course without any knowledge?
Yes, it's okay if you don't know anything about coding. It includes a beginner's course on HTML, CSS, and Javascript to help you understand it more deeply and broadly.
Q. Is there a separate textbook?
Please use the [lecture materials] provided by Notion! These materials are the exact materials used in actual boot camps. Unauthorized use, distribution, and reproduction are prohibited.
Q. I'm confused about the list of course materials for the basic course (starting with pre-camp, CSS, Javascript).
Q. I have a question during class.
Please leave your questions in the community. The CodeCamp team will provide a quick and satisfying answer as soon as possible :)
Who is this course right for?
Anyone who wants to grow properly with a professional curriculum
Those who feel a lack in national or other lectures
Junior developers who want to complete their development cycle with the latest technology stack
Job seekers who want to get a job with a portfolio that fits the trend
College students who want to study coding systematically
Need to know before starting?
Passion and will for coding 💪🏻
15,806
Learners
490
Reviews
232
Answers
4.8
Rating
15
Courses
"Try anything, Try everything!"
Code Camp aims to cultivate competent developers and change the future of development. We have arrived on Inflearn to provide career transition opportunities to everyone, regardless of their social, economic, or educational background. Take on the challenge of a career jump with Code Camp!
Co-instructor
All
341 lectures ∙ (128hr 6min)
12. ▶ Learning CSS
25:29
13. ▶ CSS Alignment
20:44
18. ▶ Array
24:31
19. ▶ Object
20:41
24. ▶ Loops
22:19
26. ▶ DOM
10:42
29. ▶ Functions
09:14
39. ▶ Git/Github
22:02
41. ▶ What is CSS?
03:38
44. ▶ Selector1
05:18
46. ▶ Box Model
24:12
48. ▶ Practice 1
48:17
51. ▶ Selector2
07:22
53. ▶ float Layout
52:47
54. ▶ flex layout
23:20
55. ▶ Practice 2
17:14
57. ▶ Selector3
33:22
58. ▶ flex layout2
11:19
59. ▶ Practice 3
08:35
62. ▶ Web Fonts
15:29
63. ▶ Font
26:31
64. ▶ Unit
06:59
66. ▶ Cascading
16:33
67. ▶ Background
17:39
68. ▶ Color
04:28
69. ▶ Unit 2
03:00
71. ▶ Unit Deep Dive
31:15
72. ▶ position
24:45
73. ▶ transition
10:35
75. ▶ transform
17:57
80. ▶ keyframes
02:34
81. ▶ animation
09:29
84. ▶ grid layout
05:24
90. ▶ Media Query
13:10
91. ▶ breakPoint
12:06
92. ▶ Responsive Practice
01:00:30
All
83 reviews
4.5
83 reviews
Reviews 5
∙
Average Rating 5.0
5
Wondu Mentor..... You came to Inflearn. Wondu Mentor, whom I trust and listen to, your lectures ㅠㅠㅠ How are you? I miss you so much. Thanks to you, I got a job as a front-end developer and I've been doing well at the company for a yearㅠㅠ! I was browsing Inflearn and your lecture suddenly came up so I quickly paid for it! I'll keep the front-end and study the back-end❤️ I listened to the first part again and your voice and face are so homesick... I'm so happy that I can see you even like this!!! Following you, I'll study hard again and jump up to full stack!!!!! I'll go greet you soon! I respect you, Mentor!😍
Reviews 2
∙
Average Rating 5.0
5
I am a graduate who completed the offline CodeCamp Full Stack course! I heard through text that Mentor Wondu's lecture was uploaded to Inflearn, so I came running. As a developer, I would like to talk about this curriculum from the perspective of a developer. If you want to become a junior who considers the performance of a project, it seems to be the perfect curriculum! In addition to memoization used in React, which juniors can often encounter, I also learned repaint and reflow based on browser rendering principles, so the range of things I can consider when refactoring has definitely expanded! And you taught me patterns that can help me write code in a way that is a little more advantageous for maintenance, and you gave me tips, so I am personally using them well! I can't believe I'm seeing this lecture againㅠ I don't know if Mentor Wondu remembers me, but I miss youㅜㅜㅜ No Wondu! No Gain! Forever!
Reviews 1
∙
Average Rating 5.0
5
Hello. I am a first-year junior backend developer. I was studying the front-end field due to the company's needs and personal desires, and I happened to come across this course, so I purchased it and am currently taking it. It definitely felt unfamiliar at first because the flow was different from the back-end field, but it is getting more and more interesting and faster because it teaches the principles and usage of the language called JavaScript. It is better because it is a method of studying while creating things together rather than just learning the principles, so even when I don't understand it well, I can learn by touching this and that on my own. Thanks to the good curriculum, after listening to all of these courses, I expect to be able to achieve the position of a back-end developer who can understand the logic of the front-end at least. Thank you for the good course.
Reviews 3
∙
Average Rating 3.7
1
Why does the male instructor who is explaining JavaScript in depth stutter and repeat the same thing? It is disappointing that you are not prepared at all since it is a recorded lecture and not an actual lecture. I wish you had prepared a script and come to the lecture prepared. I wish the female instructor who taught CSS would teach JavaScript as well. I paid for several lectures at once, but I am really worried that the other lectures will be like this;
Reviews 1
∙
Average Rating 1.0
Check out other courses by the instructor!
Explore other courses in the same field!
![[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?w=420)
![[Code Camp] The 'Perfect' Frontend Course Created at BootcampCourse Thumbnail](https://cdn.inflearn.com/public/courses/335397/cover/133267ea-9728-4642-927e-74a76eaac4c3/335397.png?w=420)
![[CSS&JS Master] - Create a trendy emotional diaryCourse Thumbnail](https://cdn.inflearn.com/public/courses/335863/cover/836195ea-22e0-4a97-84a9-5c520b028729/335863.png?w=420)
![[Code Camp] Javascript Algorithm Theory + Practice for BeginnersCourse Thumbnail](https://cdn.inflearn.com/public/courses/330604/cover/9c8dddcb-bd3b-4f3d-93af-ea382b6835c0/thumbnail.png?w=420)
![[Code Camp] Highly concentrated backend course created at boot campCourse Thumbnail](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?w=420)
![[Code Camp] Warm JavascriptCourse Thumbnail](https://cdn.inflearn.com/public/courses/329922/cover/364e7406-3569-437b-b719-7f146cad3d60/thumbnail-js.png?w=420)
![[Code Camp] Powerful CSSCourse Thumbnail](https://cdn.inflearn.com/public/courses/329921/cover/325131ea-9c57-427e-98b9-4e207a1dff98/thumbnail-css.png?w=420)
![[Code Camp] Start with Pre-CampCourse Thumbnail](https://cdn.inflearn.com/public/courses/329913/cover/eee923cc-911b-4c2d-a445-9fddee8e5992/thumbnail-precamp.png?w=420)
![[PROKIT] Vibe Coding/Frontend Practice Workbook: Building a Timer AppCourse Thumbnail](https://cdn.inflearn.com/public/files/courses/339612/cover/01ke6d974hx4y1esmd9p80w7cx?w=420)
![Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]Course Thumbnail](https://cdn.inflearn.com/public/course-326181-cover/d012cab3-58e1-45cd-899e-03f86c7b1df1?w=420)
![Learn by Following Along Node, React Series - Building a Shopping Mall Site [Complete Renewal]Course Thumbnail](https://cdn.inflearn.com/public/courses/325240/course_cover/d5d7e9a9-2d6f-4a81-84da-5e9cde3f39a4/nodereactecommerce-eng.png?w=420)
![# [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?w=420)
![Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]Course Thumbnail](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?w=420)
