README.md

Front-end learning course

from 0 to 1 to learning front-end skills as a beginner

0. prepare your workstation

• What is Front-end?
• Roadmap
• HTML5 / CSS / JavaScript
• RWD
• Node.js / React.js / Next.js
• Visual studio Code installion
• Git / Github
• Figma
• About Browsers
• About Operation System (windows, Mac, Linux)

homework: setup your workstation

1. HTML

HTML_01

• HTML introduction
• To build a webpage
• Head & parameter
• metadata: title, viewport, description, og:data
• Image setup
• File path
• List: ul, ol
• Table: thead, tbody, tfoot, tr, td, colspan

homework: To build a menu page by HTML

HTML_02

• Form
• method, button, inputs
• checkbox, value
• email and file
• select, option
• datalist and textarea
• comment
• block and inline elements
• div, br, hr

homework: To build a reservation page for restaurant by HTML

2. CSS

CSS_01

• CSS 基本語法認識與程式碼放置位置
• Selector: element, ID, classs, attribute
• 顏色儲存方式：RGB, RGBA, HEX, HSL
• CSS Comment 註解
• CSS specificity
• anchor tag styling
• Pseudo classes, elements
• font-size, px, em, rem

homework: Base on 2-1 homework, to use CSS style your page

CSS_02

• text-align, letter spacing, line height
• font-family, font-weight, text-indent
• background image and color
• Box Model introduction
• border
• Padding, Margin
• Unit: Absolute, Relative
• display
• grid

homework: To build a calendar page with HTML & CSS

CSS_03

• position: static, relative, absolute, fixed, sticky
• flex layout
• cursor pointer
• transition
• 2D transform and translate: rotate, scale
• animation
• 作業：製作簡易 animation 動畫 & header

homework: To create a simple animation and header in pages

CSS_04

• opacity and display:none, visibility:hidden
• float, clear
• overflow
• object-fit, object-position
• work-break, word,spacing, word-wrap
• outline
• box-shadow
• filter: blur, brightness, grayscale

homework: To build a porfolio page with header in pages

CSS_05

• viewport
• chrome device toolbar
• media query
• container
• homework

homework: To build RWD site for a shop page

3. Git

Git_01

• Introduction
• Installation
• setup ssh key
• basic: clone, pull, add, status, commit, push
• Github introduction
• gitignore

homework: upload first project on Github

Git_02

• Branch
• Stash
• Merge
• reset

homework: create a new branch for feature

4. JavaScript

JS_01

• Introduction
• Syntax
• Variables: var, let const
• Operators
• Arithmetic
• Assignment
• Functions

homework: To create 4 buttons and function to implement +, -, *, /

JS_02

• console.log
• Data Types
• alert & console.log
• Booleans
• Pop & test
• Objects
• Typeof
• If Else
• Functions with Variables

homework: To create a function to change car info by object type.

JS_03

• Numbers & Number Methods
• Strings & String methods
• Date: format, get
• Math: abs, ceil, floor, random, round
• Switch

homework: to use switch to make star sign or alcohol menu

JS_04

• CLI
• Events
• Comparisons
• Array & Array Methods
• Loop

homework: Ninety-nine multiplication table

5. React.js

React_01

• Introduction
• (JS) Arrow function
• Route
• SCSS / module
• JSX
• Components
• props

homework: 3 components, 4 pages, and one page inlude news components

React_02

• What is a hook
• useState
• useEffect
• (JS) template literals

homework: Todo list

React_03

• useRef
• (JS) Spread Operator & rest Operator
• (JS) querySelector
• (JS) map(), forEach()

homework: Todo list

React_04

• (JS) Regular expressions
• (JS) RegExp.test()
• (JS) event.preventDefault()
• placeholder
• homework demo & implement

homework: register page

React_05

• Regex
• useContext
• homework demo & implement

homework: dark mode

React_06

• React Libraries
• Material UI
• React-chart-js-2
• homework demo & implement

homework: Implement 4 charts by import package

React_07

• What is API
• XMLHttpRequest
• Ajax
• Axios
• Fetch

homework: To use Fetch method to display Pokemon list

6. Next.js

Next_01

• Next.js
• TypeScript
• Async / await
• JSON parse & stringify

homework: To use next.js & typescript build employee list API

Next_02

• next/link
• next/head
• next/image
• Dynamic Route
• CSG / SSG / SSR

homework_01: Employee detail page, home page, article list page, article detail page
homework_02: To plan your personal website (Google Doc)

7. Portfolio

Portfolio_01

• Information architecture
• Cast study
• Technical solution
• Plan your resume

homework: To create plan document

Portfolio_02

• Plan your website structure
• Build your portfolio
• Apply your own domain

homework: To create personal website

Portfolio_03

• Setup domain name (godaddy)
• Vercel deploy tool
• deploy your website with github

homework: deploy your website

Portfolio_04

• build a react calculator for task
• UI
• code

8. LeetCode

LeetCode_01

• Two Sum (Easy)
• Palindrome Number (Easy)
• Roman to Integer (Easy)

homework: Submit Solution in your account

LeetCode_02

• Longest Common Prefix (Easy)
• Valid Parentheses (Easy)
• Merge Two Sorted Lists (Easy)

homework: Submit Solution in your account

LeetCode_03

• Add Two Numbers (Medium)
• Longest Substring Without Repeating Characters (Medium)
• Longest Palindromic Substring (Medium)

homework: Submit Solution in your account

LeetCode_04

• Reverse Interger (Medium)
• Container With Most Water (Medium)
• Rotate Image (Medium)

homework: Submit Solution in your account

8. Extra

TailwindCSS

• Get started
• Core concept
• Customization
• Layout
• Flexbox & Grid
• Spacing
• Size
• Typography
• Backgrounds
• Border

homework: