iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

打造你的第一個網站 系列

從HTML、CSS、JavaScript開始手把手打造屬於你自己的第一個網站。

鐵人鍊成 | 共 32 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

第一天: 打造網頁的三劍客,HTML+CSS+JavaScript

得之於人者太多,出之於己者太少。 總算等到開賽的日子,這次的主題靈感來自於今年公司要求學習的新網站,由於常常在網路上拜讀許多大神的文章,使得自己有機會能累積到一...

DAY 2

第二天:建立你的環境及網頁

下載Visual Studio Code: https://code.visualstudio.com/安裝的時候可以把將「以code開啟」動作加入Window...

DAY 3

第三天 更多的標籤

為了美化我們HTML的網頁,HTML提供幾種常用的模板語言,以下我們一一介紹, 1.h1-h6:標題標籤(Head Line),h後面的數字代表著文字的大小,1...

DAY 4

第四天 更多的標籤(2)

承接昨天的標籤介紹,今天繼續介紹一些常用的標籤, 7.div:Document Division,用以包含許多有意義的區塊,例如:導覽列、邊攔、文章或不一定有語...

DAY 5

第五天-HTML標籤實作分享

在前面幾天,我們介紹了很多的標籤,今天我們將介紹最後一個常用標籤,並且在最後面的地方提供連結下載分享我的github實例,給大家參考。 12.form:表單,表...

DAY 6

第六天 CSS選擇器語法

從今天開始我們會開始進入的CSS的世界。各位可以先到我的GitHub裡面下載我的第一個網站-2範例,搭配文章一起服用。在我給的範例中,我設計了一個大的<d...

DAY 7

第七天 CSS選擇器介紹

什麼是CSS? CSS是Cascading Style Sheets的縮寫。簡單來說,CSS不可以單獨使用,但是,可以幫我們的HTML語法增加更多的花樣變化。...

DAY 8

第八天 CSS優先順序

從昨天的文章我們可以知道,CSS的順序是由上往下,所以寫在最後面的會覆蓋過前面寫的。 另外,當我們的css內容越來越多的時候,我們可以透過Chrome檢查工具檢...

DAY 9

第九天-CSS 留白

我們在style.css 中設定 邊寬的粗細、樣式及顏色,為的是讓我們在等一下的編排看清楚我們的選擇及調整。(*選擇器的意思是選擇所有的元素) * {...

DAY 10

第十天-消除留白的方法

昨天的文章我們有提到留白的部分,但是不是所有的留白都是我們要的,我們可以使用Google瀏覽器的開發人員工具去找出我們不想要的留白,這時為了要消除它,我們回到C...