A Solid Front-End Bootcamp for Full-Stack Developers (HTML, CSS, Vanilla JavaScript + ES6) [Full-Stack Part 2]
A full-stack series course aimed at beginners, based on real-world experience developing actual web services, with the goal of building web and app services to a level suitable for actual commercialization. As Part 2 of this series, this course thoroughly covers the latest HTML5, CSS3, and Vanilla JavaScript (Javascript) + ES6, including responsiveness and compatibility, among the many available frontend technologies.
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
100% enrolled
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
100% enrolled
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.
What you will gain after the course
Build a strong foundation in frontend development with ease
Development of responsive, cross-browser web services
Detailed Modern HTML and CSS Features
VanillaJS (Javascript) with compatibility in mind
A complete HTML/CSS/JS+ES6 package for developing the latest commercial services
The official course chosen for in-house training by top tech companies! Build a solid foundation in frontend web technologies as a beginner with a high-quality course series (Full-Stack Part 2)
This course is Part 2 of the Full-Stack course series. Following the Python backend (Part 1) course, it teaches you the solid frontend fundamentals needed for full-stack development. It provides a detailed overview of and hands-on learning in HTML5, CSS, JavaScript (Vanilla JS) + ES6 for developing web services that can be deployed commercially.
This is a special course created by considering the learner’s perspective as much as possible, rather than following the format of a typical IT course. Starting from no prior knowledge of the relevant technologies with a variety of materials and examples, this course helps you solidly master the core skills to the point where you can list the relevant technologies on your resume.
This course has been proven effective, with many people having learned from it and shared positive feedback. If any issues arise, it may continue to be updated periodically, just as it is now.
Want to build a solid foundation in front-end development?
프론트엔드 기본 기술을 탄탄히 정리해야 합니다. 프론트엔드 기본은 HTML, CSS, Javascript 입니다. React 를 익히더라도, 프론트엔드 기본이 필요합니다. 탄탄한 프론트엔드 기본기가 핵심입니다. 꼼꼼하게 잘 쌓은 기본기 위에, React 든 Flutter 든 익히면 프론트엔드를 원하는대로 만들 수 있습니다. 여기에 최신 웹페이지는 반응형, 호환성등 정리해야할 배경지식과 관련 지식이 있고, 오래전 기술인 Jquery 를 깔끔한 Javascript 로 대체해야 합니다.
This course thoroughly covers HTML, CSS, JavaScript, responsive design, compatibility, ES6, and more all the scattered frontend fundamentals you absolutely need to know!
I have a rough understanding, but I feel like I haven't organized it properly
You may have a rough idea of how to use HTML, CSS, and JavaScript, but when you actually try using them, it can be difficult to handle them the way you want. There are countless scattered syntaxes and technologies, such as responsive design, compatibility, and ES6. Front-end development in particular is more difficult than you might expect unless you take the time to organize and understand it properly.
I heard that once you become a full-stack developer, you can build web services on your own...
Whether it’s the web or an app, recent services require backend, frontend, and deployment technologies to be built. This is what we call full-stack development. By becoming a full-stack developer, you can build modern web services on your own and become a competitive developer as well.
To develop these skills in the most effective and practical way, you should learn Python and backend technologies in Full-Stack Course Part 1, then build a foundation in frontend development in Part 2.You need to have a solid foundation! Only then can you truly become a full-stack developer, rather than simply copying the web services created in the lectures. This course covers HTML5, CSS, and JavaScript (vanilla JavaScript, VanillaJS) + ES6 in detail so that you can build a strong foundation in frontend development.
We created a YouTube video summarizing the fastest and most up-to-date full-stack roadmap. By referring to the video, you can understand a roadmap for developing web and mobile apps on your own in a short time, going beyond this technology.
Created this for a solid and practical foundation in frontend development.
With countless syntax rules and features, the starting point for front-end development should be organizing and consolidating your knowledge. I have organized the many diverse syntax rules and concepts according to the following criteria.
We cover all the background knowledge needed for modern website development
Thoroughly covering the CSS essential for creating polished web pages
We do not cover jQuery, which is not used in modern web pages
We cover everything using standard Vanilla JavaScript + ES6 instead
support responsiveness
We also consider compatibility
We organize HTML tags around only the essential ones, including semantic tags, and cover detailed CSS features while taking into account responsiveness and compatibility, which are essential for implementing a convincing web page. As the name VanillaJS (vanilla JavaScript) suggests, current trends no longer use jQuery, so we implement web pages using only JavaScript + ES6 syntax that takes compatibility into consideration. For each feature, we exclude cutting-edge syntax that cannot be used due to compatibility issues, as well as technologies that can be replaced, and focus on the core technologies.
<center style="color:#000000;font-size:medium;font-weight:400"><div style="width:80%;padding:0.5rem;text-align:center"><p style="color:#2186c4;font-weight:bold;font-size:1.2rem;text-align:center;margin:0px;line-height:158%">시간을 낭비하지 마세요!<br />우리는 정보가 없어서 못하는 것이 아닙니다!<br />검증된 강의로 익히면, 빠르게 정리할 수 있습니다!</p></div></center>
Isn't it enough to learn only JavaScript?
The biggest bottleneck in full-stack development is CSS. People say that even middle school students know HTML and CSS. However, unless you are a fairly capable front-end developer, you cannot create responsive, compatible, and convincing modern web pages. You need to organize countless detailed CSS features. HTML also needs to be reviewed once to ensure it conforms to standards. There is also a job called a web publisher in Korea, but overseas, front-end or full-stack developers handle everything, including CSS. To become a competitive front-end/full-stack developer, it is essential to thoroughly learn and organize CSS features.
Don't you need to learn React and Vue to build web services?
These frameworks are written in JavaScript to address some of JavaScript’s shortcomings. Since you use JavaScript even when working with these frameworks, you should thoroughly learn the basic syntax of JavaScript, regardless of which framework you choose. You need a solid foundation in the HTML, CSS, and JavaScript covered in this course before you can learn frameworks such as React and Vue. That’s why this course focuses on the fundamentals of front-end development. To help you build a strong foundation, we comprehensively cover and practice all the essential related technologies.
Can even beginners do it?
This course provides detailed, step-by-step explanations so that beginners can follow along. The most difficult type of IT course is one that teaches programming to people who know nothing about programming at all. Even these learners have mastered not only programming but also web scraping through my Python for Beginners and Web Scraping Basics Bootcamp course. If you are reasonable and considerate of others, it is entirely possible.
If you simply want to quickly get up to speed on frontend technologies, you can take this course on its own. However, if you are a complete beginner who has never worked with programming before, I recommend learning step by step through the roadmap by taking the full-stack course along with the Python for Beginners and Web Scraping Bootcamp course. This will allow you to steadily build the skills you need.
So that even beginners can understand Using concise yet meticulously written materials, you can test things out yourselves during the lecture and immediately run tests with feature-specific sample code
• We provide sample code for each feature as projects, along with code files for real-world web pages. • The course materials are available online for you to access at any time. (However, copying and downloading are restricted due to copyright concerns.)
Can you learn it systematically?
We are creating this course so that you can start as a beginner and gradually increase the difficulty as you learn the entire process of becoming a full-stack developer in a detailed and systematic way. To help you understand the relevant syntax and concepts, we provide concise code and sufficient explanations, while also covering computer science concepts whenever necessary, allowing you to build the fundamentals needed to become a good developer.
This course is Part 2 of the complete full-stack course series. In this course, you will select a specific webpage for developing the following service and work together from a blank file all the way to completing the code step by step using HTML, CSS, and JavaScript + ES6, without using any frameworks or libraries.
<center><div style="width:80%;padding:0.5rem;text-align:center;margin-top:2rem;margin-bottom:2rem"><p style="color:#ba372a;font-weight:bold;line-height:158%;font-size:1.1rem;text-align:center"><span style="font-size:1.1rem;background-color:#ffffff;font-family:'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica">'아! 진짜 다르구나!' 라고 느낄 수 있도록 <br />고민해서 만드는 강의입니다<br />그대로만 따라오시면, 됩니다!<br /></span></p></div></center>
Learn systematically Dave Lee's Fun Coding Roadmap 🔑
Career roadmap for developers, data analysts, and data scientists!
From web/app development to data analysis and AI, we provide an A-to-Z roadmap for building a solid foundation in a short time. IT technologies are closely interconnected, and integrating them is essential for developing web/app services or pursuing data science. By gradually increasing the difficulty and learning core technologies, you can study efficiently, understand systems and data as a whole, and grow into a competitive developer or data professional. To help you achieve this, we have prepared a roadmap that systematically organizes the core technologies in each field.
1. The Fastest Roadmap for the Entire Data Journey
We created a video that provides a detailed explanation of this roadmap, data-related careers, and the entire data analysis/science process. By referring to the video, even on your own in a short time, you can easily learn the data process without trial and error!
Wait! ✋ Click the roadmap below to view more details. If you purchase the roadmaps together, they are available at a discounted price! (The discount rate will soon be reduced.)
add_shortcode('roadmap','66','roadmap','1')
2. The Fastest Full-Stack Roadmap
We created a video that explains in detail how to learn and build web/apps on your own as quickly as possible using this roadmap. By referring to this video, you can build web/apps in a short time without trial and error.
Wait! ✋ Click the roadmap below to see more detailed information. If you purchase the roadmaps together, they are available at a discounted price! (The discount rate will soon be reduced.)
add_shortcode('roadmap','49','roadmap','2')
3. Essential computer science (CS) knowledge for development and data fields
This roadmap is a systematic course covering the essential computer science (CS) knowledge that forms the foundation of the development and data fields. In particular, we offer courses that enable you to systematically learn the most important core subjects, such as computer architecture, operating systems, and networks.
add_shortcode('course','337332','list')
Recommended for these people
Who is this course right for?
Part 2 Course for Full-Stack Development
Those who want to build a strong foundation in frontend development
Those who want to develop a web service that can be commercialized immediately.
For those who need an overview of various front-end technologies, including responsiveness and compatibility.
Introduction to Frontend Development
Need to know before starting?
If possible, I highly recommend taking this course alongside the Full-Stack Part 1 course.
Key Experience: Coupang Senior Development Manager/Principal Product Manager, Samsung Electronics Development Manager (Approx. 15 years of experience)
Education: BA in Japanese Language and Literature, Korea University / MS in Computer Science, Yonsei University (A complete mix)
Key Development Experience: Samsung Pay, E-commerce Search Service, RTOS Compiler, Linux Kernel Patch for NAS
Books: Linux Kernel Programming, Understanding and Developing the Linux Operating System, IT Core Technologies That Anyone Can Easily Read and Understand, Python Programming Primer for Absolute Beginners
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. !!!!
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.
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.
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