웹사이트 제작 코딩수업

Outcome : Learn how to develop a static / dynamic webpage,Front-end 개발 이해 / Back-end 개발 이해,Internet Network에 대한 기본적인 이해,Computer Science의 필요성을 인지하고 흥미를 유발 참여가능 학생수 : 3 시간표 : 학생과 조율 가능
위치 : 온라인
기간 : 2017-11-21 2018-2-28
참여금액 :

Website 제작을 통한 Computer Science 배우기

 

1. 왜 코딩을 배워야 하는가?

코딩 교육은 이 시대가 가장 필요로 하는 학문/기술 중 하나인 Computer Science를 기본적으로 접할 수 있는 방법입니다. 코딩 교육에 이목이 집중되는 이때 단순한 주입식 교육이 아닌 실전을 통해 computer science의 전반적인 이해도를 높이는 수업이 중요합니다.

 

2. 왜 website 제작인가?

Web은 가장 처음부터 대중들에게 소개된 platform으로서 가장 많은 사용자들을 보유하고 있고 (높은 접근성) 가장 빠르게 발전되고있는 분야입니다. Web개발 공부를 통해 가장 최신 computer science technology에 대해 이해할 수 있습니다.

 

3. 결과물:

  • 평생 사용할 수 있는 나만의 웹페이지 제작
  • 여러 지원서에 제출 할 수 있는 개인 프로젝트 진행 경험 및 결과물

 

4. 수업 교재/ Teaching materials

  • All teaching materials will be available online
  • Slides will be provided for certain lessons

 

5. Pre-requisite coding skills

  • 수업은 학생이 코딩 경험이 없다는 가정하에 진행됩니다.
  • 학생 개인의 실력 차이에 따라 수업 진행 속도에 차이가 있을 수 있습니다.
  • 수업이 어려운 학생들에게는 정해진 커리큘럼을 유지하기보다 기초를 천천히 다지는 것에 집중합니다.
  • 수업을 빠르게 이해하는 학생들에게는 커리큘럼 이상의 수업을 할 수 있습니다. There are endless topics and materials to cover.

 

수업

수업 내용

숙제 (TBC after sign up)

1st

Introduction: what are we going to learn?

  • Why computer science?

  • Why web-development?

  • What is internet?

  • Course overview

  • Setup the required development environment

 

2nd

Frontend-1 HTML

  • What is HTML?

  • Learn HTML syntax and tag

  • HTML을 사용해 정해진 static page 만들기

  • 여러 문제점들을 분석하기 - 더 효율적일 수는 없을까?

3rd

Frontend-2 CSS

  • What is CSS? Why do we need this?

  • Learn CSS syntax

  • 지난 수업에서 만든 HTML 에 원하는 CSS 효과 입히기

  • 어떤 문제점들이 해결됐는가? 어떤 문제점들이 남았는가 분석하기

4th

Frontend-3 javascript

  • What is javascript?

  • Learn javascript syntax

  • 기본적인 javascript 사용법을 익히기 위해 주어진 functionality 구현

5th

Frontend-4 javascript

  • How can I apply javascript to my webpage?

  • Can we do better?

  • webpage에 정해진 javascript functions 연결하기

6th

Frontend-5 jQuery

  • What is DOM?

  • What is Jquery?

  • Why Jquery?

  • Learn jquery syntax

  • 기존에 개발한 javascript code를 jquery로 바꾸기

7th

Frontend-6 Putting all together

  • Design my project (What do I want to make?)

  • Plan my implementation (What technologies do I need to use?)

  • 계획한 나의 프로젝트 개발

  • 문제점 분석 및 기록

8th

Backend-7 Server-side

  • What is a server?

  • What is Node.js?

  • Learn basic Node.js syntax

  • 간단한 Node.js 앱 만들기

9th

Backend-8 Dynamic Webpage

  • How can I connect my frontend and backend?

  • How can my page be dynamic?

  • 개인 프로젝트에 node.js 연결해보기

10th

Backend-9 Deploy my project

  • How can I make my page public online?

  • What is a virtual machine?

  • Learn about cloud services available

  • Deploy my product to a cloud-server

  • Update my project that has been deployed on a virtual machine

 

 

선생님 : 임동규