# 學習順序:homework-->jquery-->js30-->-->HTML+CSS-->F2E-->vue-->node.js-->php+mongoDB-->python+AI

https://ife.baidu.com/preface.html

## 套件可以用的

## 設計稿完成挑戰

https://codedesign.dev/
非常有趣 感覺跟工作上切板會很實際 給你figma的稿件 要你試著去完成
有時間可以來練習 讓自己弄熟悉這個流程

## firebase研究

https://www.letswrite.tw/category/google/firebase/

## 有趣工具 登入頁套件

https://github.com/nauvalazhar/bootstrap-4-login-page

## 可實作之前端練習

https://letswritetw.github.io/letswrite-github-api-issue-create-app/
各種小頁面 包含API以及一些JS練習
非常實際也很技術 也很作品集導向
是個大師模範

## CSS教學大全
https://www.youtube.com/@OnlineTutorialsYT/videos

【CSS面试题】双飞翼布局
https://www.bilibili.com/video/BV1wD4y1G7uu/?spm_id_from=333.788.recommend_more_video.3&vd_source=bd22315003d7ef244f18059355eb75db

## Udemy課程
https://www.udemy.com/home/my-courses/learning/

## HAHOW課程
動畫互動網頁程式入門 (HTML/CSS/JS)

## 圖靈編程
<iframe width="560" height="315" src="https://www.youtube.com/embed/uDgA8yyCnHo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
https://turingplanet.org/

## 全資料:配合我筆記裡面的六角資源包+JS30資源包

## 大神來六角
https://www.youtube.com/playlist?list=PLYrA-SsMvTPObqJuUsoi3HoU9MrdESwnC


## 哈希教學網站 有專案可參考
http://blog.hashteacher.com/

## 日本網站教學clone人家網頁
https://code-step.com/coding-cope/

他的YT頻道：
https://www.youtube.com/@user-hl9uv6cv7k/videos

## 視頻


yiyi爱编程努力学习前端。
https://www.zhihu.com/people/shi-du-9-49/zvideos

Responsive Website Landing Page Design | Title (Creative Nature) - Only Using CSS & HTML
https://www.youtube.com/watch?v=JYWitDwHhxE&list=PLKNznZDLTfKQwq4HLxhkNEXWLBypFpXM0

### 12个web前端实战项目（附源码）练完即可就业，从入门到进阶，基础到
https://www.bilibili.com/video/BV1dy4y1X7ZF/?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=bd22315003d7ef244f18059355eb75db

已經練習小米商城+陰陽師 現在改跟尚學堂看看

### 【京东商城-完整版】web前端大作业仿京东商城项目__Html5+CSS3+JS
https://www.bilibili.com/video/BV1i24y1B7fw?p=3&vd_source=bd22315003d7ef244f18059355eb75db

Hacking JavaScript Games Christmas Special- Alien Invasion becomes Santa Claus Conquers The Martians
https://www.youtube.com/watch?v=EFBktnHr_0Q
大叔教學　　這個一定好看

Learn2Hack: Learn To Hack JavaScript Games (Audio Enhanced)
https://www.youtube.com/watch?v=PSFgVVtSrCE
八分鐘影片　　應該簡單快速可看懂

https://www.youtube.com/watch?v=IMOUf4BYTG8
Python 網路爬蟲 Web Crawler 教學 - AJAX / XHR 網站技術分析實務 By 彭彭
分析怎麼抓動態網頁（ａｊａｘ）　　蠻有趣的　研究爬蟲看
也可以比較了解網頁結構

Using Double URL Encoding to Bypass Security Mechanisms for a Directory Traversal Attack
https://www.youtube.com/watch?v=nclJPOL3PXc
感覺是有趣的講解　　跟ＸＳＳ有關

HTML CSS JavaScript projects for beginners 2023 - 12 js projects with source code
<iframe width="560" height="315" src="https://www.youtube.com/embed/-7JSF_aATJg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

CROSS SITE SCRIPTING系列教學
https://www.youtube.com/watch?v=1WFEVpyhRRQ&list=PLrQwMS8b1fmTR9BEOX5RiQxSZSEmL7uYI

jQuery实战开发(冒泡事件)--小馬老師
https://www.bilibili.com/video/BV1zJ411T7Kk/?p=22&vd_source=bd22315003d7ef244f18059355eb75db

Java前端网页设计教程，HTML5基础教学，一周学会web前端网页开发
https://www.bilibili.com/video/BV1Mo4y1Z7mk/?spm_id_from=333.788.recommend_more_video.6&vd_source=bd22315003d7ef244f18059355eb75db

ASMR星巴克網站
https://www.youtube.com/watch?v=yFcDHCOAue0

一小時做一個聊天網站
https://www.youtube.com/watch?v=LZrAFp5fQmo

千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到精通
https://www.bilibili.com/video/BV17z4y1D7Yj/?p=3&vd_source=bd22315003d7ef244f18059355eb75db

## js30之類的項目

### js30已經完成

### 去學flex跟gird

### markdown課程也免費但是我已經會了 跳過

### 20+ Web Projects With Vanilla JavaScript
https://github.com/bradtraversy/vanillawebprojects

### 50 Projects in 50 Days - HTML/CSS and JavaScript
https://github.com/bradtraversy/50projects50days


原來我是買這個 而且還不是特價買的 要兩千== 幹

### GeekProbin
https://www.youtube.com/watch?v=Dt--kK1NP_w&list=PLMNhwMMnPnGpc5faiL0AzTIGtFwoDNQ45

### Easy Tutorials
https://www.youtube.com/@EasyTutorialsVideo/videos

### C w C 網頁設計

https://www.youtube.com/@cwc8096/videos

### 黑马Pink前端Jquery教程
https://www.youtube.com/watch?v=S3pTXrNZWYc&list=PLKLUwbV5J_7cP5gz9lU7U_IobaAGRoO5p&index=53)

### 【前端实战项目】手把手教你从零开始做一个网易云音乐
https://www.bilibili.com/video/BV1c44y1g7ac/?spm_id_from=333.788.recommend_more_video.-1&vd_source=bd22315003d7ef244f18059355eb75db

### 台灣地圖實作
做出了我之前在IT幫發問的問題！
網站設計漂亮乾淨，可研究。
https://collego.edu.tw/Login/Index

笑死，我發現吳哲宇有教怎麼寫：<iframe width="560" height="315" src="https://www.youtube.com/embed/eHrGB5EHtF4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

教的超級好，神人。

### 108-1 前端程式設計 期末報告注意事項
https://hackmd.io/@kChen/Bkrnsb6TS

裡面有一堆台大寫的期末網站 然後琨哥在FB有他們報告的介紹影片
可以學裡面歷屆人 做的網站創意跟技術 研究

## 某教學網
[用 CSS 製作 Pie Chart 且頁面下滑觸發動畫效果](https://webmix.cc/lab/pie_chart_animation?fbclid=IwAR0VUUu_4OQ7pftIKWXZTIgQ-VQKzFKI-7WXSbwzQJe_BYvOXknfbc5LfDY)

### 【Day 16】簡單好上手的圖片輪播 jQuery - Owl Carousel
https://ithelp.ithome.com.tw/articles/10247358

裡面一堆超實用的插件 要花時間去看看

### 30-seconds-of-code/snippets

用PUREJS寫出好用的method
ex:addClass hasClass等等
https://github.com/30-seconds/30-seconds-of-code/tree/master/snippets

## 插件
scrollUp 2.0.0 Demo
https://markgoodyear.com/labs/scrollup/?theme=pill

magnific-popup
https://dimsemenov.com/plugins/magnific-popup/

Ajax Contact Form
https://github.com/mehedidb/Ajax_Contact_Form

## 研究的網站
https://beautyptt.cc/

爬ptt表特版 很棒的範例 有空研究

## h2從新手到中手：前端工程加強班
課程大綱
基本 HTML/CSS 練習：以 Twitch 為例
讓畫面變得更動態：神奇的 CSS transition
寫 CSS 必備神器：CSS 預處理器
從假資料到真資料：Ajax 與 API 串接
讓網頁變得更完整：加上 placeholder 與 infinite scroll
返璞歸真：vanilla js
走向國際：i18n
當我們包在一起：Webpack
節省 Request 的極致：一為全，全為一
改掉你的壞習慣：ESLint 與 standard
https://github.com/aszx87410/frontend-intermediate-course
有yt影片:
https://www.youtube.com/watch?v=-UEWWzWaGeg

百度前端学院 2017 学习
https://github.com/brianway/baidu-ife

## 類似huli的饅頭計畫

<iframe width="560" height="315" src="https://www.youtube.com/embed/3BYOVlCVsL8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

[饅頭計畫二代草稿](https://lukajojo.medium.com/%E9%A5%85%E9%A0%AD%E8%A8%88%E7%95%AB%E4%BA%8C%E4%BB%A3%E5%8F%83%E5%8A%A0%E6%96%B9%E6%B3%95%E8%88%87%E9%A0%90%E8%A8%88%E6%99%82%E9%96%93-7f32b098e59)

## h2Lidemy 全站訂閱方案
月付 390 元，前 7 天可無條件退費
半年付 2190 元，前 14 天可無條件退費
年付 3990 元，前 30 天可無條件退費
https://www.lidemy.com/p/lidemy-subscription

## h2帶著你切版的YT
https://www.youtube.com/watch?v=WTYPvaJPIuA

## MDN教學
JavaScript 是什麼?
https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript

## 練手項目

https://www.toolskk.com/html-entities-encoder-decoder

## 別人的腳本或網頁

### 失智列車
https://determinationlove.github.io/React_BahaTrain/

### 巴哈姆特調整檢視回覆留言
https://greasyfork.org/zh-TW/scripts/449342-%E5%B7%B4%E5%93%88%E5%A7%86%E7%89%B9%E8%AA%BF%E6%95%B4%E6%AA%A2%E8%A6%96%E5%9B%9E%E8%A6%86%E7%95%99%E8%A8%80/code

## dcard反登入視窗
https://greasyfork.org/zh-TW/users/786583-micr0dust

# 2019老教學網站 參考用就好
http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-1.html

[JS 程度等級表](https://hackmd.io/@hexschool/BkmX-2cYc)

[六角學院 - HexSchool:hackmd](https://hackmd.io/@hexschool)

## 小工具布局參考(?


[幫操作畫面加個邊框吧！響應式加框網頁工具 / Add a frame on screenshot: Responsive Frame Mockup](
https://pulipulichen.github.io/Responsive-Frame-Mockup/index.html)