Byte Degree : HTML/CSS/JavaScript for Beginners

본 프로그램은 우아한 형제들, 카카오, NHN 출신 국내 최고 개발자들이 직접 감수한 실무 중심의 자격 인증 과정입니다. 프론트엔드 개발 실무 필수 학습부터 1:1 코드 리뷰, 커리어 토탈 솔루션까지 엄격한 관리 하에 전 과정이 진행됩니다.

  • #HTML
  • #CSS
  • #JavaScript
  • #코드리뷰
  • #프로젝트중심
난이도
초급
총 시간
14주

1기 모집이 마감되었습니다.
다음 기수 모집 알림 신청하고,
바이트 디그리의 다양한 혜택을 최저가로 경험하세요.

10주 간의 1:1 온라인 학습 관리로
트렌디한 프론드엔드 개발 필수 스킬을 가져가세요.

프론트엔드 학습, 왜 혼자서 해내기 어려울까요?

시간과의 싸움이 힘들어요.
막상 실무에 들어가니 배운 것만으로는 역부족이에요. 예쁜 건 기본이고, 빨리 시간 안에 만들어내야 해요. 정석대로 하면 도저히 이 시간 안에 불가능한데…
제 코드에 자신이 없어요.
혼자 할 때는 하고 싶은 대로 해도 되겠죠. 하지만 회사에서 배포하는 서비스라면 정확한 개발이 중요하잖아요. 그런데 아직도 제 코드에 자신이 없어요..

바이트 디그리는 10주간 실무자가 직접
수강생의 코드를 첨삭하며 실무 노하우를 전달합니다.

트렌드를 반영한 학습

빠르게 등장하는 프론트엔드 개발 기술, 현업에서 직접 부딪히며 경험한 사람에게 배워야 빠르고 트렌디한 프론트엔드 개발 실력을 갖출 수 있습니다.

1:1 코칭으로 완성도 Up

다양한 시행착오를 겪어본 사람만이 알려줄 수 있는 Tip이 있습니다. 실무자의 첨삭을 통해 현업에서 실수할 수 있는 부분을 고쳐가며 배워야합니다.

바이트 디그리에서 현업 노하우와
정확한 개발 스킬을 동시에 가져가세요.

이론부터 프로젝트까지

이론, 예제, 프로젝트를 한 번에 해결하세요. 파트별로 내 실력을 검증할 수 있는 5개의 개인프로젝트를 진행합니다.

온라인 1:1 학습관리

현직자의 온라인 심층 리뷰와 학습관리로내 코드를 꼼꼼하게 검토 받으며 자신감 있는 실력을 가져갑니다.

현직 강사진과 코치

강사진, 리뷰어, 코치 모두 현직자로 구성되어 웹표준, 최적화된 마크업 설계 노하우 등 살아있는 실무를 배웁니다.

검증된 커리큘럼

실무에서 가장 필수적으로 요구되는 개발 스킬을 갖출 수 있도록, 전문가들이 3차에 걸쳐 검수한 10주 커리큘럼입니다.

70만원 상당의 온라인 강의부터
수료 후 발급 되는 실무 자격 인증서까지.

시공간 제약 없이, 체계적인 프론트엔드 학습을 실현하기 위해 현업 감수진과 교육 전문가들이 함께 구성한 프로그램입니다.
최종 수료 후에는 국내·외 대기업 실무자가 인정한 자격 인증서가 발급됩니다.

독학과 공식 문서만으로는
해결할 수 없는 실무가 있습니다.

실무와 가장 가까운 프론트엔드 학습
이제 온라인에서 꼼꼼하게 관리받으며 기초부터 제대로 다지세요.

7개의 실무 프로젝트로
나만의 웹 포트폴리오가 완성됩니다.

Part 1. 프로그래밍 기초

  • 미니 Project ① 숫자 비교 알고리즘 구현

    숫자 비교 알고리즘 분석과 코드 구현 로직에 맞춰 생각하는 방법을 익히는 프로젝트입니다. 이를 통해 용어, 표현 등 개발자의 사고방식과 소통 방식을 함께 이해하게 됩니다.


    이런 것을 배웁니다

    ✔ 프로그래밍이 중요한 이유
    ✔ 개발자와 협업하기 위한 기초 IT 지식

    강사: 고현민

Part 2. HTML&CSS 첫걸음

  • 미니 Project ② 2020 GitHub 웹 페이지 Header 구현

    HTML과 CSS를 연결해 엡 사이트의 header를 구현합니다. HTML로 구조를 짜고 CSS로 시각적인 표현을 구현할 수 있게 되며, 에디터에 대해 배우고 학습 환경 설정을 위한 VS Code를 함께 진행합니다.


    이런 것을 배웁니다

    ✔ HTML, CSS, JS 란?
    ✔ 웹표준과 웹 접근성
    ✔ 이미지에 대한 이해
    ✔ 꿀팁 방출! 알아두면 좋은 단축키

    강사: 박영웅

Part 3. HTML

  • 미니 Project ③ HTML5를 활용한 블로그 구조 설계

    웹사이트를 보며 구조적으로 어떤 구성을 가지고 있는지 이해하고, 직접 블로그 형태의 구조를 구현해봅니다. 코딩 중 발생한 실수가 있다면 현직자 리뷰어와 함께 고쳐가며 각 속성에 맞는 HTML 활용법을 익혀보세요.


    이런 것을 배웁니다

    ✔ 주요범위 & 메타데이터 – HTML, HEAD, BODY, TITLE
    ✔ 콘텐츠 구분 – HEADER, FOOTER, MAIN, ARTICLE, SECTION 등
    ✔ 문자 콘텐츠 – OL, UL, LI 등
    ✔ 인라인 텍스트
    ✔ 멀티미디어 & 내장 콘텐츠 & 스크립트
    ✔ 표 콘텐츠
    ✔ 전역 속성

    강사: 박영웅 감수자: 정용우

Part 4. CSS

  • 미니 Project ④ Netflix CSS UI 구현

    Netflix의 UI를 직접 구현해봅니다. 웹사이트를 구현할 때 많이 쓰이는 리스트 형태와 태그 활용법을 익힙니다.


    이런 것을 배웁니다

    ✔ 단위
    ✔ 속성 – 박스 모델, 글꼴, 문자,
    ✔ 속성 – 띄움, 위치, 배경
    ✔ 속성 – 전환 & 변환
    ✔ 속성 – 플랙스, Grid

    강사: 박영웅 감수자: 마광습

Part 5. JavaScript

  • 미니 Project ⑤ 가격 별 상품 추천 프로그램

    상품 데이터가 주어졌을 때, 원하는 조건의 상품을 골라낼 수 있는 로직을 작성합니다. 사용자가 가지고 있는 돈의 액수를 입력 받아 해당 금액에 가장 근접한 가격의 상품을 추천합니다. 배열, 객체, 반복문 등의 자바스크립트 기초 지식을 활용하는 프로젝트입니다.


    이런 것을 배웁니다

    ✔ 변수
    ✔ 연산자 – 산술연산자, 대입연산자, 논리연산자, 비교연산자
    ✔ 조건문
    ✔ 함수
    ✔ 객체
    ✔ 반복문
    ✔ 배열 내장함수
    ✔ 프로토타입과 클래스

    강사: 김민준 감수자: 심준식

심화. 실전 프론트엔드 개발 Ⅰ

  • 심화 Project 라면 상품 목록 페이지 구현

    강의에서 배운 화면 레이아웃 구성 방법과 자바스크립트 문법을 활용하여 주어진 API와 상품 데이터로 라면 상품 목록을 화면에 출력해보는 프로젝트입니다. 간단한 마크업과 애니메이션, 그리고 자바스크립트 비동기 처리를 이용해 상품 목록을 화면에 표시해보세요. 실제 프론트엔드 개발을 할 때 해야 하는 고민들을 미리 해보실 수 있을 겁니다.


    출제 및 감수자: 장기효

최종. 실전 프론트엔드 개발 Ⅱ

  • 최종 Project trello 보드 만들기

    trello는 프로젝트 관리를 시각적으로 관리할 수 있는 서비스입니다. 본 프로젝트를 통해 trello 서비스를 구성하는 컴포넌트를 만들며 강의를 통해 배운 HTML과 CSS, javascript 기초 개념을 사용해 볼 수 있습니다. 컴포넌트간의 상호작용을 위해 javascript의 객체 / 클래스 / 배열 등을 보다 심도있게 다뤄볼 수 있습니다.



    출제 및 감수자: 박예준

엄격한 평가 절차를 거쳐 모든 프로젝트를 수료하신 분들에 한해
Byte Degree: Front-End Essentials
온라인 실무 자격 인증서가 발급됩니다.

공부하다 막히면 언제든 물어보세요!
현업 프론트엔드 개발자 코치가 기다립니다.

사소한 질문 하나도 그냥 넘어가지 않도록, 전담 스터디 코치가 함께합니다.
모르는 것이 있다면 언제든 질문하고 해결하세요.
온라인 강의, 학습 진도, 미니 프로젝트까지
언제 어디서나 1:1로 깊이 있게 코칭해드립니다.

각 분야 실무자에게 배우며
실무 Tip까지 모두 가져가세요.

약 240여 개의 강의 영상으로 배우는 실무.
프론트엔드 개발자가 되기 위한 사고방식부터 웹 구현까지 실무자의 현장 경험에서 우러난 개발 스킬을 배웁니다.

바이트디그리 수강생 전원
70만원 상당의 평생 소장 가능한
온라인 강의 제공

잠깐! 좀 더 높은 난이도의 학습이 필요한가요?

이미 HTML/CSS/JavaScript가 익숙하다면
Byte Degree: React Programming 코스에서
나에게 필요한 개발 실무 스킬을 쌓아보세요.

더 실무에 가까운 커리큘럼을 위해,
전문가가 직접 참여한 3단계 감수 시스템.

독학만으로는 알 수 없는 현장의 이슈까지 배울 수 있도록
커리큘럼부터 프로젝트까지 철저하게 검토합니다.

현직자의 무제한 1:1 리뷰와
개별 평가 보고서 제공 시스템.

수강생이 제출한 프로젝트는 평가표를 바탕으로 리뷰어가 꼼꼼하게 분석하고 피드백을 포함한 개별 평가 보고서로 제공합니다.
이를 통해 내가 제출한 프로젝트의 개선점 및 보완점을 구체적으로 확인하며,
Final 프로젝트는 최종 통과까지 무제한으로 평가 보고서를 받아볼 수 있습니다.

🔶모든 수강생은 온라인 학습 플랫폼 에드모도(Edmodo)를 통해
현직 프론트엔드 개발자에게 내 프로젝트를 1:1로 첨삭 받습니다.

🔶수강생의 질문에 따라 맞춤형으로 개별 심층 Review를 진행합니다.
모든 리뷰는 현직 개발자 리뷰어가 진행합니다.

프론트엔드 실무를 배우는
가장 효율적인 프로그램.

오직 바이트 디그리에만 있는 3가지 요소.

실무와 가장 가까운 학습을 위한
3가지 인증서 발급 조건.

전 세계가 주목하는
온라인 실무 인증 과정.

해외에서는 이미 활성화 되고 있는 온라인 직무 능력 인증 과정. 온라인으로 필요한 실무 능력을 단기간에 학습하고 검증합니다. 시간이 흐를수록 더 많은 교육 기관들이 동참하고 있으며, 기업들도 실무 능력을 검증할 수 있는 인증서를 요구하는 추세입니다.
(*출처: http://www.bloter.net/archives/236871)

바이트 디그리
Front-End Essentials
FAQ.

1기 모집이 마감되었습니다.
다음 기수 모집 알림 신청하고,
바이트 디그리의 다양한 혜택을 최저가로 경험하세요.

수강료.

국내 9개 카드사 12개월 무이자 할부 지원!

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