iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

挑戰!用30天做一個自己的履歷作品集網頁! 系列

30天,從wireframe到html,再到CSS,一步一步完成自己的一頁式履歷作品集網頁。
以前雖然在課堂上學過網頁程式撰寫,也設計過幾個project,但卻一直沒有式著製做自己的網頁,於是想趁著這個機會挑戰看看。

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

Day 01 | 前言

看膩了制式化的線上履歷,也覺得每年要更新自己的作品集做的很累,還需要影印出來,花費不小。明明自己會寫網頁卻一直都沒有做自己的網頁,於是想趁著這個機會利用自己所學...

2020-09-13 ‧ 由 lilian_chen 分享
DAY 2

Day 02 | 來畫wireframe吧

即使是網頁設計大師應該也是無法直接憑空造出一個有排版的網頁的吧?還是需要畫下來的吧,也方便日後製作時做為參考。我通常會將網頁想要的大概樣子,先簡單畫在紙上,只用...

2020-09-14 ‧ 由 lilian_chen 分享
DAY 3

Day 03 | Html

在VS code 新增一個html 檔案,取名為index.html,在第一行輸入!後按下tab鍵後,噹噹,自動幫我們把Html 的head 區塊生成好囉!VS...

2020-09-15 ‧ 由 lilian_chen 分享
DAY 4

Day 04 | Navigation bar 與 a標籤

Navigation bar 網站的導覽列讓使用者能快速切換想去的頁面,以及知道自己在網站的哪一個頁面。因為這次只做一頁,所以將導覽列設計得很簡單,分為關於我以...

2020-09-16 ‧ 由 lilian_chen 分享
DAY 5

Day 05 | 標題與內文

完成Navigation bar 之後我們就來進行內容吧!有標題(紅色底)跟內文兩個部分,控制標題的是~標籤,而內文則主要是p標籤與其它換行等等的控制標籤。 &...

2020-09-17 ‧ 由 lilian_chen 分享
DAY 6

Day 06 | 圖片與 Font awesome

讓我們繼續下去吧!放圖片與文字底下的小icon。使用img標籤插入圖片,< img src=" ./img/head01.jpg "...

2020-09-18 ‧ 由 lilian_chen 分享
DAY 7

Day 07 | 包山包海div

做到目前大概是這樣↓雖然乍看之下滿整齊的,但其實就是把東西一字排開放在桌上,沒有去整理分類,之後加上CSS之後也不好調整。桌面很亂會想要使用收納盒,城市很亂當然...

2020-09-19 ‧ 由 lilian_chen 分享
DAY 8

Day 08 | Keep Going 1

前面花了7天才完成一兩個部分,看看自己畫的Mock-up還有很長一段路要走的樣子。繼續將其他的html 新增進網頁吧!首先要進行的是專程與技能的部分,一樣用框框...

2020-09-20 ‧ 由 lilian_chen 分享
DAY 9

Day 09 | Keep Going 2

下一個部分,學經歷時間軸,這應該是之後套上CSS的大魔王。這邊也使用框框將之後可能會套用同一套 CSS 的部分框起來了。沒錯,除了代表各個經歷的icon之外,在...

2020-09-21 ‧ 由 lilian_chen 分享
DAY 10

Day 10 | Keep Going 3 與 Footer

終於把關於我的部分結束,進行到最後兩個部份了!開始放作品以及製做頁尾Footer。因為放了三種不同類型的作品,所以排版上也做了三種不同變化。UI 設計使用簡單版...

2020-09-22 ‧ 由 lilian_chen 分享