This is a full-stack series course aimed at developing web and app services at a commercially viable level for beginners, based on real-world experience developing web services in the field. As Part 2 of this series, this course thoroughly covers the latest HTML5, CSS3, and vanilla JavaScript + ES6, considering responsiveness and compatibility among the various frontend technologies available.
2,755 learners
Level Beginner
Course period Unlimited
Reviews from Early Learners
5.0
hanyn
It was good to be able to implement web technologies (slides, etc.) that I saw on actual sites. The path to studying front-end was daunting, but I think I got a feel for it through the lecture. It is a lecture that provides substantial lecture materials to the point where you can hardly feel the limitations of online lectures, and it is a lecture with a well-organized lecture structure and time allocation, so it is easy to concentrate and there is a lot to learn. I think it is a lecture that instills confidence and interest in studying front-end. I will continue to study development in the future using this lecture as a stepping stone and I want to become a developer like Janjaemi Coding someday! Thank you.
5.0
opert93
It was good to be able to learn the basics of the front-end. I think it would have been more helpful for me to build a solid foundation rather than directly deal with the framework of the front-end. Based on this, I will learn the latest frameworks such as React/Flutter. I am always grateful to the instructor.
5.0
jypark3152
The course is structured so that even if you don't know anything from the beginning, it's easy to understand because it explains everything from the basics step by step. The lecture length is not too long, so the time allocation is appropriate so that you won't get bored.
Building a Strong Foundation in Frontend Fundamentals the Easy Way
Responsive, cross-browser web service development
Detailed Modern HTML and CSS Features
VanillaJS (Javascript) with Compatibility Considerations
HTML/CSS/JS+ES6 Full Set for Developing Modern Commercial Services
This course is Part 2 of the Full-Stack lecture series, following the Python Backend (Part 1) course, designed to build a solid foundation in frontend fundamentals for full-stack development. It's a comprehensive course that thoroughly covers and teaches HTML5, CSS, and Javascript (VanillaJS, Vanilla JavaScript) + ES6 for developing commercially viable web services.
This is a special course created with maximum consideration for the learner's perspective, rather than a typical IT course. Starting from knowing nothing about the related technology, with various materials and diverse examples, this is a course where you solidly master the core technologies to the point where you can list them on your resume
This course has been verified by many people who have learned from it and provided positive feedback.
If any issues arise, it can be updated at any time in the future, just as it has been until now.
I can use HTML, CSS, and Javascript somewhat, but when I actually try to use them, it's difficult to handle them the way I want. Responsive design, compatibility, ES6, and numerous scattered syntax and technologies - frontend in particular is more difficult than you'd think unless you organize it well at least once.
Whether it's web or app, recent services require backend, frontend, and deployment technologies for implementation. This is called full-stack. If you become full-stack, you can create modern web services on your own and become a competitive developer.
To proceed with this most effectively and practically, you need to learn Python and backend technologies in Full-Stack Course Part 1, and build frontend fundamentals in Part 2. You need a solid foundation! This way, rather than just copying the web services shown in the course, you can truly become full-stack. This course covers HTML5, CSS, Javascript (Vanilla JavaScript, VanillaJS) + ES6 in detail so you can build a solid frontend foundation.
I've created the fastest and most up-to-date full-stack roadmap summarized in a YouTube video. By referring to this video, you can understand not only this technology but also a roadmap that will enable you to develop web/apps on your own in a short time.
I notice that the `
With countless grammar rules and features, the starting point of frontend development must begin with the keyword "organization."
I have organized all those numerous and diverse grammar rules and knowledge under the following conditions.
HTML tags are lightly organized focusing only on essential tags including semantic tags,
detailed CSS features are covered considering responsiveness and compatibility necessary for implementing plausible web pages,
as it's called VanillaJS (Vanilla JavaScript), recent trends don't use jQuery, so web pages are implemented with only JavaScript + ES6 syntax considering compatibility.
For each feature, we exclude the very latest syntax that can't be used due to compatibility issues and alternative technologies, focusing on core technologies.
Don't waste your time!
We don't fail because we lack information!
With a proven course, you can master it quickly!
The biggest bottleneck in full-stack development is CSS. People say that even middle school students know HTML and CSS.
However, unless you're a decent front-end developer, you can't create responsive, compatible, and presentable modern web pages.
You need to master countless detailed CSS features. HTML also needs to be organized once according to standards.
Also, while there is a profession called "publisher" in Korea, overseas, front-end or full-stack developers handle all of CSS as well.
To become a competitive front-end/full-stack developer, it is essential to master CSS features in detail.
These frameworks are written in Javascript to improve upon Javascript's shortcomings. Since you use Javascript when working with these frameworks, you need to have a solid grasp of Javascript's basic syntax regardless of which framework you use. You need to have a strong foundation in HTML, CSS, and Javascript basics covered in this course in order to learn frameworks like React and Vue based on that foundation.
That's why this course focuses on frontend fundamentals. To build a solid foundation, this course thoroughly covers and practices all the essential technologies you need.
This course focuses on frontend fundamentals. To build a solid foundation, this course thoroughly covers and practices the essential technologies you need.
This is a lecture that explains in detail step by step so that even beginners can take it.
The most difficult lecture in IT education is teaching programming to those who have no knowledge of programming at all. Even these people have learned not only programming but also web scraping skills through my Python Introduction and Web Scraping Basics Bootcamp lecture. If you are reasonable and considerate of others, it is definitely possible.
If you want to quickly cover only frontend technologies, you can take just this lecture. However, if you are a complete beginner who has never dealt with programming before, I recommend learning step by step through the roadmap with the Python Introduction and Web Scraping Bootcamp lecture along with the full-stack lecture. You will be able to build the necessary skills more gradually.
So that even beginners can understand
Based on materials that are concise yet meticulously written,
you can test on your own during the lecture
and immediately work with sample code for each feature and testing
• Sample code for each function is provided as a project, and actual webpage code files are provided.
• Course materials are provided online for you to access anytime. (However, copying and downloading are restricted due to copyright issues.)
I notice that the `
I am creating lectures that gradually increase in difficulty from beginner level all the way to becoming a full-stack developer, in a detailed and systematic way. To help you understand the relevant syntax and knowledge, I provide concise code with thorough explanations, and when needed, I explain the computer science concepts as well, so you can build a strong foundation to become a good developer.
This course is Part 2 of the full-stack course series, and within this course, we select a specific webpage for developing the following service. Without using any frameworks or libraries, we start from a blank file and work together stitch by stitch to complete the code using HTML, CSS, Javascript + ES6.
A lecture crafted with care so you can feel,
'Ah! This is truly different!'
Just follow along, and you'll be all set!
Developer, Data Analyst, and Data Scientist Career Roadmap!
From web/app development to data analysis and AI, we provide an A to Z roadmap to build a solid foundation in a short time. IT technologies are closely interconnected, and integrating them is essential for web/app services and data science. By gradually increasing difficulty and mastering core technologies, you can learn efficiently, understand systems and data comprehensively, and grow into a competitive developer or data professional. To achieve this, we've prepared a roadmap that systematically organizes the core technologies of each field.
We've created a video that explains this roadmap, data-related careers, and the entire data analysis/science process in detail. By referring to this video, you can easily learn the data process without trial and error in a short time, even on your own!
Wait! ✋
Click on the roadmap below to see more details. If you purchase the roadmap all at once, it will be offered at a discounted price! (The discount rate will be reduced soon.)
I've created a video that explains in detail how to learn and implement web/app development the fastest way on your own using this roadmap. By referring to this video, you can implement web/apps in a short time without trial and error.
Wait! ✋
Click on the roadmap below to see more details. If you purchase the roadmap all at once, it will be offered at a discounted price! (The discount rate will be reduced soon.)
This roadmap is a course that systematically organizes essential Computer Science (CS) knowledge, which is the core IT theory that forms the foundation of development and data fields. Among these, we are opening lectures where you can systematically learn the most important core subjects, especially computer architecture, operating systems, and networks.
Who is this course right for?
Part 2 Lecture for Full Stack Development
For those who want to build a strong foundation in frontend fundamentals
Those who want to develop a web service that can be commercialized at the latest level
For those who need to organize various frontend technologies such as responsive design, compatibility, etc.
Introduction to Frontend
Need to know before starting?
If possible, I highly recommend taking this course alongside the Full Stack Part 1 course.
33,511
Learners
2,459
Reviews
1,949
Answers
4.9
Rating
13
Courses
Janjemi Coding, Dave Lee
Key Experience: Senior Engineering Manager/Principal Product Manager at Coupang, Engineering Manager at Samsung Electronics (approx. 15 years of experience)
Education: BA in Japanese Language and Literature from Korea University / MS in Computer Science from Yonsei University (A total mix)
Key Development History: Samsung Pay, E-commerce search services, RTOS compiler, Linux Kernel Patch for NAS
Books: Linux Kernel Programming, Understanding and Developing Linux Operating Systems, IT Core Technologies for Everyone to Read and Understand, Python Programming Primer for Absolute Beginners
Official Website: Fun-Coding (http://www.fun-coding.org) [Click]
This site shares free resources related to full-stack development, data science, and AI.
Others: Fun-Coding YouTube Channel [Click]
I'm starting to share tips and short free lectures little by little to help with IT learning!
For eight years, I have been consistently creating solid full-stack, data science, and AI courses while balancing my work in the industry with teaching IT.
I am gradually starting to share my lectures. Balancing my current industry experience with teaching, I have been consistently creating solid full-stack, data science, and AI courses for 8 years.
All
79 lectures ∙ (17hr 37min)
Course Materials:
All
181 reviews
4.9
181 reviews
Reviews 13
∙
Average Rating 4.9
5
Hello. I am interested in web-related development, so I took lectures here and there and settled on Janjaemi Coding's lecture. Since web-related technologies have many related fields and there are many things to learn, there were too many things to do to do properly, so I had a hard time taking lectures here and there because I was impatient. The part that I especially liked while taking the lecture was that it helped me to find the center of full-stack, such as how I can use what I learned and what I need to learn when I move on to the next step. If Part 1 focused a little more on server-side technologies, Part 2 was good because I could learn various technologies on the UI side. Some people might be disappointed because it is not fancy, but I think that fancy technologies can be learned quickly if you have a good grasp of the basics. It was also good that it explained HTML/CSS in depth enough, so I didn't have to use various tricks or frameworks to cover up parts that I couldn't implement with CSS with JavaScript. Since web technologies are diverse, I think there are often cases where I cover up weak parts with other technologies or frameworks, but I liked that there were explanations and practical exercises that focused on the basics. JavaScript also explained the necessary parts concisely, which helped me understand. Of course, I personally need to study more, but it was helpful because it was connected to the practice. The practice implemented in the lecture was small, so I may not have much experience like a current worker, but it was good because I could get ideas and implementation methods for basic functions. I also look forward to Vue, which is scheduled to open in the first half of the year. If you make a lecture that compares how parts implemented in vanilla JS can be implemented more easily using Vue, it will be very helpful for beginners like me to learn. I hope you will reflect it. ^^ For reference, from my personal experience, I recommend taking the Python basics course, then Part 1 and Part 2 in that order. After that, if you want to add functions such as crawling or data analysis to the web server, it would be good to take the relevant courses.
Thank you for your good review. This course is about creating a modern web page that looks good from the ground up, so it is different from courses that follow a fancy UI with one or two lines of code that have already been created. Those techniques can be used later when needed, but they are not used in the field. Especially when creating a large-scale web page. In order to create it perfectly, you have to build up the basics by creating it step by step, and I hope that this part was helpful. There are so many IT-related information, lectures, and advertisements, so there are many lectures that say, “Just type in the code and you’ll get this fancy thing?” I’ve taken those lectures before, and they didn’t leave anything to me. So I remember learning everything separately for a long time. I hope this learning method is much better and a shortcut to becoming a capable developer.
Reviews 19
∙
Average Rating 5.0
5
I only looked at the first part of CSS and HTML, but it is more detailed and detailed than what is actually applied in practice, and it explains in various ways. In addition, the quality of the lecture materials that the instructor uses in class is really good. These days, since spa libraries or frameworks are used in practice, it is important to know how to manipulate UI using pure JavaScript rather than jQuery, and this lecture is strong in this respect as well. I won't say more. I think this lecture is a great deal for this price. Take this lecture instead of other clone coding lectures.
Thank you for leaving such a great review. When I was learning this part in the past, I was tired because I wondered why there were so many detailed functions, but I had to learn them, so I organized them one by one. This is the part where I made the lectures in the way I learned them in order to become a full-stack. If you can't remember the detailed functions, go to the Google Drive folder I provided and search at the top. Then, since you have taken the lecture, you will be able to see the materials with related keywords right away. Then, you can implement them much faster. I will film this part on YouTube later and share it separately. Thank you.
Reviews 2
∙
Average Rating 5.0
5
I was trying to do a project after listening to another instructor's front-end lecture, but I was at a loss, so I watched Instructor Janjaemi's lecture on my friend's recommendation. He taught slowly from the basics, so I understood everything without missing anything. As a result, I was able to finish the project that I had been at a loss about, and thanks to that, I gained confidence. If you're still having trouble, I highly recommend listening to it!! Thank you so much, instructor~!
Wow, I'm so happy. Confidence is really important. Well, it may not be perfect, but I think I can do it now, and if I keep doing this, I think I can do it well! If you felt this, you've really taken a big step. Congratulations, and I'm so happy that it helped you. Haha
Reviews 7
∙
Average Rating 5.0
5
I listened well! I'm currently preparing for a job as a front-end developer, and this was very helpful. Now I have to study hard to make it mine..ㅎ I'm looking forward to the next lecture!!
That's right. I think it would be helpful to practice making it your own, and also to listen to lectures from other instructors, such as Clone Coding, regarding the front-end. !!!!
$68.20
Check out other courses by the instructor!
Explore other courses in the same field!
![[Renewed] Python Data Analysis for Beginners (Easy! Learn the entire process of preprocessing, pandas, and visualization) [Data Analysis/Science Part1]講義サムネイル](https://cdn.inflearn.com/public/course-325576-cover/75d85753-8e0b-40f3-9f11-ca43e70c5200?f=avif&w=420)
![[Renewal] First-time SQL and Database (MySQL) Bootcamp [From Beginner to Application]講義サムネイル](https://cdn.inflearn.com/public/courses/324208/cover/85872a8e-d2bb-4c43-82fc-d55fa067746e/324208.png?f=avif&w=420)
![[Renewed] Python Machine Learning Bootcamp for Beginners (Easy! Learn by Solving Real Kaggle Problems) [Data Analysis/Science Part2]講義サムネイル](https://cdn.inflearn.com/public/courses/327464/cover/55c4db7b-7764-43cc-ac75-d9e8d08098f1/327464-eng.png?f=avif&w=420)
![Deep Learning and PyTorch Bootcamp for Beginners (Easy! From Basics to ChatGPT's Core Transformer) [Data Analysis/Science Part 3]講義サムネイル](https://cdn.inflearn.com/public/courses/329540/cover/1be7b8cb-800f-48cb-a30c-b7d78996c075/329540-eng.png?f=avif&w=420)
![[Renewal] Python Introduction and Web Crawling Basics Bootcamp [Python, Web, and Data Understanding Fundamentals] (Updated)講義サムネイル](https://cdn.inflearn.com/public/courses/324082/cover/57af93de-1021-40b4-80d7-a0dfc17190cf/324082.png?f=avif&w=420)
![Docker and Modern Server Technologies for Full Stack (Linux, nginx, AWS, HTTPS, Deployment) [Full Stack Part3]講義サムネイル](https://cdn.inflearn.com/public/courses/326771/cover/bc862b4d-abe6-4d80-a826-3a5324a9f998/326771-eng.png?f=avif&w=420)
![Introduction to Python Backend with FastAPI for Beginners (From FastAPI to Asynchronous SQLAlchemy) [Full Stack Part1-2]講義サムネイル](https://cdn.inflearn.com/public/courses/333248/cover/7323d828-100e-4ac9-8e6e-0e51a17ac741/333248.png?f=avif&w=420)
![Flutter for Beginners: From Basics to Practice [Full Stack Part 4] (Easy and Solid Step-by-Step with Various Projects)講義サムネイル](https://cdn.inflearn.com/public/courses/331245/cover/1f8c5bb8-8aad-4542-b3bc-977cda51c846/331245.png?f=avif&w=420)
![[Renewed] Introduction to Python Backend and Web Technologies for Beginners (Intermediate Python, Understanding Backend and Web Technology Basics with Flask) [Full Stack Part1-1]講義サムネイル](https://cdn.inflearn.com/public/course-325804-cover/6afae82f-e06b-4a0b-914d-2bdf7b1f5b60?f=avif&w=420)
![[Renewed] MongoDB and NoSQL (Big Data) Database Bootcamp for Beginners [From Introduction to Application] (Updated)講義サムネイル](https://cdn.inflearn.com/public/courses/324183/cover/fbe9f0cc-4c42-4435-b855-f283f6932415/324183.png?f=avif&w=420)
.png?f=avif&w=420)
![Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]講義サムネイル](https://cdn.inflearn.com/public/files/courses/335967/cover/01jqhgartxsvcyf89xymx5wh9f?f=avif&w=420)
![Modern Web Interactive CSS3 Bootcamp [Full vers.]講義サムネイル](https://cdn.inflearn.com/public/courses/334857/cover/4ccc6c75-74aa-4aba-b3d9-8aabe36e9452/334857.jpg?f=avif&w=420)
![Modern Web Interactive CSS3 [PART2/3]講義サムネイル](https://cdn.inflearn.com/public/courses/335745/cover/db39333d-68a5-4ca7-9629-dac891711a94/335745.jpg?f=avif&w=420)
![[Code Camp] Highly concentrated backend course created at boot camp講義サムネイル](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?f=avif&w=420)
![[2026 Examination Standards] Web Design Development Technical Qualification Practical Exam Complete Guide講義サムネイル](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
