오프라인 캠프
입문

코딩으로 웹디자인 STEP ONE

과제 중심의 웹 코딩 입문과정, 비디오 강의 + 1:1 피드백

  • 과제를 수행하면서 스스로 공부할 수 있게 만드는 주도적 학습
  • 강사 따라하기 식의 수업이 아닌, 스스로 만들어 보는 것에 포커스
  • 과제에 대한 1:1 피드백 영상 제공
  • 단계

    입문

  • 강의기간

    6시간씩 4회

  • 정원

    6인 소수정예

  • 학습관리

    과제 중심 진행

  • 특장점

    맞춤 피드백

  • 장소

    홍대/신촌/강남 일대

생생한
수강후기

⭐

김현지

2021년 03월 16일

원래 이런 후기를 남기는 편이 아닌데 이번 수업은 너무 만족해서 후기 남깁니다.
html, css에 대해 아예 모르는 채로 이 수업을 수강했습니다. 어도비 프로그램은 꽤 만질 줄 알지만 그 외에는 컴맹에 기계치라….두려움을 안고 수업을 들었어요. 정말 백지상태라서 배우는걸 그냥 막 집어넣은 것 같아요.ㅋㅋ

생각보다 과제가 빡세서 저는 조금 힘겹게 들었지만… 한달만에 이 정도로 발전할 수 있을 줄 몰랐어요. 사실 그냥 도전해보자! 정도였고 내가 정말 따라갈 수 있을까? 고민을 많이 하다가 신청했거든요.
근데 수업도 소수로 진행해서 선생님이 확실히 이해한게 맞는지 다시 계속 체크해주시고 이해안가는 부분에 대해서는 다시 짚어주셔서 ㅠㅠㅠ4회 수업이었지만 생각지 못한 성취를….! (저보다 열정적인 슨생님...)

물론 지금도 초보긴 하지만 기본적인 틀을 잡고 일반 웹사이트를 흉내내볼 수 있게 돼서 너무 기쁩니다. 그리고 일단 그냥 코드를 따라 적는게 아니라 이게 뭐고 왜 사용하는 건지 정리해주셔서 그 점이 너무 좋았어요… 이해가 되니까 사용할 수도 있게되고! 잘 못하지만..그래서 더 공부해보고 싶다는 생각을 이 수업듣고 하게 됐어요...

정말 수강할까 말까 고민하는 분 있으시면 붙잡고 무조건 들으라고 하고 싶네요... 어서 빨리 다음 단계 수업도 내놓으세요 선생님!!!!ㅋㅋㅋㅋㅋㅋ

코딩으로 웹디자인STEP ONE

  • 수강대상입문자 : 코딩으로 디자인 구현하는 것을 시작하는 사람
    • 개발자와 원활한 소통을 원하는 디자이너
    • 자신의 디자인을 코딩으로 직접 구현하고 싶은 디자이너
  • 강의목표웹사이트 레이아웃 안정적으로 구현하기

    가장 기본적인 기술로 웹사이트 레이아웃을 구현하는 방법과 핵심을 이해하는 것이 본 강의의 가장 큰 목표입니다.

    그 핵심을 이해하면 본인이 원하는 형태로 자유롭게 웹사이트 레이아웃을 직접 구현할 수 있습니다.

    아무리 복잡한 레이아웃이라고 할지라도 결국에는 핵심 내용이 반복적으로 응용되어서 구현되기 때문입니다.

    디자인툴로 디자인하는 것과 코드를 입력해서 디자인하는 것의 차이점을 이해할 필요가 있습니다.

  • 준비사항강의 참여를 위한 준비
    • Laptop 필수(노트북 등 개인용 컴퓨터)
    • 필기도구 지참(스케치 용도)
    • 10분전 착석
12월 강의일정
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%

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

  • 추가적인 궁금증은?

    빔캠프에게 문의하기
빔캠프는 인터넷 익스플로러를 지원하지 않습니다. 최신 브라우저로 접속하기 권장 드립니다 :)