快速建立RWD網頁 Bootstrap 套件前言

相信最近大家對Bootstrap套件越來越熟悉，還記得幾年前開始教RWD網頁設計時，在課程中有帶學員如何使用Bootstrap，反應不錯後來就開始繼續教Bootstrap。

剛開始除了教學之外，製作專案時我大部分都是在後台使用Bootstrap，當時網站需要製作RWD的機率還不高，不像現在這個高的需求量。

目前最新版本：v4.0
穩定版：v3.3.7
舊版本：v2.3.2

如果開發客戶是公部門，也就是說還有使用ie8或ie9，建議使用v3.3.7以下
商業網站就可以選擇v4.x或穩定版v3.3.7

目前我教學都還是以v3.3.7為主。

illustrator 2017 cc 漸層按鈕製作 1 -illustrator教學

這個Illustrator教學影片主要的是介紹illustrator 2017 cc 漸層按鈕製作 1，利用簡單的橢圓形建立正圓形之後，在使用漸層技巧所製作出來效果，對illustrator有興趣的朋友可以參考這個影片。

RWD 回應式網頁設計常用斷點-網頁設計教學

RWD 斷點指的是裝置的螢幕解析呈現的區隔，也就是說手機直式螢幕寬如果為480像素，

那麼480就是斷點，平板直式螢幕寬為768像素，768就是斷點依此類推。

因為工作跟教學常需要這些尺寸，所以特別做個紀錄。

以下為版本更新列表：

1. 更新版 (更新日期：2023/02/05)
2. 修正版 (更新日期：2021/09/12)
3. 簡易版 (更新日期：2020/06/23) 

Illustrator-3D咖啡杯紙製作

在早期的Illustrator版本中已經有基本的3D功能，以下的影片是使用Illustrator cc-2017版本製作的咖啡紙杯，這個範例分為兩個階段。

Atom前端編輯-網頁設計教學

網頁前端設計師最常用的編輯器會有Sublime Text, Atom, Visual Studio Code,
因為Atom是一套免費的編輯器軟體，對於剛開始接觸的使用者是一個很好的選擇，
而且筆者目前使用Atom頻率最高，所以特別介紹Atom給大家。

這個教學影片將介紹如何安裝Atom編輯前端網頁時常用的套件。

Sublime Text 3 教學-使用Emmet 快速建立CSS文字樣式-網頁設計教學

因為工作的關係，常常會需要用到Emmet快速建構HTML的結構與CSS標籤，所以分享一下
Emmet 常用的快速語法，這快捷用法在Sublime text, Atom, Visual Studio Code 都通用，應該說只要有安裝Emmet的編輯器都可以使用。

*2017-08-19 更新
前陣子因為在MacBook Pro上的Atom軟體不穩的因素，後來改用Visual Studio Code跟 Sublime text，實際執行後發現簡碼會有一點差別，例如在Atom上輸入mra[按下Tab鍵]後會出現 margin-right: auto 但是在Visual Studio Code就無法出現，所以這篇文章的簡碼會比較適合Atom。

另外標題也有變更，因為這篇文章主要在介紹Emmet建立CSS樣式，所以把標題修改成為比較貼近的敘述。

CSS3 column文字欄位設定-網頁設計教學

這是CSS3文字欄位設定的方式，但是在不同的瀏覽是會有不同的標示，例如建立一個類別為content的DIV元素，在Style中加入以下的語法就可以有兩欄的文字區隔方式。

Adobe Illustrator cc 2017 軟體入門

自從Adobe公司改為CC版本之後，軟體的介面開始有一些不同的改變，如果稍微不注意更新的內容，軟體的介面可能就會有點生疏了，但還好只有一些部分不一樣，以下的影片是關於Adobe Illustrator cc 2017 軟體入門教學，非常適合剛入門的新手或想了解軟體基本操作的使用者，歡迎觀賞以下的影片。