HTML/CSS로 배우는 '웹 퍼블리싱'

필수 선수과목: 없음!

코드잇의 ‘HTML/CSS로 배우는 웹 퍼블리싱’은 인터랙티브한 웹사이트/웹 어플리케이션을 개발하는 첫 걸음이에요. 번뜩이는 아이디어로 나만의 웹사이트를 만들어보세요!

수강 기간

3개월 (93일)

평균 8시간/1주에 학습 권장

수업 구성

동영상 + 노트 + 과제

수강료

159,000원

105,000원

아이비리그 출신 강사

다트머스 대학교 컴퓨터 과학 전공 출신 강사님이 강의를 제작합니다.

효과적인 콘텐츠

핵심적인 내용을 담은 5분 내외의 간결한 영상 강의와 꿀팁 노트를 제공합니다.

재미있는 실습 과제

게임같은 과제를 통해 스스로 컴퓨터적 사고력과 문제 해결능력을 기릅니다.

동료와 함께하는 커뮤니티

동료 수강생 분들 간 질문과 답변을 주고 받으며 함께 성장합니다.

HTML/CSS를 빼고
웹사이트를 논하지 말라!

전세계의 모든 웹사이트는 HTML/CSS 언어로
만들어졌답니다. 비교적 적은 투자로 멋진 결과물을
만들어 낼 수 있는 효율성 갑 HTML/CSS.
여러분이 차세대 Facebook, Amazon, Netflix, Airbnb를 만들어보세요!

필수 태그만 콕콕! 쉽게 공부하세요.

대부분의 프로그래밍 강의

대부분의 HTML/CSS 강의는 몇 백 개의 태그를 가르친 후, 마지막에 웹사이트를 하나 만드는 식으로 ‘이론 중심’의 강의를 하죠.

코드잇의 강의

코드잇은 꼭 알아야하는 태그만 가르치고 함께 10개의 웹사이트를 만드는 ‘실습 중심’의 학습을 합니다.

이론보다는 실전!
프로젝트 중심 학습

트랜디한 반응형 웹사이트를 만들며, 실습 중심으로 강의를 진행합니다. 코드잇 3개월 완성으로 스스로 포트폴리오를 만들고 멋진 반응형 웹 사이트를 만들 수 있어요.

요즘 대세는 반응형 웹사이트! 컴퓨터에서도 모바일에서도 자유자재로 반응하는 웹사이트를 만들어요.

요즘 인기인 재능 공유 사이트나 썸머 뮤직 페스티벌을 알리는 사이트까지! 다양한 주제의 웹사이트를 만들어요.

누구나 한번쯤은 생각해본 쇼핑몰. 서비스 홍보를 위해서는 이런 웹사이트가 꼭 필요하겠죠?

코드잇 HTML/CSS 수업이 특별한 이유

10개의
실전 프로젝트

평균 4.9점의
완벽 수강 후기

나만의 웹사이트와
포트폴리오

159,000원 105,000원

고품질의 강의를 합리적인 가격으로
배울 수 있는 기회 놓치지 마세요!

강영훈 강사

코드잇 공동 설립 / 대표
Dartmouth College Computer Science 전공
TheVentures Software Engineer
Swift School Python 마스터 클래스 강사
Dartmouth College Introduction to Programming 조교
Samsung HumanTech Paper Award 인공지능 연구를 통해 수학/전산 부문 동상
CISSE International Conference 논문 발표 및 출판

손동욱 강사

고려대학교 전기전자 공학부/심화 전공
상명대학교 뮤직테크놀로지학과 석사 과정
코드잇 Contents Director
LG전자 Software Engineer

커리큘럼

HTML/CSS로 배우는 '웹 퍼블리싱'

전체 커리큘럼 보기

수업 목표

HTML과 CSS를 통해 웹사이트/웹 어플리케이션을 직접 퍼블리싱할 수 있는 역량을 기릅니다. 10개의 사이트를 만들며, 처음 배우는 입문자도 3개월 만에 초보 웹 퍼블리셔가 될 수 있도록 합니다.

수업 대상

- HTML/CSS를 배워 웹 퍼블리셔가 되고 싶은 분
- 나만의 인터랙티브한 웹사이트를 개발하고 싶은 분
- 10개 이상의 실습 프로젝트를 통해 실력을 쌓고 싶은 분

전체 강의 구성

영상

노트

실습

필수 선수과목

없음

HTML/CSS 기본 문법 익히기

HTML/CSS와 JavaScript로 할 수 있는 것들에 대해 알아봅니다. 웹 페이지의 최소 단위인 태그를 배우고, 간단한 사이트를 직접 만들어봅시다.

#b태그 #i태그 #CSS기초 #head #body #html #a태그 #클래스 #아이디 #코멘트
웹사이트 스타일링하기

웹페이지에서 텍스트는 많은 비중을 차지합니다. 텍스트의 색상, 굵기, 크기, 폰트 등을 바꾸어 더 예쁘게 꾸밀 방법을 배워봅시다. 웹사이트의 레이아웃에 대해서도 공부한 후, ‘여행 사이트’와 ‘썸머 뮤직 페스티벌 사이트’를 만들어보세요.

프로젝트
CSS 제대로 활용하기

CSS에는 많은 기능이 숨겨져 있습니다. CSS를 잘 활용하면 더 짧고도 정확한 코드를 작성할 수 있습니다. Display, 포지셔닝, Float 속성을 활용하여, 보다 복잡한 형태의 사이트를 만들 수 있는 능력을 길러봅시다.

#선택자 #CSS상속 #CSS우선순위 #Display #세로정렬 #relative포지션 #absolute포지션 #float

프로젝트
웹사이트 한 단계 업그레이드하기

지금까지 배운 내용을 복습해보세요. 개념들을 총동원하여, 한 단계 업그레이드된 놀이공원 사이트와 쇼핑몰 사이트를 만들어봅시다.

#리스트 #쇼핑몰만들기

프로젝트
반응형 웹사이트 만들기

웹의 장점은 다양한 기기에서 손쉽게 실행된다는 것입니다. 다양한 기기와 환경을 지원하도록 반응형으로 웹을 구성하는 방법을 배워봅니다.

#반응형웹 #반응형그리드 #이노사이트만들기

프로젝트
부트스트랩 배우기

부트스트랩은 사이트를 더 쉽고 간편하게 만들 수 있게 해주는 프레임워크입니다. 부트스트랩을 통해 짧은 코드로 예쁜 디자인을 만들어봅시다. 또한, 다른 프레임워크를 내 코드에 활용할 수 있는 능력도 길러봅시다.

#부트스트랩 #반응형그리드 #재능공유사이트만들기

프로젝트
나만의 포트폴리오 만들기

3개월 만에 웹퍼블리셔가 되셨습니다. 여태까지 배운 HTML과 CSS 개념들을 응용하고, 나만의 멋진 웹사이트와 웹 어플리케이션을 만들어보세요!

#자료형 #숫자형 #문자열 #불린 #변수 #함수 #return문 #while문 #if문

프로젝트

수업 평가 4.9!

진솔한 수강후기가 수업의 질을 증명합니다!

Hyun Kyo Jung

제가 처음으로 군대에서 컴공에 관심을 갖고 군대 선임의 추천에 코드잇에서 파이썬 강의를 듣고 이젠 복학하여 아예 전공을 바꿨습니다. 짧은 동영상 강의랑 이어지는 관련 과제를 통해 학습하는 것이 정말 효율적이였던거 같습니다~

JINU NOH

후기를 잘 남기지도 믿지도 않는 편이지만, 저에게 코딩의 재미를 알려준 코드잇에 감사의 마음을 담아 남깁니다. 저에게 속는 셈 치고 한 번 배워보세요.

나아람

전공자임에도 불구하고 기본적인 코딩조차 하지 못했었는데, 지금은 구현 방식이 머릿속에 맴돕니다. 다른 수업/책들 필요없습니다. 코드잇만 믿고 따라오세요!

seunghyun shin

모르겠다가 갑자기 이해가 되어 코드를 짰을 때 정말 감동받았습니다. 코딩이라는 게 진짜... 사고력의 끝판왕인거 같아요. 열정이 생겼습니다!

FAQ

코드잇의 강좌는 어떤 형식으로 구성되어있나요?

코드잇의 강좌는 어떤 형식으로 구성되어있나요?
첫째, 동영상 강의와 핵심 노트로 개념을 정리할 수 있습니다.
둘째, 배운 개념을 실습할 수 있는 과제와 프로젝트가 주어집니다.
셋째, 이를 제출하면 자동/수동으로 채점과 피드백을 받으실 수 있습니다.
넷째, 궁금하신 점은 언제든 커뮤니티에 질문을 올려, 동료 수강생 분들끼리 질문과 답변을 주고 받으실 수 있습니다.
마지막으로, 강의를 모두 마친 후 배운 내용을 응용하여 스스로 포트폴리오를 만들어보시는 것을 권장드리며, 이를 커뮤니티에 공유할 수 있습니다.
진도의 70% 이상을 이수하시면, 코드잇의 공식 ‘수료증’을 발급해드립니다.

코드잇 강의의 목표는 무엇인가요?

고액의 학원을 다니고 몇년째 개발자로 일하고 계신 분들이 아주 기본적인 알고리즘 문제도 못 푸는 모습을 보고 충격을 받았습니다. 현재 한국의 프로그래밍 교육은 자격증이나 문법을 위주로 다루고, 사실상 가장 중요한 문제 해결 능력은 가르쳐주지 않기 때문에 이런 상황을 흔히 볼 수 있었던 거죠.
코드잇 수업의 목표는, 이 시대에 꼭 필요한 프로그래밍과 컴퓨터적인 사고력을 기르는 것입니다. 코드잇이 추천하는 과정을 따라 수업을 이수하면, 풀스텍 웹 개발, 모바일 어플 개발, 데이터 분석, 업무자동화 등 어떠한 분야로도 나아가실 수 있습니다.