今天來分享專案學習法！！！

個人熱愛搜尋教學影片，存了滿滿的YT教學影片看不完，希望大家可以用力看完底下的影片 ?

搜尋小秘訣

基本上搜尋的關鍵字就是你要的技能＋需求，不管是在Youtube上還是在google搜尋都差不多。時間盡量找最近一年的比較好，技術更新很快，有些套件還會因為版本更新不支援。

還有影片時間長度在建議90分鐘以內比較好，通常這個長度的不會太複雜，你也會比較有耐心可以看完跟做完，那種3–11小時的教學影片，通常都是作品等級的，你以後會有機會看的！但不建議現在硬啃就是了。

舉例來說，我要找 htm + css 的專案教學 ，那關鍵字就是 htm css project ，就會找到很多影片囉！

挑選小秘訣

可以先挑簡單的影片比較短的教學，內容是做出一個簡單的東西，像是卡片或是選單等等，會很有成就感，因爲很多教學都是操作很無聊的應用，範例都很簡單，很難想像實際在運用的樣子。

如果覺得想要做點更有成就感的東西，可以直接挑個簡單的網站，做完會真的很有成就感，即便是看著教學做，但是透過你自己的手敲出來的，那感覺真的是很讚！

看教學除了成就感，同時還可以學習他如何去撰寫、命名，資料夾結構，還可以挑選一下喜歡的寫法、排版跟功能，未來可以應用在自己的作品上。(創新都源自於模仿？

通常我會挑有附source code(原始程式碼)的教學，方便做對照，有可能是github連結，也可能是一個雲端資料夾。

練習造就不凡？！

我覺得程式碼熟悉度很像剛開始學習騎車或是開車，一開始會歪七扭八，很難掌握平衡跟路況，隨著時間跟經驗的累積，就會越來越駕輕就熟。

這個經驗也是可以類推到轉職的學習上，一開始不熟悉，覺得天啊，這是什麼語法？怎麼都看不懂，隨著課程的進度跟小專案的練習，就會越來越像一回事囉！！！

HTML+CSS

一開始很適合先從HTML+CSS練習

From Design to Code // HTML & CSS from scratch // Frontend Mentor

Creating a responsive, asymmetrical design with HTML & CSS

Creating a Sushi-Themed Website: 2023 HTML & CSS Guide for Beginners

HTML & CSS Project Tutorial - Build a Recipes Website

Building 10 Websites - From Design to HTML and CSS - Coding Challenge 🔥

HTML+CSS+JS

如果切版都還算熟悉了，就可以往下挑戰一下加上JS的專案練習

HTML CSS JavaScript projects

HTML5, CSS3 and JavaScript 100+ Projects For Beginners

HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

WEB TEMPLATES

Create a Movie Website in 90 min. HTML & CSS & Javascript

How to Build Creative Education Website Using HTML CSS JavaScript

Build a Simple Website with HTML, CSS, JavaScript - Course for Beginners

React 

終於來到重頭戲拉！這時候你還會學習不同的CSS寫法或是UI框架，常見有SCSS、Styled-Components、Emotion、TaiwlindCSS、MUI，都蠻有趣的，建議先熟悉某一種，你可以先挑一種做，然後搜尋類似的專案繼續練習。

React Project For Beginners

React Project Tutorial - Build a Portfolio Website w/ Advanced Animations

React JS Personal Portfolio Website | Beginner friendly tutorial

React Project Website Tutorial With Tailwind CSS From Scratch (2022)

Fullstack React JS, Tailwind CSS, and Vite Project Tutorial

溫馨小提醒

透過專案學習會很有成就感，但也比較沒有系統，用到什麼就會什麼，還是建議要回去把完整的課程看過一遍比較扎實。

再來就是上面的影片都是提供增加練習機會的選擇，其實蠻多完整的課程教學都會有project讓你練習。

明天來分享額外的學習資源，因為誤打誤撞搜尋到MERN Stack（Mongodb + Express + React + Node.js），就開啟了Full Stack全端的學習大門，也會分享Next.js框架的學習資源。

今天順利結束拉！！常常搜尋滿滿的學習資源後......就當收藏品