iT邦幫忙

2026 iThome 鐵人賽

DAY 8
0
自我挑戰組

30 天,挑戰我的 Web 前端力系列 第 8

第二週開始:先換個口味,不然我要吃膩 CSS 了 XD

  • 分享至 

  • xImage
  •  

第一週終於結束了。
先恭喜自己。
/images/emoticon/emoticon08.gif
居然真的撐到 Day 8 了。

前面一路從 HTML 美味蟹堡,
吃到 CSS 置中,
再被 Flexbox 抓去考方向感測驗。

第一週很精彩。

但如果第二週還繼續整天css:

display: flex;
justify-content: center;
align-items: center;

我覺得我可能真的會先跟 CSS 絕交 ==
所以這週決定稍微換個口味!

第二週想碰什麼?
這次不想把每天要做什麼排得太死。

因為第一週做下來發現,
原本以為一個主題一下就可以結束,
結果真的開始實作之後,

常常會突然冒出:
「欸?那這個又是什麼?」
然後一查就直接多一篇 XD

所以第二週先抓幾個大方向就好。

目前比較想碰的有:

  • CSS Grid
  • Flexbox 跟 Grid 的差別
  • RWD 響應式網頁
  • CSS 常見單位
  • Hover、Transition、Transform
  • JavaScript

至於哪一天寫哪一個,
先不說死。

看我做到哪、卡在哪,
再決定下一篇要寫什麼。

這樣應該比較符合這次自我挑戰的感覺。

第一週比較像「重新搞懂」
第一週很多內容其實不是第一次看到。

像:

margin: 0 auto;

以前就會用。

display: flex;

也不是第一次寫。

但重新自己做一次之後才發現,

很多東西其實屬於:「我知道這樣寫會動,但不要突然問我為什麼。」XD

所以第二週想稍微往前一點。

除了重新整理之外,
也想多做一些實際的畫面。

不要每次都只有:

<div class="box">
  我是方塊
</div>

這顆方塊已經陪我好多天了。

它也該下班了吧!

這週想多做一點實作

如果只是看:

Flexbox 適合一維
Grid 適合二維

當下真的會覺得:「嗯嗯,懂了。」

但真的打開 VS Code 的時候:
所以我現在到底要用哪個?

。。。。。。。

又不懂了。

所以第二週想盡量用實作去看差別。

可能做個小卡片、
可能改個版面、
也可能做到一半突然踩坑,
然後那個坑就直接變成隔天的文章 XD

反正這次本來就不是照課表上課。

重點還是:真的有自己動手做。

JavaScript 也差不多該出場了
前面大部分都還是在處理:
網頁長什麼樣子。

怎麼排、
怎麼置中、
怎麼不要突然變胖。

但網頁總不能 30 天都只會站在那邊給我看吧?

所以第二週也想開始慢慢碰 JavaScript。
至少先讓畫面會有一點反應。
按個按鈕、
改個文字、
做一點小互動。
讓它開始有點生命。

不然現在的網頁真的就是:
長得好好的,但叫它完全不會理我。

第二週就先這樣!
有方向就好。

真的做到哪裡,
就寫到哪裡。

畢竟這次本來就是挑戰自己,
不是在趕課程進度 XD

希望第二週結束的時候,

至少可以從:
「我會用。」
多進化一點點到:
「喔~原來它是這樣。」

第二週正式開始。

Day 8,完成!


上一篇
第一週結算:我真的有學會嗎?還是只是一直跟 CSS 吵架 XD
下一篇
CSS Grid:不好意思,你哪位?怎麼一出場就開始畫格子
系列文
30 天,挑戰我的 Web 前端力11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言