강의

멘토링

로드맵

Inflearn brand logo image
BEST
개발 · 프로그래밍

/

풀스택

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

(4.9) 수강평 174개

수강생 2,716명

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 쉽고 견고하게 프런트엔드 기본기 쌓기

  • 반응형, 크로스 브라우징 웹서비스 개발

  • 상세한 모던 HTML 과 CSS 기능

  • 호환성까지 고려한 VanillaJS (Javascript)

  • 최신 상용화 서비스 개발을 위한 HTML/CSS/JS+ES6 풀세트

네카라쿠배도 사내 강의로 선택하는 공식 강의! 
입문자를 위한 프런트엔드 웹기술 기본기를 다져줄 
완성도 높은 강의 시리즈 (풀스택 Part2)

본 강의는 풀스택 강의 시리즈 Part2 강의로 파이썬 백엔드 (Part1) 강의에 이어서, 풀스택을 위한 탄탄한 프론트엔드 기본을 익히는 강의입니다. 상용화도 가능한 웹서비스 개발을 위한 HTML5, CSS, Javascript (VanillaJS, 바닐라 자바스크립트) + ES6 을 상세히 정리하고 익히는 강의입니다.

일반적인 IT 강의보다는 최대한 수강자 입장을 고민해서 만든 특별한 강의입니다. 다양한 자료, 다양한 예제로 관련 기술을 모른 상태부터 시작해서, 관련 기술을 내 이력서에 기재할 수 있을 정도로 핵심적인 기술을 견고하게 익히는 강의입니다

본 강의는 지금까지 많은 분들께서 익히고, 좋은 의견을 주고 계신 검증된 강의입니다.
혹시라도 이슈가 있으면, 지금처럼 이후에도 수시로 업데이트될 수 있습니다.

프론트엔드 기본기를 제대로 쌓고자 한다면?
프론트엔드 기본 기술을 탄탄히 정리해야 합니다. 프론트엔드 기본은 HTML, CSS, Javascript 입니다. React 를 익히더라도, 프론트엔드 기본이 필요합니다. 탄탄한 프론트엔드 기본기가 핵심입니다. 꼼꼼하게 잘 쌓은 기본기 위에, React 든 Flutter 든 익히면 프론트엔드를 원하는대로 만들 수 있습니다. 여기에 최신 웹페이지는 반응형, 호환성등 정리해야할 배경지식과 관련 지식이 있고, 오래전 기술인 Jquery 를 깔끔한 Javascript 로 대체해야 합니다.

본 강의는 HTML, CSS, Javascript, 반응형, 호환성, ES6 등

꼭 알아야 할 흩어진 프론트엔드 기본 기술을 꼼꼼히 다룹니다!
대충 알고는 있는데 정리가 안되는 것 같아요

HTML, CSS, Javascript 대충은 쓸 것 같은데, 실제로 써보면 원하는대로 다루기 어렵습니다. 반응형, 호환성, ES6 등 흩어져 있는 수많은 문법과 기술, 특히나 프론트엔드는 한번 잘 정리하지 않고서는 생각보다 어렵습니다.

풀스택이 되면 웹서비스를 혼자서도 만들 수 있다던데...

웹이든 앱이든 최근 서비스는 구현을 위해, 백엔드, 프론트엔드, 배포 기술이 필요합니다. 이를 풀스택이라고 합니다. 풀스택이 되면 혼자서도 최신 웹서비스를 만들 수 있고, 경쟁력 있는 개발자도 되실 수 있습니다.

이를 가장 효과적으로 실질적으로 진행하려면, 풀스택 강의 Part1 에서 파이썬과 백엔드 기술을 익히고, Part2 에서 프런트엔드 기본기를 닦아야 합니다. 기본기가 잘 갖춰져야! 단순히 강의에서 나온 웹서비스를 그대로 따라 치는 것이 아니라, 제대로 풀스택이 될 수 있습니다. 본 강의는 프런트엔드 기본기를 탄탄히 갖출 수 있도록, HTML5, CSS, Javascript (바닐라 자바스크립트, VanillaJS) + ES6 를 상세히 다릅니다.

전체 가장 빠른 최신 풀스택 로드맵을 유투브 영상으로 요약하여 만들었습니다. 해당 영상을 참고하시면, 본 기술을 넘어서, 혼자서도 짧은 시간에 웹/앱 개발을 할 수 있는 로드맵도 이해하실 수 있습니다.

 

탄탄하고 실질적인 프런트엔드 기본기를 위해 만들었습니다.

수없이 많은 문법과 기능들로, 프런트엔드의 출발은 정리라는 키워드부터 시작해야 합니다.
그 많고 다양한 문법과 지식을 다음과 같은 조건 하에 정리하였습니다.

  • 최신 웹사이트 개발을 위한 배경지식은 싹 정리하고
  • 그럴듯한 웹페이지를 위해 꼭 필요한 CSS 를 꼼꼼히 정리하고
  • 최신 웹페이지에서는 쓰지 않는 Jquery 는 다루지 않고
  • 모두 표준 Vanila Javascript + ES6 로 대체해 다루고
  • 반응형을 지원하고
  • 호환성까지 고려합니다

HTML 태그는 가볍게 시멘틱 태그까지 꼭 필요한 태그만을 중심으로 정리하고, 
그럴듯한 웹페이지 구현에 꼭 필요한 반응형, 호환성까지 고려해 상세한 CSS 기능을 다루고, 
VanillaJS (바닐라 자바스크립트) 라고 불리우 듯이, 최근 트렌드는 jQuery 를 사용하지 않으므로, 호환성까지 고려한 Javascript + ES6 문법만으로 웹페이지를 구현합니다. 
각 기능별로, 호환성 이슈로 쓸 수 없는 극최신 문법, 대체 가능한 기술은 제외하고, 핵심 기술에 집중합니다.

시간을 낭비하지 마세요!
우리는 정보가 없어서 못하는 것이 아닙니다!
검증된 강의로 익히면, 빠르게 정리할 수 있습니다!

Javascript만 배우면 되지 않나요?

풀스택 개발에 있어 가장 큰 병목점은 CSS입니다. HTML, CSS는 중학생도 안다고 이야기합니다.
그러나 웬만한 프런트엔드 개발자가 아니고서는 반응형, 호환성 그리고 그럴듯한 최신 웹페이지를 만들 수는 없습니다.
수없이 많은 세부적인 CSS 기능을 정리해야 합니다. HTML도 표준에 맞춰서 한번은 정리해야 합니다.
또 국내에는 퍼블리셔라는 직업이 있지만, 국외에는 프런트엔드 또는 풀스택 개발자가 CSS까지 모두 다룹니다.
경쟁력 있는 프런트엔드/풀스택 개발자가 되기 위해, 상세히 CSS 기능을 정리하는 것은 필수입니다.

 
React, Vue를 익혀야 웹서비스를 만들 수 있지 않나요?

해당 프레임워크는 Javascript의 아쉬운 점을 개선해서, Javascript로 작성된 프레임워크입니다. 해당 프레임워크들을 쓸 때에도 Javascript를 쓰기 때문에, 어떤 프레임워크라도 Javascript 기본 문법을 잘 정리해서 익혀놓아야 합니다. 본 강의에서 다루는 HTML, CSS, Javascript 기본기가 잘 갖춰져야 이를 기반으로 React, Vue 등의 프레임워크를 익힐 수 있습니다.
그래서 본 강의는 프런트엔드 기본기에 집중하는 강의입니다. 본 강의는 탄탄한 기본기를 쌓기 위해, 관련 기술중 꼭 필요한 기술을 싹 정리하고 연습합니다. 

 

입문자도 할 수 있을까요?

입문자도 들으실 수 있도록, 상세히 차근차근 설명드리는 강의입니다.
IT강의에서 가장 어려운 강의는 프로그래밍을 전혀 모르는 분들께 프로그래밍을 가르치는 것입니다. 이런 분들도 제가 오픈한 파이썬입문과 크롤링기초 부트캠프 강의를 통해 프로그래밍뿐만 아니라 크롤링 기술을 익히셨습니다. 합리적이고 서로 배려할 수 있는 분들이라면, 충분히 가능합니다.

프런트엔드 기술만 빨리 정리하고 싶으시다면, 본 강의만을 수강하셔도 좋습니다. 다만, 프로그래밍을 한번도 다뤄보지 않은 완전 입문자시라면, 파이썬입문과 크롤링 부트캠프 강의와 함께 풀스택 강의를 로드맵을 통해, 차근차근 익혀보시기를 추천드립니다. 보다 차근차근 필요한 역량을 쌓으실 수 있습니다.

입문자도 이해할 수 있도록
간결하면서도, 꼼꼼히 작성된 자료를 기반으로,
강의 중, 각자 테스트도 해볼 수 있도록
기능별 샘플코드와 테스트까지 바로 하실 수 있습니다

• 각 기능별 샘플코드를 프로젝트로 작성하여 제공해드리며, 실전 웹페이지 코드파일을 제공해드립니다.
• 강의 자료는 온라인에서 언제든 확인하실 수 있도록 제공해드립니다. (단, 복사 및 다운로드는 저작권 이슈로 제한하였습니다.)

 

체계적으로 익힐 수 있을까요?

입문자에서 시작해서, 풀스택이 되기까지 전 과정을 조금씩 난이도를 높여가며, 상세하고, 체계적으로 익힐 수 있도록 강의를 만들고 있습니다. 해당 문법과 지식 이해를 돕기 위해, 간결한 코드와 충분한 설명을 하되, 이해가 필요한 부분은 그때그때 컴퓨터 공학까지 설명드려서, 좋은 개발자가 될 수 있는 기본기를 닦으실 수 있습니다.

본 강의는 전체 풀스택 강의 시리즈 Part2로, 본 강의 안에서는 다음 서비스 개발을 위한 특정 웹페이지를 선택하여 어떤 프레임워크와 라이브러리도 쓰지 않고, 빈 파일부터 시작하여 HTML, CSS, Javascript + ES6 를 사용해서 한땀한땀 코드 완성까지 함께 해봅니다.

'아! 진짜 다르구나!' 라고 느낄 수 있도록
고민해서 만드는 강의입니다
그대로만 따라오시면, 됩니다!


체계적으로 익히는
잔재미코딩 Dave Lee 의 로드맵 🔑

개발자, 데이터 분석가 및 데이터 과학자 커리어 로드맵!

웹/앱 개발부터 데이터 분석과 AI까지, 짧은 시간에 탄탄한 기본기를 쌓을 수 있는 A to Z 로드맵을 제공합니다. IT 기술은 서로 긴밀하게 연계되어 있어 이를 통합해야 웹/앱 서비스나 데이터 과학이 가능합니다. 난이도를 단계적으로 높이며 핵심 기술을 익히면, 효율적으로 학습하고 시스템과 데이터 전반을 이해하여 경쟁력 있는 개발자나 데이터 전문가로 성장할 수 있습니다. 이를 위해 각 분야의 핵심 기술을 체계적으로 정리한 로드맵을 준비했습니다.

1. 가장 빠른 데이터 전과정 로드맵

본 로드맵과 데이터 관련 커리어와 데이터 분석/과학 전과정에 대해 상세히 설명한 영상을 만들었습니다. 해당 영상을 참고하시면, 혼자서도 짧은 시간에 시행착오 없이 데이터 과정을 쉽게 익히실 수 있습니다!

잠깐! ✋
아래 로드맵을 클릭하시면 더욱 자세한 내용을 확인하실 수 있습니다. 로드맵을 한꺼번에 구매하시면 할인된 가격으로 제공됩니다! (할인율은 곧 축소될 예정입니다.)

2. 가장 빠른 풀스택 로드맵

본 로드맵과 혼자서 가장 빠르게 웹/앱 개발을 학습하고 구현하는 방법을 상세히 설명한 영상을 만들었습니다. 이 영상을 참고하시면, 짧은 시간 안에 시행착오 없이 웹/앱을 구현할 수 있습니다.

잠깐! ✋
아래 로드맵을 클릭하시면 더욱 자세한 내용을 확인하실 수 있습니다. 로드맵을 한꺼번에 구매하시면 할인된 가격으로 제공됩니다! (할인율은 곧 축소될 예정입니다.)

3. 개발과 데이터 분야에서 꼭 필요한 컴퓨터공학(CS) 핵심 지식

본 로드맵은 개발과 데이터 분야의 기초가 되는 IT 핵심 이론인 컴퓨터공학(CS) 필수 지식을 체계적으로 정리한 과정입니다. 이 중에서도 특히 컴퓨터구조, 운영체제, 네트워크 등 가장 중요한 핵심 과목을 체계적으로 익힐 수 있는 강의를 오픈하고 있습니다.


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 풀스택 개발을 위한 Part2 강의

  • 프런트엔드 기본기를 쌓고자 하시는 분

  • 최신 상용화도 가능한 웹서비스를 개발하고자 하시는 분

  • 반응형, 호환성등 다양한 프런트엔드 기술 정리가 필요하신 분

  • 프런트엔드 입문

선수 지식,
필요할까요?

  • 가능하다면, 풀스택 Part1 강의와 병행 수강을 강추드립니다.

안녕하세요
입니다.

32,266

수강생

2,236

수강평

1,947

답변

4.9

강의 평점

13

강의

잔재미코딩, Dave Lee

  • About 잔재미코딩 소개 블로그 [클릭]

  • 주요 경력: 쿠팡 수석 개발 매니저/Principle Product Manager, 삼성전자 개발 매니저 (경력 약 15년)

  • 학력: 고려대 일어일문 / 연세대 컴퓨터공학 석사 (완전 짬뽕)

  • 주요 개발 이력: 삼성페이, 이커머스 검색 서비스, RTOS 컴파일러, Linux Kernel Patch for NAS

  • 저서: 리눅스 커널 프로그래밍, 리눅스 운영 체제의 이해와 개발, 누구나 쓱 읽고 싹 이해하는 IT 핵심 기술, 왕초보를 위한 파이썬 프로그래밍 입문서

  • 운영 사이트: 잔재미코딩 (http://www.fun-coding.org) [클릭]

  • 풀스택/데이터과학/AI 관련 무료 자료를 공유하는 사이트입니다.

  • 기타: 잔재미코딩 유투브 채널 [클릭] 

    • IT 학습에 도움이 되는 팁/ 짧은 무료 강의를 공유하고자, 조금씩 시작하고 있습니다~

최신 현업과 IT 강의를 병행하며, 8년째 꾸준히 견고한 풀스택, 데이터과학, AI 강의를 만들고 있습니다.

 

커리큘럼

전체

79개 ∙ (17시간 36분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

174개

4.9

174개의 수강평

  • michaelaeon9313님의 프로필 이미지
    michaelaeon9313

    수강평 13

    평균 평점 4.9

    5

    99% 수강 후 작성

    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.

    • funcoding
      지식공유자

      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.

  • ith13579님의 프로필 이미지
    ith13579

    수강평 19

    평균 평점 5.0

    5

    99% 수강 후 작성

    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.

    • funcoding
      지식공유자

      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.

  • 두룽이님의 프로필 이미지
    두룽이

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    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~!

    • funcoding
      지식공유자

      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

  • mozzzi2님의 프로필 이미지
    mozzzi2

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    I love you teacher

    • funcoding
      지식공유자

      Hahaha thank you. Haha you have a sense of humor haha

  • madsong님의 프로필 이미지
    madsong

    수강평 6

    평균 평점 5.0

    5

    63% 수강 후 작성

    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!!

    • funcoding
      지식공유자

      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. !!!!

배움이 더 쉬워지는 9월의 할인 중 (18:45:38 남음)

₩48

24%

₩82,500

잔재미코딩 DaveLee님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!