요일

가능
시간
(날짜)

  • 19-22시 (협의)
장소 : 협의 후 결정
추가비용 : 없음
다 같이 화면을 보면서 할 수 있는 스터디룸이나 쾌적한 공간이 좋을 것 같습니다!
₩20,000원 / 시간
₩240,000 / 총 4회 12시간
실시간 톡하기 찜하기
Alex Kyungho Park
Data Scientist
[디자이너를 위한 코딩] 인스타그램을 복제하며 웹퍼블리싱 / 웹디자인 입문하기
  • 성북, 신촌홍대, 신림
  • 3시간/회
  • 최대인원:4~8
  • ₩20,000/시간

튜터정보

  • 고려대학교 정보보호대학원
  • 신분 인증 됨
안녕하세요, 태생은 문돌이지만 프로그래밍에 빠져든 박경호라고 합니다!

저는 개발, 프로그래밍과는 1도 관련없는 경영학과 출신이지만, 웹 개발 분야에서 열심히 굴러다니고 있습니다.

화면에 색깔많은 영어글자, 노트북 두드리는 소리가 멋있어서 개발공부를 시작했는데, 빠져들어버려 노트북을 붙잡고 살고 있습니다 :)

태생 문돌이인 저에게 프로그래밍을 배운 다는것은 높은 장벽이 있었고, 생각보다 쉽지 않았습니다. 학원을 다녀야 할지, 공부를 따로 해야하는지 고민도 많이 했고 실패도 많이 해왔습니다.

여러번의 시행착오 이후, 간단한 프로젝트를 따라하면서 코딩을 공부하는 것이 가장 재미있었고, 빠르게 실력을 성장시킬 수 있었다는 것을 깨닫고 강의를 개설하게 되었습니다! 시행착오는 저만 하면 되잖아요..ㅎㅎ

초심자 입장에서, 직접 화면을 띄워놓고 함께 개발하면서 웹퍼블리싱, 웹디자인에 필요한 HTML, CSS, Javascript를 차근차근 알려드리고자 합니다 :)

잘 부탁드리겠습니다!

수업소개

"인스타그램? 그거 만들기 엄청 어려운거 아닌가요?"

그럴수도 있고 아닐수도 있습니다! 디자인 소스와 웹, 프론트엔드(HTML, CSS, JavaScript)에 대한 약간의 지식만 있으면 나만의 인스타그램 모형을 만들 수 있습니다!

인스타그램 개발자들이 보면 한숨을 쉴 수도 있겠지만, 우리가 항상 사용하는 SNS 페이지를 똑같이 만들어보면서 프론트엔드에 입문하실 수 있습니다 :)


*안내 : 백엔드(서버) 부분이 아닌 프론트엔드 부분만을 구현합니다! 실제 데이터가 입력되지 않는 뼈대를 만드는 수업입니다.


[수업목표]

> 인스타그램 프론트엔드 부분을 복제해보면서 (Clone) HTML, CSS, JavaScript를 배운다
> 웹이 뭔지, 서버가 뭔지, 개발한다는 것은 무엇인지 배워본다


[수업내용]

> 인스타그램 뼈대 짜기 (HTML)
> 인스타그램 디자인 입히기 (CSS)
> 인스타그램 기능 만들어보기 (하트 누르기, 댓글달기 등)


[준비물]

> 노트북 (사양 무상관)
> 맑은 정신


[수업 끝에 만들 수 있는 것]

https://kyungho96.github.io/instaclone

*계속 수정중이라 중간에 망가져있을수도 있습니다!

수업대상

  • > 프로그래밍에 처음으로 입문해보고 싶으신 분
    > 웹퍼블리싱, 웹디자인에 입문하고자 하시는 디자이너 분
    > HTML, CSS, JavaScript가 궁금하신 분
    > 재미있는 프로젝트를 하면서 웹을 공부해보고 싶으신 분

커리큘럼

1회차

[프로그래밍 시작하기 & HTML] - 안예쁨

- 웹 어플리케이션이란 무엇인가? (웹? 서버? http?)
- 프론트엔드와 백엔드
- 프로그래밍이란?
- 하나하나 함께하는 개발환경 구축 (컴퓨터에 개발자스러운 것들 깔기)
- HTML이란?
- HTML 문법 배우고 인스타그램 구조 코딩하기

2회차

[HTML 마무리 & CSS 기초] - 조금 예뻐짐

- HTML로 인스타그램 구조 코딩 마무리하기
- CSS란? (디자인을 넣는 기능)
- CSS의 핵심 : Box Model
- CSS로 디자인 입혀보기

3회차

[CSS 마무리 & Javascript] - 예쁨

- CSS로 인스타그램 디자인 마무리하기
- Javascript란? (HTML & CSS v.s 자바스크립트)
- Javascript 기초 문법 배우기
- Javascript로 구구단, 성적분류 프로그램 만들어보기

4회차

[Javascript & 배포] - 하트 누르기 + 친구에게 보여줄 수 있음

- Javascript로 인스타그램 하트 누르는 기능 구현하기
- Javascript로 인스타그램 댓글 기능 구현하기
- Github을 이용하여 웹에 배포하기 (*친구에게 자랑 가능)

리뷰(1)

리뷰쓰기
5.0
  • 커리큘럼
  • 전달력
  • 준비성
  • 친절도
  • 시간준수

실시간톡

실시간 톡하기

위치

지도가 들어갑니다.