---
tags: Job
---
# 2020 年 Web 開發人員 - 實用指南

## Web Development In 2020 - A Practical Guide
@TraversyMedia

* Youtube影片:point_down:
{%youtube 0pThnRneDjw %}

## 前言 Intro
In this complete and practical guide, we will look at just about every technology in web development. You do NOT have to learn everything here. It is simply a guide of options to help you understand what is what and pick your learning path
在這份完整而實用的指南中，我們將介紹Web開發中的幾乎所有技術。 您不必學習所有內容。 它是一份指南，可幫助您了解什麼是什麼並選擇學習路徑。

## 影片快速跳轉
What Do You Want To Do? - 1:28
The Necessities - 2:38
HTML/CSS (Building Blocks) - 7:10
Responsive Web Design - 9:18
Reusable CSS Components - 10:50
CSS Frameworks - 12:26
Vanilla JavaScript - 13:52
Tools (Git, Dev Tools, etc) - 16:28
Basic Deployment - 20:45
Basic Frontend Dev - 23:15
Where To Now? - 24:12
Frontend Framework - 25:00
Svelte - 27:14
State Management - 28:32
SSR (Next & Nuxt) - 30:40
SSG (Gatsby & Gridsome) - 33:04
TypeScript - 35:05
Frontend Wizard - 37:06
Server Side Language - 37:42
Server Side Framework - 42:52
Database - 47:37
GraphQL - 52:08
CMS & Headless CMS - 53:41
Deployment & DevOps - 55:22
Full Stack Dev - 59:23
Mobile Development - 59:51
PWA - 1:01:43
Desktop Apps With Electron - 1:03:19
JAMstack - 1:04:24
Serverless Architecture - 1:06:10
API-First Design - 1:07:24
Machine Learning & AI - 1:08:12
Speech Recognition - 1:09:03
Web Assembly - 1:09:42
Advice & Thank You - 1:11:21

---

## 目標導向 What Do You Want To Do?

## 必要工具 The Necessities

## 外觀區塊 HTML/CSS (Building Blocks)

## 響應式設計 Responsive Web Design

## 自製CSS樣式 Reusable CSS Components

## CSS框架 CSS Frameworks

## 原生(香草口味)JavaScript Vanilla JavaScript

## 相關工具 Tools (Git, Dev Tools, etc)

## 部屬基礎 Basic Deployment

## 成為初階前端開發者 Basic Frontend Dev

## 選哪一道? Where To Now?
- [ ] 前端: 三大框架
- [ ] 後端: 後端語言

## 前端框架 Frontend Framework
* 建議都試試看，選擇一個深入

:::info
## 2020 值得關注
:::
## 編譯時框架 Svelte
* 官網 https://svelte.dev/

## 狀態管理 State Management

## SSR (Next & Nuxt)

## SSG (Gatsby & Gridsome)

## TypeScript

## 資深前端(巫師) Frontend Wizard

:::warning
## 後端之路
:::
## 後端語言 Server Side Language

## 後端框架 Server Side Framework

## 資料庫 Database

## GraphQL

## 網站後臺管理系統 CMS & Headless CMS
* 適合接案

## 部屬環境 軟體開發與IT運維 Deployment & DevOps

## 全端開發 Full Stack Dev

## 手機程式開發 Mobile Development
* 用網頁技術開發手機程式
## PWA

## 桌面程式開發 Desktop Apps With Electron
* 用網頁技術開發應用程式

## JAMstack

## Serverless Architecture

## API-First Design

## Machine Learning & AI
* Python

## Speech Recognition

## Web Assembly

## Advice & Thank You

---

## 相關連結 Reference

### Svelte
* [網頁元件開發框架Svelte 3釋出，強調回應性](https://www.ithome.com.tw/news/130180)
* [如何看待 svelte 这个前端框架？-知乎](https://www.zhihu.com/question/53150351)

### SSR (Next & Nuxt)

* [Isomorphic SSR 的第一哩路： Next.js](https://blog.v123582.tw/2018/09/18/Isomorphic-SSR-%E7%9A%84%E7%AC%AC%E4%B8%80%E5%93%A9%E8%B7%AF%EF%BC%9A-Next-js/)

### Web Assembly
* [W3C 接納 WebAssembley 成為正式標準，提升瀏覽器內程式效能和效果](https://technews.tw/2019/12/06/w3c-accepts-webassemble-as-official-standard/?fbclid=IwAR1glkvGk8XiS46__TzP54YZ-3w0wNURqMOc02UuWu5_GOu3as8Qp1OB1HE)