1. Internet

(공통)

2. HTML, CSS, JS

2-1. HTML

• Learn the basics
• Writing Semantic HTML
  👉 HTML - Semantic Web과 Semantic Tag
• Forms and Validations
• Conventions and Best Practices
• Accessibility
• SEO Basics

2-2. CSS

• Learn the basics
• Making Layouts
  • Floats, Positioning, Display, Box Model, CSS Grid, Flex Box
    👉 Position - relative, absolute, fixed
    👉 Display - inline, inline-block, block
• Responsive design and Media Queries

2-3. JavaScript

• Syntax and Basic Constructs

JS 기본 문법(with Replit)

• console.log, 주석
• 변수선언, 대입연산자(=), 값이 할당되지 않은 변수, 데이터 타입
• string 합치기, 길이length
• 함수의 정의, 호출, 반환, 인자
• 숫자의 덧셈, 나눗셈, 증가, 감소, 나머지
• Boolean, if...else 조건문, Truthy/Falsy
• 배열, slice, splice, filter, concat, new Array, push, pop, shift
• for 반복문
• Object 객체의 생성, 접근/추가/수정/삭제
• String.charAt(), slice(), indexOf()
• string, number 변환
• new Date(), getTime()
• round(), ceil(), floor(), random()
• object
• scope, block, local, global 변수
• class - 생성자,인스턴스,메서드
• object-객체리터럴,프로퍼티,접근,할당,메서드,중첩된 객체, reference 저장
• ES6 - 화살표함수
• Array.map(), forEach()
• ES6 - 템플릿리터럴(${}), startsWith,endsWith,includes, repeat
• 객체 변수 접근, 객체 순회 Object.keys()
• 주요 메서드, DOM, 왜 HTML을 접근해야할까?
• Event, addEventListener

JS 기본 문법(with 생활코딩)

• [생활코딩] Javascript 기초

JS 기본 문법(with 코딩앙마)

• 변수,함수,연산자,반복문,switch문,함수,객체,배열

JS 기본 문법(with <코어 자바스크립트>)

• 1-1.데이터 타입-기본형, 참조형
• 1-2.데이터 타입-변수선언,할당,불변값,가변값,복사,불변객체,undefined,null
• 2-1.실행 컨텍스트

• Learn DOM Manipulation
• Learn Fetch API / Ajax(XHR)
• ES6+ and modular JavaScript
• Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM, strict 개념 이해하기

바닐라JS 실습

• [노마드코더] 바닐라JS로 크롬 앱 만들기(1)
• [노마드코더] 바닐라JS로 크롬 앱 만들기(2)

3. VCS

• git (공통)

4. Repo hosting service

• github (공통)

5. Web Security Knowledge

• HTTPS
• Content Security Policy
• CORS
• OWASP Security Risks

6. Package Managers

• npm
• yarn
• pnpm

7. CSS Architecture

• BEM

8. CSS Preprocessors

• Sass
• PostCSS

9. Build Tools

9-1. Linters & Formatters

• Prettier
• ESLint

9-2. Task Runners

• npm scripts

9-3. Module Bundlers

• Vite
• esbuild
• Webpack
• Rollup
• Parcel

10. Framework 고르기

• React
  👉 리액트 맛보기(with 코드아카데미)
• Angular
• Vue.js
• Svelte
• Solid JS

11.