iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

從結構到互動:現代前端HTML、CSS 、JS 的 30 天修練 系列

從零基礎開始學會前端的三個基礎語言,從html的文字、排版,css的顏色、版面設計,到最後js的互動、按鈕點擊,在這30天裡將一步一步認識這三個如何使用,並加深這三個之間的運用。

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

Day1:從結構到互動,30天的前端修練之旅

前言 今天是我第一天參加「iThome 鐵人賽」,這次不僅是我個人技術生涯的初體驗,更特別的是,我和大家一起組團報名了「眾志成城獎」。 老實說,剛開始了解這個獎...

DAY 2

DAY2 介紹html

HTML的全名是HyperText Markup Language,翻成中文是超文字標記語言,這是建造全球網際網路中最重要的基石,HTML和CSS、JS在是網頁...

DAY 3

DAY3 介紹HTML開頭

<!DOCTYPE html> <html lang="en"> <head> <meta...

DAY 4

DAY4 標籤、標題

用標籤賦予文字「語意」 在上一篇文章中,我們認識了網頁的黃金骨架,今天我們要正式動手在網頁裡塞入各種文字內容。 在HTML中,全部都只用純文字會讓你看得非常痛苦...

DAY 5

Day5 輸入欄位、下拉選單和按鈕

網頁不再只有文字,認識互動元件 在昨天的文章中,我們學會了如何用HTML呈現標題與段落文字。但網頁之所以好玩,是因為使用者可以跟網頁進行互動,不論是註冊會員、填...

DAY 6

DAY6 超連結、圖片、form表單

連結、多媒體與資料傳遞 這幾天我們學會了如何在網頁中塞入靜態文字,也認識了按鈕和輸入框等互動元件,但真正的網路世界之所以稱為「網」,是因為每個網頁之間可以互聯,...

DAY 7

DAY7 區塊標籤、行內標籤與清單

如何分類與組織網頁元素? 我們的修練已經來到了第七天,在前幾天的文章中,我們學會了如何在網頁裡放入文字、圖片、超連結和各式各樣的表單互動元件,然而,當網頁上的東...

DAY 8

DAY8 簡單一個小網頁

把學到的技術融會貫通 過去這幾天,我們就像是在收集網頁的各個零件,我們認識了網頁的黃金骨架,學會了填入標題與內文,還解鎖了圖片、超連結、互動表單,以及區塊概念(...

DAY 9

DAY9 介紹CSS

告別黑白的網頁:什麼是CSS 在過去這幾天,我們用HTML搭建出了網頁的「骨架」,不過目前的網頁看起來只有白底黑字、藍色超連結,非常單調,如果用蓋房子來舉例,我...

DAY 10

DAY10 改變顏色與文字

CSS樣式的宣告結構 在進入實際練習之前,我們必須先建立一個觀念,CSS究竟是如何運作的,CSS 的語法核心是由**「選擇器(Selector)」、「屬性(Pr...