초단기 완성 : 14일 만에 만드는 스타벅스 웹 사이트 with HTML&CSS

초단기 완성

14일 만에 만드는
스타벅스 웹 사이트
with HTML&CSS

01 하루 2시간, 14일 완성

개발을 해 본 적 없는 왕초보도 14일 후엔
나만의 웹 사이트를 만들 수 있습니다.
02 고퀄리티 프로젝트 실습

실제 서비스와 유사한 수준의 고퀄리티
결과물을 직접 만들어 볼 수 있습니다.
03 구현부터 배포까지 완벽하게

작성한 코드 관리부터, 내가 만든 웹 사이트를 공유하기 위한 배포까지 학습합니다.

기본 정보

∙ 2개 대주제, 132개 강의 클립 (약 26시간 분량)
∙ 난이도 : 입문
∙ 선수지식 : 없음

강의 특징

∙ 수강료 1회 결제로 평생 소장
∙ 강의 자료 및 실습 코드 제공
∙ ‘한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.’의 Part 1, Part 2와 동일한 내용입니다.

머릿속에만 있던 내 아이디어를 실제 웹 사이트로 구현해 보고 싶나요?
혹시 아래 중 1개라도 해당이 된다면
당신이 찾던 웹 개발 입문 강의는 바로 이 강의입니다!

비전공자이지만
웹 사이트를 직접
만들어 보고 싶은 분
꼭 필요한 것만 배워
나만의 웹 사이트를
빠르게 만들어 보고 싶은 분
웹 개발 공부를
시작하려고 하는데 어떤 것부터
해야 할지 모르겠는 분
디자인한 웹을
직접 퍼블리싱하고
싶은 분

하루에 2시간씩, 딱 14일 만에!
개발 왕초보도 웹 페이지를 만들 수 있는 초단기 웹 개발 강의

Point 01
실제 서비스 가능한 수준의 프로젝트 결과물
웹 개발을 시작할 때, 내가 만들고 싶은 결과물과
학습 후 만들 수 있는 결과물이 많이 달라서 실망하지 않으셨나요?
초단기의 실습 페이지와 스타벅스의 실제 서비스 페이지를 비교해보세요!

Point 02
14일 만에 완성하는 나만의 웹 사이트
개발 공부, 하루에 딱 2시간씩 14일만 투자 하세요!
14일이 후엔 고퀄리티 웹 사이트를 만들 수 있습니다.

학습 일정표를 봐도 쉽게 감이 오지 않으시나요?
2주간 여러분의 실력이 얼마나 향상될지 미리 확인해 보세요!
▾▾▾▾▾

상세 일정표 바로가기

Point 03
꼭 필요한 개념만, 확실하게 학습
개발을 시작할 때 필수적으로 알아야 하지만,
가장 어려움을 느끼는 3가지 개념을 확실하게 알려드립니다!

Q. 개발 언어, 프레임워크, 라이브러리... 공부할게 너무 많은데 뭐부터 시작해야할까요?

A. 웹 개발에서 가장 기본이 되는 3가지 언어만으로,
실제 서비스 웹 사이트와 유사하게 웹 사이트를 만들 수 있도록 차근차근 알려드립니다. 강의 후반부의 퀴즈를 통해, 배운 내용을 잘 이해했는지 점검할 수 있어요.

Q. 설치부터 환경설정까지가 너무 어려워서, 간단한 예제도 따라하기 힘들어요!

A. 코딩이 익숙해질 때까지는 별도의 설치 없이 웹 상에서 간단한 예제로 연습한 후, 코드 에디터 VS CODE를 사용하여 실습을 진행합니다. 프로그램 설치도 처음부터 차근차근 알려드리니 걱정하지 마세요.

Q. 웹 사이트를 만든 후에 다른 사람들과 공유도 하고, 업데이트도 하고 싶은데 어떻게 해야 할까요?

A. 만든 웹 사이트를 다른 사람과 공유하고, 지속적으로 업데이트하고 싶다면 git 활용법과 배포하는 법은 필수! git을 통해 코드의 버전을 관리하고, 업데이트한 코드를 자동으로 웹 사이트에 반영하고, 웹 사이트를 다른 사람과 공유하는 개발 이후의 단계까지 완벽하게 수행해 봅니다.

Point 04
6,000명 이상의 수강생이 인정한 강의력의
박영웅 강사님께 배우는 프론트엔드 개발 입문
‘한 번에 끝내는 프론트엔드 웹 개발 초격차 패키지 Online.’ 수강생들이 인정한
박영웅 강사님의 강의력을 미리 확인해보세요!

프론트엔드 개발 리드 박영웅

현) 질링스 개발팀 프론트엔드 리더
전) 빈스토크 개발팀 과장
전) 투비컴원 디자인팀 팀장

[기타 활동]
∙ Web Front-end Developer 기술 블로그 ‘heropy.blog’ 운영
∙ 비영리단체 ‘코딩 배우는 디자이너’ 운영
∙ 창조경제혁신센터 UI/UX 디자인 멘토
∙ 패스트캠퍼스 ‘한 번에 끝내는 프론트엔드 개발’ 강사 이외 다수 웹 개발 온라인, 오프라인 강의 진행

Special benefit
평생 소장 & 심화 학습을 위한 혜택까지
강의 수강 후, 웹 개발에 푹 빠질 여러분을 위해!
‘한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.’ 강의 전용 할인 쿠폰까지 드려요!

※ 본 쿠폰으로 구매한 강의의 환불 시 쿠폰은 복구되지 않습니다.
※ [한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online] 강의에만 적용 가능한 5만원 할인 쿠폰입니다.
※ 해당 강의 단일 구매 시에만 적용되며, 기타 프로모션과 중복 적용되지 않습니다.
※ 쿠폰은 강의 결제 시 자동 발급되며, [마이페이지] - 쿠폰 내역에서 확인이 가능합니다.
※ 쿠폰 사용 환불 규정은 최하단 주의사항에서 확인이 가능합니다.

(자동)

정가 ~~(자동)~~

현재 판매가 (자동)

12개월 무이자 할부 시 (자동)

최저가로 수강신청

커리큘럼을 확인하세요.

지금 한 번만 결제하고 모든 강의를 평생 소장하세요!
※ 본 강의는 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.] 강의와 [한 번에 끝내는 프론트엔드 개발 언어 feat. HTML, CSS, JavaScript, TypeScript], [프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.] Part 1, Part 2가 동일한 내용입니다.

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

01. 개요

∙ 첫 인사 및 강의 개요
∙ HTML,CSS 그리고 JS
∙ 웹앱의 동작원리
∙ 웹 표준과 브라우저
∙ 웹에서 사용하는 이미지
∙ 특수 기호
∙ 오픈소스 라이선스

02. VSCode

∙ 설치 및 실행
∙ 파일 생성과 삭제
∙ 한글화
∙ 태그 이름을 한 번에 변경(Auto Rename Tag)
∙ 브라우저에 출력(Live Server)
∙ 단축키 & 공백2로 만들기

03. 무작정 시작하기

∙ Doctype(DTD)
∙ HTML, HEAD, BODY
∙ CSS,JS 연결하기
∙ 정보를 의미하는 태그 살펴보기
∙ 화면에 이미지 출력하기
∙ 상태 경로와 절대 경로
∙ 페이지를 나누고 연결(링크)하기
∙ 모든 파일 공백 크기 설정
∙ 개발자 도구 사용하기

04. 웹에서 시작하기

∙ Codepen.io 소개
∙ 브라우저 스타일 초기화
∙ Emmet

05. HTML 개요

∙ 기본 문법
∙ 부모와 자식 관계의 이해
∙ 빈 태그
∙ 글자와 상자

06. HTML 핵심 정리

∙ 핵심 요소 정리
∙ 핵심 요소 출력 연습
∙ 주석
∙ 전역 속성

07. CSS 개요

∙ 기본 문법, 주석
∙ 선언 방식
∙ 선택자_기본
∙ 선택자_복합
∙ 선택자_가상 클래스 (1)
∙ 선택자_가상 클래스 (2)
∙ 선택자_가장 요소
∙ 선택자_속성
∙ 스타일 상속
∙ 선택자 우선순위

08. CSS 속성

∙ 개요
∙ 너비(width, height)
∙ CSS 단위
∙ 외부 여백(margin)
∙ 내부 여백(padding)
∙ 테두리 선(border)과 색상 표현
∙ 모서리 둥글게(border-radius)
∙ 크기 계산(box-sizing)
∙ 넘침 제어(overflow)
∙ 출력 특성(display)
∙ 투명도
∙ 글꼴
∙ 문자
∙ 배경
∙ 배치 (1)
∙ 배치 (2)
∙ 배치 (3)
∙ 플렉스(정렬) Container (1)
∙ 플렉스(정렬) Container (2)
∙ 플렉스(정렬) Items
∙ 전환
∙ 변환 (1)
∙ 변환 (2)
∙ Overwatch 캐릭터 선택 예제 (1)
∙ Overwatch 캐릭터 선택 예제 (2)

09. JS 선행

∙ 개요
∙ 데이터 종류
∙ 변수, 예약어
∙ 함수
∙ 조건문
∙ DOM API (1)
∙ DOM API (2)
∙ 메소드 체이닝
∙ 질의응답

10. 스타벅스 예제

∙ 시작하기 - 프로젝트 시작, 스타일 초기화, 파비콘
∙ 시작하기 - 오픈그래프와 트위터 카드
∙ 시작하기 - Google Fonts
∙ 시작하기 - Google Material Icons
∙ 헤더와 드롭다운 메뉴 - 로고
∙ 헤더와 드롭다운 메뉴 - 서브 메뉴
∙ 헤더와 드롭다운 메뉴 - 검색
∙ 헤더와 드롭다운 메뉴 - 메인 메뉴 (1)
∙ 헤더와 드롭다운 메뉴 - 메인 메뉴 (2)
∙ 헤더와 드롭다운 메뉴 - BEM
∙ 헤더와 드롭다운 메뉴 - 전역 배지(GSAP) (1)
∙ 헤더와 드롭다운 메뉴 - 전역 배지(GSAP) (2)
∙ 순차적 애니메이션 - 전역 버튼 스타일 (1)
∙ 순차적 애니메이션 - 전역 버튼 스타일 (2)
∙ 순차적 애니메이션 - 순차적으로 요소 보이기
∙ 요소 슬라이드 - 공지사항
∙ Swiper.js 라이브러리 버전 확인하기
∙ 요소 슬라이드 - 수직 슬라이드(Swiper)
∙ 요소 슬라이드 - 요소 가운데 배치
∙ 요소 슬라이드 - 프로모션 이미지 슬라이드 (1)
∙ 요소 슬라이드 - 프로모션 이미지 슬라이드 (2)
∙ 요소 슬라이드 - 슬라이드 영역 토글
∙ 유튜브 영상 배경 - 리워즈
∙ 유튜브 영상 배경 - Youtube iframe API (1)
∙ 유튜브 영상 배경 - Youtube iframe API (2)
∙ 유튜브 영상 배경 - 반복 애니메이션
∙ 고정 이미지 배경
∙ 3D 애니메이션
∙ 스크롤 위치 계산 애니메이션 (1)
∙ 스크롤 위치 계산 애니메이션 (2)
∙ 다중 요소 슬라이드
∙ 푸터
∙ 페이지 상단으로 이동(ScrollTo)

Part 2. Git을 활용한 버전관리

01. 버전관리

∙ 개요(Git, GitHub)
∙ 스타벅스 예제 GitHub 업로드(Push)
∙ 버전 생성과 업로드의 이해
∙ Netlify 지속적인 배포
∙ 수정사항 버전 생성(Commit)
∙ 로그인 브랜치(Branch)
∙ 로그인 페이지 개발(1)
∙ 로그인 페이지 개발(2)
∙ 로그인 브랜치 병합(Pull Request)
∙ 프로젝트 복제(Clone)
∙ 연습-버전 되돌리기(Reset)
∙ 연습-다른 환경에서 시작하기
∙ 연습-충돌(Conflict), 로컬 병합(Merge)

02. 마크다운

∙ 개요
∙ 제목, 문장, 줄바꿈
∙ 강조, 목록
∙ 링크, 이미지
∙ 인용문, 코드 강조
∙ 표
∙ 원시 HTML, 수평선
∙ 원격 저장소에 Push

상세 커리큘럼.

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

자세히 보기 »

구매 안내.

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

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

이 강의도 추천해요.

학습규정 * 본 상품은 동영상 형태의 강의를 수강하는 상품입니다.
* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
* 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다.
※ 본 강의는 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.] 강의와 [한 번에 끝내는 프론트엔드 개발 언어 feat. HTML, CSS, JavaScript, TypeScript], [프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.] Part 1, Part 2가 동일한 내용입니다.

총 학습기간:
– 정상 수강기간(유료 수강기간) 최초 1개월(30일), 무료 수강 기간은 31일차 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다.
– 본 패키지는 약 26시간 분량으로, 일 1시간 내외의 학습 시간을 통해 정상 수강 기간(=유료 수강 기간) 내에 모두 수강이 가능합니다.
– 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일)
– 패스트캠퍼스의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
– 일부 강의는 아직 모든 영상이 공개되지 않았습니다. 각 상세페이지 하단에 공개 일정이 안내되어 있습니다.

주의사항 – 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
– 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
– 본 상품은 기수강생 할인, VIP CLUB 제도 (구 프리미엄 멤버십), 기타 할인 이벤트 적용이 불가할 수 있습니다.
– 커리큘럼은 제작 과정에서 일부 추가, 삭제 및 변경될 수 있습니다.
– 쿠폰 적용이나 프로모션 등으로 인해 5만원 이하의 금액으로 강의를 결제할 경우, 할부가 적용되지 않습니다.

환불규정 – 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
– 쿠폰을 사용하여 강의를 결제하신 후 취소/환불 시 쿠폰은 복구되지 않습니다.
– 증정된 '5만 원 할인 쿠폰' 사용 전, 본 상품(강의+5만원 쿠폰 증정)환불 시 발급 된 쿠폰은 소멸됩니다.
– 증정된 5만 원 쿠폰을 사용하신 후, 본 상품(강의+5만 원 쿠폰 증정)만 환불 하는 것은 불가합니다. (할인 금액 추가 차감)
– 증정된 5만 원 쿠폰을 사용하여 구매한 강의 환불 시, 실 결제가 기준으로 환불 규정이 적용됩니다.

– 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
– 수강시작 후 7일 초과, 5강 이상 수강 시 정상 수강기간(유료 수강기간 30일) 대비 잔여일에 대해 다음과 같이 환불 가능합니다.

환불요청일 시 기준
: 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
: 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
: 수강시작 후 1/2 경과 후, 환불 금액 없음

* 보다 자세한 환불 규정은 홈페이지 취소/환불 정책에서 확인 가능합니다.

패스트캠퍼스 정책 안내 [패스트캠퍼스 아이디 공유 금지 정책]
패스트캠퍼스의 모든 온라인 강의에서는 1개의 아이디로 여러명이 공유하는 형태를 금지하고 있습니다.
동시접속에 대한 기록은 내부 시스템을 통해 자동으로 누적되며, 이후 서비스 이용이 제한될 수 있습니다.

[기기제한 정책]
패스트캠퍼스 온라인 강의 시청을 위해서는 ID별 최대 3개의 기기를 등록할 수 있으며, 기기 등록은 온라인 강의장 접속 시 자동 등록됩니다.
최대 갯수를 초과하였을 경우 등록된 기기 해제가 필요합니다.

[저작권 정책]
패스트캠퍼스의 모든 강의는 무단 배포 및 가공하는 행위, 캡쳐 및 녹화하여 공유하는 행위, 무단으로 판매하는 행위 등 일체의 저작권 침해 행위를 금지합니다.
부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

root layout