-
기간 : 2018.09.15.(토) ~ 11.3(토) 오후 4시~7시 / 총 8회
-
대상 :
⋅⋅* 생활코딩 WEB1 강좌 수강을 마친 14세~19세 청소년 15명 ⋅⋅* 자신이 표현하고 싶은 웹사이트 기획 -
내용
컴퓨터 사이언스(computer science)의 역사와 철학을 바탕으로 프로그래밍 전반의 핵심원리와 개념을 이해 HTML+CSS 기본 템플릿에서 챌린지를 수행하면서 독립 웹페이지 제작
- index_[식별가능한id].html 으로 생성한다.
- LECTURE : 컴퓨터과학의 역사와 철학 그리고 인물
- PRACTICE : 개별 프로젝트에 실행과 코드 리뷰 및 비평 (CSS 템플릿 제공)
첫날은 컴퓨터 과학에 전체적인 흐름을 살펴보고 버전관리를 통해 정보를 어떻게 구조화하고 여러사람들이 어떻게 협업하는지에 대하여 연습할 예정입니다. 그리고 학생들이 가져온 간단한 웹사이트 기획을 서로 공유하는 시간을 가져 참여자들의 자신만의 문제를 도출하는데 도움을 줄 예정입니다. 마지막으로 생활코딩 웨WEB1의 중요한 내용을 복기하고 궁금했던 내용에 대하요 질의 하는 시간을 가질 예정입니다.
첫날은 컴퓨터 과학에 전체적인 흐름을 살펴보고 버전관리를 통해 정보를 어떻게 구조화하고 여러사람들이 어떻게 협업하는지에 대하여 연습한다. 학생들이 작성한 간단한 웹사이트 기획을 서로 공유하는 시간을 가지면서 자신의 문제를 도출해본다. 마지막으로 생활코딩 WEB1 강의에 중요한 내용을 복기하고 궁금했던 내용에 대해 질의하는 시간을 갖는다.
- 매트릭스-빨간약
- 시청각(이미테이션 게임)
- 컴퓨터 과학의 전체적인 모습을 파악
- 코딩의 힘에 대하여 생각해보기
- 0과1의 의미가 무엇인지(0과 1로 정보를 각자 자신만의 정보를 담기)
- 기계와 우리의 대화 (프로그래밍 언어 / 컴파일러), 기계어 – 어셈블리어 – 저급언어 - 고급언어 – 인간의 언어에 대하여 생각
- 오픈소스 문화에 대하여
- 각자 작성한 웹사이트 기획서 공유하기
- 하나의 문서를 동시에 여러명이 편집해보기
- HTML Tag 연습
Git수업은 마지막에 집중적으로 다루기, 수업중 강사만 사용하면서 익숙하게 할 예정
- Git과 Github를 통해 문서를 공유해보기
0과 1의 의미를 생각해보면서 현대의 컴퓨터가 발전하게 되는 역사와 그 성과를 이룬 인물을 살펴보면서 컴퓨터 구현의 원천 생각을 살펴본다. 컴퓨터과학을 보는 새로운 시각 갖기. HTML과 핵심을 살펴보고 CSS의 구조와 선택자를 이해하고 연습해보면서 Git를 이용하여 헙업하는 법을 경험해본다.
- 기본 HTML과 CSS 강의 살펴보기
- CSS 구조와 동작 원리 파악
- CSS 선택자
- 선택자의 종류-태그, 클래스, 아이디
- 캐스케이딩- Atom 에디터 익히기
- 선택자 게임 – 연습해보기
컴퓨터의 탄생과정을 복기하고 토론해보면서 컴퓨터의 핵심원리를 생각해보는 시간을 갖는다. CSS 선택자 게임을 통해 CSS 선택자를 이해하고 웹페이지 레이아웃을 하기 위해 필요한 인라인과 블럭레벨, 박스모델을 이해하고 연습한다.
- CSS 선택자 복기
- CSS 선택자 게임해보기
- CSS 인라인 VS 블럭레벨 이해하기
- Git 의 기본 기능 배우기
- 마크다운 배우기 [삭제]
- Git 기본명령어
- Github pull / push
프로그래밍이 무엇인지 복기하고 토론하므로서 프로그램밍의 핵심원리를 생각해보고 식사하는 철학자를 통해서 운영체제가 무엇인지 생각해보고 역사를 살펴본다. 소프트웨어 분야에서의 추상화가 어떻게 활용하는지 살펴본다. 연습트랙에서는 CSS 레이아웃의 연장에서 그리드 기능과 마진겹침 문제를 해결하는 연습을 한다. 자신이 만든 아이덴티티를 담아서 도메인을 구매하고 Github page를 연습한다.
- 0과 1에서 출발해서 컴퓨터가 탄생하기까지 대하여 복기/토론
- 기계와 우리의 대화(프로그래밍/컴파일러)에 대하여 복기/토론
- WEB1 HTML 복습
- CSS 박스모델 이해하기
- CSS 마진겹 현상 연습하기
- CSS 레이아웃
- 프로그래밍적인 문제를 질문하는 법 연습하기
- 이고잉님이 특강(web1, css 기본, 레이아웃) 1시간
- 파일명 [INDEX_[필명]_mid.html] 로 함 예) INDEX_DURU_MID.HTML
- 지금까지 배운 내용을 토대로 프로젝트 진행, 만들고 싶은 사이트 3시간동안 만들기
- 각자의 사이트를 만들어 github 에 올리기
10월 첫주는 Github를 통하여 프로젝트를 진행하고 통신과 프로토콜과 인터넷의 역사와 웹에 대하여 토론한다. 기본적인 CSS 기능을 이용하여 반응형 디자인을 연습하고 CSS의 실용적인 접근을 해본다.
- 우리들의 약속 (통신과 프로토콜)
- 통신과 프로토콜, 인터넷의 역사와 웹에 대하여 토론
- 프로토콜 정의 해보기
- 동료들이 레이아웃하는 방식에 대하여 코드 리뷰
- 도메인 구매하기
- Github Page 도메인 연결하기
- 프로그래밍의 핵심개념 (변수, 제어문, 함수, 프로그래밍 패러다임)
- Github를 통하여 동료의 코드 상호 리뷰, 코멘트 주는 연습
- Github에 HTML 페이지 퍼블리싱 하기
- DNS 원리 이해하고 DNS 설정하기
- CSS 포지션, 다단계 구현 연습하기
- CSS 반응형 디자인 미디어쿼리 연습하기
- CSS 코드의 재사용 연습하기
- CSS 고급 – UI 라이브러리 사용하기 (Semantic UI)
코딩작업장에서 각자 코딩하고 서로 물어가면서 문제 해결하기
마지막시간은 컴퓨터과학의 활용에 대하여 토론하는 시간을 갖고 각 분야에서 어떻게 융합되는지에 대하여 토론한다. 학생들이 완성한 프로젝트의 결과물을 보면서 문제해결 하는 과정을 공유하는 시간을 갖는다.
- 점과 점들의 만남
- 컴퓨터 과학이 쓰이는 분야에 대해 토론
- 식사하는 철학자 (운영체제)
- 우리들의 약속 (통신과 프로토콜)
- 점과 점들의 만남 (컴퓨터 과학이 쓰이는 부분)
- 완성한 웹사이트 공유
- 스스로 문제 해결한 사례에 대하여 토론