iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

網頁技術探索:30天的前端學習 系列

這次挑戰會在 30 天內,分別學習三個前端基礎語言。
首先是 HTML,負責網頁的骨架和內容,像是文字、圖片、段落怎麼排版。
接著是 CSS,讓網頁變漂亮,透過顏色、字體、版面設計,做出更好的使用體驗。
最後是 JavaScript,讓網頁有互動性,像是按鈕點擊、表單檢查,以及一些常用的功能。
這 30 天的探索,希望能打下前端的基礎,也累積出一個完整的小專案。

參賽天數 23 天 | 共 23 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文 團隊nutc imac T1
DAY 11

DAY11 HTML與CSS Box Model 跟 Box-sizing

繼續說明昨天沒說到的部分 Box Model (盒模型) 一個 box model 包含,margin、border、padding、content。![!...

2025-09-25 ‧ 由 c8763 分享
DAY 12

DAY12 css flex (1)-概述

Flex Box:是一個 (Box model),是指一個彈性的盒子 ( Flexible Box ),可以適應不同尺寸和設備,因為響應式網頁的興起,愈來愈普...

2025-09-26 ‧ 由 c8763 分享
DAY 13

DAY13 css flex(2)外容器、軸線

外容器 (Container) 參考 CodePen 連結,試著將註解的行數依描述進行調整 try01:要加display才會顯示 Flex 的效果 try0...

2025-09-27 ‧ 由 c8763 分享
DAY 14

DAY14 css flex(3) 外容器對齊設定

justify-content 與 align-items justify-content:是依照主軸的狀況來進行對齊,因此要確認 flex-direction...

2025-09-28 ‧ 由 c8763 分享
DAY 15

DAY15 css flex(4)內元素及 flex應用:製作並排選單

內元件 從前面介紹會發現,調整外容器時內元件都是一起變更的,若想單獨針對內元件進行調整,需要另外進行設定 內元件 (items) flex:下面 3 個屬性的...

2025-09-29 ‧ 由 c8763 分享
DAY 16

DAY16 css position(1) 相對定位、絕對定位

position 是指定一个元素在定位方式,也就是元素放置的位置 相對定位與絕對定位 可以用來應用在元素重疊 static:預設值,代表不會被定位,依照網頁預...

2025-09-30 ‧ 由 c8763 分享
DAY 17

DAY17 css Position (2) 固定定位

固定定位 不隨網頁滑動(滾動)而改變位置,例如購物車按鈕、置頂按鈕、聊天服務等固定區域的fixed:類似絕對座標固定位置,但參考的是瀏覽器視窗,也就是我們看得到...

2025-10-01 ‧ 由 c8763 分享
DAY 18

DAY18 HTML和CSS 表單Table、Form

Table 表格 <table><tr>:代表 (table row),橫的 row<td>:代表 (table data)...

2025-10-02 ‧ 由 c8763 分享
DAY 19

DAY19 javascript環境設置、認識變數 Variable

JavaScript 概述 一般來說,完整的 JavaScript 包括以下幾個部分: ECMAScript,描述了該語言的語法和基本物件 文件物件模型(DO...

2025-10-03 ‧ 由 c8763 分享
DAY 20

Day20 JS 認識與使用函式 function及在函式加入參數

什麼是函式 funciton 簡單來說「函式」指的是將一或多段程式指令包裝起來,可以重複使用,也方便維護。 函式的寫法 function name(params...

2025-10-04 ‧ 由 c8763 分享