iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 216 瀏覽

鐵人賽自我挑戰組 DAY 26

從零開始學習前端系列第 26 篇

技術 #從零開始2️⃣5️⃣：切版實作(4)nav&footer RWD

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

RochelWang ‧ 2023-10-11

0 Like 0 留言 216 瀏覽

鐵人賽自我挑戰組 DAY 9

從零開始學習前端系列第 9 篇

技術 #從零開始8️⃣：比較inline-block、inline和block

上一篇說了替換元素和非替換元素，接著這篇想要整理和比較inline-block、inline和block。定義 inline-block： inline-bl...

RochelWang ‧ 2023-09-24

0 Like 0 留言 209 瀏覽

鐵人賽自我挑戰組 DAY 21

從零開始學習前端系列第 21 篇

技術 #從零開始2️⃣0️⃣：學習使用SCSS/Sass(上)

根據官方文件說明，Sass有兩種語法，最常用的是SCSS語法（.scss），而另一種的縮排語法（.sass）則比較不常見。縮排語法使用縮排而不是中括號來嵌套程式...

RochelWang ‧ 2023-10-06

0 Like 0 留言 205 瀏覽

鐵人賽自我挑戰組 DAY 16

從零開始學習前端系列第 16 篇

技術 #從零開始1️⃣5️⃣：怎麼設定照片大小

設定圖片高度，要寫死高度還是不要寫死高度? 就像最開始提到，響應式網頁超級超級重要，所以如果在不同螢幕大小，圖片太大超出畫面(或著太小)的話，體驗感覺就會大大地...

RochelWang ‧ 2023-10-01

0 Like 0 留言 203 瀏覽

鐵人賽自我挑戰組 DAY 30

從零開始學習前端系列第 31 篇

技術 #從零開始3️⃣0️⃣：後記

關於這個系列這篇為這個系列的最後一篇! 終於完成了三十天的挑戰! 有許多地方沒有寫好、做好的部分，在實作的部分有許多細節沒有捕到…至少有完成挑戰(對自己有個交...

RochelWang ‧ 2023-10-15

0 Like 0 留言 194 瀏覽

鐵人賽自我挑戰組 DAY 30

從零開始學習前端系列第 30 篇

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

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

RochelWang ‧ 2023-10-15

0 Like 0 留言 184 瀏覽

鐵人賽自我挑戰組 DAY 20

從零開始學習前端系列第 20 篇

技術 #從零開始1️⃣9️⃣：寫CSS寫的心好累-Sass

當一個專案變得越來越大，CSS的複雜性也隨之增加，要管理龐雜的程式碼變得很麻煩。這篇開始要介紹的Sass，可以幫助我們解決這些問題，並將CSS代碼組織得更加結構...

RochelWang ‧ 2023-10-05

0 Like 0 留言 182 瀏覽

鐵人賽自我挑戰組 DAY 1

從零開始學習前端系列第 1 篇

技術 #從零開始0️⃣：前言

關於這個系列將在這短短幾個月的學習做個紀錄。每天會分享自學習以來遇到的幾個問題和解方。主要會繞著HTML,CSS實踐上碰到的問題，也會有一些個人心得和思考。...

RochelWang ‧ 2023-09-16

0 Like 0 留言 171 瀏覽

鐵人賽自我挑戰組 DAY 13

從零開始學習前端系列第 13 篇

技術 #從零開始1️⃣2️⃣：background-image的特性以及怎麼用?

先在HTML設定，撐出高度。 <div class="element"> <p>#從零開始：backgroun...

RochelWang ‧ 2023-09-28

0 Like 0 留言 163 瀏覽

鐵人賽自我挑戰組 DAY 3

從零開始學習前端系列第 3 篇

技術 #從零開始2️⃣：區塊標籤和行內標籤

為甚麼要分成區塊標籤和行內標籤區塊標籤會佔據一整行或一個完整的區域，行內標籤只佔據它們實際內容所需的空間。那有沒有辨別的方法? 區塊標籤是用於定義網頁的主要...

RochelWang ‧ 2023-09-18

0 Like 0 留言 160 瀏覽

鐵人賽自我挑戰組 DAY 25

從零開始學習前端系列第 25 篇

技術 #從零開始2️⃣4️⃣：切版實作(3)nav&footer

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

RochelWang ‧ 2023-10-10

0 Like 0 留言 160 瀏覽

鐵人賽自我挑戰組 DAY 28

從零開始學習前端系列第 28 篇

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

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

RochelWang ‧ 2023-10-13

0 Like 0 留言 158 瀏覽

鐵人賽 Modern Web DAY 15

連我阿公都會-手把手教你架網站系列第 15 篇

技術【Day15】專題實作：簡易計算機

前些日子呢，我們一同學習了許多有關網頁三件套 —— HTML、CSS、JS的內容。納在本日的篇章中，我將帶著您使用這幾日所學，來實作出一個計算機的應用！完成效...

ttdragon0722 ‧ 2023-09-30 ‧團隊最強資工大電神

0 Like 0 留言 154 瀏覽

鐵人賽自我挑戰組 DAY 19

從零開始學習前端系列第 19 篇

技術 #從零開始1️⃣8️⃣：寫CSS寫的心好累-SCSS、OOCSS、BEM設計模式(下)

OOCSS（Object-Oriented CSS） OOCSS（Object-Oriented CSS）強調了分離結構和外觀的概念。以下是 OOCSS...

RochelWang ‧ 2023-10-04

0 Like 0 留言 154 瀏覽

鐵人賽自我挑戰組 DAY 10

從零開始學習前端系列第 10 篇

技術 #從零開始9️⃣：都只用div不行嗎? 為甚麼要用ul li語意化標籤

div超好用，甚麼情況下都可以用，但上了課後、網路上找了相關文章，得到的回饋都不建議這麼做。關於div， Authors are strongly enco...

RochelWang ‧ 2023-09-25

0 Like 0 留言 150 瀏覽

鐵人賽自我挑戰組 DAY 23

從零開始學習前端系列第 23 篇

技術 #從零開始2️⃣2️⃣：切版實作(1)環境建立

匯總前二十幾篇學習到的，接下來會以甜點店商設計稿(可商用)的產品頁(product)實際操作練習。觀察設計稿有沒有通用、重複的部分設計稿導覽列和頁尾部分似乎...

RochelWang ‧ 2023-10-08

0 Like 0 留言 146 瀏覽

鐵人賽自我挑戰組 DAY 14

從零開始學習前端系列第 14 篇

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

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

RochelWang ‧ 2023-09-29

0 Like 0 留言 146 瀏覽

鐵人賽自我挑戰組 DAY 5

從零開始學習前端系列第 5 篇

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

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

RochelWang ‧ 2023-09-20

0 Like 0 留言 144 瀏覽

鐵人賽自我挑戰組 DAY 2

從零開始學習前端系列第 2 篇

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

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

RochelWang ‧ 2023-09-17

0 Like 0 留言 143 瀏覽

鐵人賽自我挑戰組 DAY 15

從零開始學習前端系列第 15 篇

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

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

RochelWang ‧ 2023-09-30

0 Like 0 留言 142 瀏覽

鐵人賽自我挑戰組 DAY 24

從零開始學習前端系列第 24 篇

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

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

RochelWang ‧ 2023-10-09

0 Like 0 留言 142 瀏覽

鐵人賽自我挑戰組 DAY 29

從零開始學習前端系列第 29 篇

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

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

RochelWang ‧ 2023-10-14

0 Like 0 留言 139 瀏覽

鐵人賽自我挑戰組 DAY 6

從零開始學習前端系列第 6 篇

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

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

RochelWang ‧ 2023-09-21

0 Like 0 留言 139 瀏覽

鐵人賽自我挑戰組 DAY 8

從零開始學習前端系列第 8 篇

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

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

RochelWang ‧ 2023-09-23

0 Like 0 留言 131 瀏覽

鐵人賽自我挑戰組 DAY 11

從零開始學習前端系列第 11 篇

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

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

RochelWang ‧ 2023-09-26

0 Like 0 留言 118 瀏覽

鐵人賽自我挑戰組 DAY 4

從零開始學習前端系列第 4 篇

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

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

RochelWang ‧ 2023-09-19

技術 #從零開始2️⃣5️⃣：切版實作(4)nav&footer RWD

技術 #從零開始8️⃣：比較inline-block、inline和block

技術 #從零開始2️⃣0️⃣：學習使用SCSS/Sass(上)

技術 #從零開始1️⃣5️⃣：怎麼設定照片大小

技術 #從零開始3️⃣0️⃣：後記

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

技術 #從零開始1️⃣9️⃣：寫CSS寫的心好累-Sass

技術 #從零開始0️⃣：前言

技術 #從零開始1️⃣2️⃣：background-image的特性以及怎麼用?

技術 #從零開始2️⃣：區塊標籤和行內標籤

技術 #從零開始2️⃣4️⃣：切版實作(3)nav&footer

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

技術 【Day15】專題實作：簡易計算機

技術 #從零開始1️⃣8️⃣：寫CSS寫的心好累-SCSS、OOCSS、BEM設計模式(下)

技術 #從零開始9️⃣：都只用div不行嗎? 為甚麼要用ul li語意化標籤

技術 #從零開始2️⃣2️⃣：切版實作(1)環境建立

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

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

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

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

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

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

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

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

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

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

標記使用者

技術【Day15】專題實作：簡易計算機