iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

30 天體驗:從程式菜鳥到前端新手工程師 系列

這系列將紀錄我一個程式小白,用 30 天挑戰成為前端新手工程師的學習歷程。內容會從最基礎的 HTML、CSS、JavaScript 開始,逐步帶到常用的排版工具與套件(如 Tailwind),並實作小專案來驗證學習成果。除了技術筆記,也會分享我使用線上資源(如 Codecademy)的心得,讓初學者能快速找到學習方向。希望能透過這 30 天的實戰分享,讓更多人看到「從零開始學前端」的可能性!

參賽天數 22 天 | 共 22 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

5分鐘帶你快速認識網站架構:基本概念及前端架構 (Day1)

想學做網站卻不知道從哪開始?其實只要先搞懂「前端」和「後端」的差別,再掌握 HTML、CSS、JavaScript 三大基礎,就能入門前端世界!在了解如何寫網站...

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

🚀 前端新手必看:開發環境安裝 + 自學網站大公開 (Day2)

剛開始想學寫網站,卻不知道要先裝什麼工具嗎?今天帶你10分鐘完成環境安裝,再送上我私藏的前端自學網站清單,讓你不再卡關,馬上開始打造自己的第一個網頁! Visu...

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

✨ 從 <h1> 到 <ul>:前端新手必學 HTML 標籤 (Day3)

今天要學會 HTML 最重要的基礎:網頁結構、文字標籤、清單標籤。最後,我們來試著寫一頁「自我介紹頁」! 一、HTML 基本結構 一個完整的 HTML 網頁,基...

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

🌐 讓網頁動起來!HTML 圖片 × 超連結 × 表格全攻略 (Day4)

昨天我們學會了 HTML 的基本結構、文字標籤與清單,做了一個自我介紹。今天要再進一步,學習如何在網頁中插入圖片、建立超連結,以及整理資料用的表格,做一個簡單的...

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

和使用者互動!HTML 表單 × 輸入元件全攻略(Day5)

這幾天一路學下來,我已經能在網頁上放文字、加圖片、做連結,甚至還能用表格排版資料,看起來就像一個小小網站了 🎉。不過,如果網頁只能「秀給別人看」,那感覺還少了一...

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

小名片大能量!打造屬於我的數位名片(Day6)

學了這麼多天,感覺工具箱越來越滿了。我會放文字、加圖片、做連結,也能排表格,甚至昨天還讓使用者能填表單!今天的任務就是 —— 把這些元素都串起來,做一個屬於自己...

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

我的第一個小網站!HTML 全面整合實戰 (Day7)

哇~一轉眼已經到第七天啦 🎉!回想這一週,我從最基本的 HTML 骨架開始,慢慢認識了標題、段落、清單,再到圖片、連結、表格,昨天甚至還做了小名片。感覺就像拼拼...

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

CSS 是什麼?為什麼學網頁一定要會它?(Day8)

還記得你只有打開 HTML 檔案的時候嗎?是不是覺得畫面就是一堆黑白文字,頂多加個&lt; h1 &gt;標題看起來比較大一點點。沒錯,HTML 本身就像是「房...

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

要怎麼讓網頁更有個性? 教你用 CSS 打造顏色、字體與背景 (Day9)

昨天我們學到 CSS 就是「幫網頁打扮的設計師」。今天開始,我們就要從最簡單、最有感的地方下手:顏色、字體、背景。這三個元素,就像你決定今天要穿什麼衣服、搭什麼...

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

📦 CSS 盒模型 & 排版,網頁元素是怎麼排排站的?(Day 10)

你有沒有想過,為什麼一個 &lt; div &gt; 看起來像是一個方塊?其實在 CSS 世界裡,所有元素都是一個「盒子」(Box)。這個「盒子」就像積木,你要...

2025-09-24 ‧ 由 tingisgood 分享