---
title: 練習題目 - 自我介紹
tags: 網頁組
---

# 練習題目 - 自我介紹 - 前言

大家現在經過了前面的學習之後，掌握了基礎的 HTML 標籤，以及學會基礎的 CSS 該如何運用，這個章節我們要出一個作業給大家。

# 本節目標

- 做出一個簡單的自我介紹頁面

# 題目要求
- 版面設計

這次練習不會提供參考的版面，大家可以自由使用 Google 查詢自己想要的版面，或是參考下列的網址。
- UI 設計
- [Collect UI](http://collectui.com/)
- [Pinterest](https://www.pinterest.com)
- 配色
- [Coolors](https://coolors.co/)
- [Webgradients](https://webgradients.com/)
::: warning
Google 是一位很棒的老師，大家都應該學著使用😎
:::

- 基本架構要求
- Header（標頭/Logo/NavBar）
- main（主要內容）
- Footer（頁尾/版權聲明/聯絡資訊）

- 內容要求
- 自我介紹

除了上述提到的內容之外，大家可以發揮自己的創意，自由創作👍

::: warning
不論遇到什麼問題都能夠直接詢問學長姊，千萬不要害羞❕❕❕
:::

## 額外補充

完成自我介紹以後，可以試著透過 GitHub Page 把網頁 host 起來喔。

如果你還不會 Git 的話，快去透過之前的文章學習一下吧❗
:::success
- [Git 基礎介紹 + 安裝](/h66i_zldRg-Jd3lin5mIUA)

- [Git 實際演練](/1cAZJzaOTCuoB2dRBxpASw)
:::

:::info

[GitHub Page 官方網站](https://pages.github.com)

[從零開始: 用github pages 上傳靜態網站](https://medium.com/%E9%80%B2%E6%93%8A%E7%9A%84-git-git-git/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E7%94%A8github-pages-%E4%B8%8A%E5%82%B3%E9%9D%9C%E6%85%8B%E7%B6%B2%E7%AB%99-fa2ae83e6276)
:::

---

做完練習之後，大家已經能夠運用 HTML + CSS 做到一些簡單的網頁了，但是可能會有個疑問，如果想要讓網頁中的內容進行變動或是操作他呢？或者是按了按鈕會有反應這種的？好像還完全不知道該怎麼做，不要緊張，在下一篇介紹到的 JavaScript 就能夠幫助大家來讓網頁做到這些事情。