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₩
강의 왜 계속 끊기나요..
강의는 좋습니다. 좋은데 강의가 계속 끊깁니다. 요즘세상에 뭐 이런일이..,3~4강연속으로 보면 특히 그러는거 같은데 왜이럴까요
일단 완강했습니다!
코딩을 처음 접해봐서 어렵게만 느껴졌었는데 차근차근 강의 설명 따라가고 강의 끝나면 혼자서 될 때까지 해보고 나니
자신감도 생기고 할 수 있다는 생각이듭니다. 하지만 아직까지 손에 확실히 익혀지지는 않아서 다른 강의 들으면서 복습도 병행해야할 것 같습니다.
국비학원 다니고 있다면 보조로 듣기 추천
라고 했지만 국비보다 더 이해하기 좋아서 국비 왜 듣나 후회함(ㅋㅋ)
국비로 이론 배운다 생각한 다음에 들으면 뇌에 잘 박힐듯
뷔페임
뷔페긴 뷔페인데 호텔 뷔페는 아니고 그냥 적당한 가격의 뷔페임 없는 게 없지만 고급 요리는 아닌
요즘 잘 쓰이지 않는다는 이유로 다른 온라인 강의에서는 취급 안하는 부분들도 다 한 번씩은 짚고 넘어가고
(요즘 잘 쓰이든 안 쓰이든 일단 기능은 다 알아야하지 않겠음?)
이 강의만 들으면 대부분의 기능을 다 한 번쯤은 만져볼 수 있음
응용 및 심화학습은 본인 몫임
처음하는 사람도 이해하기 쉽습니다.
강의 유튜브에서 이것저것 듣다가 자바스크립트 class에서 막혀서 그냥 복습할겸 html/css도 공부하고 있습니다. 강의가 10분 전후로 타이트하고 내용도 군더더기 없이 설명하는게 장점입니다. 30만원에 프론트엔드 개발자 공부하기 아주 좋습니다. 강의도 재밌습니다
꿀잼 핵이득 강의 수업 듣다가 웃고 있는 나 자신을 발견함
웹디자인 학원에서 html, css, javascript, jQuery 배우고 웹, 모바일 프로젝트 하드코딩으로 간신히 진행하고나서도
감이 안잡히던 코린이였는데 이 강의를 보고 html, css를 어떻게 활용하는지 배울 수 있었습니다.
덜 알려주는 것 없고, 알고 들으면 훨씬 재밌고 좋은 강의 입니다! 완전 추천!
이 강의 듣고 코딩이 훨씬 재밌어졌어요!!
그리고 강의 들으면서 여태 배웠던 것들이 이해되면서 이마를 계속 치고 놀라워했습니다.. 정말 감사합니다 어디계신가요..? 계신 방향으로 절하고싶습니다..
원래는 리엑트만 들으려고 했는데...
무료 강좌 들어보니 이 강좌도 들어보고 싶어 그냥 1년 프리패스 결제해버렸습니다.
html, css, 자바스크립트는 해외 국비, 한국 다른 사이트에서 공부했습니다.
그 사이트는 짧은 시간내에 다 끝내야 해서 정말 기초적인 것만 가르치는데, 이 곳은 그 곳보다 좀 더 심화 내용도 가르쳐 줍니다. 덕분에 그 곳에서 못 배운 신기한 기능도 많이 배웠습니다.
훔.. 거기 결제하기 전에 이 강의를 먼저 발견했더라면...ㅠㅠㅠㅜㅠㅜㅠㅠ 으헝헝헝헝헝허어허ㅇ
게다가 귀에 쏙쏙 잘 들어오는 목소리이기도 하고 중간중간 쌤의 개그에 피식하기도 하고 암튼 그냥 무조건 추천합니다.
영상에 번역 기능까지 있다면 외국 친구들한테도 추천하고 싶은 강의입니다!!!
딴거보다 낭비한 시간이 너무 아까움
진작 이거 들었으면 좋았을걸 싶어요.
자잘한 태그까지 하나하나 읽어주는 인강 듣고 있었어요. 이게 asmr인지 인강인지 계속 잠이 와서 도저히 진도가 안나가더라고요.
이걸 다 외우라는건지. 어따 써먹는건지. 그렇게 들었어도 간단한 레이아웃 하나 못 짰어요.
이러다가는 끝없이 늘어질 것 같아 다른 방법을 모색하다가 발견했습니다.
실전형이라 직접 만드는 예제가 많아, 지루하지 않고 잘 외워져요. 단기간에 실력을 쌓는 느낌입니다.
다른 사람이 코딩 배우고 싶다고 하면 여길 먼저 추천할거예요.
강의 들을 때 팁
중간중간에 레이아웃 제작하는 숙제 있는데 패딩 마진 빠뜨리지 말고 정확히 따라해보는 걸 추천. 1픽셀 차이로 레이아웃이 엉망되는 기적이 발생해서 대충 이 정도 하면 되겠지 하고 넘어가면 실력이 덜 느는듯
야동을 볼필요가 없다.
이상한 인강,교제 사며 재미없는 따라해보기 공부만 하다가 코딩애플 강의를 들으며 프로젝트를 준비하고 있습니다.
진짜 기막히게 핵심 포인트만 잘 찝어주시고 루즈하지 않게 중간중간 과제도 내주십니다.
매일 공부전 한발씩 빼고 시작하였는데 이젠 더이상 아이피를 우회 할 필요가 없게 되었습니다.
가 뭔지도 몰랐던 빡대가리 엿습니다
가 뭔지도 몰랐던 빡대가리 엿고
기초가 없어서 다른 유튜브 보면서
이걸 왜쓰지? 하면서 하나도 이해를 못햇는데
이 강좌 보니까 웹페이지 디자인 뚝딱 할 수 있게됐네요
코딩의 즐거움을 알려준 애플쌤, 넘 감사합니다 🍎
2년제 관광과 졸업 후 엘리베이터 유지보수 1년4개월 다니다 퇴사한 26살 남자 비전공자의 후기
학원 강의를 들을까 이걸 들을까 고민했습니다. 무료 강의를 들어보고 설명이 깔끔하고 귀에 쏙쏙 박혀서 학원 패스하고 코딩애플님 강의를 들었습니다.
기초가 없는 저같은 사람 조차도 강의가 재밌었고 혼자서 충분히 웹페이지를 디자인을 만들 수 있다라는 자신감이 생겼습니다.
애플코딩님을 만난건 제 인생에서 큰 전환점 중 하나라고 생각이 들정도로 너무 훌륭한 강의였습니다..
너무 감사합니다. Javescript 기초 강의로 넘어 가겠습니다. (웹개발 수강가이드 짱짱맨!!)
기본적으로 되게 좀
강의가 맛있다.
군인에서 개발자의 가지게 되었다.
이제 의무복무 7년 중에서 3년 남았는데 군대에서 삽질하는 거 이제 노트북으로 삽질하기는 하는데 매우 재밌네요ㅋㅋ 형 고마워요
기초를 다시 배우기 좋음
리액트만 하려고 했다가 프리패스 끊어서 아는데 괜히 듣는거 아닌가 걱정을 좀 했습니다.
역시나.. 구글에 검색해서 복붙으로만 사용하던걸 이제서야 이해하면서 사용하게 되었네요.
마크업언어라고 쉽다 했었는데 막상 생각해보면 다 북붙.
복붙에서 벗어나 MDN만으로 내가 원하는 기본 UI를 디자인할수 있게 되어서 기쁘네요.
기초의 기초부터 따지는 명강의
웹 공부를 시작하실거면 일단 사고 들어보세요
평소에 HTML CSS의 대해 궁금했던 것들이 거의 다 풀렸던 거 같네요
장담합니다 사세요
코딩애플은 프론트개발의 신이다
별 백만개 드림
충성충성~
그냥 이거들으셈
가격이 비싸다??
여기 저기서 찍먹한다고 날리는 시간 + 조금씩 들어가는 돈
다 합치면 그냥 코딩애플 패키지 사는게 훨씬빠름
포트폴리오 만드는중인데 이 패키지 하나로 웬만한거는 쌉가능
이제 자바스크립트 리액트 들으러가야징
기초 다지기 좋은 강의
타사 웹 강의를 듣다가 너무 따라하기식 내용이 많아 건너오게 되었습니다.
확실히 직접 고민하면서 끝까지 제작하는 경험이 도움이 된거 같습니다.
어렴풋이 경험만 해본 사람들에게도 꽤나 도움이 될 내용입니다만...
이 강의를 완강하고 나서 시중에 유명한 사이트 UI를 5개 정도 직접 만들어보는 실습을 하는게 좋을것 같습니다.
이제 동적 처리를 위해 Javascript를 공부하러 갑니다. 빨리 React, Vue까지 갔으면 좋겠네요.
많은 강좌중에 여길 선택한 이유는..
학원에서 기초 수업html css jquery js 다 듣고 돌아보니 혼자서 뭘 할 수 있는게 없었다... 진짜 열이 머리끝까지 뭘 말하긴 하는데 연결성 없이 설명만 몇개월 계속 떠든다... 환불은 물건너 갔고.. 과정만 맞추고 혼자 해야겠다는 생각이 들었다.. ... 유투브나 강의 싸이트 돌다가.. 대충은 알겠는데 막상 뭐라도 하려니 뭐부터 해야할지 모르겠고... 당장 포폴 수업이 들어가는데 끌려가면 이도저도 안될것 같고 무엇이든 손으로 해야하는데 그마저도 뭘 해야 할지 모르는 상태였다. .박스 왼쪽오른쪽 옮기고 백그라운드 바꾸는 것 밖에 기억안난다. 학원 진짜..앜ㅋㅋㅋㅋㅋㅋ xㅂ......
코딩애플 유투브 무료강좌 보면서 뭐라도 계속 만드는 나를 발견함. 벌써 폴더 19개째 만들어서 2~3강의 남았다.. 멸치를 고추장에만 찍어먹어본 강사 강의를 수개월 듣다 정신병 걸리는 줄 알았는데 볶아먹고 갈아먹고 우려먹은 사람한테 배우니까 훨씬 응용력도 생기고 속이다 시원하다..심지어 그리드는 여기서 처음봤다... 하.. 지난 시간들이 너무 아쉽고 아깝다... 올해도 벌써 4월을 바라본다.. 지금이라도 알아서 다행이고 클론코딩 반복하면서 체화해야겠다. 자신감이 생겼다.