HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, animation 까지
표준 HTML부터 flex/grid 모던 레이아웃, Bootstrap, Sass, CSS 애니메이션 등
웹페이지 디자인과 퍼블리싱에 필요한 모든 내용을 배우실 수 있습니다.
최근 스타트업, 대기업 등에서 적극 사용하고 있는 2020년 + 스타일 HTML과 CSS 문법을 배워가도록 합시다.
꽉차보이는 포트폴리오를 만들 수 있는 여러가지 UI 예제들이 준비되어있지만
닥치고 선생님 코드 받아적기만 하면 정말 그것밖에 못만들기 때문에
여러분들이 무엇을 보든 직접 만들 수 있도록 CSS 동작 원리를 알려주는 내용들이 많습니다.
[커리큘럼 요약]
- HTML5 기초
- 기본 float position display 레이아웃
- flex/grid 등 2020스타일 레이아웃 기법
- 최신스타일 깔끔한 코드로 만드는 반응형 웹
- Bootstrap, font-awesome, google fonts 필수 라이브러리 사용법
- 자바스크립트 없는 pure CSS 애니메이션
- Sass CSS 전처리 엔진
- 관리가능한 CSS 작성법 (아키텍처)
- Emmet 등 생산성을 위한 툴
- 20개 이상의 포트폴리오용 UI elements
- 3개의 실전 프로젝트 (반응형 랜딩페이지, SNS프로필 페이지, 통계관리 Admin 페이지)
[필요한 사전지식]
없음
[업데이트 사항]
- 3D 애니메이션 강의 추가
- 신년기념 전체강의 업데이트 끝
커리큘럼
| 기초모듈 | |||
| HTML 기초와 개발환경 셋팅 | 무료 | 00:05:00 | |
| HTML 기본 태그로 글 작성해보기 | 무료 | 00:09:00 | |
| 기본적인 웹페이지 스타일링 | 무료 | 00:12:00 | |
| CSS 파일 만들고 첨부하는 법 | 무료 | 00:11:00 | |
| 웹레이아웃의 기초 : div를 이용한 네모네모 박스 디자인 | 무료 | 00:12:00 | |
| 레이아웃 만들기 1 : 호환성 좋은 float | 무료 | 00:13:00 | |
| 레이아웃 만들기 2 : 귀찮은 inline-block | 00:11:00 | ||
| 레이아웃 만들기 숙제 : Blog 글목록 만들기 | 00:12:00 | ||
| 셀렉터를 이용해 CSS 코드 양 줄이기 | 00:12:00 | ||
| 배경 이쁘게 넣는 스킬들 & margin collapse | 00:12:00 | ||
| position과 좌표 레이아웃 만들기 | 00:11:00 | ||
| position 숙제 & 반응형 width & box-sizing | 00:11:00 | ||
| form & input | 00:09:00 | ||
| form & input 숙제 : Contact Us 섹션 만들기 | 00:15:00 | ||
| 쓸데 많은 Table 레이아웃과 vertical-align속성 | 00:12:00 | ||
| Table 레이아웃 숙제 : Cart 페이지 만들기 | 00:14:00 | ||
| pseudo-class로 인터랙티브 버튼 만들기 | 00:09:00 | ||
| 코드양이 줄어드는 class 작명법 (OOCSS, BEM) | 00:12:00 | ||
| 중급모듈 | |||
| HTML CSS 웹폰트 넣는 법과 안티앨리어싱 | 무료 | 00:11:00 | |
| 레이아웃 만들기 3 : 편리한 Flexbox | 무료 | 00:12:00 | |
| HTML CSS 코드짤 때 유용한 Emmet 그리고 부가기능들 | 무료 | 00:05:00 | |
| head 태그에 들어갈 내용 정리 | 00:05:00 | ||
| 반응형 레이아웃 만들기 | 00:13:00 | ||
| 반응형 레이아웃 숙제 : 가로정렬 레이아웃 | 00:10:00 | ||
| 개발자도구 잘쓰기 | 00:08:00 | ||
| Font Awesome 아이콘 넣기 | 00:10:00 | ||
| Transition 속성으로 CSS 애니메이션 구현하기 | 00:11:00 | ||
| Transition 숙제 : 상품진열 레이아웃과 애니메이션 | 00:12:00 | ||
| Portfolio 실습 1 : Landing Page | 00:00:00 | ||
| Portfolio 실습 1 : Landing Page (해설편) | 00:00:00 | ||
| Bootstrap 설치와 사용법 | 00:11:00 | ||
| Bootstrap Grid 레이아웃 | 00:11:00 | ||
| Bootstrap Grid 레이아웃 숙제 해설 | 00:12:00 | ||
| CSS 덮어쓰기 잘하는 법 & 어떤 코드가 좋은 코드인가요 | 00:10:00 | ||
| Portfolio 실습 2 : SNS Profile | 00:00:00 | ||
| Portfolio 실습 2 : SNS Profile (해설편) | 00:00:00 | ||
| 고급모듈 | |||
| 약간 쓸데없는 Pseudo-element | 무료 | 00:09:00 | |
| 딥다크한 어둠의 공간 Shadow DOM | 무료 | 00:12:00 | |
| 만든 사이트 발행하기 | 무료 | 00:05:00 | |
| 쉽게 배우는 Sass 기초 1편 : 셋팅 | 무료 | 00:09:00 | |
| 쉽게 배우는 Sass 2편 : 핵심문법 | 00:09:00 | ||
| 쉽게 배우는 Sass 3편 : Mixin, use 등 | 00:13:00 | ||
| 쉽게 배우는 Sass : 숙제 해설 | 00:13:00 | ||
| HTML video, audio 다루기 | 00:07:00 | ||
| transform & animation으로 애니메이션 만들기 | 00:14:00 | ||
| transform & animation 숙제 해설 (움직이는 메뉴) | 00:13:00 | ||
| 레이아웃 만들기 4 : CSS Grid 레이아웃 | 00:12:00 | ||
| 레이아웃 만들기 4 숙제 (인스타그램 격자 레이아웃) | 00:08:00 | ||
| position : sticky 활용하기 | 00:08:00 | ||
| Portfolio 실습 3 : Admin Page | 00:00:00 | ||
| Portfolio 실습 3 : Admin Page (해설편) | 00:00:00 | ||
| CSS 3D animation : 종이처럼 뒤집히는 프로필사진 만들기 | 00:12:00 | ||
수강생 리뷰
관련강좌
도커 Docker & Container
웹서버를 만들든 파이썬으로 AI모델을 돌리든 뭘하든 도커와 컨테이너라는 용어를 자주 듣게 될텐데 왜냐면 이전과 다르게 프로그램을 컨테이너로 싸매서 배포 & 실행하는 경우가 많아졌기 때문입니다. …
신청하기50,000₩30,000₩
쉽게 배우는 Spring Boot & JPA
옆집 철수도 백엔드 개발자되는 시대라길래 6개월짜리 학원 며칠 다녀봤지만 막상 스프링 부트 배워보면 1. 어렵고 복잡함 2. 암기식임 3. 노잼 이런 이유 때문에 매년 …
신청하기180,000₩85,000₩
Next.js로 웹서비스 만들기
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사용해서 만든 …
신청하기160,000₩75,000₩
장 단점
장점
유튜브로 하면 기본문법은 배워도 써보질 않아서 CSS능력은 개뿔 각 문법을 어떻게 쓰는지도 모르겠음
근데 이 강의 숙제때문에 쓰다보면 자연스럽게 익혀져서 다른 거 만들때 대충 어케만들지 느낌이 오게됨
쓸데 없는건 대충 넘어감
단점
숙제 안하면 의미없음
엄마 난 커서 코딩애플이 될래요
정말 옛날부터 꿈꿔왔던 그런 강의입니다.
숙제 잘만 하면 진짜 영유아가 아닌 이상 이해가 안 될 수가 없습니다.
앞으로 코딩 강의는 여기에서만 구매할 듯 하네요!
코딩애플에 입덕할뻔
Html/css 쯤이야라는 생각으로 시작했는데
잊었다하면 튀어나오는 과제따라가다가
3일 내내 강의만 봤네요.
역시 어둠의 생활코딩이라는 명성에 맞게
시니컬한 목소리로 가르쳐주셔서
다보고 나면 알수없이 흠씬 두들겨 맞은 기분이지만
은근 꼼꼼하게 중요한 개념이나
과제용 예제도 현실적으로 챙겨주셔서
시간낭비한다는 느낌없이 실무자에게 배우는 기분입니다.
웹 패키지 사실 타 강의에 비하면
안비싼 가격인데도 막상 결제할때 살짝 쫄렸는데
정말 안아까운것 같아요!
음 뭐랄까
코딩애플 당신은 코딩 강좌계의 아리스토텔레스입니다. 한마디로 GOAT.
고맙습니다 스승님.
일단 말투부터 합격
차분한 선생님 말투가 아닌 옆집 형아가 야! 일로와바! 하고 툭 툭 가르쳐주는 말투의 매력에
지루하지 않게 듣고있습니다.
근데..숙제 안하고 그냥 들어서 .... 첨부터 다시 들어야하나 싶네요.
에헤이 ..
수강완료
html/css는 넘기려다가 기초부터 다시 다지기 위해 들어봤는데요.
팁도 많고 헷갈린 부분들도 이해하기 쉽게 설명해주셔서 후회 없습니다.
목소리 딕션 다 좋으셔서 더욱 이해가 잘 됩니다.
애플행님 three.js는 강의 계획 없으신지 여쭤봅니다.
강의 스타일이 저한테 최적이라서 강의 찍어주시면 바로 구매하겠읍니다..
three.js도 가능하시면 부탁드리겠읍니다.. shut up and take my money..
넷플릭스 보듯이
동영상 강좌를 듣는게 아니고 유튜브나 넷플릭스 시청하듯 재미있게 술술 넘어가네요, 물론 숙제를 안하면 아무 의미없어유.~
추천받고 들었는데 역시
퍼블리셔 취준생이라 기초 다질겸 들어야지하고 시작한건데 과제하면서 절로 겸손해졌습니다....^^
하루만에 끝내는거 아닌가 자만하며 들었는데 과제 하나로 버벅이는 저를 보며 반성도 했습니다ㅋ;
강의도 지루하지 않고 시간도 적절하며 핵심기초만 딱딱 속전속결 진행되는게 아주 마음에 드네요.
물론 기초부분이라 처음 접하시는 분들은 실습위주로 심화연습이 필요할 듯 합니다.
시멘틱 태그나 접근성 부분도 따로 공부가 필요하구요.
하지만 전체적으로 만족!
다음 강의 들으러 갑니닷~.~
실무에 바로 써먹을 수 있는 강의
그냥 이거 들으세요
맛있으면 꽥꽥거리는 오리
꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥꽥!!!
물고기 낚는 법은 확실하다!
이미 react랑 vue로 프로젝트도 몇 개 완료해봤지만, 기초를 다시 배우려고 듣고 있는 중입니다.
강의가 진짜 굳입니다.
이거 하나만 듣지 말고 패키지를 사서 들으십시오. 더 굳입니다.
코딩애플 센세 아리가또
당신 덕분에 애니 감상만 하던 제가 코딩을 하게 되었습니다
아리가또 센세
와
제가 초등학교 6학년인데 빠짐없이 이해했습니다. 그리고 너무 재미있어요. js강의들으러 가봅니다.
굿
제가 12살인데
정말 이해가 잘됩니다.
js도 배우고 싶네요.
강의 많이 올려주세요!
리뷰잘안쓰는데
국비 5개월 수업듣고 듣는건데도 새로배우는게 너무 많네요..
숙제까지 해서 총 3~4주 걸렸던 것 같은데 정말 알차게 잘 들었습니다. ㅎㅎ
기존에 알지 못했던 꿀팁이나 새로배우는 것들을 접할때마다 설레었습니다 ㅎㅎ
아무래도 코딩애플 선생님이 재밌게 잘 알려주셨던 덕분이겠죠
이제막 html css를 뗐지만 앞으로 남은 강의도 잘 들을 수 있을 것 같아요
저는 이제 자바스크립트 기초 강의 들으러 갑니다!
프론트 엔드 다 완강하는 그 날까지 숙제도 열심히 할게요 !
포토폴리오 뭐만들지 고민되지만 선생님한테 배운걸로 열심히 잘 써먹겠습니다 감사합니다 ㅎㅎ
깨달았습니다.
학원에서 배우는 HTML CSS보다 이 강의에서 듣는게 100배 이득입니다.
맛있게 잘 먹었습니다.
2년전에 퍼블리셔로 벌어먹다가 영상회사 이직하고 다시 프론트로 갈려는 수강생입니다.
국비출신인데 잘모르고 그냥 그렇구나 하고 실무때 쓰던거 여기서 한방에 이해하고 갑니다
그것도 굉장히 무심하게 넘어가는 부분이였는데 전 이마를 탁 쳤습니다.
JAVA먹으러 갈께요
근데 이거만 들으신다고 퍼블리싱 끝아님. 막상 혼자 할려면 무조건 막히십니다. 연습필수
대학교 강의보다 내용이 알차고 좋았습니다.
대학교에서 html과 css에 관해 배워가지고 포트폴리오를 제외하고 새로운 내용이 어느 정도 나오려나 궁금했는데
실무에서는 어떤 방법으로 사용되는지와 왜 그런지 설명 해주는 것을 들으면서 정말 많은 내용을 배우고 갑니다.