Try   HackMD

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

套件可以用的

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

設計稿完成挑戰

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

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

firebase研究

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

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

有趣工具 登入頁套件

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

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

可實作之前端練習

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

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

CSS教學大全

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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課程

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

https://www.udemy.com/home/my-courses/learning/

HAHOW課程

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

圖靈編程

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

大神來六角

https://www.youtube.com/playlist?list=PLYrA-SsMvTPObqJuUsoi3HoU9MrdESwnC

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

哈希教學網站 有專案可參考

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

http://blog.hashteacher.com/

日本網站教學clone人家網頁

https://code-step.com/coding-cope/

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

視頻

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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 彭彭
分析怎麼抓動態網頁(ajax)  蠻有趣的 研究爬蟲看
也可以比較了解網頁結構

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

HTML CSS JavaScript projects for beginners 2023 - 12 js projects with source code

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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=DtkK1NP_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

笑死,我發現吳哲宇有教怎麼寫:

教的超級好,神人。

108-1 前端程式設計 期末報告注意事項

https://hackmd.io/@kChen/Bkrnsb6TS

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

某教學網

用 CSS 製作 Pie Chart 且頁面下滑觸發動畫效果

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的饅頭計畫

饅頭計畫二代草稿

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-巴哈姆特調整檢視回覆留言/code

dcard反登入視窗

https://greasyfork.org/zh-TW/users/786583-micr0dust

2019老教學網站 參考用就好

http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-1.html

JS 程度等級表

六角學院 - HexSchool:hackmd

小工具布局參考(?

幫操作畫面加個邊框吧!響應式加框網頁工具 / Add a frame on screenshot: Responsive Frame Mockup