Web Development Tutorial

HTML5

9 lessons

1. 1 HTML5 Introduction & Syntax
2. 2 Semantic Web
3. 3 HTML5 Tag - Basic
4. 4 HTML5 Tag - Text
5. 5 HTML5 Tag - Link
6. 6 HTML5 Tag - List & Table
7. 7 HTML5 Tag - Image & Multimedia
8. 8 HTML5 Tag - Forms
9. 9 HTML5 Tag - Structure

CSS3

21 lessons

1. 1 CSS3 Syntax
2. 2 CSS3 Selector
3. 3 CSS3 Units
4. 4 CSS3 Box Model
5. 5 CSS3 Display
6. 6 CSS3 Background
7. 7 CSS3 Font & Text
8. 8 CSS3 Position
9. 9 CSS3 Float
10. 10 CSS3 Inheritance & Cascading
11. 11 CSS3 Vendor Prefix
12. 12 CSS3 Shadow
13. 13 CSS3 Gradient
14. 14 CSS3 Transition
15. 15 CSS3 Animation
16. 16 CSS3 Transform
17. 17 CSS3 Web Font
18. 18 CSS3 Layout
19. 19 CSS3 Responsive Web Design
20. 20 CSS3 Flexbox Layout
21. 21 image 요소 아래에 패딩된 여분의 공간 제거하기

Bootstrap

2 lessons

1. 1 Bootstrap Basics
2. 2 Bootstrap Grid System

Sass

4 lessons

1. 1 Sass의 소개, 설치와 간단한 명령어 사용법
2. 2 CSS를 프로그래밍 언어와 같이 작성할 수 있게 확장한 SassScript
3. 3 Nesting, import, extend, 조건과 반복, Mixin, Function
4. 4 Sass가 제공하는 기본 내장 함수

JavaScript

34 lessons

1. 1 프로그래밍이란?
2. 2 자바스크립트란 무엇인가? 또 어떻게 동작하는가?
3. 3 Hello Javascript
4. 4 자료형과 변수
5. 5 연산자
6. 6 제어문
7. 7 타입 변환과 단축 평가
8. 8 객체
9. 9 객체와 변경불가성(Immutability)
10. 10 함수
11. 11 타입 체크
12. 12 프로토타입
13. 13 스코프
14. 14 보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode
15. 15 함수 호출 방식에 의해 결정되는 this
16. 16 실행 컨텍스트와 자바스크립트의 동작 원리
17. 17 클로저
18. 18 자바스크립트 객체지향 프로그래밍
19. 19 빌트인 객체
20. 20 전역 객체
21. 21 Number 레퍼 객체
22. 22 수학 상수와 함수를 위한 Math 객체
23. 23 날짜와 시간을 위한 Date 객체
24. 24 String 레퍼 객체
25. 25 정규표현식
26. 26 배열
27. 27 고차 함수
28. 28 문서 객체 모델(Document Object Model)
29. 29 동기식 처리 모델 vs 비동기식 처리 모델
30. 30 이벤트
31. 31 디바이스의 방향 정보를 다루는 자바스크립트 이벤트
32. 32 비동기식 처리 모델과 Ajax
33. 33 REST(Representational State Transfer) API
34. 34 Single Page Application & Routing

ECMAScript6

13 lessons

1. 1 let, const와 블록 레벨 스코프
2. 2 템플릿 리터럴
3. 3 화살표 함수
4. 4 파라미터 기본값, Rest 파라미터, Spread 연산자
5. 5 객체 리터럴 프로퍼티 기능 확장
6. 6 디스트럭처링
7. 7 클래스
8. 8 모듈
9. 9 프로미스
10. 10 이터레이션 프로토콜(iteration protocol)과 for-of 루프
11. 11 7번째 타입 심볼(Symbol)
12. 12 제너레이터
13. 13 Babel 6와 Webpack 4를 이용한 ES6 환경 구축

jQuery

4 lessons

1. 1 jQuery Basics
2. 2 jQuery Ajax & JSON
3. 3 jQuery Deferred Object
4. 4 jQuery Plugin

Snippet

13 lessons

1. 1 Snippet - Centering
2. 2 Snippet - Resets
3. 3 Snippet - Shape
4. 4 Snippet - Navigation
5. 5 Snippet - Preloader
6. 6 Snippet - Slider
7. 7 Snippet - Menu
8. 8 Snippet - Gallery
9. 9 Snippet - jQuery
10. 10 Snippet - Scroll
11. 11 Snippet - Hover Effect
12. 12 Snippet - Text
13. 13 Snippet - Misc

Node.js

5 lessons

1. 1 Node.js Basics
2. 2 Node.js & npm
3. 3 Node.js module
4. 4 Node.js file upload example
5. 5 Node.js에서 비밀 설정 정보(Secrets) 관리

Express

6 lessons

1. 1 Routing, Middleware, Static file, Template engine
2. 2 Express의 기본적인 에러 처리 방식
3. 3 MemoryStore를 사용한 Session 관리와 Redis를 사용한 영속적 Session 관리
4. 4 Node.js(Express)와 MySQL 연동
5. 5 Socket.io를 사용한 실시간 채팅 애플리케이션
6. 6 Heroku에서의 Node.js와 MongoDB 설치

MongoDB

3 lessons

1. 1 MongoDB의 기본 개념과 설치
2. 2 MongoDB Shell method를 사용한 CRUD의 기본
3. 3 Mongoose

TypeScript

6 lessons

1. 1 TypeScript의 소개와 개발 환경 구축
2. 2 Visual Studio Code에서의 TypeScript 개발 환경 구축
3. 3 정적 타이핑
4. 4 클래스
5. 5 인터페이스
6. 6 제네릭

Angular

13 lessons

1. 1 Angular의 소개와 특징
2. 2 Angular CLI를 사용한 프로젝트의 생성, 구성요소 추가와 빌드
3. 3 컴포넌트 소개와 기본 구조
4. 4 템플릿과 템플릿 문법
5. 5 데이터 바인딩
6. 6 빌트인 디렉티브
7. 7 서비스와 의존성 주입
8. 8 Reactive Programming과 RxJS
9. 9 Cold observable과 Hot observable
10. 10 Token 기반 인증
11. 11 Angular CLI 환경에서 jQuery 플러그인 사용하기
12. 12 Angular 파일 업로드
13. 13 Firebase를 사용한 Angular 애플리케이션 배포

Tools

3 lessons

1. 1 Jekyll와 GitHub Pages를 사용한 Static WebSite 구축
2. 2 ESLint
3. 3 JSON Server