코딩으로 웹디자인 STEP ONE
과제 중심의 웹 코딩 입문과정, 비디오 강의 + 1:1 피드백
- 과제를 수행하면서 스스로 공부할 수 있게 만드는 주도적 학습
- 강사 따라하기 식의 수업이 아닌, 스스로 만들어 보는 것에 포커스
- 과제에 대한 1:1 피드백 영상 제공
-
단계
입문
-
강의기간
6시간씩 4회
-
정원
6인 소수정예
-
학습관리
과제 중심 진행
-
특장점
맞춤 피드백
-
장소
홍대/신촌/강남 일대
생생한
수강후기
⭐
이지은
2020년 04월 30일
html과 css는 계속 찔끔찔끔 배웠다 말았다 하면서 까먹기를 반복하고 있었는데, 체계적인 수업내용과 맞춤형 피드백을 통해서 탄탄한 기본기를 갖추게 된 것 같습니다. 거의 개념 정리가 아무것도 안 되어있는 상태에서 몇 백줄짜리 코드가 들어가는 페이지를 만들 수 있을 정도로 성장했다는 게 너무 신기해요. 개인적으로는 예제와 키워드가 주어지고 그걸 개인적으로 검색하고 공부하면서 과제에 적용해보는 과정과 이전 과제를 피드백해주신 동영상을 시청한 것이 가장 빨리 코딩에 적응하는 데에 도움이 된 것 같아요. 또 과제가 한 페이지에 정리돼서 한 눈에 체크할 수 있는 부분도 좋았구요. 한 달이라는 시간이 순식간에 흘러갔네요. 개인적인 사정으로 바로는 못하고 다음 달에 한걸음 더 강의를 신청했는데, 또 얼마나 제 실력이 늘어날지 기대가 됩니다. :)
코딩으로 웹디자인STEP ONE
-
수강대상입문자 : 코딩으로 디자인 구현하는 것을 시작하는 사람
- 개발자와 원활한 소통을 원하는 디자이너
- 자신의 디자인을 코딩으로 직접 구현하고 싶은 디자이너
-
강의목표웹사이트 레이아웃 안정적으로 구현하기
가장 기본적인 기술로 웹사이트 레이아웃을 구현하는 방법과 핵심을 이해하는 것이 본 강의의 가장 큰 목표입니다.
그 핵심을 이해하면 본인이 원하는 형태로 자유롭게 웹사이트 레이아웃을 직접 구현할 수 있습니다.
아무리 복잡한 레이아웃이라고 할지라도 결국에는 핵심 내용이 반복적으로 응용되어서 구현되기 때문입니다.
디자인툴로 디자인하는 것과 코드를 입력해서 디자인하는 것의 차이점을 이해할 필요가 있습니다.
-
준비사항강의 참여를 위한 준비
- Laptop 필수(노트북 등 개인용 컴퓨터)
- 필기도구 지참(스케치 용도)
- 10분전 착석
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
-
평일2021년 11월 평일 저녁
- 2021년 11월 1일 - 11월 25일
- 매주 월,목 19시 - 22시(3시간)
- 주 2회씩 4주, 총 8회(24시간)
-
주말2021년 11월 주말 오후
- 2021년 11월 6일 - 11월 27일
- 매주 토 13시 - 19시(6시간)
- 주 1회씩 4주, 총 4회(24시간)
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
-
평일2021년 12월 평일 저녁
- 2021년 12월 6일 - 12월 30일
- 매주 월,목 19시 - 22시(3시간)
- 주 2회씩 4주, 총 8회(24시간)
-
주말2021년 12월 주말 오후
- 2021년 12월 5일 - 12월 26일
- 매주 일 13시 - 19시(6시간)
- 주 1회씩 4주, 총 4회(24시간)
강의특징
-
Learning : 이해할 수 있도록 천천히 배우기
소규모 인원으로 매시간 대화하면서 진행합니다
매시간 막힘없이 질문하고 바로 답변 받을 수 있습니다
35% -
Creating : 창작 활동에 집중하기
배운 내용으로 창작 활동을 하는 것이 가장 중요합니다
강의가 총 8회차이므로, 8번 창작 활동을 해야 합니다
50% -
Feedback : 창작 활동에 대한 피드백 받기
창작 활동에 대한 피드백은 총 8번 제공됩니다
피드백은 1:1 맞춤 동영상으로 온라인에서 제공됩니다
15%
My Own Graph : 그래프 시스템으로 기록을 남기는 이유
-
1ST동기부여
같은 시간에 같은 수업을 듣는 사람들이 과제를 공유함으로써 서로 좋은 영감을 주고받을 수 있습니다. 그리고 또 한편으로는 창작 욕구를 상승시키는 좋은 자극제가 될 수 있습니다.
-
2ND작업 시간 관리
일을 할 때 정해진 마감 기한 내에 일을 마무리하는 것이 중요합니다. 연습을 통해 같은 작업을 반복하면서 후반으로 갈수록 자신의 작업 속도가 어느 정도인지 몸소 체감할 수 있습니다.
-
3RD성과 지표
초반부터 후반까지 성과를 한눈에 볼 수 있습니다. 수강 전과 수강 후의 변화를 체감할 수 있습니다.
-
4TH성취감
연습하는 과정을 매번 기록으로 남김으로써 스스로 발전하고 있는 모습을 인지할 수 있습니다. 그리고 그것은 중간에 포기하지 않고 끝까지 잘 마무리할 수 있는 힘을 실어줍니다.
Values : 혼자서 얼만큼 실행할 수 있는가?
-
1ST따라하기 예제를 지양하는 이유
원하는 형태를 직접 구현해 보는 연습을 반복하면서 혼자서도 충분히 잘 할 수 있는 자신감이 생깁니다. 밑그림이 없어도 혼자서 원하는 그림을 그려낼 수 있습니다.
-
2ND1:1 맞춤 피드백을 지향하는 이유
개인마다 가지고 있는 개성이 모두 다르기 때문입니다. 잘 된 부분과 개선되어야 할 부분을 구분하여 더 나은 방향으로 갈 수 있도록 제안합니다.
과제소개
My Own Study : 모든 수강생이 직접 주제부터 선정하고 전체 페이지 구성, 디자인을 자유롭게 표현합니다. 개개인의 취향과 느낌이 모두 다르게 녹아 있습니다. 이 과제 페이지를 통해서 더 많은 사람들이 영감을 주고받을 수 있기를 바랍니다.
교육과정
-
1주차1강 : HTML & CSS는 어떤 작업인가?
- 문서 기본 구조 작성하기
- 마크업과 스타일 구분하기
- 마크업 기본 문법 이해하기
- 스타일 기본 문법 이해하기
웹 분야에서 HTML & CSS는 어떤 작업에 해당되는지 알아보아요. 그리고 웹 문서에서 HTML은 어떤 역할을 하는지, 또 CSS는 어떤 역할을 하는지 알아보아요.
-
1주차2강 : CSS Box Model 이해하기
- Box Model 5가지 구성 이해하기
- Margin & Padding 사용법 이해하기
- Box Model, Total Width 계산하기
- CSS 초기화 이해하기
Box Model은 웹 사이트 레이아웃을 잡을 때 가장 다루기 쉬워 보이지만 막상 다루어보면 연습이 가장 많이 필요한 중요한 부분이에요.
-
2주차3강 : CSS Display 이해하기
- CSS Display 개념 이해하기
- Block Level Elements 이해하기
- Inline Elements 이해하기
- Inline-Block 이해하기
Box Model 다음으로 연습이 가장 많이 필요한 부분이에요. 이것만 잘 다룰 줄 알아도 고정 레이아웃을 아주 간결한 코드로 문제없이 만들 수 있어요.
-
2주차4강 : CSS Class 활용하기
- CSS 선택자 우선순위 이해하기
- Class - 개별 디자인하기
- Class - 일괄 디자인하기
- Class - 디자인 일부분만 변경하기
태그 선택자로 원하는 디자인을 모두 만들기에는 분명히 한계가 있어요. Class 선택자를 잘 다루면 반복되는 코드를 많이 줄일 수 있어요.
-
3주차5강 : CSS Margin 겹침 현상 이해하기
- Margin 겹침 현상 이해하기
- 형제간의 Margin 겹침 현상
- 부모 자식 간의 Margin 겹침 현상
- Margin 겹침 현상 활용하기
Margin 겹침 현상은 피해야 할 문제점이 아니에요. 겹침 현상에 대해서 충분히 이해하면 오히려 효율적으로 디자인할 수 있어요.
-
3주차6강 : CSS Flex Box 이해하기
- 축 개념 이해하기
- 컨테이너와 항목 개념 이해하기
- 컨테이너에 지정하는 속성
- 항목에 지정하는 속성
Flex Box를 이용해서 가로 배치를 할 수 있어요. 컨테이너와 항목, 주축과 교차축 개념으로 이루어져 있어요.
-
4주차7강 : CSS Flex Box 활용하기
- 방향 설정하기
- 아이템 순서 설정하기
- 컬럼 너비 설정하기
- 아이템 정렬 설정하기
Flex Box는 옵션이 많아서 다양한 레이아웃을 만들 수 있지만 그래서 조금 복잡하기 때문에 연습이 정말 많이 필요해요.
-
4주차8강 : CSS Position 활용하기
- Absolute 이해하기
- Relative 이해하기
- Z-Index 이해하기
- CSS Position 활용하기
Position을 이용하면 오브젝트를 어디든 원하는 위치로 보낼 수 있어요. 하지만 꼭 필요한 순간에만 사용하는 것을 권장해요.
강사소개
-
-
Jeoney Kim김지연입니다, 반가워요^^
어렸을 때부터 웹사이트 제작이 좋았습니다. 무엇인가 내 마음대로 만들어 나가는 작업이 매우 자유롭고 재미있음을 경험하였습니다. 서버 운영, 웹 퍼블리싱, 유지보수 업무 등 웹과 관련된 다양한 경험을 하였습니다. 현재는 웹 퍼블리싱 기술을 교육하는 일에 집중하고 있습니다.
강사 이야기 더 보기 -
교육 철학교육에 대한 가치관
- 천천히 배우기
- 창작활동 많이 해보기
- 피드백 받기
- 창작활동에 대한 고찰
- 기록하기
-
모든 분께수강생에게 바라는 점
- 연습하는데 시간투자 많이하기
- 일정한 간격으로 창작 활동하기
- 스스로 고찰하는 시간 가지기
- 관점에 따라 유연하게 생각하기
- 과정을 기록으로 남기기
자주 묻는 질문
-
캠프 과정을 모두 수료하면 어떤 수준까지 만들 수 있나요?
수강생 작품을 참고하시면 됩니다.^^ 물론 사람마다 개인 차이는 있습니다. 온라인으로 진행되는 캠프이니만큼 주어진 과제를 수행하는 것이 굉장히 중요하다고 할 수 있습니다. 과제를 놓치지 않고 꾸준히 한다면 기본적인 홈페이지 레이아웃은 혼자서도 충분히 만들 수 있습니다.
-
강의 난이도는 어떻게 되나요?
처음 시작은 아무것도 모르는 입장에서 시작합니다. 그러나 강의가 절반 이상 넘어가면 홈페이지 전체 레이아웃 잡기를 토대로 다양한 구성으로 진행 됩니다.
-
준비물은 무엇인가요?
개인 작업 컴퓨터가 필요합니다. 운영체제는 윈도우, 맥 모두 괜찮습니다. 윈도우는 버젼 7 이상만 가능합니다. 온라인 동영상 시청시에는 별도의 컴퓨터 혹은 태블릿PC가 준비 되어있으면 좀 더 편안한 공부가 되겠습니다.
-
디자이너만 수업을 들을 수 있나요?
비전공자, 웹디자인 코딩에 관심이 있는 사람이라면 누구든지 참여 가능합니다.
-
아쉽게도 일정이 맞지 않네요. / 인원이 마감되었네요.
온라인으로 진행되는 캠프이지만 개인별 과제수행 + 1:1 영상 피드백이 핵심인 캠프이기때문에 "일정"과 "수강인원 제한"이 있습니다. 홈페이지에 이미 공지된 일정을 변경하거나 조율하는 것은 어렵습니다. 다음달의 일정을 참고 부탁드립니다. 강의 일정/장소 설문조사에 참여해주세요 :) 더욱 많은 인원에게 강의를 제공하기 위해 노력하겠습니다.
-
환불 규정이 어떻게 되나요?
개강 직전, 100% 환불이 가능합니다
얼리버드 프로모션중인 캠프의 경우에는 환불이 불가능합니다
전체 수업 일수의 50%가 이미 진행된 경우에는 환불이 불가합니다
수업 진행일수 50%미만인 경우, 강의료의 33%를 환불해 드립니다 환불요청: support@veamcamp.com -
추가적인 궁금증은?
빔캠프에게 문의하기