隨著科技不斷進步，智慧型手機的普及，網際網路已經進入生活的食衣住行等各方面的需求，隨時隨地只要透過網頁就可以向使用者分享資訊、互動、溝通、購物....，使用者只要透過網站搜尋，就能即時獲取大量多樣的資訊。

寫作動機及目標

近幾年新的技術不斷地湧出，舊的技術也不斷地在更新，像是以前做動畫需要用Flash才能實現，現在也可以用CSS來實現了，因此打好基本功，才能隨心所欲的製作出各式各樣不同風格的網站。

那你會問，現在也有很多免費架站平台來製作網站，幾分鐘之內快速做好一個網站了，用那做一做就好啦！是這樣沒錯，但是版型、功能大幅受限，想改的改不動，想加的不能加，所以就必須了解網頁相關知識，才能製作符合自己的網站風格，那最基本的就是要學會HTML及CSS了。
這30天，這系列文章我會分享：

• 常使用的素材網站、線上產生器
• 使用編輯器好用套件
• html+css介紹，並補充我自己遇到的問題及樣式寫法
• 製作響應式網站需要注意的細節

希望可以幫助初學者學習製作網站，也歡迎大家跟我分享

目錄

• 30天學會HTML＋CSS，製作精美網站
• 如何製作一個精美的網站
• 找尋你的設計靈感、素材及好工具
• 改造你的VSCode，大幅提升你的Coding效率
• 認識網頁元素 HTML、CSS
• 語意標籤-30天學會HTML＋CSS，製作精美網站
• 網頁選擇器-30天學會HTML＋CSS，製作精美網站
• 偽類與偽元素-30天學會HTML＋CSS，製作精美網站
• 網頁常用單位-30天學會HTML＋CSS，製作精美網站
• 網頁命名規則-30天學會HTML＋CSS，製作精美網站
• 網頁文字-30天學會HTML＋CSS，製作精美網站
• 顏色與背景-30天學會HTML＋CSS，製作精美網站
• 網頁超連結-30天學會HTML＋CSS，製作精美網站
• 項目清單-30天學會HTML＋CSS，製作精美網站
• 網頁圖片-30天學會HTML＋CSS，製作精美網站
• 混合模式-30天學會HTML＋CSS，製作精美網站
• 濾鏡-30天學會HTML＋CSS，製作精美網站
• 剪裁與遮罩-30天學會HTML＋CSS，製作精美網站
• 網頁表格-30天學會HTML＋CSS，製作精美網站
• 網頁表單-30天學會HTML＋CSS，製作精美網站
• 網頁盒子-30天學會HTML＋CSS，製作精美網站
• 網頁定位-30天學會HTML＋CSS，製作精美網站
• Flexbox-30天學會HTML＋CSS，製作精美網站
• 網頁編排Grid-30天學會HTML＋CSS，製作精美網站
• 網頁動起來-30天學會HTML＋CSS，製作精美網站
• 網頁變形-30天學會HTML＋CSS，製作精美網站
• 製作響應式網站-30天學會HTML＋CSS，製作精美網站-30天學會HTML＋CSS，製作精美網站
• 響應式網站注意細節-30天學會HTML＋CSS，製作精美網站
• 網頁框架比一比-30天學會HTML＋CSS，製作精美網站
• 版本控制與結語-30天學會HTML＋CSS，製作精美網站