[Code Camp] A highly concentrated front-end course created at Bootcamp
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 :)
This course is prepared for Beginners.
What you will learn!
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! ⭐
👉🏻 New Frontend Course:
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.
Made in a 'real' bootcamp
[Highly concentrated front-end course]
✅ 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
For these people
It's a perfect fit
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.
Why do we
Should I use React and Next.js?
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 :)
Should we start from the basics first?
"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.
Not missing a single gap
Front-end curriculum that 'crosses the line'
#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.
With code filled by my own hands
☝🏻 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.
Get this much stack at once!
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 :)
For a higher career jump
📑 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!
Introducing a service we created ourselves.
🎨 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!
After taking the course, I too can become a developer!
🙆🏻♀️ 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
👉🏻 Related recommended lectures:
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 :)
Recommended for
these people!
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 💪🏻
Hello
This is codebootcamp
Students
12,601
Reviews
334
Rating
4.8
Courses
8
"Try anything, Try everything!"
코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
Co-instructor
Curriculum
All
341 lectures ∙ (128hr 6min)
Lecture introduction
04:56
Preferences
09:25
▶ The core of HTML
42:26
▶ Learn CSS
25:29
▶ CSS Alignment
20:44
▶ Array
24:31
▶ Object
20:41
▶ Loop
22:19
▶ Math Objects
06:44
▶ DOM
10:42
▶ Function
09:14
▶ Built-in functions
24:09
▶ final assignment
07:56
▶ Git/Github
22:02
▶ What is CSS?
03:38
▶ CSS Basic Usage
02:12
▶ How to apply CSS
03:36
▶ Selector 1
05:18
▶ Font basic style
16:42
▶ Box model
24:12
▶ inline vs block
12:26
▶ Practice 1
48:17
▶ What is layout?
02:02
▶ Selector 2
07:22
▶ Flow of css layout
05:02
▶ float layout
52:47
▶ flex layout
23:20
▶ Practice 2
17:14
▶ Selector 3
33:22
▶ flex layout 2
11:19
▶ Practice 3
08:35
▶ css inheritance
11:23
▶ Web Font
15:29
▶ Font
26:31
▶ Unit
06:59
▶ Cascading
16:33
▶ Background
17:39
▶ Color
04:28
▶ Unit 2
03:00
▶ Unit In-Depth
31:15
▶ position
24:45
▶ transition
10:35
▶ transform
17:57
▶ keyframes
02:34
▶ animation
09:29
▶ Animation practice
42:20
▶ grid layout
05:24
▶ grid property
18:39
▶ Media query
13:10
▶ breakPoint
12:06
▶ Responsive Practice
01:00:30