技術 #從零開始1️⃣3️⃣：優化程式碼，更好的SEO

還記得在#從零開始9️⃣：都只用div不行嗎? 為甚麼要用ul li語意化標籤，我們討論了要使用語意化標籤，非不得已的情況下再使用如div的非語意化標籤。其中使...

技術 #從零開始4️⃣：使用CSS Reset & CSS Normalize

CSS Reset：清掉所有預設樣式 CSS Reset 是一種可以清除所有預設樣式的方法，讓我們可以從頭開始自訂樣式。也就是會將所有 HTML 元素的邊距、填...

技術 #從零開始1️⃣：為什麼一定要寫html:5

不論是用freeCodeCamp學習還是其他管道學習，一開始都從學習標籤如何使用。我們也一定會注意到，這些都是寫在如附圖中的body標籤中。 那在body之外...

技術 #從零開始2️⃣3️⃣：切版實作(2)mixin設定

撰寫手機樣式(@media可以參考#從零開始1️⃣6️⃣：RWD!!@media(max-width)和@media(min-width)這篇) 我設定了幾個斷...

技術 #從零開始1️⃣4️⃣：使用emmet，更快寫出腦中所想

在比較熟悉如何架構網頁、呈現出想要的樣子後，應該多少會覺得：希望能夠更快、更有效率地描繪出來。 最直接想到的或許是提升英文打字速度，這會有幫助，但還不夠。 我們...

技術 #從零開始2️⃣8️⃣：切版實作(7)商品

github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...

技術 #從零開始5️⃣：使用padding和margin

在了解基本的標籤後，就可以開始組合使用，來呈現出網頁的區塊。 這些區塊中，我們會需要根據需求(或是設計稿)，來調整每個標籤元素樣式(包含顏色、字體、字型大小等...

技術 #從零開始7️⃣：樣式對標籤無效? 非替換元素及替換元素

以為對標籤、樣式越來越熟悉之後，就會海闊天空、一路順遂(理想)，但某天遇到了一個情況(實在是令人煩躁)，情況如下：我想對label設定margin-top，但無...

技術 #從零開始1️⃣0️⃣：去除img、span標籤下方的空隙

使用開發者工具看圖片時，發現下方有個空隙，這是為什麼? 因為預設img為行內元素，和示意圖文字一樣留出空間給y,g英文字母。 去除空隙的辦法 codepen參...

技術 #從零開始3️⃣：引用外部資源-link

接續第一篇#從零開始1️⃣：為什麼一定要寫html:5，我們知道了html:5裡各行的意思，在head這一區塊，也是我們幫html套上美美的外觀、引入CSS的地...