웹개발 로드맵

풀스택 공부 안내서 | 차근차근 정복해 나가요 🚀

HTML, CSS, JavaScript

프론트엔드 필수 기본 완성편 모음

프론트엔드 개발자로 건강하게 성장하기 위해서는 HTML, CSS, JavaScript 기본기가 정말 중요합니다. 더욱, 브라우저에서 웹사이트/웹앱이 어떻게 동작하는지 정확하게 알고 있어야 합니다. 기본기 없이 프레임워크부터 쓰기 시작하면 결국 다시 원점으로 돌아오게 됩니다.

단순히 따라하기식의 클론코딩으로는 기본기를 탄탄하게 쌓기 힘듭니다. 그렇다고 개념만 주구장창 공부하고, HTML 태그와 CSS 속성값만 달달 외운다고 스스로 웹사이트/웹앱을 만들 수 있는 자신감이 쌓여지는 것은 아닙니다! JavaScript 문법은 이해 했는데, 막상 작은 프로그램 조차도 만들기 어려워 시작조차 못한적 있으시죠?

새로운것을 배울때 항상 큰 그림을 먼저 이해하고 어떻게 찾아가면서 공부 할 수 있는지! 직접 만들어 보면서! 문제를 해결하면서! 정확하게 개념을 정리 하는것이 좋습니다. 아카데미에서 준비한 위 기본 강의를 통해 드림코딩에서 제대로 기본기 쌓아보겠습니다!

Portfolio

자바스크립트 마스터리 (ES6+ 최신 문법)

프론트엔드 또는 백엔드 스택을 시작하기전 필수로 잘 알고 있어야 하는 자바스크립트 언어 문법 자체를 배워 보면서 코딩 실력을 쌓아 봅니다. 뒤에 이어지는 다양한 프레임워크/라이브러리를 배울때 무너지지 않도록 중요한 문법 사항들을 알아보고 활용법도 배워볼 겁니다. 코딩 팁과개발자의 사고력 정리해 볼 수 있습니다.

Portfolio

포트폴리오 웹사이트 클론 코딩

자주 쓰이는 CSS를 정리 하고 반응형 웹사이트 전체를 기획부터개발, 배포까지 배우면서나만의 멋진 포트폴리오 웹사이트를 만들고 싶다면 이 강의 추천드립니다. 자바스크립트를 활용해서 어떻게 필요한 기능을 정의하고 구현할 수 있는지, 검색 하는 팁과 브라우저에서 개발툴 활용 및 디버깅 하는 스킬도 배울 수 있습니다. 기본도 다지고, 여러가지 현업 팁들도 배우고 또 무엇보다 문제를 해결 할 수 있는 스킬을 쌓는 좋은 강의 입니다.

Portfolio

프론트엔드 필수 브라우저 101

자바스크립트 + 브라우저에 대한 이해를 할 수 있는 정말 좋은 강의 입니다. 앞으로 중급 레벨에서 배울 지식들을 위한 정말 좋은 기본을 쌓을 수 있어요. 브라우저에 대한 이해 뿐만 아니라 코드가 성능과 어떤 관계가 있는지, 성능을 확인 하기 위한 개발툴, 여러가지 유용한 팁들을 알려 드립니다. 게임 만들기를 통해 자바스크립트를 직접 활용하고 리팩토링을 함께 하면서 코딩 실력을 향상해 봅니다. 요즘 많은 회사에서 순수자바스크립트로 코딩 테스트를 하는데, 이 강의를 들으시면 도움이 되실겁니다.

    자주 묻는 질문들

  • 강의 효과를 200% 극대화 하기 위해서 추천해 드리는 순서는 아래와 같습니다.
    1. 1. 자바스크립트 마스터리로 문법에 대한 기본기를 탄탄하게 쌓는다.
    2. 2. 포트포리오 강의 처음부터 CSS 구현 까지만 듣는다. (챕터 8 CSS: Styling 까지)
    3. 3. 브라우저 101 챕터 7 보충수업까지 듣는다.
    4. 4. 다시 포트폴리오 강의로 돌아가서 자바스크립트를 스스로 구현하면서 듣고 완강한다.
    5. 5. 다시 브라우저 101으로 돌아와서 게임과 리팩토링 까지 듣고 완강한다.
  • 유료강의가 부담되시면 유튜브에 올라온 자바스크립트 강의만으로 충분히 기본 문법 이해 가능합니다. 다만, 강의를 여러번 만들며 누전된 노하우와 더 깊이 있는 개념 설명 및 챌린지 연습이 필요하시면 아카데미 강의를 들으시면 됩니다.
  • 네, 다릅니다. 유튜브 채널에서는 기본적인 개념들에 대해 다뤘다면, 아카데미에서 진행되는 강의는 기본 개념 설명 + 원리, 배운 내용들을 직접 활용하고 그 이상의 것! 개발툴, 현업팁, 프로젝트를 연습 합니다. 각 강의 페이지에 이미 강의를 완료하신 수강생 분들의 수강평을 보시면 어떤 점들을 유익하게 배우셨는지 확인 할 수 있습니다.
  • 그럼요! 여러분들이 필요한 내용을 빠르게 찾아서 복습 하실 수 있도록 정리해 두었습니다.프론트엔드 입문자를 위한 드림코딩 유튜브 영상 순서