프론트엔드 언어

올인원 패키지 Online.
한 번에 끝내는
HTML, CSS, JavaScript, TypeScript

  • 01 프론트엔드 언어 기본기 끝판왕

    HTML, CSS, JavaScript, 그리고 TypeScript까지, 프론트엔드 필수 언어의 문법부터 프로젝트까지 모두 담았습니다.

  • 02 Vanilla JS 고퀄리티 프로젝트

    순수하게 JavaScript만으로 프로젝트를 3단계 프로세스에 따라 구현하며 JavaScript에 대해 더 깊게 이해할 수 있습니다.

  • 03 평생 무한 반복 수강

    많은 분량의 강의를 한 번에 수강하실 필요 없이 필요할 때마다 찾아 들을 수 있도록 평생 무제한 수강을 지원합니다.

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기

프로그래밍 언어에 대해 깊게 공부하지 않고,
프레임워크와 라이브러리 활용 능력만 키운다면?

프레임워크 & 라이브러리보다, 개발 언어에 대한 완벽한 이해가
더 중요하게 여겨지는 지금!
프론트엔드 개발자 취업/이직의 열쇠는?
HTML, CSS, JavaScript!

Q. 웹 개발자로 취업하고 싶은데, 어디서부터 시작해야할지 모르겠어요!

A. 먼저 웹의 기본이 되는 HTML, CSS, JavaScript만으로도 충분히 완성도 높은 웹 서비스를 개발할 수 있습니다.

Q. 프론트엔드 실무를 하다보니 기본기가 부족하다는 느낌을 받아요!

A. 웹 개발의 기본인 HTML, CSS, JavaScript, TypeScript만 탄탄하게 배워두면 어떤 프레임워크/라이브러리를 사용해도 흔들리지 않는 실력을 갖출 수 있어요!

Q. JavaScript vs TypeScript 어떤 것을 배워야 할까요?

A. TypeScript는 JavaScript의 상위 확장 언어예요. 최근 실무에서는 TypeScript가 필수로 요구되는 추세인데, JavaScript를 배운 뒤 두 언어의 차이 위주로 학습하면 더욱 쉽고 빠르게 2개 언어 모두 학습할 수 있어요!

기본기가 탄탄한 프론트엔드 개발자가 되기 위해
이 강의로 시작해야 하는 6가지 이유

국내 IT 대기업의 프론트엔드 개발자 채용 공고에서 반드시 등장하는
HTML, CSS, JavaScript, TypeScript

따로따로 찾아볼 필요 없이 강의 하나로 모두 배우고,
각 언어를 연동한 프로젝트까지 완벽하게 끝내 보세요!

Point 1

강의 하나로 끝내는 웹 개발 기본!
HTML, CSS 부터 JavaScript, TypeScript 까지

면접관들이 필수로 체크하는 프론트엔드 개발 언어 4종의
기초부터 심화까지 학습할 수 있는 곳은 오직 패스트캠퍼스뿐!


  • HTML

    웹의 구조를 담당하는
    마크업 언어


  • CSS

    웹의 시각적 표현을 담당하는
    스타일 언어


  • JavaScript

    웹 페이지를 동작시키는
    개발 언어


  • TypeScript

    JavaScript의 슈퍼셋 언어로
    웹 페이지의 동작을 담당하는
    개발 언어

TypeScript가 어떤 언어인지 궁금하다면? 확인 ∙ JavaScript에 Type이 더해진 상위 확장 언어로, 컴파일 후 JavaScript로 변환됩니다.
∙ 정적 타입 언어로, 컴파일 단계에서 오류를 미리 발견하여 버그를 줄여줄 수 있습니다.
∙ 코드의 역할을 빠르게 파악할 수 있어 유지 보수가 용이 합니다.

프론트엔드 개발 공부에 대한 오해와 진실

feat. 당신이 지금 프론트엔드 언어를 자세하게 배워야 하는 이유

Point 2

75시간 동안 4가지 언어에만 완전 몰입!
입문부터 실전 프로젝트까지 모두 담은 커리큘럼

기초 문법부터, 프레임워크 없이 언어로만 만드는 프로젝트까지,
디테일한 커리큘럼 안에서 내가 원하는 부분만 쏙쏙 골라 듣는 것도 가능해요!

| 잠깐 |
 강의 전체 분량을 수강하기에 부담이 되신다면?
나의 학습 레벨과 목적에 맞게 백과사전처럼 필요한 부분만 골라 들어보세요!

더 자세한 커리큘럼이 궁금하다면?

커리큘럼 자세히 보기

Point 3

프레임워크/라이브러리의 도움 없이
언어만으로 구현하는 4가지 고퀄리티 프로젝트

언어만으로 4가지 프로젝트를 단계적으로 구현하며
HTML, CSS, JavaScript, TypeScript의 동작 원리와 활용법을 마스터하세요!

| 실습 내용

∙ HTML, CSS, 약간의 JavaScript를 활용해 스타벅스 웹 사이트를 동일하게 만들어요.
∙ Git을 활용해 ‘버전관리’가 무엇인지 배워봐요.
∙ 마지막으로, 다른 사람과 프로젝트를 공유할 수 있도록 Netlify를 통해 웹에 배포합니다.

| 실습 내용

∙ HTML, CSS, 그리고 약간의 JavaScript를 활용해 심화 CSS 애니메이션, 인터렉티브 웹을 구현하고, 애플 웹 사이트를 똑같이 만들어 봅니다.
∙ 모바일, 태블릿 환경에 맞게 최적화 되어 출력하는 ‘반응형 웹’의 개념을 학습하고 구현해 봅니다.
∙ 완성한 프로젝트를 Vercel를 통해 배포합니다

| 실습 내용

∙ 라이브러리/프레임워크 없이 순수한 JavaScript (Vanilla JS)만으로 실제 서비스가 가능한 프로젝트를 만들어 봅니다.
∙ 영화 검색 API를 연동하여 검색페이지, 카드형 영화 목록 페이지, 영화별 상세페이지 등을 직접 구현해 봅니다.
∙ Vercel에 배포하고, Serverless Functions을 통해 영화 정보 반환 API를 만듭니다.

| 실습 내용

∙ 3번째 프로젝트에서 완성한 영화 검색 사이트를 TypeScript로 수정합니다.
(마이그레이션)
∙ 수정한 프로젝트를 Vercel에 재배포합니다.
---
| 마이그레이션 프로젝트가 필요한 이유

TypeScript의 실제 활용법과 더불어 JavaScript와 TypeScript의 두 언어의 차이를 더 효과적으로 이해할 수 있습니다.

언어만으로 누구나 만들 수 있는 프로젝트 결과물 미리 확인해보세요!

* [스타벅스 웹 사이트 클론코딩] 프로젝트는 [한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.]과
[초단기 완성 : 14일 만에 만드는 스타벅스 웹 사이트 with HTML, CSS, JavaScript], [프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.] 강의 일부 내용과 동일합니다.

Point 4

프론트엔드 프레임워크 원리를 배울 수 있는
Vanilla JS 프로젝트

JavaScript를 탄탄히 다지는 가장 효과적인 방법은 JavaScript만으로 프로젝트를 만들어 보는 거죠!
많은 IT 대기업에서 채용 또는 온보딩 과정에서 요구하는 Vanilla JS 프로젝트를 미리 제대로 경험해보세요.

Vanilla JS를 모르겠다면? 확인 Vanilla JS는 외부 라이브러리나 프레임워크를 사용하지 않는 순수 JavaScript를 의미합니다.

Project No.3
오픈 API를 활용한 영화 검색 사이트

단순 웹 사이트 구현에서 더 나아가, 상용화 수준으로 발전시키기 위해
다양한 요소들을 디테일하게 추가하는 방법을 3가지 Step으로 차근차근 학습합니다.

  • | JavaScript로 컴포넌트 구현하기
    라이브러리나 프레임워크 없이 컴포넌트를 구현하고 관리하는 방법을 학습합니다.

    ---
    ∙ 컴포넌트의 이해
    ∙ 선언적 랜더링
    ∙ 이벤트 핸들링
    ∙ 상태 관리
    ∙ 스타일 관리
  • | 서비스 핵심 기능 구현하기
    HTML, CSS, JavaScript로 메인 페이지를 구성하고 핵심 기능을 구현합니다.

    ---
    ∙ Open API 연동하기
    ∙ 검색한 영화 목록 가져오기
    ∙ 영화 검색 추가 요청
    ∙ 영화 목록에서 ID 중복 제거
    ∙ 영화 카드 아이템
    ∙ 에러 메시지 출력
  • | 사용자 경험 개선을 위한 추가 작업 & 배포
    단일 영화 상세 페이지를 구성하고, 서비스의 사용성을 높이기 위한 추가 작업과 배포를 진행합니다. 서버리스 기능을 통해 API 또한 만들어 봅니다.
    ---
    ∙ 스켈레톤 UI 구현
    ∙ 더 높은 해상도의 영화 포스터 가져오기
    ∙ 포스터가 없는 경우 예외처리 하기
    ∙ 배포(Vercel)
    ∙ 영화 정보 반환 API 만들기 (Vercel Serverless Functions)

+ 한 걸음 더 나아가기 +
Project No.4
영화 검색 사이트 TypeScript로 마이그레이션 하기

< 완성된 프로젝트를 TypeScript로 수정하는 이유>

----
 TypeScript도 본질적으로는 JavaScript와 크게 다르지 않아요.
따라서 실무에서 TypeScript를 빠르게 배우고, 실무에 적용하기 위해서 중요한 부분은 JavaScript와 다른 점을 이해하는 것이라 생각합니다.
마지막 프로젝트에서는 Vanilla JS 로 구현된 프로젝트를 수정하면서
두 언어의 차이와 실제 프로젝트 코드에 TypeScript를 도입하는 방법을 중점적으로 알려드릴 예정입니다.

Point 5

만 명 이상의 수강생이 인정한 강의력!
박영웅 강사님께 배우는 프론트엔드 개발 기본

수많은 온/오프라인 수강생이 인정한 박영웅 강사님의 강의는 다릅니다.

안녕하세요 :) 이번 강의를 맡은 박영웅이라고 합니다.
저는 산업 디자인을 전공했고, 웹앱 디자이너로 커리어를 시작하여 현재 작은 스타트업에서 기업 관리 솔루션 개발 리더를 맡고 있습니다.
여러 오프라인 강의와 세미나, 비영리 활동과 기술 블로그( Heropy 기술 블로그 )운영을 병행하고 있습니다.
개발자는 끊임없이 새로운 것을 배워야 하는 직무인데요, 이 때 기본기가 잘 다져져있지 않다면
새로운 것을 배울 때마다 많은 시간과 에너지를 투자해야합니다.
여러분이 앞으로 개발자로서 학습을 이어 나갈 때 조금 더 빠르고 효율적으로 학습을 할 수 있도록
입문자분들도 이해할 수 있도록 쉽게, 하지만 꼭 알아야 하는 내용은 확실하게 강의에서 짚어 드리겠습니다!

강사님의 강의력을 직접 확인해 보세요!

입문자를 위해 처음 보는 용어와 개념은 정확하게 짚고 넘어갑니다.

개념을 이해하기 쉽도록 이미지와 코드의 구조를 차근차근 설명합니다.

누구나 실제 서비스화 가능한 수준의 프로젝트 결과물을 만들어볼 수 있습니다.

학습에 참고할 수 있도록 프로젝트에 필요한 자료와 소스코드를 깔끔하게 제공합니다.

Point 6

수강 중 막히는 부분이 생긴다면?
언제든 도움을 요청할 수 있는 질의 응답 커뮤니티!

강의 수강 중 어려움에 부딪히면, 질의응답 커뮤니티에 자유롭게 질문하세요.
조교님과 이전에 같은 문제를 겪은 수강생들의 도움으로 어려움을 해결해보세요!

* 본 커뮤니티는 Discord로 운영되며, 온라인 강의장 공지사항에 기재된 링크를 통해 참여 가능합니다.
* 2022.10.20 ~ 2024.9.19까지 조교를 통한 질의응답이 운영 됩니다.

타사 대비 내용은 20시간 더, 가격은 1/3 저렴하게!

모든 내용을 개별적으로 구매해야 해서 불편하고, 결국 다 합쳐보면 가격도 부담되죠.
비교할 수 없는 구성의 마스터 Path를, 가장 저렴하게 평생 소장하세요!

5개 강의, 51시간 분량 30만원 이상

이 모든 혜택을 담은 75시간 분량 강의를
월 8천 원대에 평생 소장까지!

(런칭 특별가 + 20% 기간 한정 쿠폰 적용 시 가격 기준)

이런 분께 추천드립니다!

프론트엔드 개발, 시작부터 끝까지
꼼꼼하게 학습하고 싶다면 이 강의도 들어보세요!

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기

커리큘럼을 확인하세요.

아래의 모든 강의를 초격차 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!
※ 본 강의의 Part 1, 2는[한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.]와 [14일 만에 만드는 스타벅스 웹 사이트 초단기 완성 Online.], [프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.] Part 1, Part 2와 동일한 내용입니다.

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

Part2. Git을 활용한 버전관리

Part3. 애플 아이패드 반응형 웹사이트

Part4. JavaScript 마스터

Part5. TypeScript

  • 상세 커리큘럼.

    자세한 커리큘럼 및 내용은 여기서 확인하세요!

    자세히 보기 »

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기

구매 안내.

결제 후, 언제 어디서나 하루 10분 공부 시작.

• 홈페이지 회원가입 및 로그인
• 원하는 강의 결제하기
• 마이페이지에서 강의 시청하기

이 강의도 추천해요.

수강료.

국내 8개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • NH농협카드

※ BC카드의 경우, 비씨(페이북)을 선택하여 결제시에만 12개월 무이자 할부가 가능합니다.
(BC계열 – 우리/제일/기업/대구/경남/부산/광주/수협/전북/제주/신협)