**🚨🚨注：**本文分享的所有tips、tricks都是GitHub repository[【css tips tricks】](https://github.com/devsyedmohsin/css-tips-tricks)的一部分。覺得有用的話請查看資源庫並給它一個star🌟 原文出處：https://dev.to/devsyedmohsin/22-useful-css-tips-and-tricks-every-developer-should-know-13c6 ## 1. Docs Layout 僅用兩行 CSS 建立響應式文件樣式的佈局。 ``` .parent{ display: grid; grid-template-columns: minmax(150px, 25%) 1fr; } ```  ## 2.自定義游標 查看 github 存儲庫 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks) 以了解更多訊息。 ``` html{ cursor:url('no.png'), auto; } ```  ## 3. 用圖片填充文本 ``` h1{ background-image: url('images/flower.jpg'); background-clip: text; color: transparent; background-color: white; } ```  **注意：** 在使用此技術時始終指定 `background-color`，因為這將用作後備值，以防圖像因某種原因無法加載。 ## 4. 給文本加入描邊 使用 text-stroke 屬性使文本更易讀和可見，它會向文本加入筆劃或輪廓。 ``` /* 🎨 Apply a 5px wide crimson text stroke to h1 elements */ h1 { -webkit-text-stroke: 5px crimson; text-stroke: 5px crimson; } ```  ## 5.暫停 Pseudo Class 使用 `:paused` 選擇器在暫停狀態下設置媒體元素的樣式 同樣 `:paused` 我們也有 `:playing`。 ``` /* 📢 currently, only supported in Safari */ video:paused { opacity: 0.6; } ```  ## 6.強調文字 使用 text-emphasis 屬性將強調標記應用於文本元素。您可以指定任何字串，包括表情符號作為其值。 ``` h1 { text-emphasis: "⏰"; } ```  ## 7.樣式首字下沉 避免不必要的 `<span>`，而是使用偽元素來為您的內容設置樣式，就像 `first-letter` 偽元素一樣，我們也有 `first-line` 偽元素。 ``` h1::first-letter{ font-size: 2rem; color:#ff8A00; } ```  ## 8.變數的回退值 ``` /* 🎨 crimson color will be applied as var(--black) is not defined */ :root { --orange: orange; --coral: coral; } h1 { color: var(--black, crimson); } ```  ## 9. 改變書寫模式 您可以使用書寫模式屬性來指定文本在您的網站上的佈局方式，即垂直或水平。 ``` <h1>Cakes & Bakes</h1> ``` ``` /* 💡 specifies the text layout direction to sideways-lr */ h1 { writing-mode: sideways-lr; } ```  ## 10.彩虹動畫 為元素建立連續循環的彩色動畫以吸引用戶注意力。閱讀 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks#rainbow-animation) 存儲庫以了解何時使用“prefer-reduced-motion”媒體功能 ``` button{ animation: rainbow-animation 200ms linear infinite; } @keyframes rainbow-animation { to{ filter: hue-rotate(0deg); } from{ filter: hue-rotate(360deg); } } ```  ## 11.掌握Web開發 訂閱我們的 [YouTube 頻道](https://www.youtube.com/@nisarhassan12)，讓您的網絡開發技能更上一層樓。 [最近的視頻系列](https://www.youtube.com/watch?v=1nchVfpMGSg&list=PLwJBGAxcH7GzdavgKlCACbESzr-40lw3L) 之一介紹了建立以下開源[投資組合模板](https://github.com/nisarhassan12 /投資組合模板）。  ## 12. 懸停時縮放 ``` /* 📷 Define the height and width of the image container & hide overflow */ .img-container { height: 250px; width: 250px; overflow: hidden; } /* 🖼️ Make the image inside the container fill the container */ .img-container img { height: 100%; width: 100%; object-fit: cover; transition: transform 200m ease-in; } img:hover{ transform: scale(1.2); } ```  ## 13.屬性選擇器 使用屬性選擇器根據屬性選擇 HTML 元素。 ``` <a href="">HTML</a> <a>CSS</a> <a href="">JavaScript</a> ``` ``` /* 🔗 targets all a elements that have a href attribute */ a[href] { color: crimson; } ```  ## 14. 裁剪元素 使用 `clip-path` 屬性建立有趣的視覺效果，例如將元素剪裁成三角形或六邊形等自定義形狀。 ``` div { height: 150px; width: 150px; background-color: crimson; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } ```  ## 15.檢測屬性支持 使用 CSS `@support 規則` 直接在您的 CSS 中檢測對 CSS 特性的支持。查看 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks#check-if-property-is-supported) 存儲庫以了解有關功能查詢的更多訊息。 ``` @supports (accent-color: #74992e) { /* code that will run if the property is supported */ blockquote { color: crimson; } } ```  ## 16. CSS 嵌套 CSS 工作組一直在研究如何向 CSS 加入嵌套。通過嵌套，您將能夠編寫更直觀、更有條理和更高效的 CSS。 ``` <header class="header"> <p class="text">Lorem ipsum, dolor</p> </header> ``` ``` /* 🎉 You can try CSS nesting now in Safari Technology Preview*/ .header{ background-color: salmon; .text{ font-size: 18px; } } ``` ## 17.箝制函數 使用 `clamp()` 函數實現響應式和流暢的排版。 ``` /* Syntax: clamp(minimum, preferred, maximum) */ h1{ font-size: clamp(2.25rem,6vw,4rem); } ```  ## 18. 樣式化可選字段 你可以使用 `:optional` 偽類來設置表單字段的樣式，例如 input、select 和 textarea，這些字段沒有 required 屬性。 ``` /* Selects all optional form fields on the page */ *:optional{ background-color: green; } ``` ## 19. 字間距屬性 使用 `word-spacing` 屬性指定單詞之間的空格長度。 ``` p { word-spacing: 1.245rem; } ``` ## 20. 建立漸變陰影 這就是您如何建立漸變陰影以獲得獨特的用戶體驗。 ``` :root{ --gradient: linear-gradient(to bottom right, crimson, coral); } div { height: 200px; width: 200px; background-image: var(--gradient); border-radius: 1rem; position: relative; } div::after { content: ""; position: absolute; inset: 0; background-image: var(--gradient); border-radius: inherit; filter: blur(25px) brightness(1.5); transform: translateY(15%) scale(0.95); z-index: -1; } ```  ## 21. 改變標題位置 使用 `caption-side` 屬性將表格標題（表格標題）放置在表格的指定一側。  ## 22. 建立文本列 使用列屬性為文本元素製作漂亮的列佈局。 ``` /* 🏛️ divide the content of the "p" element into 3 columns */ p{ column-count: 3; column-gap: 4.45rem; column-rule: 2px dotted crimson; } ```  --- 以上分享，希望對您有幫助！
隨著技術的日新月異，開發人員正在獲得令人難以置信的新**工具**和**API**。 讓我們來看看一些有用的 **Web API**，它們可以幫助您將網站變得更強大！ 原文出處：https://dev.to/ruppysuppy/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-38bc ## 1. Screen Capture API **螢幕截圖 API**，顧名思義，允許您截圖螢幕的內容，讓開發 **螢幕錄像機** 的過程變得輕而易舉。 您需要一個 **video** 元素來顯示要抓的畫面。 **開始**按鈕將開始**抓取畫面**。 ``` <video id="preview" autoplay> Your browser doesn't support HTML5. </video> <button id="start" class="btn">Start</button> ``` ``` const previewElem = document.getElementById("preview"); const startBtn = document.getElementById("start"); async function startRecording() { previewElem.srcObject = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true, }); } startBtn.addEventListener("click", startRecording); ``` ## 2. Web Share API **Web Share API** 允許您將**文字**、**連結**和**甚至檔案**從**網頁共享到設備上安裝的其他應用程式**。 ``` async function shareHandler() { navigator.share({ title: "Tapajyoti Bose | Portfolio", text: "Check out my website", url: "https://tapajyoti-bose.vercel.app/", }); } ``` **注意：** 要使用 **Web Share API**，您需要用戶進行過互動。例如，**按鈕點擊**或**觸摸事件**。 ## 3. Intersection Observer API **Intersection Observer API** 允許您**檢測元素何時進入或離開畫面**。這對於實現**無限滾動**非常有用。 https://codepen.io/ruppysuppy/pen/abBeZwj **注意：** 由於我個人的喜好，該範例使用 **React**，但您可以使用 **任何框架** 或 **vanilla JavaScript**。 ## 4. Clipboard API **剪貼板 API** 允許您**讀取資料**並將資料寫入**剪貼板**。這對於開發 **複製到剪貼板** 功能很有用。 ``` async function copyHandler() { const text = "https://tapajyoti-bose.vercel.app/"; navigator.clipboard.writeText(text); } ``` ## 5. Screen Wake Lock API 有沒有想過 **YouTube** 如何防止螢幕在播放影片時被關閉？其實，那是因為 **Screen Wake Lock API**。 ``` let wakeLock = null; async function lockHandler() { wakeLock = await navigator.wakeLock.request("screen"); } async function releaseHandler() { await wakeLock.release(); wakeLock = null; } ``` **注意：**如果頁面已經在螢幕上可見，您只能使用**螢幕喚醒鎖定 API**。否則，它會拋出錯誤。 ## 6. Screen Orientation API **螢幕方向 API** 允許您檢查螢幕的**當前方向**，甚至**將其鎖定**到特定方向。 ``` async function lockHandler() { await screen.orientation.lock("portrait"); } function releaseHandler() { screen.orientation.unlock(); } function getOrientation() { return screen.orientation.type; } ```  ## 7. Fullscreen API **全屏 API** 允許您以**全屏**顯示元素或整個頁面。 ``` async function enterFullscreen() { await document.documentElement.requestFullscreen(); } async function exitFullscreen() { await document.exitFullscreen(); } ``` **注意：**要同時使用**全屏 API**，您需要用戶進行過互動。 --- 以上簡單分享，希望對您有幫助！
## 題目說明  寫出這樣子的網頁切版 ### 示範效果  CODEPEN:https://codepen.io/flwrtykd-the-scripter/pen/VwGyOwa ## 代碼寫法 ### HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>貓咪網站</title> </head> <body> <div class="wrap"> <div class="hero"> <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" alt="" /> <div class="text"> <span class="red">有貓咪也有狗，</span> <br /> <span class="red">甚至是螳螂！</span> <br /> <span class="green">隨便讓你領養</span> </div> </div> <div class="content"> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> </div> <div class="footer"> <p>@copy right 這邊就是一些文字</p> </div> </div> </body> </html> ``` ### CSS ``` body { background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80"); overflow: hidden; } .wrap { width: 1000px; background-color: #e9edc9; margin: 0 auto; height: 100vh; margin-top: -10px; } .hero img { width: 100%; height: 250px; object-fit: cover; object-position: 0px 1px; } .hero span { font-size: 45px; } .hero .green { font-size: 35px; } .text { position: absolute; top: 35px; left: 250px; font-weight: 900; text-shadow: 2px 2px 5px white; border-left: 5px solid yellow; } .text > * { margin-left: 20px; } .content { display: flex; justify-content: space-around; margin-top: 40px; } .block { width: 250px; border: 1px solid black; } .block img { width: 100%; } .block p { padding: 5px 20px; } .block:nth-child(1) { margin-left: 25px; } .footer { background-color: black; color: white; text-align: center; height: 30px; } .footer p { transform: translateY(25%); } ``` ## 布局解釋 ### 背景以及格局 先設定一個背景 background img之後 使用wrap來製造一個效果是左右縮窄 只要設定width 以及margin auto 0就可以了 之後我使用三個分區 分別是上到下的四個div: hero 裡面有大圖片 text是標題文字 然後是content裡面放置三個block裝著小圖片跟內容文字 最底下是footer放著版權說明 ### hero & text hero就放圖片 width設定100%即可 text的話我裡面用三個span寫文字 設定class分別調整樣式 換行是使用br標籤 其中左邊的書籤效果(黃色長長那條) 是對text這個div使用border left完成的 ### content 這邊的話 先對content的div設定display flex達到水平排列的效果 其中可以用justify content讓它space around 平均分散開 再使用:nth-child(1) 去針對第一個block調整margin left 讓排版更精準 裡面的話 寫一個block 完成後再複製成三個 block放置img跟p即可 而它本身也要用一個border製造出邊線的效果 ### footer 我使用 transform: translateY(25%); 讓文字有點垂直置中的感覺 這都可以自己微調 ## 特別注意 在hero的img調整上我使用了 object-fit object-position 這兩個屬性去微調 這個是很好用的小技巧，可以特別留意 ## 心得 這種切板很常見 使用的伎倆其實差不多就那些 學習上 可以藉由先完成效果 再尋求優化的原則 以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片 我未來可以寫一系列的切版文來跟大家交流～～～
經營這網站主要是想做新手友善論壇 本想隨手寫2-3份入門教材，簡單給新手一些方向 結果居然寫了8份，而且我發現後面還有滿多要教的東西 所以我打算把自學教材改成「付費教材」，我乾脆長期研發新教材好了 - JavaScript 系列前兩課免費 - 每個系列售價$199 - 現有會員不受影響（今天之前註冊的會員，所有教材維持免費） 以上規劃跟大家分享，希望中長期來說，可以變成最優質、最便宜的前端系列教材 然後就可以跟討論區功能相輔相成，讓新手有個持續進修的好地方
* [第1課 ── 碼表應用程式](https://replit.com/@birdiewu/Ma-Biao-Ying-Yong-Cheng-Shi-online-stopwatch?v=1) * [第2課 ── 筆記應用程式](https://replit.com/@birdiewu/Bi-Ji-Ying-Yong-Cheng-Shi-online-notepad?v=1) * [第3課 ── 分帳應用程式](https://replit.com/@birdiewu/Fen-Zhang-Ying-Yong-Cheng-Shi-online-split-the-bill?v=1) * [第4課 ── 行事曆應用程式](https://replit.com/@birdiewu/Xing-Shi-Li-Ying-Yong-Cheng-Shi-online-calendar?v=1) * [第5課 ── 體重追蹤應用程式](https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1) 備註：如果第五課卡關，說不定你遇到跟我一樣的問題，可以參考[這裡的討論串](https://codelove.tw/@birdie2019/post/Ja69K3) * [第6課 ── 天氣查詢應用程式](https://replit.com/@birdiewu/Tian-Qi-Cha-Xun-Ying-Yong-Cheng-Shi-weather-in-taiwan?v=1) * [第7課 ── 國家資訊與地圖應用程式](https://replit.com/@birdiewu/Guo-Jia-Zi-Xun-Yu-Di-Tu-Ying-Yong-Cheng-Shi-world-map?v=1) 心得分享： JavaScript第八系列的作業跟前七個系列相比真的有挑戰性和困難度，此系列讓我進入到學習的陣痛期，不習慣、沒自信地摸索著，在網路上東看看西看看方法，文件重複看了好多次，code也拼拼湊湊完成每個作業的規格，遇到卡關的問題學著自己解決(除了第五課的問題外，那邊卡關兩天，最後終於揮白旗XD)，想想有什麼辦法可以做或可以找哪方面的資料，我認為自己不是很聰明和邏輯好的人，剛開始覺得作業規格條件好困難，一直出現卡關的問題，現在回頭看其實我都挑戰完成了欸！雖然回去翻作業看還是有小瑕疵和待優化的地方，但還是恭喜自己終於完成了! _(:з」∠)_
您好，請問幾個問題。 1.為什麼我使用position:relative，網頁會出現很大的空白，我該如何解決。 2.使用絕對位置，我該如何讓我的網頁隨著比例縮放。 問題1 :  問題2:   這是網頁全開的時候  HTML: ``` <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>佳加安全帽</title> <link rel = "stylesheet" href = "style.css"> </head> <body class = "page"> <div class = "navbar"> <div class="container"> <div class = "logo"> <a href = "#"><img src = "jiajia.jpg"/></a> </div> <div class="menu"> <ul class="choose"> <li><a href = "">所有商品</a></li> <li><a href = "">特價商品</a></li> <li><a href = "">安全帽</a></li> <li><a href = "">藍芽耳機</a></li> <li><a href = "">裝備衣物</a></li> <li><a href = "">配件</a></li> <li><a href = "">包包</a></li> </ul> </div> <div class="user"> <ul> <li><a href = "">Log in 登入</a></li> <li>|</li> <li><a href = "">Sign up 註冊</a></li> </ul> </div> </div> </div> <div class="background"> <div class="content"> <h1>在危險的世界中，給你多一份安全</h1> </br> </br> <p>留下您的email，獲得新商品及最新優惠資訊</p> </br> <input type= "email" name = "email" value = "Your email"> </br> <input class="submit" type = "submit" name= "submit" value = "訂閱"> </div> </div> </body> </html> ``` CSS: ``` *{ margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; } .navbar{ background-color: #272727; height: 50px; width: 100%; } .logo img{ height: 50px; } .menu{ position: relative; top: -50px; line-height: 45px; left: 500px; } .menu li{ float: left; } .menu a{ color: #D9B300; display: block; padding: 0 10px; } .menu a:hover{ background-color: #D9B300; color: #272727; } .user{ position: relative; top: -50px; left: 800px; line-height: 45px; } .user li{ float: left; color: #D9B300; } .user a{ color: #D9B300; display: block; padding: 0 10px; } .user a:hover{ background-color: #D9B300; color: #272727; } h1{ color: white; } p{ color: white; } .background{ background-image: url("motor.jpg"); background-size: cover; background-repeat: no-repeat; height: 660px; text-align: center; } .content input{ width: 400px; height: 40px; } .content h1{ font-size: 40px; } .content p{ font-size: 20px; } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .submit{ font-weight: bold; font-size: 20px; background-color: #D9B300; color: #272727; border-radius: 10px; border: 0px; } .submit:hover{ background-color: #272727; color: #D9B300; }
在自學網頁の嬰兒教材：第3課 ── 網頁排版，練習使用 inline-block 版面配置，但一直無法變成如圖下那樣，請問是少了甚麼東西嗎? 謝謝! https://jsfiddle.net/u2bkycxL/1/ 
https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1  JS部分加上第46~49和55~58行無法更新圖表(官網提供的功能) 新增和刪除資料時，圖表無法跟著一起改變，只能重新整理網頁才會改變 不知道哪邊出了問題＠＠
https://replit.com/@evon5995/GigaDeadPort#index.html 點擊離開，把用戶跳轉到 google 首頁 點擊確認，就關閉蓋板警告 以上兩功能都完成了 但是“按過確認，重新整理之後，蓋板警告就不會再跳出來”此功能怎麼都無法完成  js的錯誤不知道如何解決
文章 API 測試上線啦！ 用戶文章列表 - https://codelove.tw/api/posts?username=howtomakeaturn&per_page=5&page=1 單篇文章資料 - https://codelove.tw/api/post/vx8Y23 - https://codelove.tw/api/post/Rqzpb3 - https://codelove.tw/api/post/AqJR1q 以上範例是我的帳號＆文章，試試看，把 `username` 改掉就可以了 歡迎大家玩玩看這組 API，最好可以架出自己的部落格！ 可以先架在 GitHub Pages 試試看！
## 影片來源 https://youtu.be/EeZM5SXuCsU ##內容 ---------- 1. テキスト系 ---------- 02:02 line-clamp 02:56 text-stroke 03:22 background-clip: text; ---------- 2. 画像系 ---------- 03:47 object-fit 04:23 aspect-ratio 04:58 clip-path 05:30 filter 05:57 mix-blend-mode ---------- 3. サイズ ---------- 06:32 max-content 07:02 min, max, clamp 07:13 min 07:50 max 08:14 clamp ---------- 4. レイアウト系 ---------- 08:52 gridlayout 09:21 gap 10:03 display: contents; ---------- 5. 動き ---------- 11:08 position: sticky; 11:49 scroll-behavior: smooth; ---------- 6. その他 ---------- 12:30 Custom Properties 14:35 backdrop-filter 15:37 detail summary 先貼上來，有空補上mdn或是w3c的說明
 現在這個時代大家都是分頁魔人 這個擴充可以參考看看 [STORE](https://chrome.google.com/webstore/detail/vertical-tabs/pddljdmihkpdfpkgmbhdomeeifpklgnm?hl=zh-TW) [GITHUB](https://github.com/lxieyang/vertical-tabs-chrome-extension/blob/master/CHANGELOG.md#v2x-official-releases) 未來有機會我也想研究chrome extension的製作 應該很多好玩的API 
[GITHUB](https://github.com/lecepin/code-lab/tree/main/flex%20%E5%A4%87%E5%BF%98%E5%BD%95) 
目前似乎一共有八個系列 但是標題上看不太出來是哪個系列 我認為這在學習閱讀上會導致滿大的障礙(對我來說 是否有考慮用EP幾 或是其他方法 標註是第幾個系列 否則 JavaScript 自學網頁の嬰兒教材：第2課 ── XXXXXXXXXXXXXXXXXX 這種第二課可能會有八篇 必須我自己藉由XXXX的文字內容去猜到底是哪個階段的話 還滿煩躁的 個人想法是 「JavaScript 自學網頁の嬰兒教材」這幾個字似乎也稍微過於冗長、重複太多次 也許可以找個縮寫名稱 或是乾脆省略(? 畢竟這應該也不是SEO重點(? 也希望其他學員發表想法 大家討論看看~ 也許只是我個人的小偏見~提供參考而已:))))
## 實用yt頻道 https://www.youtube.com/@ludiflex/videos  Traversy Media https://www.youtube.com/@TraversyMedia 滿老牌的 也有開課 要注意的是他教學沒什麼分析 基本上就是看他打code ## html+css好文章 [還在用CSS搞？介紹 10 個優秀的 HTML 標籤，超牛逼低調神標籤！！ ](https://codelove.tw/@JsLover0018/post/Ja69X3) [18個超好用的css屬性，還不知道點進來就會知道！！](https://codelove.tw/@JsLover0018/post/AqJ21q) [資源分享-學習CSS最快速清晰的視覺筆記在這，馬上搞懂flex怎麼用！](https://codelove.tw/@JsLover0018/post/Zq4GLa) [資源分享-練手項目以及結構教學（新手適合！）](https://codelove.tw/@JsLover0018/post/rqEWA3) [資源分享-JS推坑入門必看！老外用示範教小朋友學JS，講的簡單清晰！小朋友竟然問那個問題！](https://codelove.tw/@JsLover0018/post/Ex2vEx) 資源還很多 先這樣 一次收集太多也沒意義 未來會持續慢慢更新~
正在發想一個新功能，未來應該會開發 就是大家發表的文章，會有 API 這樣大家可以在 CodeLove 寫文章，然後自己另外架部落格，撈自己文章的 API 比方說 `https://codelove.tw/api/@howtomakeaturn/posts` 類似這樣 就拿到 JSON 格式的一串文章資料，這樣大家就能把 CodeLove 當文章資料庫、自己另外架喜歡的部落格了～ 大家覺得如何，還不錯吧～
## 前提 很棒的問題，很榮幸我也有辦法可以回答。 你好，稍微看了一下你的code，有些東西想要跟你討論、分享。 ## 解答 ### 修改完的效果  ### 觀念方面 首先必須要稱讚你的野心，想要clone整個網頁，這是非常值得嘉獎的想法！ 是我也會這樣練習，這種想法非常棒！ 我覺得你這種學習態度非常好哦～～～ 針對code的問題， 我覺得你寫得有點亂，具體在於class與ID的名稱取名，我不知道你是否是直接copy人家的過來。 如果是這樣子，我覺得你可以試著自己重構， 如果不是的話，也建議你可以分區，使用註解來把哪一個區域是什麼標註起來，  這對新手來說是個很好的習慣。 再來是你的分區我覺得滿亂的，加上似乎又有重複的div閉合標籤（？ 不知道是你用copy的還是哪裡有問題，這部分要注意！！ 做切版要先確定怎麼分割，你比較像是邊做邊分割，切的不是太好，導致排不太出來。 但這不是你的問題，這邊跟你分享他怎麼切，其實他這種板很簡單。 ### 邏輯方面 主要就是三個東西，wrap、container：main、side。 wrap的話就是設定寬度width以及margin:0 auto，製造一個居中效果。 container裡面有main與side就是你想要排的左跟右邊區。 只要container寫成dispaly:flex 與 justify-content: space around就可以了， 裡面的main寫flex: 0.66、然後side是flex:0.33 這樣會有平均分配的效果。 至於細節寬度就使用padding跟margin去調整。 ### HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="https://glitch.com/favicon.ico" /> <title>Hello world!</title> <!-- import the webpage's stylesheet --> <link rel="stylesheet" href="style2.css" /> <!-- import the webpage's javascript file --> <script src="/script.js" defer></script> </head> <body> <div class="wrap"> <div id="logo"> <a href="https://www.storm.mg/"> <img id="homepage" src="https://www.storm.mg/images/logo.svg" /> </a> </div> <div id="nav_menu"> <nav> <a class="nav_btn" href="https://new7.storm.mg/" ><img id="img1" src="https://www.storm.mg/images/logo_new7.svg" /></a> <a class="nav_btn" href="https://onepercent.storm.mg/" ><img id="img2" src="https://www.storm.mg/images/1percentstyle.svg" /></a> <a class="nav_btn" href="https://www.storm.mg/premium" ><img id="img3" src="https://www.storm.mg/images/vip_logo.png" /></a> <a class="nav_btn" href="#">新聞</a> <a class="nav_btn" href="#">評論</a> <a class="nav_btn" href="#">財經</a> <a class="nav_btn" href="#">生活</a> <a class="nav_btn" href="#">下班經濟學</a> </nav> </div> <div id="tag_title"> <a class="tag_link" href="https://www.storm.mg/category/118">政治</a> <a class="tag_link" href="https://www.storm.mg/category/22168" >公共政策</a > </div> <h1>北捷研擬早晚鳥4折票救內湖交通 高嘉瑜列3原因打臉：根本劃錯</h1> <div id="article_info"> <div id="article_info_name"> <a id="name" href="https://www.storm.mg/authors/313137/%E9%99%B3%E5%AC%BF%E5%A9%B7" >陳嬿婷</a > </div> <div id="article_info_time"> <span id="article_time">2023-02-13 16:16</span> </div> </div> </div> <div class="container2 wrap"> <div class="main"> <img src="https://image.cache.storm.mg/styles/smg-800x533-fp-wm/s3/media/image/2023/01/18/20230118-104054_U18448_M824647_96f1.jpeg?itok=xwGSqPL9" /> <p id="imgintro"> 民進黨立委高嘉瑜（見圖）認為，北市府放錯重點，需2年內讓汐止民生線、東環段動工，才有望根治長年未解的內湖交通問題。（資料照，柯承惠攝） </p> <p class="content_text"> 台北市內湖區近年發展快速，交通壅塞的問題成為各界關注的焦點，為解決內科交通問題，北市副市長李四川與相關單位討論，初步研擬推出北捷早晚鳥票，提供悠遊卡4折優惠，吸引通勤族捨棄汽機車，改搭捷運通勤，並鼓勵民眾在離峰時間上、下班。對此，民進黨立委高嘉瑜認為，北市府放錯重點，需2年內讓汐止民生線、東環段動工，才有望根治長年未解的內湖交通問題。 </p> <a id="link1" href="https://www.storm.mg/line/notify/login" >[啟動LINE推播] 每日重大新聞通知</a > <p class="content_text"> 高嘉瑜於<a id="fb" href="https://www.facebook.com/ntufishfans/posts/pfbid02AhK796XpShFigJjCsMe8vgDsGn8nCrzwXYs8aQdWPcbp86u92sXPJqZUXnnVadoZl" >臉書</a >發文，指出內科塞車問題，主要肇因於在上下班時間同時湧入高達15萬人次的跨區、跨縣市通勤者，而內科地區員工上班時間又有高達82%都集中在上午9時。雖然北市交通局預計推出早晚鳥票，並搭配企業彈性上下班，意圖使內科員工上班能錯開通勤尖峰時段，但事實上，前台北市長柯文哲早在2016年就曾提出為期3個月的「綠色運輸試辦計畫」，其內容就包括捷運早鳥優惠，結果仍是失敗收場。 </p> <p class="content_text"> 高嘉瑜也提到，彈性分流上下班很好，但優惠票誘因不足，她認為，企業端該如何溝通鼓勵彈性上下班？市府端又該如何推動共乘、減少一人一車？才是短期能立竿見影的方法，而長期而言，內科交通最終仍得靠完善捷運路網來拯救，如何解決現有文湖線運量不足且妥善率差及路線轉乘次數高等問題，才是當務之急。 </p> <p class="content_text"> 高嘉瑜也批評，目前民生線遙遙無期，汐東段亦未延伸至舊宗，北市府仍一拖再拖。她表示，行政院在今年1月已核定捷運汐東線，她也多次質詢跟強調，台北端的民生線應接續推動，至少此次汐東線也應先同步延伸至內湖舊宗路的「SB07站」，進而在未來與東環段接軌，串聯內湖、南港、社后、樟樹灣、保長坑及北五堵新市鎮等產業區。 </p> <p class="content_text"> 高嘉瑜說，但遺憾的是，經她近日再度詢問北市府關於「捷運汐東線之規劃，評估可否延伸」，得到的答覆卻是，「因民生線與汐東捷運、基隆捷運所採用之系統不同，須待汐東捷運具體規劃方案核定後，才會開始評估。」至今仍未能有明確定案。 </p> <p class="content_text"> 高嘉瑜強調，台北市長蔣萬安選前承諾東環段2年內動工，務必說到做到。她指出，環狀線東環段可串聯捷運紅線（象山）、藍線（永春）、綠線（松山），為東台北縱向捷運路網的重要建設，並有望根治長年未解的內湖交通問題，蔣萬安也曾在選前承諾2年內動工。她表示，自己會持續關注東環段進度，希望台北市政府可以更積極推動，中央加速進度儘快核定，別讓民眾一等再等。（相關報導：<a id="link2" href="https://www.storm.mg/article/4724935" >幕後》和柯文哲不一樣 高虹安的「軍機處」走自己的路</a >｜更多文章） </p> </div> <div id="sidebar"> <div id="video_area"> <p class="sidebar_video">現正熱映中</p> <iframe id="smg_live_video" class="smg_live_video embed-responsive-item" src="https://www.youtube.com/embed/eJ4RErMLLh4?autoplay=&mute=1&version=3&loop=1" height="200" frameborder="0" allowfullscreen=""></iframe> </div> <div id="recommend"> <p class="sidebar_news sidebar_video">熱門新聞</p> </div> </div> </body> </html> ``` ### CSS ``` * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #logo { margin: 0 auto; text-align: center; } #homepage { width: 169px; height: auto; } #img1 { width: 79px; height: 25px; margin: -8px 0 -5px; } #img2 { width: 79px; height: 25px; margin: -8px 0 -5px; } #img3 { width: 79px; height: 25px; margin: -8px 0 -5px; } #nav_menu { width: 100%; height: auto; border-top: 1px solid black; border-bottom: 1px solid #cccccc; text-align: left; } .nav_btn { display: inline-block; padding: 13px 15px 14px; letter-spacing: 3px; font-size: 16px; text-decoration: none; color: black; } #tag_title { border-left-width: 10px; border-left-style: solid; border-left-color: rgb(255, 56, 56); margin: 10px; } .tag_link { padding: 10px; color: black; text-decoration: bold; } #container { background: #f5f5f5; } #intro { margin: 10px; color: grey; font-size: 10px; } h1 { font-size: 32px; color: black; } #content { background: lightyellow; width: 800px; padding: 5px 30px 20px; } .content_text { padding: 15px 0px; } #artice_info, #article_info_name, #article_info_time { display: inline-block; margin: 10px; } #name { color: red; font-size: 16px; padding: 5px; } #article_time { color: black; font-size: 16px; padding: 5px; } #sidebar { flex:0.33; width: 300px; margin-left: 20px; padding: 0px 30px; } .main{ flex: 0.66; } #video_area, #recommend { border-top-width: 2px; border-top-style: solid; border-top-color: rgb(0, 0, 0); } .sidebar_news{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: grey; padding: 10px 10px 10px 0px; } #img_area { min-height: 420px; position: relative; } #link1 { color: grey; padding: 0px 25px; } #link2 { color: grey; } #fb { color: red; } .container2{ display: flex; justify-content: space-around; } .wrap { width: 1250px; margin: 0 auto; padding: 0px 39px; } .sidebar_video{ margin-top: 10px; font-size: 20px; letter-spacing: 5px; color: #ff3838; margin-bottom: 10px; } .smg_live_video{ margin-bottom: 10px; } ``` ## 後記 以上，很不錯的練習，整體而言做得很好！ 希望未來可以一起繼續進步哦～～ 另外也還是要感謝站長創立這個網站，我從加入的第一天到現在都還是很喜歡哦。 現在站長也有[線上諮詢](https://codelove.tw/coaching)的服務，歡迎各位有需求，投資自己，跟高手學習！ 時間就是金錢，掌握關鍵的學習方法其實比胡搞瞎搞重要！ shout out to my man 阿川。
目前在切版上遇到幾個問題： 1. 在原始大小時，Nav 的 Width 看起來是有縮小的，但在我這裡原始大小 Nav 的 Width 就是 100% 2. 在下方文章與熱門影片這兩個區塊，不知道為什麼文章內容的尺寸大小一直沒辦法很好的與熱門影片的區塊並排。 Code Link: https://glitch.com/edit/#!/efficacious-enormous-play 目前刻出來的樣子：https://efficacious-enormous-play.glitch.me 練習的網站範本：https://www.storm.mg/article/4730482 希望可以獲得協助，感謝！
作為一名開發人員，了解最新的技術和工具對於在就業市場上保持競爭力至關重要。 在這篇文章中，我們整理了一份 2023 年最熱門開發專案的完整列表，以及掌握每個專案的教程和資源。 無論您是希望提高技能的初學者，還是希望擴展您的技能組合的資深開發人員，此列表都適合每個人。 - 原文出處：https://dev.to/rahul3002/2023s-top-development-projects-for-programmers-a-complete-list-of-tutorials-and-tools-for-mastering-the-latest-technologies-37o3 --- ## 專案教程列表： ### Web開發： |專案 |技術 |連結 | | :--- |:---|:---| |使用 NextJS 建置 Reddit 2.0 克隆 | React、SQL、Supabase、Next.js、GraphQL | [連結](https://projectlearn.io/learn/web-development/project/build-reddit-2.0-clone-with-nextjs-205?from=github)| |使用 React 建置 YouTube 克隆 | Express、Node、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/build-a-youtube-clone-with-react-200?from=github)| |使用 JavaScript 圖表庫建立發散條形圖 | JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/create-a-diverging-bar-chart-with-a-javascript-charting-library-197?from=github)| |通過建置卡片組件學習 CSS 基礎知識 | HTML, CSS | [連結](https://projectlearn.io/learn/web-development/project/learn-css-basics-by-building-a-card-component-196?from=github)| |建立無伺服器模因即服務 | JavaScript、Rust、CSS、HTML | [連結](https://projectlearn.io/learn/web-development/project/create-a-serverless-meme-as-a-service-194?from=github)| |天氣預報網站 | JavaScript、HTML、CSS、React | [連結](https://projectlearn.io/learn/web-development/project/weather-forecast-website-193?from=github)| |連結縮短網站 | JavaScript、Vue、HTML、CSS、React | [連結](https://projectlearn.io/learn/web-development/project/link-shortener-website-192?from=github)| |抄襲檢查器網站 | Python, 引導 | [連結](https://projectlearn.io/learn/web-development/project/plagiarism-checker-website-189?from=github)| |建置自定義 Google 地圖主題 | JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/build-a-custom-google-maps-theme-187?from=github)| |使用 JavaScript 建置超級馬里奧主題的 Google 地圖 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/build-a-super-mario-themed-google-map-with-javascript-180?from=github)| |建置社區驅動的交付應用程式 | Python、Django、PostgreSQL、JavaScript、Mapbox | [連結](https://projectlearn.io/learn/web-development/project/build-a-community-driven-delivery-application-176?from=github)| |建置本地商店搜尋和發現應用程式 | Python、Django、PostgreSQL、JavaScript、Mapbox | [連結](https://projectlearn.io/learn/web-development/project/build-a-local-store-search-and-discovery-application-175?from=github)| |使用 React.js 和 Node.js 的中型克隆 |React、Node、CSS3、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/medium-clone-using-react.js-and-node.js-174?from=github)| |使用 React JS 克隆 Facebook |React、Firebase、CSS3、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/facebook-clone-with-react-js-171?from=github)| | JavaScript30 - 30 天 Vanilla JS 編碼挑戰 | JavaScript | [連結](https://projectlearn.io/learn/web-development/project/javascript30---30-day-vanilla-js-coding-challenge-170?from=github)| |使用 Gatsby 和 GraphCMS 的旅行遺願清單地圖 |Gatsby、Leaflet、GraphCMS、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/travel-bucket-list-map-with-gatsby-and-graphcms-168?from=github)| |使用 Vue.js 的記憶卡遊戲 | Vue、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/memory-card-game-with-vue.js-167?from=github)| | Strapi 和 GatsbyJS 課程 - 投資組合專案 | Strapi、Gatsby、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/strapi-and-gatsbyjs-course---portfolio-project-166?from=github)| | Storybook - Node、Express、MongoDB 和 Google OAuth | MongoDB、Node、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/storybook---node,-express,-mongodb-and-google-oauth-165?from=github)| |呼吸和放鬆應用程式 - JavaScript 和 CSS 動畫 | JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/breathe-and-relax-app---javascript-and-css-animations-164?from=github)| |用於加密貨幣價格的 Node.js CLI |Node，JavaScript | [連結](https://projectlearn.io/learn/web-development/project/node.js-cli-for-cryptocurrency-prices-163?from=github)| | React 和 Tailwind CSS 圖片庫 |React，順風，JavaScript，HTML，CSS | [連結](https://projectlearn.io/learn/web-development/project/react-and-tailwind-css-image-gallery-162?from=github)| |使用 React 的番茄鐘 |React，JavaScript，HTML，CSS | [連結](https://projectlearn.io/learn/web-development/project/pomodoro-clock-using-react-161?from=github)| | Laravel 從零開始的關鍵字密度工具 | Laravel、PHP、JQuery、AJAX、SEO | [連結](https://projectlearn.io/learn/web-development/project/keyword-density-tool-with-laravel-from-scratch-160?from=github)| |使用 Yii2 PHP 框架克隆 YouTube | Yii2, PHP | [連結](https://projectlearn.io/learn/web-development/project/youtube-clone-using-yii2-php-framework-159?from=github)| |使用 React、GraphQL 和 Amplify 克隆 Reddit | React、Amplify、AWS、GraphQL、Node | [連結](https://projectlearn.io/learn/web-development/project/reddit-clone-with-react,-graphql-and-amplify-157?from=github)| |使用 React 和 GraphQL 的全棧 Yelp 克隆 |React、GraphQL、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/full-stack-yelp-clone-with-react-and-graphql-155?from=github)| |帶有 React Hooks 和 Context API 的 Pokémon Web App |React、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/pokémon-web-app-with-react-hooks-and-context-api-154?from=github)| |使用 JavaScript 和 Rails 進行分水嶺監控 | Ruby、Rails、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/watershed-monitor-using-javascript-and-rails-153?from=github)| |使用 React 和 Redux 的氣候資料儀表板 | React、Redux、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/climate-data-dashboard-using-react-and-redux-152?from=github)| |僅使用 CSS 翻轉 UNO 卡片 | HTML, CSS | [連結](https://projectlearn.io/learn/web-development/project/flipping-uno-cards-using-only-css-151?from=github)| |使用 Redis、WebSocket 和 Go 的聊天應用程式 | Redis、Web Socket、Go、Azure | [連結](https://projectlearn.io/learn/web-development/project/chat-app-with-redis,-websocket-and-go-146?from=github)| |使用 React 導航的 Spotify 登錄動畫 |React、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/spotify-login-animation-with-react-navigation-145?from=github)| |僅使用 CSS 的動態天氣界面 | HTML, CSS | [連結](https://projectlearn.io/learn/web-development/project/dynamic-weather-interface-with-just-css-144?from=github)| |使用 Airtable 和 Vue 的簡單 CRUD 應用程式 | Airtable、Vue、Vuetify、API、HTML | [連結](https://projectlearn.io/learn/web-development/project/simple-crud-app-with-airtable-and-vue-143?from=github)| |帶有 MEVN 堆棧的全棧 RPG 角色生成器 | MongoDB、Express、Vue、Node、HTML | [連結](https://projectlearn.io/learn/web-development/project/full-stack-rpg-character-generator-with-mevn-stack-142?from=github)| |帶有 PERN 堆棧的 Todo 應用 | PostgreSQL、Express、React、Node、HTML | [連結](https://projectlearn.io/learn/web-development/project/todo-app-with-the-pern-stack-141?from=github)| |帶有 Gatsby 的夏季公路旅行地圖應用程式 |React，Gatsby，Leaflet | [連結](https://projectlearn.io/learn/web-development/project/summer-road-trip-mapping-app-with-gatsby-140?from=github)| |使用 Socket.io 的多人紙牌遊戲 | Phaser 3、Express、Socket.io、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/multiplayer-card-game-with-socket.io-139?from=github)| |帶有 Gatsby 的 COVID-19 儀表板和地圖應用程式 |React，Gatsby，Leaflet | [連結](https://projectlearn.io/learn/web-development/project/covid-19-dashboard-and-map-app-with-gatsby-138?from=github)| | React 抽認卡測驗 |React、API、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/flashcard-quiz-with-react-125?from=github)| |用純 JavaScript 打地鼠 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/whack-a-mole-with-pure-javascript-124?from=github)| |使用 JavaScript 的諾基亞 3310 貪吃蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/nokia-3310-snake-game-using-javascript-123?from=github)| |原版 JavaScript 中的石頭剪刀布 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/rock-paper-scissors-in-vanilla-javascript-122?from=github)| |純 JavaScript 的俄羅斯方塊 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/tetris-with-pure-javascript-121?from=github)| |使用 React 製作 Meme Maker |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/meme-maker-with-react-119?from=github)| |使用 React 克隆 Evernote |React、Firebase、Node、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/evernote-clone-with-react-118?from=github)| |開發者 Meetup App with Vue | Vue、Firebase、Vuetify、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/developer-meetup-app-with-vue-117?from=github)| | Vue 實時聊天應用 | Vue、Firebase、Vuex、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/real-time-chat-app-with-vue-116?from=github)| |使用 Vue 的加密貨幣追踪器 | Vue、Vuetify、API、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/cryptocurrency-tracker-with-vue-115?from=github)| | Vue 多人問答遊戲 | Vue、Pusher、Node、Express、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/multiplayer-quiz-game-with-vue-114?from=github)| | Vue 掃雷遊戲 | Vue、Vuex、Vuetify、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/minesweeper-game-with-vue-113?from=github)| |使用 Vue 克隆 Instagram | Vue、CSSGram、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/instagram-clone-with-vue-112?from=github)| |使用 Angular 克隆黑客新聞 |角度、燈塔、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/hacker-news-clone-with-angular-111?from=github)| |聊天界面 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/chat-interface-110?from=github)| |純 CSS3 工具提示 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/pure-css3-tooltip-109?from=github)| |社交媒體按鈕 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/social-media-buttons-108?from=github)| |推薦卡 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/testimonial-card-107?from=github)| |帶有 CSS3 Flexbox 的導航欄 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/navigation-bar-with-css3-flexbox-106?from=github)| |使用 CSS3 Flexbox 的移動應用程式佈局 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/mobile-app-layout-with-css3-flexbox-105?from=github)| |受 Reddit 啟發的加載微調器 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/reddit-inspired-loading-spinner-104?from=github)| |帶 CSS3 網格的日曆 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/calendar-with-css3-grid-103?from=github)| | React 中的俄羅斯方塊遊戲 |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/tetris-game-in-react-102?from=github)| | 2D 突圍遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/2d-breakout-game-101?from=github)| |精靈動畫 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/sprite-animation-100?from=github)| |蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/snake-game-99?from=github)| |記憶遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/memory-game-98?from=github)| |簡單的身份驗證和授權 | GraphQL、Apollo、Node、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/simple-authentication-and-authorization-97?from=github)| |加密貨幣追踪器 | NextJS、GraphQL、Apollo、Node、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/cryptocurrency-tracker-96?from=github)| |使用 Vanilla Javascript 進行即時搜尋 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/instant-search-with-vanilla-javascript-95?from=github)| |計算器應用 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/calculator-app-94?from=github)| |待辦事項 | Vue、JavaScript、CSS3、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/todo-app-45?from=github)| |博客應用 | Vue、GraphQL、阿波羅、JavaScript、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/blog-app-44?from=github)| |簡單的預算應用程式 | Vue、布爾瑪、JavaScript、CSS3、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/simple-budgeting-app-43?from=github)| |搜尋機器人 |Node、Twilio、Cheerio、API、自動化 | [連結](https://projectlearn.io/learn/web-development/project/search-bot-42?from=github)| |推特機器人 |Node、JavaScript、API、自動化 | [連結](https://projectlearn.io/learn/web-development/project/twitter-bot-41?from=github)| |實時 Markdown 編輯器 |Node、JavaScript、Express、Redis、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/real-time-markdown-editor-40?from=github)| |待辦事項 | Angular、TypeScript、RxJS、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/todo-app-39?from=github)| |黑客新聞客戶端 |角度、RxJS、Webpack、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/hacker-news-client-38?from=github)| |隨機報價機 |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/random-quote-machine-37?from=github)| | Todoist克隆| React, Firebase, JavaScript, 測試, HTML5 | [連結](https://projectlearn.io/learn/web-development/project/todoist-clone-36?from=github)| |帶有情感分析的聊天應用 | NextJS、Pusher、Sentiment、Node、React | [連結](https://projectlearn.io/learn/web-development/project/chat-app-with-sentiment-analysis-35?from=github)| |預約安排 | React、Twilio、CosmicJS、Material-UI、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/appointment-scheduler-34?from=github)| |生命遊戲 |React、2D、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/game-of-life-33?from=github)| |新聞應用 | React Native、Node、API、React、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/news-app-32?from=github)| |聊天應用 | React、Redux、Redux Saga、Web 套接字、Node | [連結](https://projectlearn.io/learn/web-development/project/chat-app-31?from=github)| |待辦事項 | React Native、GraphQL、Apollo、API、Hasura | [連結](https://projectlearn.io/learn/web-development/project/todo-app-30?from=github)| | Chrome 擴展 |React，包裹，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/chrome-extension-29?from=github)| |電影投票應用 | React、Redux、API、不可變、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/movie-voting-app-27?from=github)| |特雷洛克隆 | React、Elixir、Phoenix、JWT、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/trello-clone-25?from=github)| | Wiki 風格的 CMS | C#、.NET、Razor 頁面 | [連結](https://projectlearn.io/learn/web-development/project/wiki-style-cms-18?from=github)| |使用 ReactJS 克隆 Spotify |React，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/spotify-clone-with-reactjs-15?from=github)| |微軟主頁克隆 | HTML5、CSS3、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/microsoft-homepage-clone-14?from=github)| |簡單甘特圖 | HTML5、CSS3、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/simple-gantt-chart-13?from=github)| |工作抓取應用 |Node、JavaScript、REST、API、Express | [連結](https://projectlearn.io/learn/web-development/project/job-scraping-app-12?from=github)| |電子商務應用 |React，引導程序，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/e-commerce-app-11?from=github)| | Netflix 著陸頁 | HTML5、CSS3、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/netflix-landing-page-10?from=github)| |人工智能聊天機器人 | Web 語音 API、Node、JavaScript、Express、Socket.io | [連結](https://projectlearn.io/learn/web-development/project/ai-chatbot-9?from=github)| |社交網絡應用 |React、Node、Redux、Firebase、REST | [連結](https://projectlearn.io/learn/web-development/project/social-networking-app-8?from=github)| |在 Node.js 中建置一個簡單的加密貨幣區塊鏈 |Node、JavaScript、密碼學、區塊鏈 | [連結](https://projectlearn.io/learn/web-development/project/build-a-simple-cryptocurrency-blockchain-in-node.js-7?from=github)| | BT 客戶端 |Node、JavaScript、TCP、計算機網絡 | [連結](https://projectlearn.io/learn/web-development/project/bittorrent-client-6?from=github)| |使用 JavaScript 的待辦事項列表應用 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/todo-list-app-with-javascript-4?from=github)| |使用 Anime.js 的 JavaScript 動畫 | JavaScript、CSS3、庫、HTML5、API | [連結](https://projectlearn.io/learn/web-development/project/javascript-animations-with-anime.js-3?from=github)| |帶有 React 的工作板應用程式 |React、Node、Cron、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/job-board-app-with-react-1?from=github)| ### 移動開發： |專案 |技術 |連結 | | :--- |:---|:---| |使用 React Native 建置一個 Uber Eats 克隆 | React Native、Javascript、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/build-an-uber-eats-clone-with-react-native-204?from=github)| |使用 React Native 建置一個 Uber 克隆 | React Native、Javascript、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/build-an-uber-clone-with-react-native-203?from=github)| |使用 Flutter SDK 建置帶有故事的聊天應用程式 |顫振，飛鏢 | [連結](https://projectlearn.io/learn/mobile-development/project/build-a-chat-app-with-stories-using-the-flutter-sdk-199?from=github)| |建置 Robinhood 風格的應用程式來跟踪 COVID-19 病例 |科特林, 安卓 | [連結](https://projectlearn.io/learn/mobile-development/project/build-a-robinhood-style-app-to-track-covid-19-cases-198?from=github)| | Tinder 風格的 Swipe 移動應用程式 |科特林、Java、斯威夫特 | [連結](https://projectlearn.io/learn/mobile-development/project/tinder-style-swipe-mobile-app-186?from=github)| |加密貨幣價格列表移動應用程式 | React Native、Swift、Flutter、Dart | [連結](https://projectlearn.io/learn/mobile-development/project/cryptocurrency-price-listing-mobile-app-185?from=github)| |餐廳社交移動應用程式 | React Native、Swift、Flutter、Dart | [連結](https://projectlearn.io/learn/mobile-development/project/restaurants-social-mobile-app-184?from=github)| |休息時間提醒移動應用 | React Native、Kotlin、Java、Swift | [連結](https://projectlearn.io/learn/mobile-development/project/break-time-reminder-mobile-app-183?from=github)| |發票和付款提醒移動應用程式 | React、Node、Express、MongoDB | [連結](https://projectlearn.io/learn/mobile-development/project/invoicing-and-payment-reminder-mobile-app-182?from=github)| |倒計時移動應用 | Swift、Java、React Native | [連結](https://projectlearn.io/learn/mobile-development/project/countdown-mobile-app-181?from=github)| |使用 Swift 的 Flappy Bird iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/flappy-bird-ios-game-using-swift-130?from=github)| |使用 Swift 的 Bull's Eye iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/bull's-eye-ios-game-using-swift-129?from=github)| |使用 SwiftUI 的任務列表 iOS 應用 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/task-list-ios-app-using-swiftui-128?from=github)| |使用 SwiftUI 的餐廳 iOS 應用 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/restaurant-ios-app-using-swiftui-127?from=github)| |使用 Swift 的骰子 iOS 應用 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/dice-ios-app-with-swift-126?from=github)| | TrueCaller 克隆 | Java、MySQL、XAMPP、Android | [連結](https://projectlearn.io/learn/mobile-development/project/truecaller-clone-83?from=github)| |天氣應用 | Java, API, Android | [連結](https://projectlearn.io/learn/mobile-development/project/weather-app-82?from=github)| |電子商務應用 | Java、Firebase、Android | [連結](https://projectlearn.io/learn/mobile-development/project/e-commerce-app-81?from=github)| |聊天應用 | Java、Firebase、Android | [連結](https://projectlearn.io/learn/mobile-development/project/chat-app-80?from=github)| |待辦事項 | Flutter、Dart、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/todo-app-79?from=github)| |旅遊應用程式用戶界面 | Flutter、Dart、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/travel-app-ui-78?from=github)| | Reddit 客戶端 |安卓，科特林 | [連結](https://projectlearn.io/learn/mobile-development/project/reddit-client-46?from=github)| |待辦事項 | React Native、Android、iOS、JavaScript | [連結](https://projectlearn.io/learn/mobile-development/project/todo-app-24?from=github) |照片庫查看器 | C#、iOS、Xamarin、Visual Studio、Android | [連結](https://projectlearn.io/learn/mobile-development/project/photo-library-viewer-19?from=github)| |使用 React Native 克隆 WhatsApp | React Native、Node、GraphQL、Apollo、JavaScript | [連結](https://projectlearn.io/learn/mobile-development/project/whatsapp-clone-with-react-native-2?from=github)| ### 遊戲開發： |專案 |技術 |連結 | | :--- |:---|:---| |使用 Kaboom.js 建置超級馬里奧兄弟、塞爾達傳說和太空侵略者 | JavaScript，Kaboom | [連結](https://projectlearn.io/learn/game-development/project/build-super-mario-bros,-zelda,-and-space-invaders-with-kaboom.js-201?from=github) | |使用 TypeScript 建立打磚塊遊戲 |打字稿、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/game-development/project/create-an-arkanoid-game-with-typescript-195?from=github)| |簡單遊戲 | Lua、LÖVE、Python、Pygame 零 | [連結](https://projectlearn.io/learn/game-development/project/simple-games-179?from=github)| | Python在線多人遊戲|蟒蛇 | [連結](https://projectlearn.io/learn/game-development/project/python-online-multiplayer-game-173?from=github)| |打敗他們格鬥遊戲 |統一，C# | [連結](https://projectlearn.io/learn/game-development/project/beat-em-up-fight-game-172?from=github)| |使用 Godot 3.1 的簡單 3D 遊戲 |戈多，C#，3D | [連結](https://projectlearn.io/learn/game-development/project/simple-3d-game-using-godot-3.1-150?from=github)| | Godot 中的簡單益智遊戲- Box and Switch |戈多，C#，二維 | [連結](https://projectlearn.io/learn/game-development/project/simple-puzzle-game-in-godot---box-and-switch-149?from=github)| | Godot 3 中的遊戲界面從頭開始 |戈多，C#，二維 | [連結](https://projectlearn.io/learn/game-development/project/game-interface-from-scratch-in-godot-3-148?from=github)| | Godot 的 2D 遊戲：玩家與敵人 |戈多，C#，二維 | [連結](https://projectlearn.io/learn/game-development/project/2d-game-with-godot:-player-and-enemy-147?from=github)| |使用 Socket.io 的多人紙牌遊戲 | Phaser 3、Express、Socket.io、JavaScript | [連結](https://projectlearn.io/learn/game-development/project/multiplayer-card-game-with-socket.io-139?from=github)| |使用 Unity 2D 和 Mirror 的多人紙牌遊戲 | C#、Unity、二維、鏡像 | [連結](https://projectlearn.io/learn/game-development/project/multiplayer-card-game-with-unity-2d-and-mirror-137?from=github)| | Rust 中的 Roguelike 教程 |生鏽，二維 | [連結](https://projectlearn.io/learn/game-development/project/roguelike-tutorial-in-rust-136?from=github)| | Rust 歷險記 - 一款基本的 2D 遊戲 |生鏽，二維 | [連結](https://projectlearn.io/learn/game-development/project/adventures-in-rust---a-basic-2d-game-135?from=github)| |使用 Ruby 的終端貪吃蛇遊戲 |紅寶石，二維 | [連結](https://projectlearn.io/learn/game-development/project/terminal-snake-game-with-ruby-134?from=github)| |使用 OpenGL 的太空入侵者 | OpenGL、C/C++、2D | [連結](https://projectlearn.io/learn/game-development/project/space-invaders-using-opengl-133?from=github)| | C 中的數獨求解器 | C/C++, 二維 | [連結](https://projectlearn.io/learn/game-development/project/sudoku-solver-in-c-132?from=github)| | C 中的國際象棋引擎 | C/C++, 二維 | [連結](https://projectlearn.io/learn/game-development/project/chess-engine-in-c-131?from=github)| |使用 Swift 的 Flappy Bird iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/game-development/project/flappy-bird-ios-game-using-swift-130?from=github)| |使用 Swift 的 Bull's Eye iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/game-development/project/bull's-eye-ios-game-using-swift-129?from=github)| |用純 JavaScript 打地鼠 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/whack-a-mole-with-pure-javascript-124?from=github)| |使用 JavaScript 的諾基亞 3310 貪吃蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/nokia-3310-snake-game-using-javascript-123?from=github)| |原版 JavaScript 中的石頭剪刀布 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/rock-paper-scissors-in-vanilla-javascript-122?from=github)| |純 JavaScript 的俄羅斯方塊 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/tetris-with-pure-javascript-121?from=github)| | Vue 多人問答遊戲 | Vue、Pusher、Node、Express、JavaScript | [連結](https://projectlearn.io/learn/game-development/project/multiplayer-quiz-game-with-vue-114?from=github)| | Vue 掃雷遊戲 | Vue、Vuex、Vuetify、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/game-development/project/minesweeper-game-with-vue-113?from=github)| | React 中的俄羅斯方塊遊戲 |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/game-development/project/tetris-game-in-react-102?from=github)| | 2D 突圍遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/2d-breakout-game-101?from=github)| |精靈動畫 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/sprite-animation-100?from=github)| |蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/snake-game-99?from=github)| |記憶遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/memory-game-98?from=github)| |坦克射手 | 3D、統一、C# | [連結](https://projectlearn.io/learn/game-development/project/tanks-shooter-93?from=github)| | 2D Roguelike |二維、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/2d-roguelike-92?from=github)| |約翰·萊蒙鬧鬼的短途旅行 3D | 3D、統一、C# | [連結](https://projectlearn.io/learn/game-development/project/john-lemon's-haunted-jaunt-3d-91?from=github)| | VR 初學者：密室逃脫 |虛擬現實、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/vr-beginner:-the-escape-room-90?from=github)| |露比的冒險 |二維、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/ruby's-adventure-89?from=github)| |角色扮演遊戲 |二維、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/rpg-game-88?from=github)| |滾球| 3D、統一、C# | [連結](https://projectlearn.io/learn/game-development/project/roll-a-ball-87?from=github)| | FPS 微型遊戲 |統一，C# | [連結](https://projectlearn.io/learn/game-development/project/fps-microgame-86?from=github)| |平台微遊戲 | Unity、C#、2D | [連結](https://projectlearn.io/learn/game-development/project/platformer-microgame-85?from=github)| |卡丁車小遊戲 |統一，C# | [連結](https://projectlearn.io/learn/game-development/project/karting-microgame-84?from=github)| |街機射擊 | Lua，愛 | [連結](https://projectlearn.io/learn/game-development/project/arcade-shooter-47?from=github)| |生命遊戲 |React、2D、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/game-of-life-33?from=github)| |手工英雄 | C/C++、OpenGL、2D | [連結](https://projectlearn.io/learn/game-development/project/handmade-hero-23?from=github)| |突圍 | C/C++、OpenGL、2D | [連結](https://projectlearn.io/learn/game-development/project/breakout-22?from=github)| |俄羅斯方塊 | C/C++, 二維 | [連結](https://projectlearn.io/learn/game-development/project/tetris-21?from=github)| |紅白機遊戲 | C/C++、Python、二維 | [連結](https://projectlearn.io/learn/game-development/project/nes-game-20?from=github)| | Roguelike 遊戲 | C#、.NET、RogueSharp、MonoGame、RLNet | [連結](https://projectlearn.io/learn/game-development/project/roguelike-game-17?from=github)| |簡單的角色扮演遊戲 | C#、SQL、二維 | [連結](https://projectlearn.io/learn/game-development/project/simple-rpg-game-16?from=github)| ### 機器學習與人工智能： |專案 |技術 |連結 | | :--- |:---|:---| |使用 BeautifulSoup 建置網絡爬蟲 | Python, BeautifulSoup | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/build-a-web-scraper-using-beautifulsoup-202?from=github)| |從胸部 X 光檢測肺炎的 CNN |美國有線電視新聞網，蟒蛇 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/cnn-that-detects-pneumonia-from-chest-x-rays-169?from=github)| |使用 AWS 在 Python 中自動更新資料可視化 | Python、AWS、Matplotlib | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/auto-updating-data-visualizations-in-python-with-aws-158?from=github)| |使用 GCP 和 Node 的 Twitter 情感分析工具 | API、GCP、Node、JavaScript | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/twitter-sentiment-analysis-tool-using-gcp-and-node-156?from=github)| |使用 CNN 進行 Twitter 情緒分析 | Python、Matplotlib、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/twitter-sentiment-analysis-using-cnn-120?from=github)| |泰勒斯威夫特歌詞生成器 | Python、Keras、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/taylor-swift-lyrics-generator-77?from=github)| | MNIST 數字辨識器 | Python、Keras、TensorFlow、Numpy、SciKit | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/mnist-digit-recognizer-76?from=github)| |訓練模型生成顏色 | Python、Keras、TensorFlow、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/train-a-model-to-generate-colors-75?from=github)| |圖片說明生成器 | Python、TensorFlow、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/image-caption-generator-74?from=github)| |使用 CNN 破解驗證碼系統 | Python、Keras、TensorFlow、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/break-a-captcha-system-using-cnn-73?from=github)| |生成一張平均臉 | Python、OpenCV、Numpy、C/C++ | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/generate-an-average-face-72?from=github)| |圖像拼接 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/image-stitching-71?from=github)| |手部關鍵點檢測 | Python、OpenCV、Numpy、C/C++ | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/hand-keypoint-detection-70?from=github)| |特徵臉 | Python、OpenCV、Numpy、C/C++ | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/eigenface-69?from=github)| |無人機目標檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/drone-target-detection-68?from=github)| |使用 Mask R-CNN 進行目標檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/object-detection-using-mask-r-cnn-67?from=github)| |面部地標檢測 | Python、OpenCV、DLib、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/facial-landmark-detection-66?from=github)| |文本傾斜校正 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/text-skew-correction-65?from=github)| | OCR 和文本辨識 | Python、OpenCV、Tesseract、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/ocr-and-text-recognition-64?from=github)| |人數統計 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/people-counter-63?from=github)| |文本檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/text-detection-62?from=github)| |語義分割 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/semantic-segmentation-61?from=github)| |物件跟踪 | Python、OpenCV、Numpy、CamShift | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/object-tracking-60?from=github)| |人臉聚類 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/face-clustering-59?from=github)| |條碼掃描儀 | Python、OpenCV、ZBar、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/barcode-scanner-58?from=github)| |顯著性檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/saliency-detection-57?from=github)| |人臉檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/face-detection-56?from=github)| |文件掃描儀 | Python、OpenCV、Numpy、SciKit | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/document-scanner-55?from=github)| |音樂推薦 | Python、SciKit、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/music-recommender-54?from=github)| |預測葡萄酒質量 | Python、Matplotlib、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/predict-quality-of-wine-53?from=github)| |遺傳算法 | Python、SciKit、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/genetic-algorithms-52?from=github)| |深夢 | Python、TensorFlow、可視化 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/deepdream-51?from=github)| |股價預測| Python、SciKit、Matplotlib | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/stock-price-prediction-50?from=github)| |電影推薦系統 | Python, LightFM | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/movie-recommendation-systems-49?from=github)| | Twitter 情緒分析 | Python, API | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/twitter-sentiment-analysis-48?from=github)| |帶有情感分析的聊天應用 | NextJS、Pusher、Sentiment、Node、React | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/chat-app-with-sentiment-analysis-35?from=github)| --- **結論** 2023 年將成為令人振奮的發展年，新技術和工具層出不窮。 希望這篇文章對您有幫助。
來自這個： https://www.youtube.com/embed/HhkIstbkmpU fieldset ・legend ・datalist ・option ・progress ・abbr ・del ・ins ・mark ・marquee ## 摘要 fieldset ・legend 表單用 ・datalist ・option 資料選單用 ・progress 進度條用 ・abbr 縮寫用 ・del 刪除線用 ・ins 插入文字用 ・mark 螢光標籤用 ・marquee 過時的捲動元素 ## [fieldset](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/fieldset) + [legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend) ### fieldset 功能說明： 用於對表單中的控制元素進行分組  ```htmlmixed= <form action="#"> <fieldset> <legend>Do you agree?</legend> <input type="checkbox" id="chbx" name="agree" value="Yes!" /> <label for="chbx">I agree</label> </fieldset> </form> ``` ### legend 功能說明： HTML `<legend> 元素用於表示其父元素 <fieldset> 的內容標題。`  ## [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) + [option](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/option) ### datalist 功能說明： `HTML <datalist> 元素包含了一組 <option> 元素，這些元素表示其它表單控件可選值。`  ### option 功能說明： `HTML 元素 <option> 用於定義在 <select>, <optgroup> 或 <datalist> 元素中包含的項。<option> 可以在彈出窗口和 HTML 文檔中的其他項目列表中表示菜單項。` ## [progress](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress) ### 功能說明： `HTML中的 <progress> 元素用來顯示一項任務的完成進度。雖然規範中沒有規定該元素具體如何顯示，瀏覽器開發商可以自己決定，但通常情況下，該元素都顯示為一個進度條形式。`  ## [abbr](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/abbr)  ### 功能說明： `HTML 縮寫元素（<abbr>）用於代表縮寫，並且可以通過可選的 title 屬性提供完整的描述。若使用 title 屬性，則它必須且僅可包含完整的描述內容。`  ## [del](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/del) + [ins](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ins) ### del 功能說明： `HTML 的 <del> 標簽表示一些被從文檔中刪除的文字內容。比如可以在需要顯示修改記錄或者源代碼差異的情況使用這個標簽。<ins>標簽的作用恰恰於此相反：表示文檔中添加的內容。`  ### ins 功能說明： `HTML <ins> 元素定義已經被插入文檔中的文本。`  ```htmlembedded= <p>“You're late!”</p> <del> <p>“I apologize for the delay.”</p> </del> <ins cite="../howtobeawizard.html" datetime="2018-05"> <p>“A wizard is never late …”</p> </ins> ``` ## [mark](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/mark) ### 功能說明： ``` HTML 標記文本元素 (< Mark >) 表示為引用或符號目的而標記或突出顯示的文本，這是由於標記的段落在封閉上下文中的相關性或重要性造成的。 這個 HTML mark 標簽代表突出顯示的文字，例如可以為了標記特定上下文中的文本而使用這個標簽**.** 舉個例子，它可以用來顯示搜索引擎搜索後關鍵詞 ```  ## [marquee](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/marquee) ### 功能說明： 捲動元素（已過時） 
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
