您可以先參考這份課程簡介，了解課程結構及內容
我們在 2015 年 4 月與元智大學資訊傳播學系合作，舉辦了一場 入門的網頁製作教學工作坊， 期能透過手把手的漸進式教學，讓學員從網站製作的基礎觀念到實務的開發，進而完成一個簡易的個人網站， 課程內容涵蓋基礎觀念、開發工具與環境建置、HTML/CSS 語法撰寫、Twitter Bootstrap 的應用方式 以及設計樣板的套用和部署至線上主機到網站實際上線 期許學員能課程內容為入門基礎，日後能夠獨立完成網站的開發工作。
本單元將從網路環境基本觀念開始談起，目的在讓學員了解何謂網際網路？各項網路服務如何彼此搭配運作以達成網頁瀏覽的目標？網站伺服器的運作原理及流程…等，並輔以說明業界的網站專案是如何執行？包括及流程、分工、及企劃技巧。透過這些主題，為修課學員打好基礎觀念。
本單元將會帶領學員安裝工作坊所需要的所有開發工具軟體，包括瀏覽器、網頁原始碼編輯器、版本控制系統，並說明網站開發流程的進行方式。最後，以我的第一個網頁做為工作坊第一天的結尾，期能讓學員了解網頁基本語法，做為下一週的基礎。
本單元將會介紹 HTML (Hyper Text Markup Language) 的語法，包括標籤 (Tag)、屬性 (Attributes) 等基本概念，並依文字、段落、清單、連結、圖片、表格、排版等不同分類順序，說明每個 HTML 標籤的使用方式。
本單元將會介紹 CSS (Cascading Style Sheet) 的語法，包括規則 (Rules)、選擇器 (Selector)、宣告 (Declaration) 等基本概念，並透過文字/字型、背景、連結、邊框、Box Model、排版等主題，說明如何透過 CSS 控制網頁元素的外觀。最後，將以一個簡單的範例，整合工作坊第二日所學 HTML/CSS 語法，完成一個小型網站原型。
為統一開發風格、加速實作產能，本工作坊將導入前端框架 Twitter Bootstrap 做為主力開發框架。在這個單元裡，將為學員說明前端框架的概念，並針對 Twitter Bootstrap 的功能及應用情境做說明。
本單元將介紹 Twitter Bootstrap 這個前端框架所包含的元件內容，包括：格線系統、字型、表格、按鈕、圖片以及各項互動元件。工作坊第三天結尾將示範如何使用 Twitter Bootstrap 完成一個簡易的網站原型，期能透過範例讓學員了解使用前端框架的好處及優勢。
為加快學員實作速度、並降低開發難度，本單元將會引導學員直接下載網路上的以 Twitter Bootstrap 為基礎建置的免費網站樣板，並依自己的需求進行客製化的微調或新增功能，讓學員能儘可能在短時間內，就可以針對自己的企劃想法做出網站原型。
工作坊最後一個單元，將會帶領學員使用總上部署服務，將自己完成的網站原始碼實際部署至線上平台，以了解如何將自己的實作成果上線公開。最後，將提示如何整合幾個常用的第三方服務，包括 Facebook、Youtube、Google Map 等到自己的網站上。工作坊最後將安排簡單的成果發表，由學員展示實作成果做為本工作坊結尾。
本課程討論的內容僅是基礎，唯有持續練習 精進才能掌握更多深⼊入的技巧！網路技術已深⼊入在各種層⾯面，不論是設計、科技、傳播都已脫離不了網路，可依興趣發展職涯領域，儘早紮根！ 商業的網站專案會牽涉到更多複雜的議題，開發流程、佈署步驟也會有所不同。在這個極速變動的時代，持續不斷的學習與更新是必要的！