# 從0開始寫前端
需要的工具和資源

## 在開始之前，讓我們先熱身一下，考考你的小腦袋
網頁跟APP有什麼差別
什麼是前端
前端與後端的差異
在你的認知中，什麼是網頁切版
除了網頁切版，前端需要了解什麼
* 一點點設計
* 一點點後端
* 一點點安全性
* 一點點SEO

---

# 讓我們開始進入到重頭戲

## HTML
什麼是HTML
(https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)
如何建立基本的HTML結構
常用的HTML標籤（例如：`<h1>, <p>, <a>`）

## CSS
什麼是CSS？
(https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics)
如何使用CSS美化你的網頁。
了解CSS的基本概念，如選擇器、屬性和值。

金魚都能懂的網頁切版教學
https://www.youtube.com/playlist?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo

## JavaScript
什麼是JavaScript？
(https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
簡單的JavaScript範例。
如何使網頁互動。

從ES6開始的JavaScript學習生活
https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/var_const_naming.html

## 響應式設計
什麼是響應式設計？
如何使你的網站適應不同的裝置尺寸。

## 其它: 工具和框架
介紹一些常用的前端框架，如Bootstrap、Vue.js、React。
使用版本控制，如Git。

金魚都能懂的Bootstrap5網頁框架開發入門
https://www.youtube.com/watch?v=YX6KZIcUeY8&list=PLqivELodHt3jq3oWBZfdhMu0GE7774HBW

Vue - Alex宅幹嘛
Vue 3 宅家輕鬆玩
https://www.youtube.com/watch?v=oDd5KtEtAlo&list=PLEfh-m_KG4dbjf0YCJ7i0FFGK3FtQpanL

Vue3 入门指南与实战案例
https://vue3.chengpeiquan.com/

## 學習有很多種方式，尋找你覺得最適合的方式！
1. 看書學
2. 看影片學習
3. 找線上的教學文章
4. 上相關的實體課程
5. 請人專門教你
6. "由你來教別人"

css小遊戲:
* css - selector https://flukeout.github.io/
* css - flex https://flexboxfroggy.com/#zh-tw
* css - flex http://www.flexboxdefense.com
* css - flex https://hexschool.github.io/flexbox-pirate/index.html#/
* css - grid http://cssgridgarden.com/#zh-tw
* css - grid https://codingfantasy.com/games/css-grid-attack/play
* css - testting https://www.guess-css.app/
* css - testting https://css-speedrun.netlify.app/

js:
* js30 - https://javascript30.com/

Alex宅幹嘛 - 深入淺出 Javascript30
https://www.youtube.com/watch?v=f2ttaeDHzwE&list=PLEfh-m_KG4dYbxVoYDyT_fmXZHnuKg2Fq&index=1

教學網站:
https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web

# 前端速成的你，最缺乏的是甚麼東西

對於許多初學者前端工程師來說，儘管可能已經掌握了大部分的HTML、CSS 和 JS 的基本知識，但要成為一名全面的前端開發人員，還需要掌握更多的技能和知識。以下是一些你可能缺乏的東西：

1. 框架與函式庫知識：如 React、Vue、Angular 等，這些框架和函式庫在現代的前端開發中扮演著重要的角色。
2. 版本控制：例如 Git，它讓開發者能夠追踪程式碼的更改和合作。
3. 包管理工具：如 NPM 或 Yarn，用於管理專案的依賴項。
4. 預處理器：例如 SASS 或 LESS，它們使 CSS 的撰寫更有組織性和模組化。
5. 編譯工具：如 Webpack 或 Rollup，用於打包和優化前端資源。
6. 跨瀏覽器相容性：理解和能夠解決不同瀏覽器之間的差異。
7. 響應式設計：使網站在各種裝置和屏幕大小上都看起來和運作得很好。
8. 性能優化：知道如何優化網頁加載速度，如延遲載入、圖片優化等。
9. 基本的後端知識：如了解 RESTful API、HTTP 協議等，這可以幫助前端開發者更好地與後端工程師合作。
10. 測試與除錯：使用如 Jasmine、Mocha、Chai 等工具進行單元測試或集成測試。
11. UI/UX 設計原則：即使不是設計師，了解基本的設計原則也是有助於前端開發的。
12. 無障礙網頁設計：確保網站對所有用戶，包括殘障用戶，都是可訪問的。
13. 持續學習與專業發展：前端技術在不斷變化，所以保持對新技術和趨勢的追踪和學習是非常重要的。

## 穩扎穩打得再重頭開始或許是一個不錯的選擇?

CS50 - CS50 是哈佛大學的一門電腦科學入門課程，全名為「CS50's Introduction to Computer Science」。這門課是哈佛大學最受歡迎的課程之一，而且也在線上平台如 edX 上免費提供，讓全球的學生都可以參與。

以下是關於 CS50 的一些特點和內容介紹：

* 廣泛的涵蓋範圍：CS50 涵蓋了很多電腦科學的基本概念，包括資料結構、演算法、軟體工程、計算機網絡、資料庫、和安全性等。
* 實用的編程：學生將使用 C、Python 和 SQL，還有 HTML、CSS 和 JavaScript 來解決真實世界的問題。
* 具挑戰性的問題集：課程的作業和問題集被設計得具有挑戰性，以幫助學生真正理解和掌握材料。
* 互動教學：課程的主講人 David J. Malan 教授以其充滿活力和參與感的教學方式而聞名，使得這門通常被視為困難的課程變得吸引人且容易理解。
* 資源豐富：CS50 提供了大量的學習資源，包括教材、示範、教學視頻和其他補充材料。
* 社群支持：由於 CS50 在線上也有很大的學生群體，學生們可以透過討論區、社群媒體和其他方式相互協助。
* 延伸課程：一旦完成基礎的 CS50 課程，學生還可以選擇參加其他 CS50 系列的進階課程，例如 CS50's Web Programming with Python and JavaScript 或 CS50's Introduction to Game Development。

有非常多中文資源，心得教學
https://www.youtube.com/@cs50
https://www.youtube.com/playlist?list=PLeWlPscCzV-emSo2phZqStPZ0UDKzKu8s
https://yulongtsai.medium.com/%E5%9C%A8data-science%E5%9C%88%E6%89%93%E6%BB%BE%E4%B9%8B%E8%87%AA%E4%BF%AE%E5%AE%8Ccs50%E7%9A%845%E5%80%8B%E5%BF%83%E5%BE%97-59a7ac0861d8