同步整理使用的資源，到時候回頭看可能能實現自我滿足（自嗨？。 (O) 進行中；(X) 尚未使用；(@) 已完成；西元年表示完成時間 HTML & CSS (@) 【緯育-實體課程】洪興政/丸子老師_2023 (@) 《零基礎也能看得懂的HTML&CSS網頁設計》Mana_2023 (O) 《超直覺HTML＆CSS網頁設計》小林Masayuki_2023 (O) 《CSS設計風格指南》高津戶壯_2023 Javascript

1_當自己階段性的完成工項時 :bulb:將所做異動commit到本地數據庫做為紀錄點(養成好習慣) // 將全部檔案加入暫存區 git add --all // 查詢當前檔案狀態 git status // 提交檔案到本地儲存庫

圖片引用自w3c.hexschool 0_Git 最初始設定 // 查詢git版本，以確定安裝成功 git --version // 設定個人識別資料 git config --global user.name "您的姓名" git config --global user.email "您的Email"

第一技能樹 - 前端 Reset前端學習roadmap 前端相關資源 :::spoiler CSS Monster No. Topic Abstract

Commit Message 就像是寫程式要寫註解一樣，好的Commit Message 會節省看 Code 的時間。 範例 * feat: 新增信件通知功能 * 因應需求新增功能: - 第一次成功登入，變更密碼，須寄發email通知 - 所有消費行為皆須email通知 Asana #s4_XX 結構說明 * <type>: <summary>

Web作品 版塊設計 - 作品很棒 Muuuuu - 有分類功能，日系、歐美、清爽 iKesai - 有分類功能，日系萌 Media Queries - 培養RWB感覺 技術文章 掘金 - 前端技術文章 Let's Write - 偶爾看看別人筆記 readfog Javascript - 技術文章

Step1: (介面) 基本介面 text 欄位事件focus 事件觸發時，加上 -on class。 blur 事件觸發時，移除 -on class。 Step2: (介面) 新增待辦事項按下「新增」按鈕時，將待辦事項 html，新增到 ul.task_list 裡面的最前面。 按下「新增」按鈕時，如果沒有輸入待辦事項，不能有任何反應。

:::spoiler event 應用1 CSS <style> div.parent_block{ border: 1px solid black; display: flex; } div.left_block{ border: 1px solid red;

相關函式 事件名 是否冒泡 click 是 dblclick 是

相關函式 事件名 觸發時機 submit 點選送出表單時 範例 :::spoiler submit event HTML

相關函式 事件名 觸發時機 scrollX 沿X軸滾動時 scrollY 沿Y軸滾動時

相關函式 事件名 觸發時機 onfocus 欄位取得焦點後 onblur 欄位失去焦點後

基礎語法 // 綁定事件 let my_el = document.getElementById("abc"); my_el.addEventListener("click", function(e){ // code }); // 解除綁定事件 my_el.addEventListener("click", function(e){ // code

取得節點 取得元素 格式 屬性 說明 物件 .getElementById() 取得該id的元素

目前業界主要支援的版本為2015六月釋出的ES6。 Identifier Naming Rule 此為在業界通用的命名規範。 大駝峰命名(Upper camelcase)：如類別名。 小駝峰命名(Lower camelcase)：如變數名、屬性名、標籤名、函式名。 典型命名：如常數名，全大寫，單字用底線分開。 陣列變數名通常會加s。

BOM樹 名稱/說明 型態 ───────────────────────────────────────────────────────────────── window: 代表視窗 Window │ └───navigator: 代表瀏覽器 Navigator │ └───location: 代表網址 Location │ └───frames: <iframe>對應元素集合 HTMLIFrameElement

宣告物件 const i = { iAm: ['Jonny', ], iWantToBe: 'a front end developer', iLove: ['dog', ], iAspire: '' }; i.name = 'JJ'; i['skills'] = ['H', 'C', 'J'];

大容器招 可以用一個大容器將整個版面包起來，再置中，就不用一塊一塊置中。 將寬度寫在大容器，內部每個大區塊無需再寫寬，因為<div>預設是最大寬度。 刻在我心底句子 幫行內元素<img>加上display: block可以消除周圍的小空白。 幫行內元素<a>加上display: block，增加觸控範圍，優化UX。 <img>的預設是等比例縮放；不要同時寫寬高，避免變形。 margin的上下，遇到兄弟會疊在一起...((男上加男的概念... float, inline-block, absolute, fixed，這些屬性會把最大寬度變最小。

:bulb: 函式被發明，用以簡化程式中重複的相同/相似的片段 函式內的溝通方式 呼叫端傳遞參數給被呼叫端 被呼叫端收到參數並運算 return關鍵字會<font color="tomato">停止</font>函式，回傳值給呼叫端 // 定義名為plus的函式(function))，包含名為num1和num2的參數(Parameter) function plus(num1, num2) { return num1 * num2;

喜愛的顏色 #f1edea, #e5e5e5 tomato, 喜愛的字型 Arial, Verdana, '微軟正黑體' 背景&邊框-微模組 { background-color: ; background-image: ; background-size: ;/* 用cover居多 */