[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 :)
How to Get 100% Out of the Front-End Course (Course Materials, Quizzes, Portfolio)
08:31
▶ What are web and app services?
03:22
▶ Program Installation (VS Code, Extension)
07:54
▶ HTML is a set of agreed-upon 'commands'
11:31
▶ The Core of HTML
42:26
▶ Understanding Tech Stacks
06:15
▶ What is CSS?
03:38
▶ Basic CSS Usage
02:12
▶ Ways to Apply CSS
03:36
▶ What is a layout?
02:02
▶ The flow of CSS layout
05:02
▶ What is a variable?
13:34
▶ Variable Declaration and Data Assignment
06:42
▶ Variable Declaration Keywords
18:58
▶ String, Number
13:58
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! ⭐
📢 There are instructions.
This is an updated lecture of the high-concentration front-end course.
[The Perfect Front-End Course] has been newly opened.
👉🏻 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 witha 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 renderedin 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 :)
It's okay even if you're a complete beginner. 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
Complete your portfolio.
☝🏻 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-commercewebsite 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.
Plus, just one lecture 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!)
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
We provide boot camp course materials.
📑 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!
Students taking this course 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!
[Highly concentrated front-end course] 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
For a higher career jump
[Highly concentrated backend course] has also been prepared.
👉🏻 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🚀
for a moment!
Please check before taking the class.
💡 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.
if
Do you have any questions?
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 :)
Team Code Camp
Introducing.
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
"Try anything, Try everything!" 코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
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!😍
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!
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.
I am a student preparing to become a web front-end developer.
I listened to Inflearn Codecamp HTML, CSS, JavaScript, and even the front-end course, so I bought it together!!!!!
I am listening to the first part of the React lecture, and it is so much fun~~~!!!!!!!
There is no difficult part yet, but I am a little worried that it will get harder as I go on! But I plan to listen hard! First of all, I really like the Notion materialsㅠㅠㅠㅠㅠ I really like itㅠㅠㅠㅠㅠ
I guess I can just go back and repeat the parts I don't understand..?????ㅎㅎㅎ
Thank you!!!!!! Fighting! I will definitely finish the course and complete my portfolio. Fighting
I am a student who took an offline lecture from mentor Noh Won-du!
I have already recommended this lecture to many of my friends because it was a quality lecture that was too good to listen to alone,
but I am so happy to see you at Inflearnㅠㅠ I missed youㅠㅠ
I have taken other instructors' classes before, but most of them were theory-oriented without practical training, so I was at a loss when I actually tried to code..
On the other hand, mentor Noh Won-du teaches techniques used in practice in an easy-to-understand manner,
and the class was conducted so that after understanding the principles, you could implement them yourself, which made it possible to apply them right away in practice.
Even when I encountered techniques that were not covered in class, I was able to understand them by applying the principles I learned.
I was also able to learn the mindset that a developer should have through the advice he gave me during class.
I felt that the mentor truly enjoyed and loved development, so I also enjoyed studying development. ㅎㅎ
Mentor Noh Won-du is truly my mentor,,💕
As expected from the front-end industry that changes every day,🥲 I'm going to take the class because it seems like there are a lot of new technologies and content that I haven't learned yet!
I'll come back right away to listen to other classes when they openㅎㅎㅎ
![[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)
![The 'Perfect' Front-End Course Created at [Code Camp] BootcampCourse Thumbnail](https://cdn.inflearn.com/public/courses/335397/cover/133267ea-9728-4642-927e-74a76eaac4c3/335397.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)
![[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] 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)
![[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)Course Thumbnail](https://cdn.inflearn.com/public/courses/332907/cover/2975d3d7-5dcc-4e2a-977c-98b11134cfb6/332907.jpg?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)
![[2025] React Native App Development Masterclass for Non-majorsCourse Thumbnail](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?w=420)
