# 前端課程整理
###### tags: `前端課程整理`
___
紮實的網頁前端學習路線與資源推薦

https://blog.huli.tw/2019/08/21/real-front-end-learning-path/
___
## 學習程式前準備:
目標:
1. hackmd & Git & GitHub 會基本使用。

學習程式前，需學的工具跟知識。

學習程式時，遇到不會的觀念，跟專有名詞，等等...，直接 google。
基本上前3頁，應該有你要找的解答。

### Markdown書寫平台

目標:
1. 會用 hackmd 寫筆記。

找一個線上Markdown書寫平台 ，去寫個人的學習筆記(個人技術筆記)，推薦 hackmd。

只要會基本使用就行，例如: tags(文章分類)，#(h1~h6)，</>(插入程式碼)，link(url連結)，img(插入圖片。通常會螢幕截圖後，插入圖片)。

人的腦袋容量是有限的，所以善用筆記去紀錄。
在找工作方面，也算是加分，在履歷上，可以貼上筆記網址，具有自學的能力。
[hackmd 基本教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Fquick-start-tw) - 網路上隨便找的教學，youtube，也有相關教學。

### Git(版本管理軟體)&GitHub(拿來放程式碼的雲端。放靜態網站，切版作品)

目標:
1. git，版本管理軟體。[此筆記](https://hackmd.io/3JsDB3eHQ5-pyf_a5qAuvQ)的指令會就差不多(我看Li學院的課程寫的筆記)。跟知道使用時機。
2. 會將作品放到 github ，並可以展示。

youtube - 影片

先: 這影片看完，mac 就不用看了。基本安裝。
1. [Git 程式版本線上課程教學 - 由簡單到難](https://www.youtube.com/channel/UCx9zGDevKEZ21ihod8A0i-w)，8個影片。

後: 先看六角學院，有許多集，如果覺得簡單，可以調1.5倍數速或2倍速看過。2.3.4.，可以加速看過。
1. [六角學院 - Git、GitHub 教學](https://www.youtube.com/channel/UC-b2nGm0xLzic38Byti0VjA/playlists)
2. [拯救資工系學生的基本素養—Github Page 使用教學](https://www.youtube.com/watch?v=NovKS8kWYAg) - 第5分 - 第7分，有教如何在 Github 看到作品。
或是 [Github Pages / 把做好的網頁秀在網路上【免費！！】](https://www.youtube.com/watch?v=lzEZI9wzPYU)，這也有教。
4. [你知道 Git 是怎麼一回事嗎](https://www.youtube.com/watch?v=LgTf7m5B0xA)
5. [【git教學 #1】15分鐘學會git & github（附實例）](https://www.youtube.com/watch?v=Zd5jSDRjWfA)。

> 補充: 大該點過看過，有需要在細看。
> [Git - 基本教學](https://zlargon.gitbooks.io/git-tutorial/content/)
> [什麼是 Git？為什麼要學習它？ - 高見龍 - youtube](https://gitbook.tw/chapters/introduction/what-is-git)
> [Git新手入門教學 – part 1](https://kopu.chat/2017/01/18/git%E6%96%B0%E6%89%8B%E5%85%A5%E9%96%80%E6%95%99%E5%AD%B8-part-1/)
> [git - 猴子](https://backlog.com/git-tutorial/tw/intro/intro1_1.html)
> [git 分支背後的強大概念](https://learngitbranching.js.org/?locale=zh_TW)
___
## 學習程式的字典網站
基本上甚麼都有教的網站，HTML，CSS，JS，AJAX，jQuery，bootstrap，VUE...
基本上以，w3schools，為主要學習的地方，順便加強英文閱讀能力。

[w3schools](https://www.w3schools.com/)。英文，互動式網站，學完一個技巧，下方會有題目，可以練習。
[w3chools - 中文](https://www.w3school.com.cn/)。簡體。非互動式網站。
[菜鳥教程 - 中文](https://www.runoob.com/)。簡體。非互動式網站。

[彭彭的課程 - youtube](https://www.youtube.com/c/%E5%BD%AD%E5%BD%AD%E7%9A%84%E8%AA%B2%E7%A8%8B/playlists) - html,css,js,react,node.js
___
## html 教學
目標:
1. 學會基本標籤使用
2. 將字典網站 其中一個的html教程，看完，知道有甚麼功能，有需要再查就好。

[html 1小時初學者教學 - 幼幼班 - youtube](https://www.youtube.com/watch?v=CLUPkcLQm64)
___
## css 教學

目標:
1. 對 css 的撰寫，有一定的熟悉。
2. 請每天切個小作品，切個30天，相信會有越切越熟的感覺。
如何練習，參考別人的網站(例如: [airbnb](https://www.airbnb.com.tw/) 的 footer)，網站的某個區塊，當作練習。
或是， [到 UI 設計網站](https://collectui.com/) ，找簡單的 UI 切版。
切完，放到github，請將 README.md 寫好。
3. 完成兩個完整的網站切版作品，有RWD，基本要有支援，桌機，平板，手機。
例如: [六角學院](https://www.hexschool.com/)，的學員作品，找2個想切的，切完，放到github，請將 README.md 寫好。
[什麼是RWD響應式網頁設計？](https://www.ibest.tw/page01.php) - 隨便找的文章

第一步:
[css 2小時初學者教學 - 幼幼班 - youtube](https://www.youtube.com/watch?v=Ml78vnNTBLw&t=507s)

第二步:
[CSScoke - youtube](https://www.youtube.com/c/CSScoke/playlists)

專門教 css 的頻道，有許多系列。

1. 金魚都能懂的網頁教學。33篇。(基礎篇)
2. 金魚都能懂的網頁切版教學。(作品篇)30篇，跟這做完後會完成多小作品。
可以放在 github ，請將 README.md 寫好。
3. [玩轉 CSS FLEX](https://www.youtube.com/watch?v=_nCBQ6AIzDU)
4. [用遊戲學 Flex](https://www.youtube.com/watch?v=aAa5EDRjMbE)
5. [CSS Reset vs Normalize](https://www.youtube.com/watch?v=tI1nYZ56NP4&t=49s)
6. [CSS 實戰心法 - 有 30 篇文章](https://ithelp.ithome.com.tw/users/20083608/ironman/1027)
7. [探討幾種常見的 CSS 命名慣例](https://blog.errorbaker.tw/posts/simon198/css-naming-conventions/)

第三步:
CSS 自我檢測(基本題)
1. 怎麼做垂直水平置中
2. position的各個屬性差別
3. block，inline-block，inline差別
4. CSS優先層級 : !important，id，class，tag排敘
5. display : none；visibility : hidden；的差別?
6. 請解釋box model

第四步:
[2022年CSS面试题汇总（最新）](https://www.php.cn/css-tutorial-457249.html)
可以大約看看有甚麼面試題，通常面試不會考太深 css。

>補充: 可以都點開看看，有需要在細看
[網頁設計資源彙整](https://simular.co/resources)
[假字、假圖產生器整理](https://chupainotebook.blogspot.com/2019/02/blog-post.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+blogspot/SMcpvm+(+%E7%AB%B9%E7%99%BD%E8%A8%98%E4%BA%8B%E6%9C%AC)&m=1)
[[Day07] 番外篇： 三個前端開發實用小工具](https://ithelp.ithome.com.tw/articles/10219779)
[【自學程式】什麼是Emmet？加速前端開發必備，常用15種HTML Emmet語法教學](https://vocus.cc/article/60e07015fd89780001c103dd)
[2021 精選 16 個可商用免費圖庫網站，圖片、ICON、影音素材通通都有！](https://www.cyberbiz.io/blog/%E5%85%8D%E8%B2%BB%E5%9C%96%E5%BA%AB/)
[flatuicolors](https://flatuicolors.com/?rel=outbound)
[19 個免費顏色搭配網站 讓你的視覺設計不再猶豫！](https://www.bfa.com.tw/blog/color-tools)
[12個最好用的配色網站推薦(2022更新)](https://template.city/%e9%85%8d%e8%89%b2/)

___
## js 教學 - 程式

目標:

[【javascript】3小時初學者教學 幼幼班 - youtube](https://www.youtube.com/watch?v=yZwlW5INhgk) -

[【前端速成】JavaScript JS 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端 國小班 - youtube](https://www.youtube.com/watch?v=1pYtVwIAvhY&t=3s)

___
## js 教學 - 瀏覽器 DOM

___
jquery

ajax

vue

react
___
HackMD 使用教學

git

第1步:

rwd

javascript

javascript html DOM

bootstrap

jquery

ajax

axios

vue

react

webpack
bootstrap

js
- youtube 影片