활동 포트폴리오 웹사이트 만드는 코딩 수업
Outcome
: 각자의 웹사이트를 레쥬메 상단에 적을 수 있도록 완성도 높게 제작,레쥬메에 HTML, CSS, JavaScript, web development 를 스킬로 적을 수 있도록 기본개념 학습 및 실전,프로그래밍적 논리 배우기,Deploy, setup 등의 혼자 시도할 경우 시간이 많이 걸리고 흥미를 잃게 될 수 있는 부분을 빠르게 완료할 수 있도록 도움을 받고, 코딩의 재밌는 부분 (실제로 작동하며 반응하는 웹사이트 만들기)에 집중하기
참여가능 학생수 : 4
시간표 : 두달간 일주일에 2회 (총 18회)
위치 : 그루미 역삼역 스터디룸
기간 : 2018-7-23 2018-8-11
참여금액 :
코딩수업 왜?
- 직접 웹사이트를 만들어 개인 포트폴리오를 레쥬메에 링크로 넣을 수 있는 기회
- 굳이 공대를 지원하지 않더라도 코딩경력은 아직 미국대학지원자중에서는 차별화가 될 수 있는 좋은 기회
- 대학에 지원하는 시점에서 직접 코딩으로 무언가를 만들어본 학생은 프로그래밍 수업을 들은 학생에 비해 차별화
- 코딩을 통해 논리/사고력을 기를 수 있는 장점
- 미국에서 엔지니어가 계속 부족한 상황이며, 특히 컴퓨터 엔지니어/프로그래머 수요는 향후 최소 몇 년간 공급보다 많을 예정
- 미국 엔지니어 이력서에는 성적이나 학벌만큼 프로젝트가 중요하다 (왜냐하면 돈받고 한 일이 아니기에 그 분야에 관심이 있다는 것을 어필할 수 있음); 그러므로 공대에 지원할때 이와 비슷하게 직접 무언가를 만들어본 경험이 있다면 돋보일 수 있다.
코딩수업 개요 및 커리큘럼
* 목표: 무료로 제공되는 github.io 무료 도메인을 이용, 학생 각자의 개성을 살린 웹사이트 제작하기.
* 숙제: https://www.codecademy.com/learn/learn-html-css 로 배운 내용 복습을 하되, 모르는 부분이 있으면 실시간으로 질문/ 결과물을 빠른 시간 내에 완성하기 위해 수업간에 최소 2시간의 숙제량이 필요됩니다.
|
수업일수 |
배울 내용 |
목표 |
|
1 |
- 자기소개 & HTML, CSS에 대해서 어느정도 이해하고 있는지 파악: - 내가 생각하고 있는 웹 프론트란? + 웹 프론트 개발자들이 하는일 - Motivation : https://algorithm.dimigo.hs.kr/ (js, jQuery animation) - 코딩에 대한 흥미를 심어주기 위해 재미있는 웹사이트 몇 개 보여주고 (예: www.facebook.com, www.pikicast.com), 실제로 만드는게 어렵지 않다는 것을 보여주기 위해서 chrome inspector 를 이용, 코드를 뜯어보기 (값을 바꿔가며 실시간 demonstration) : - Crash Course Introduction to HTML, Javascript, CSS, and how they work together (제 개인 도메인에서 샌드박스 페이지를 만들 예정, 이 페이지에서 HTML, JS, CSS 코드를 수정해가면서 어떤 영향을 미치는지, 어떤 원리인지 배우기) : 20분 - 깃헙가입, 첫 repository 만들고 템플릿 html 파일 deploy 하기 |
도메인 등록, 각자의 웹사이트에 hello world 띄우기 |
|
2 |
HTML div 기본 원리 설명, 개념이해 및 적용 HTML 박스모델 원리 학습, 실제 웹사이트에 적용 |
1회 수업 때 등록한 깃헙 웹사이트에 HTML 과 CSS 파일을 혼합한 자기소개 div 를 넣기. CSS 클라스와 아이디 최소 하나씩 구현하기 |
|
3 |
HTML 태그 + CSS |
2회 수업 때 만든 div 바로 밑에 div 두 개를 만들고 css 로 스타일링 하기 |
| 4 | JavaScript / jQuery 개념학습 및 Codecademy, JSfiddle 을 이용한 실습 | 각자의 웹사이트에 클릭 시 본인의 이름이 바뀌게 되는 버튼 넣기. |
| 5 | JavaScript / jQuery continued (JSfiddle, actual implementation on webpages) | 웹사이트에 넣고 싶은 효과 넣기 |
| 6 | JavaScript continued | 클릭 시 expand 하는 div 넣기 |
| 7 | Bootstrap 소개 | 각자 웹사이트에 Bootstrap 설치 |
| 8 | Bootstrap 에서 원하는 효과 구현 | Bootstrap 기본 설정값에서 바꾸면서 원하는 효과 구현하고 새로운 div 를 넣기 |
| 9 |
- Youtube embedding, 위치와 사이즈 조절하기 - 인스타그램 embed |
각자의 웹사이트에 유튜브 동영상 1개, 인스타그램 피드 넣기 |
* 화려한 시각적 효과를 위해 Parallax JavaScript library 를 쓸 가능성도 있습니다 (배경과 앞의 이미지가 다른 속도로 움직이는 효과; 예시: https://dixonandmoe.com/rellax/)
* Bootstrap은 아예 안 쓸 가능성도 있습니다.
첫 수업 전 준비
*웹사이트에 게시 될 컨텐츠
1. 자기소개 (사진)
2. 활동/취미 (사진/영상)
3. 관심있는 주제에 대한 글 (두편), 예 가장 존경하는 위인/인물, 10년 후의 나 자신