iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

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

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

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

DAY1開賽宣言

前言 大家好!這是我第一次參加鐵人賽,希望自己能夠挑戰成功,在接下來的三十天內每天都能穩定產出一篇文章。雖然心裡有點緊張,但也充滿期待。對我來說,這不僅僅是寫文...

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

DAY2 認識 HTML:網頁的骨架

標籤 (tag) HTML的語法跟其他的程式語言有很大的區別,是由許多標籤組成的,每個標籤裡面還能設定屬性的值以達成需要的功能 <a style=&quo...

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

Day3 認識<head>跟 <body>,打造網頁的「頭」跟「身體」

學會了 HTML 的基本骨架之後,今天,我們要看到跟這兩個核心的標籤 1. &lt;head&gt;&lt;/head&gt;這個標籤主要是說明網頁的資訊,包...

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

DAY4多元元素入門:建立清單、連結與圖片

今天要介紹三種常見的元素 列表清單 列表主要分為兩種:有順序跟無順序的,清單內還能放其他清單&lt;ul&gt; 代表無順序的(unordered list)...

2025-09-18 ‧ 由 c8763 分享
DAY 5

DAY5 認識CSS:網頁的皮膚

開始之前先補充一下 Element (元素)的說明 Element (元素) Element:簡單說元素就是一個前後完整的標籤 + 內容的組合,如下會是一個段落...

2025-09-19 ‧ 由 c8763 分享
DAY 6

DAY6 CSS選擇器解析:精準打造網頁造型

選擇器 (Selector) 也稱為選取器,作用是讓你能夠修改指定的元素,下面介紹常用的選擇器 標籤選擇器(type selectoer ) 又稱型態選擇器,用...

2025-09-20 ‧ 由 c8763 分享
DAY 7

DAY7 css常見的屬性

針對文字的設定所需要調整的屬性常見的如下 文字相關 font-family:可以設定多個,以 , 區分,從第一個開始套用,因此後面會是通用字體 font-si...

2025-09-21 ‧ 由 c8763 分享
DAY 8

DAY8 css 容器及邊界

網頁容器 容器就是一個區塊,用來區分放的位置與內容,當然可以在裡面放個更小的容器網頁排版就是關於容器的設計&lt;div&gt;:作為區塊 (block) 容器...

2025-09-22 ‧ 由 c8763 分享
DAY 9

DAY9 HTML和CSS 區塊元素和行內元素

區塊元素 區塊元素(或稱區塊層級元素),可以設置 width(寬度)、height(高度),在一般默認下的區塊元素,寬度會跟隨父層寬度,故而不允許其他元素佔據其...

2025-09-23 ‧ 由 c8763 分享
DAY 10

DAY10 HTML和CSS 元素邊界的關係

在看任何跟邊界有關的 CSS 時都應該會看過這張圖,這張圖代表著 HTML 內的每個元素的邊界設定。 很多人在初學網頁的時候都會 margin 、 paddin...

2025-09-24 ‧ 由 c8763 分享