iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30天學網頁設計 系列

30學習網頁設計,記錄學習歷程及心得

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊imac_跳過這篇
DAY 1

Day1 前言

各位朋友好,歡迎大家觀看此篇文章,這次暑假因為疫情的關係而開始遠距教學,剛好也趁此機會讓我好好學習,用30天的時間去研究並練習網頁設計,用鐵人賽監督自己,把沒打...

2021-09-15 ‧ 由 Hinata 分享
DAY 2

Day2 Visual Studio Code 功能簡易說明

Visual Studio Code(簡稱VS Code) 由微軟開發,並且支援Windows、Linux和macOS作業系統且開放原始碼的文字編輯器可支援偵錯...

2021-09-16 ‧ 由 Hinata 分享
DAY 3

Day3 HTML、CSS、JavaScript基本架構

【HTML】 HTML是一種用來建構網頁的標記語言,而非程式,可以將網頁想像成一頁文件,而這份文件內會有標題、內文、圖片、頁尾等元素。HTML這時候就會告訴我們...

2021-09-17 ‧ 由 Hinata 分享
DAY 4

Day4 HTML 語法簡易介紹(一)

HTML 語法簡易介紹 HTML 是 Hypertext Markup Language 的縮寫,也就是「超文本標記語言」(是標記語言,不是程式語言)。 Hy...

2021-09-18 ‧ 由 Hinata 分享
DAY 5

Day5 HTML 語法簡易介紹(二)

常見的 HTML elements 標題 headings 在 VS code 中輸入以下程式碼 <h1> HTML標題範例 </h1>...

2021-09-19 ‧ 由 Hinata 分享
DAY 6

Day6 HTML 語法簡易介紹(三)

常見的 HTML elements 圖片 (img) 想要在網頁放上圖片,可以使用img標籤,他不用開頭和結尾標籤,單獨一個img即可,我們稱這樣的標籤為空元素...

2021-09-20 ‧ 由 Hinata 分享
DAY 7

Day7 HTML 區塊標籤:div、span

區塊元素(div) HTML是網頁的骨架,架構出來,再用CSS來對網頁進行美化,如果希望某段落的一兩個字可以變為紅色,又或者某幾個段落文字想要有背景顏色或邊框,...

2021-09-21 ‧ 由 Hinata 分享
DAY 8

Day8 HTML 其他常用標籤

語意標籤 (Semantic) 語意標籤是HTML5新增的標籤,讓網頁結構更清楚,搜尋引擎可以更容易了解網頁。語意標籤的用途與div和span類似,目的都是將內...

2021-09-22 ‧ 由 Hinata 分享
DAY 9

Day9 HTML 常用標籤: table

表格 (table) 表格是一個由列和欄組成的結構化資料(tabular data)。表格能幫助你快速查看不同資料類型間的關聯值。在HTML網頁可使用表格元素t...

2021-09-23 ‧ 由 Hinata 分享
DAY 10

Day10 HTML 切版介紹(上)

切版是前端工程師必須要具備的技能,需要把設計師針對使用者需求所完成的設計稿,透過程式讓它在網頁中實際呈現出來。切版是很重要的,如果少了這個過程在網頁中會沒有畫面...

2021-09-24 ‧ 由 Hinata 分享