對於前端新手來說，編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法，建議先專注於建立想要的 ht...
說明口袋餐廳的表單提交前，先調整登入會員的 Pinia store 與會員登入頁面。將會員登入時的電子郵件與 id 也儲存於登入會員的 Pinia store...
OOCSS（Object-Oriented CSS） OOCSS（Object-Oriented CSS）強調了分離結構和外觀的概念。以下是 OOCSS...
如果被老闆發現我們可以一眼鑑定出需求的細節和問題的原因，那我們的工作量會不會變更多 Mock的第一步就是先觀察 今天我們來觀察此次挑戰的目標 NativeCa...
使用開發者工具看圖片時，發現下方有個空隙，這是為什麼? 因為預設img為行內元素，和示意圖文字一樣留出空間給y,g英文字母。 去除空隙的辦法 codepen參...
口袋餐廳頁面下方區塊是篩選後的清單，以表單形式顯示所選的口袋餐廳。畫面示意圖請參考「Day14-試試Vue3-規劃口袋餐廳的頁面」篇。 (1)口袋餐廳清單-主表...
設定圖片高度，要寫死高度還是不要寫死高度? 就像最開始提到，響應式網頁超級超級重要，所以如果在不同螢幕大小，圖片太大超出畫面(或著太小)的話，體驗感覺就會大大地...
程式碼盡量只寫要說明的地方，無關的就不贅述。 (3-4)頁面表單提交的規範 點選任一張卡片時，表單中「餐廳評論」欄位才可進行編輯。否則唯讀狀態。 原本已有評...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
其實只是拖延症點到滿等的我，說是主角其實只是拖延症發作 有看過某些YT頻道的應該有聽過這段話什麼樣的人適合閱讀此挑戰- 不在意內容的人(此為自己的挑戰，能做到...
分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法，及從中學到的新知識點。會分兩篇介紹。 (1)登入會...
前言 今天我們接續前一篇的案例，再來講講一些NG的案例，總是會有一些講不聽不想拆 component 的人，在新版本的環境下應該會被強制修改，因為如果不改的話會...
這篇簡單說明使用者故事（以會員角度）。 假定華特義式餐廳為一餐飲集團，旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性，會員主頁除首頁、登出外提...
「Day14-試試Vue3-規劃口袋餐廳的頁面」提到建立新頁面之前，建議專注於設計所需的 html 結構。這樣可以更好地思考如何渲染資料以及應該使用哪些 Jav...
程式碼盡量只寫要說明的地方，無關的就不贅述。 (2)建立要導出的資料試著整理出動態渲染畫面所需的資料實體有哪些。以下說明 <script></...
還記得在#從零開始9️⃣：都只用div不行嗎? 為甚麼要用ul li語意化標籤，我們討論了要使用語意化標籤，非不得已的情況下再使用如div的非語意化標籤。其中使...
CSS Reset：清掉所有預設樣式 CSS Reset 是一種可以清除所有預設樣式的方法，讓我們可以從頭開始自訂樣式。也就是會將所有 HTML 元素的邊距、填...
關於這個系列 將在這短短幾個月的學習做個紀錄。每天會分享自學習以來遇到的幾個問題和解方。 主要會繞著HTML,CSS實踐上碰到的問題，也會有一些個人心得和思考。...
接續處理口袋餐廳清單右側的「移除」鈕功能。 (2)口袋餐廳清單-移除鈕分為資料渲染與觸發方法兩部分說明。 1.「移除」鈕的限制只能移除口袋餐廳清單（以下簡稱口袋...
上一篇說了替換元素和非替換元素，接著這篇想要整理和比較inline-block、inline和block。 定義 inline-block： inline-bl...
(3-2)動作拆解-品牌名稱與地址分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in filterRes.filt...
根據官方文件說明，Sass有兩種語法，最常用的是SCSS語法（.scss），而另一種的縮排語法（.sass）則比較不常見。縮排語法使用縮排而不是中括號來嵌套程式...
先在HTML設定，撐出高度。 <div class="element"> <p>#從零開始：backgroun...
在前端開發中，CSS 的組織和管理變得至關重要，特別是當項目變得越來越龐大時。為了使 CSS 更易於維護、擴展和協作，有三種常見的設計模式被廣泛使用：SCSS、...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
今天決定開頭完成 JS 題目後，後面再分享導致斷賽的意外事件 QQ，最後再分享對於過去這一周寫文章的感想。 JS 字串處理 一、題目描述 完成一個 JavaSc...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
前置作業1：調用 Pinia store 資料<script></script> 將 LoginStore.js 檔裡的 useLogi...
以為對標籤、樣式越來越熟悉之後，就會海闊天空、一路順遂(理想)，但某天遇到了一個情況(實在是令人煩躁)，情況如下：我想對label設定margin-top，但無...
匯總前二十幾篇學習到的，接下來會以甜點店商設計稿(可商用)的產品頁(product)實際操作練習。 觀察設計稿有沒有通用、重複的部分 設計稿導覽列和頁尾部分似乎...
jennydisc
RochelWang
Moscle.dev
LucianoLee
漢堡法師
iThome鐵人賽
看影片追技術