PART 01 WEB DESIGN

• 01강
  • 프로젝트 Overview
  • 1. 추천 사이트 및 레퍼런스 가이드
  • 2. 프로젝트 Brief 작성 : Project Overview
  • 3. 프로젝트 목표 및 문제 발견 : Project Goal
  • 4. Research 방법 & 실습 _ 사용자, 경쟁사, 콘텐츠
  • 5. 1차 Reference 조사 분석
• 02강
  • IDEATION
  • 1. 기초데이터 수집 및 콘텐츠 구성
  • 2. 콘텐츠 수집 및 내용 분석
  • 3. 기초 정보 구성 설계 - 콘텐츠 분석 및 적용
  • 4. 차별화 전략 수립 - 차별화 전략과 아이덴티티 수립
  • 5. 2차 Reference 조사 분석
    - 차별화 전략을 통한 2차 레퍼런스 조사
  • 6. Ideation & 아이디어 스케치
  • 7. 마인드맵, 어피티니 다이어그램, 강제 연결법 등
• 03강
  • 컨셉 도출
  • 1. 제작 및 컨셉방향 수립
    - Ideation을 통한 컨셉 방향 수립
  • 2. 컨셉 도출(무드보드) - 레퍼런스를 통한 컨셉 시각화
  • 3. Tone & Mannnner
    - 컬러 이미지맵(형용사) 등을 통한 컬러 가이드
  • 4. 정보구조설계(IA Information Architecture)
    - 사이트맵 작성
  • 5. 와이어프레임 & UI 개발(인터랙션 설계)
• 04강
  • 프로토타입 제작
  • - 프로토타입 제작(UI설계&인터랙션)
• 05강
  • 디자인과 레이아웃 1
  • 1. 웹사이트 서체 운영 이해
    - 자간, 행간, 타이포 시스템의 이해
    - 시스템 폰트, 이미지 폰트, 웹폰트
  • 2. 비주얼요소 디자인 제작
    - 메인 이미지, 배너 제작
  • 3. 디자인 구성 요소의 이해와 제작
    - 노리적 분석을 통한 콘텐츠 구조화 디자인 하기
    - 그룹화 요소의 이해, 레이아웃의 이해
  • 4. 여백과 그리드, 아이콘 소스 활용 및 제작
• 06강
  • 디자인과 레이아웃 2
  • 1. 웹 화면과 반응형 사이트의 레이아웃 이해
  • 2. 사용자와 레이아웃의 이해
  • 3. F레이아웃과 Z레이아웃의 이해(아이트래킹)
  • 4. 스크롤 이벤트와 패럴렉스의 이해
  • 5. 반응형 & 모바일 디자인
    - 가변크기와 고정크기의 이해
  • 6. 미디어쿼리에 의한 레이아웃의 변화 이해
  • 7. 디바이스별 해상도 이해
• 07강
  • 디자인과 레이아웃 3
  • 1. 논리 픽셀과 물리 픽셀의 이해
  • 2. 배율 디자인과 반응형 레이아웃의 이해
  • 3. 마이크로 인터랙션의 이해
  • 4. 디자인 스타일 가이드(style-tiles), 가이드의 개념과 필요성
  • 5. 컬러, 타이포그라피, 이미지, 패턴 시스템
  • 6. 디자인 스타일 가이드(style-tiles) 작성

PART 02WEB DESIGN PROJECT

• 08강
  • 반응형 웹사이트 개인 포트폴리오 디자인 제작 1
• 09강
  • 반응형 웹사이트 개인 포트폴리오 디자인 제작 2
• 10강
  • 반응형 웹사이트 개인 포트폴리오 디자인 제작 3
• 11강
  • 반응형 웹사이트 개인 포트폴리오 디자인 제작 4

PART 03WEB PUBLISHING

• 12강
  • html/css 기초(1)
  • - 강의목표
  • - 웹표준/웹접근성 개요
  • - 구조적 마크업/논리적 마크업
  • - HTML 기초
  • - CSS 기초 문법
    → 선택자
    → text/font 속성
• 13강
  • html/css 기초(2)
  • - html 구조적 마크업
    → Block Elements
    / Inline Elements
  • - CSS 기초문법
    → 우선순위
    → 선택자 종류
• 14강
  • html/css 기초(3)
  • - form 태그
    → form 요소 다루기
    → form 요소 크로스브라우징
  • - table 다루기
    → 웹 접근성을 고려한 테이블 레이아웃
• 15강
  • Layout(1)
  • - 박스모델의 이해
  • - 배경속성
  • - 시멘틱 구조
• 16강
  • Layout(2)
  • - UI 영역별 배치
  • - display 속성
  • - float 속성
  • - oveflow 속성
• 17강
  • Layout(3)
  • - Navigation 영역별 UI 구조 실습
  • - position 속성
  • - 문서 흐름별 레이아웃 구조 실습
• 18강
  • Layout(4)
  • - 콘텐츠별 UI 분석과 제작 실습
  • - transform과 애니메이션 속성
• 19강
  • 탬플릿으로 구조설계(1)
  • - 상용 사이트콘텐츠 페이지 실습
  • - 효율적인 CSS 스타일링 연습
    → 네이밍/선택자/멀티클래스/
    재사용을 위한 css 분석
• 20강
  • 탬플릿으로 구조설계(2)
  • - 상용 사이트콘텐츠 페이지 실습
  • - 효율적인 CSS 스타일링 연습
    → 네이밍/선택자/멀티클래스/
    재사용을 위한 css 분석
• 21강
  • 탬플릿으로 구조설계(3)
  • - 상용 사이트콘텐츠 페이지 실습
  • - 효율적인 CSS 스타일링 연습
    → 네이밍/선택자/멀티클래스/
    재사용을 위한 css 분석
• 22강
  • 반응형 레이아웃(1)
  • - 반응형 기본 개념
  • - 미디어쿼리와 뷰포트
  • - 반응형 구조
  • - 반응형 페이지 마크업
• 23강
  • 반응형 레이아웃(2)
  • - 작업 사이트 반응형 마크업&CSS
  • - jQuery&CSS3 인터렉션 UI 제작

PART 04 UI 개발

• 24강
  • 오리엔테이션 및 html 정리
  • - 강의목표
  • - html 기초정리
  • - 개발자도구 활용법
  • - 실습환경 및 에디터 소개
    (vscode, git, github)
• 25강
  • css 중급
  • - CSS 기초 정리
  • - display 중급
  • - 선택자 중급
• 26강
  • 반응형 웹
  • - 미디어 쿼리
  • - 반응형웹 구현
• 27강
  • JavaScript & jQuery 정리(1)
  • - 프로그래밍 기초
  • - UI구현에 필요한 자바스크립트 기본 문법
  • - jquery 메소드
• 28강
  • JavaScript & jQuery 정리(2)
  • - jquery 활용
  • - jquery 플러그인
  • - json & xml 활용한 ajax 구현
• 29강
  • 자리예약시스템 구현
  • - json을 이용한 비동기 페이지 만들기
• 30강
  • 카카오톡 채팅 프론트엔드 구현
  • - keyboard event & append 활용
• 31강
  • 클론코딩
  • - 상용사이트 메인 & 서브 페이지 구현
• 32강
  • psd to html 코딩
  • - 웹디자인 파일 컷팅과 사이트 구조 잡기
• 33강
  • 샘플 포트폴리오 구현1
  • - fullpage & Parallax를 활용한 원페이지
    사이트 구현
• 34강
  • 샘플 포트폴리오 구현2
  • - fullpage & Parallax를 활용한 원페이지
    사이트 구현
• 35강
  • 샘플 포트폴리오 구현3
  • - fullpage & Parallax를 활용한 원페이지
    사이트 구현