入門網頁知識樹

--- title: 入門網頁知識樹 tags: 網頁知識樹 --- 入門網頁知識樹 === ## 善用留言!![](https://hackmd.io/_uploads/rkyka0exa.png) :::warning 因為大部分資料都是學長姐留下來的資料如果有地方要修正或是意見都可以留言範例: 這邊資料我查了之後有最新解釋.... 這邊的介面更新後按鈕有換位置這裡指令可以這樣寫...可以有更直接的寫法 ::: :::warning 遇到什麼問題都能夠直接詢問學長姊，千萬不要害羞 ❕❕❕ ::: :::spoiler 文章目錄 [toc] ::: ## 網頁學習地圖 :::info 開始學習前，先了解在學的東西具有什麼功能，才能更了解整個運作 ::: - [Frontend Developer](https://roadmap.sh/frontend?mibextid=Zxz2cZ) - [Backend Developer](https://roadmap.sh/backend?mibextid=Zxz2cZ) - [紮實的網頁前端學習路線與資源推薦](https://blog.huli.tw/2019/08/21/real-front-end-learning-path/) ## 🌱入門區 ### 📗入門前端 | Number | About | ✍️Subject | | ------ | ----- | ------- | | 01 | `Editor` | [安裝 VS Code 以及實用插件](/-jez-zG5QE-5B577WxVm6Q) | | 02 | `Editor` | [美化 VS Code](/ThQtamGKSGGKRG41-gjF9w) | | 03 |` Editor `| [（番外）進一步認識 VS Code 篇](/JU2CkcGNQOmC8szEVH4s9Q) | | 04 | `Command Line` | [Command Line (命令行)簡介](/sG10aQEyRYqnZTZ3imH1Yg) | | 05 | `Command-Line` | [Windows - Windows Terminal](/03ZmBNbNQPanemrMnqqlnA) ／ [Mac OS - iTerm2](/zy9q2ag5QteqjrEk9m51Vg) (工具篇)| | 06 | `Git` | [Git 基礎介紹 + 安裝](/h66i_zldRg-Jd3lin5mIUA) | | 07 | `Git` | [Git 實際演練](/1cAZJzaOTCuoB2dRBxpASw) | | 08 | | [網路基礎概念](/c5oMTkJbRjSA71oMO2Jhnw) | | 09 | `HTML` `CSS` | [什麼是 HTML、CSS ?](/wPnkj7rFTVK5DsfaD62Gnw) | | 10 | | [F12 開發者工具](/Y9eAbZ0XSHu61svN0H9eIw) | | 11 | `HTML` | [HTML 基本語法](/1WdRhi1NQ4WD9rT8ZkmOgw) | | 12 | `CSS` | [CSS 入門](/ryM13dDtQ16GfxYfVzhUMg) | | 13 | `HTML` `CSS` | [練習題目 - 自我介紹](/cDgMHVdGSlaoWugGckxqlw) | | 14 | `JavaScript` | [JavaScript 與 DOM 以及事件機制](/W5voVPizSUa9_VVTDfijqg) | 15 | `JavaScript` | [jQuery](/A80uSAxqSHK692ee1Lokiw) | | 16 | `Bootstrap` | [Bootstrap 介紹](/6_Czy0wtSaql4K641ChWWA) | | 17 | `JavaScript`| [練習題目 - 留言板](/xHdrYfybR6e3llJnCW5i3w) | ### 📗入門後端 | Number | About | ✍️Subject | | ------ | ----- | --------- | | 01 | `PHP` | [XAMPP 安裝及介紹](/woxM9xy0S6eXy6gWJ-dR3w)　| | 02 | `PHP` | [基礎 PHP](/dYn27JpvQPqqPYVGlYT52w) | | 03 | `PHP` |[PHP_CodeSniffer ](/2C4YNmMcThejlgYSN8GDiQ)| | 04 | `PHP` | [基礎 MySQL](/XcWXG-jlRVWF4CNo4pMdpA) | | 05 | `PHP` | [練習題目 - PHP 留言板](/_fofujJPRguiYCAGaMFERA) | - 前端使用 HTML/CSS/javascript/jQuery ，後端使用 PHP + MySQL >使用PHP MySQL 從頭開始仿製一個 Google 搜尋引擎版本 >使用 PHP + MySQL 建立一個真實的類似 Facebook 的社群網站 >使用JavaScript，PHP，MySQL 從頭開始仿製一個 Spotify 網站 >使用 PHP，MySQL，JavaScript 從頭開始仿製一個 YouTube 網站 ### ✅額外參考網頁、筆記連結 | Num | About | Notes、URL | Why | | --- |------ | ---------- | -----------------| | 01 |<div style="width: 100pt">`前端` `PHP`</div> |[Session & Cookie](https://hackmd.io/TcfRYeV0QLi84cP53uokbg)　| <div style="width: 400pt">可以透過知道如何使用、運作的話可以達到記錄一些使用者的狀態、資訊的成效</div> | | 02 | `前端` `SQL` `PHP` `網路安全` | [SQL Injection](/n9HGAFlFRP-SooI_Lj-wDA) | 學習如何避免 SQL Injection 漏洞、了解 SQL Injection | | 03 | `前端` | [什麼是 Coding style? ](https://hackmd.io/nlmGGR2qThC3YBjCVKtzUQ) |是指撰寫程式的方式和風格，讓後續的程式開發和維護能夠提高效率、好維護| | 04 | `前端` `SQL` `PHP` `網路安全` | [XSS 攻擊](https://reurl.cc/1mNEaD) |防止 XSS | | 05 | `前端` `API` | [Slide](https://reurl.cc/bEKg8X) 、 [Docs](/EyzoXD8uSuCJfUVCQaAxrA)、[從拉麵店的販賣機理解什麼是 API](https://hulitw.medium.com/ramen-and-api-6238437dc544) | 可以透過學習API是網頁伺服器與網頁瀏覽器之間的應用程式處理介面、可以取得資料庫資料 | | 06 | `前端` `網路安全` `API` `AJAX` | [CORS 完全手冊](https://blog.huli.tw/2021/02/19/cors-guide-1/) | 了解、解決 CORS Error | | 07 | `前端` `後端` |[留言板大綱](https://hackmd.io/0oX-tzM2RlaVkywPpZtnMA) |大家如果了解入門前端以及入門後端可以去試試這個留言版的大綱去作出留言板 | `前端` |  --- ## 整體走向 :::success 大要：學習後端基礎，結合網頁工作坊，並且帶入 Coding style，讓新生們學習工作小組的一些能力，且銜接到 Laravel，為未來的專案能力做好準備。概述：我認為程式碼相關的，網路上有相當多的資源，遇到不懂的可以先上網查詢，一方面可以訓練他們相關的自學能力，另一方面我們將重要但可能較少機會去接觸到的能力分享給學員們 ::: :::success 只要有一顆願意學習且熱情的心，都歡迎你加入，與大家一同研究、學習探討相關技術。 :::