CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：Css

🔍 搜尋結果：Css

JavaScript 系列三：練習3 ── modal 互動視窗元件

## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件，也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」，就算是一種「視窗」 各大社群網站，逛一逛就跳出「視窗」強迫你登入...

0個讚   30留言 1,989瀏覽

JavaScript 系列三：練習2 ── toast 吐司元件

## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件，就跟烤土司機，烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出，可以讓使用者體驗（User Experience，簡稱 UX）更好 很多網站因為沒有做好適當的 toa...

0個讚   35留言 1,829瀏覽

JavaScript 系列三：練習1 ── alert 示警元件

## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件，當有訊息要公告在網站上，就可使用 或者當用戶執行了某些動作，在頁面上要提示、回饋訊息的時候，也可使用 通常要將 alert 做成幾種不同樣式，根據不同使用情境來使用 ...

0個讚   35留言 1,581瀏覽

JavaScript 系列三：前言

本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中，已經學會程式設計的基本觀念，以及 DOM 操作的基本方法 在這次的課程，我們將練習製作實務上常用的 UI 元件 藉由這次練習，強化在前兩部份課程學到的知識 --- 身為工程師，常常要做一些沒做過的功...

1個讚   0留言 718瀏覽

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

## 課程目標 學會基本的 Selector API 用法 學會基本的 `.closest()` 的用法 ## 課程內容 課程到目前為止，要存取元素，都是使用 `document.getElementById` `.parentElement` `.children` 然後上...

0個讚   39留言 1,823瀏覽

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

## 課程目標 能動態在 DOM 樹修改元素的 style 屬性 ## 課程內容 實務上有個功能很常見，就是元素開關（toggle）的效果 點一下讓某元素出現，再點一下讓某元素消失 例如：跳出一張照片顯示、再關閉這張照片；或者顯示提示訊息文字，點擊後關閉文字（不是 al...

0個讚   28留言 1,384瀏覽

JavaScript 系列二：第3課 ── 認識 for 迴圈

## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中，我們學過陣列＆索引的基本用法 實務上，使用陣列時，通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種，我們先學 for of 的寫法就好 ``` var fruits = [...

1個讚   38留言 1,588瀏覽

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

## 課程目標 能動態加上 onclick 事件屬性 能選取到父元素、子元素 能夠在 DOM 樹進行「移除」 能存取到 onclick 事件發生的元素 ## 課程內容 現在已經會在 DOM 樹增加元素、加入文字了 記得之前寫過的「事件」嗎？ ``` ...

1個讚   37留言 2,046瀏覽

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

## 課程目標 認識 DOM 樹基本觀念 能夠在 DOM 樹進行「新增」 學會基本的除錯技巧 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 JavaScript 的時候，你會聽到很多人在講「DOM...

2個讚   42留言 2,533瀏覽

JavaScript 系列二：前言

本課程為 JavaScript 基礎課程的第二部份 第一部份的專案練習，已經學習到程式設計的基本觀念 第二部份，將藉由另一個專案，接著學習更多程式設計觀念 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識。 還不會的朋友，請先完成： - [自...

5個讚   0留言 1,523瀏覽

JavaScript 系列一：第4課 ── 基本的陣列操作

## 課程目標 學會基本的陣列取值 能從 html 元素中，得到用戶選取的內容 ## 課程內容 這課先來學一點陣列觀念 ``` var colors = ['red', 'orange', 'yellow', 'green']; ``` 中括號 `[]` 包起...

2個讚   38留言 2,531瀏覽

JavaScript 系列一：第3課 ── 修改 html 的內容

## 課程目標 學會動態修改 html 元素中的內容 ## 課程內容 在上一課，我們學會了這樣用 JavaScript 取得用戶輸入到 html 元素的內容 ``` var str = document.getElementById('keyword').value; `...

2個讚   47留言 3,245瀏覽

JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容

## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中，得到用戶輸入的內容 ## 課程內容 在上一課的內容中，我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕！'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕！...

4個讚   67留言 4,678瀏覽

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 html/css 時，我們會給元素一些屬性，例如 i...

6個讚   80留言 9,740瀏覽

JavaScript 系列一：前言

大家好，JavaScript 是業界最常用的程式語言之一 但是對新手來說，常常覺得很難學，原因有兩個： 第一，這語言不斷在變化，很多新語法、新功能，不斷出現，導致學習的時候眼花撩亂 第二，傳統的程式設計教法，從變數、迴圈、邏輯，一個一個開始教。我發現對很多人來說，這種學習法有點無聊...

4個讚   0留言 9,796瀏覽

CSS 基本觀念：rem 跟 em 差在哪？何時該用哪個？有何注意事項？

## 簡介 CSS 是任何網站設計的重要組成部分，但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別，以及為什麼/何時應該使用它們。 原文出處：https://dev.to/refine/rem-vs-em-everything-you-need-...

0個讚   1留言 850瀏覽

給網站開發者：7 個值得在 2023 年用看看的免費工具

想要在 2023 年的 **Web 開發** 旅程中一帆風順嗎？參考看看這些免費工具吧！ 原文出處：https://dev.to/ruppysuppy/7-free-tools-for-the-modern-web-developers-of-2023-4lhh ## 1. [Omats...

0個讚   0留言 1,512瀏覽

RWD 網頁設計入門：第6課 ── 親手搞定一個完整的 RWD 網頁！

# 第6課 課程目標 運用目前所學到的技巧，完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧，只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是，光是這些...

0個讚   0留言 548瀏覽

RWD 網頁設計入門：第5課 ── 能屈能伸，讓圖片適應各種螢幕

# 第5課 課程目標 讓圖片在各種裝置上都能順利顯示。 # 第5課 課程內容 請參考：https://www.w3schools.com/howto/howto_css_image_responsive.asp # 第5課 作業 承接前一課的作業。 ![](htt...

0個讚   8留言 835瀏覽

RWD 網頁設計入門：第2課 ── 適應各種裝置的螢幕：流動的網格系統

# 第2課 課程目標 能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。 # 第2課 課程內容 這一課要學習使用 Bootstrap 的網格系統。 請參考這幾份教學： - https://www.w3schools.com/css/css_rwd_in...

0個讚   6留言 1,034瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 [心態分享] 新手學前端應該具備的心態：絕對不是謙虛，假謙虛的心態：做作又噁心！
🔥 🔥🔥新功能測試上線：文章 API🔥🔥
🔥 Apache Kafka 是如何運作的？為什麼 Kafka 這麼快？
🔥 CSS 小挑戰：如何用 div 填滿頁面？
🔥 DevOps 路線圖：技能、工具和資源
  近期留言
熱門搜尋： ar java JavaScript 使用 開發 學習 專案 ") error 工作 "; 伺服器 研究 Html vue 結構 分享 作為 FB ＣＳＳ 技術 git user fb go Java AWS json 資料庫 語言 javascript JavaScript 系列 網頁 架構 部落格 COM 清單 作業 id 系列 js 網站 主題 工程師 開源 design ui Can app Ai 套件 gpt AI 部署 api 查詢 後端 第一 oop github for react'_ html model 作品 搜尋 非同步 前端 資料結構 練習 隨機 全端 測試 課程 PHP Node with ul 遊戲 作品集 嬰兒 Ml 自學 postgresql 謝謝 編輯 畢業 onclick 登入 Github React create 熱情 repositor Callback HTML 作業分享 react 新手 JS
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。