Visual Guide 視覺套色

(Html、Css、Pug、Sass)
製作與Photoshop吸取色塊之相似功能

.content.content_white  區域白
.content.content_blue 區域藍
.content.content_grey 區域灰
更改區域色塊時，內容會隨之更改相對配色。

作品展示 GitHub鏈結

Promote Bootstrap 提升RW

(Html、Css、Pug、Sass、RWD)

增強在網頁排版上的能力

.col-(網格)-(響應列)
.col-、.col-(sm、md、lg、xl)
.col-(sm、md、lg、xl)-12

作品展示 GitHub鏈結

Exercise SVG 練習動態SVG

(Html、Css、Pug、Sass、RWD、SVG)

元素
line(x1,y1,x2,y2)、rect(x,y,w,h)、circle(cx,cy,r)
ellipse(cx,cy,rx,ry)、polyline(points="x,y;x,y")

CSS / SVG 比較

框線顏色: border-color / stroke
框線粗細: border-width / stroke-width
背景顏色: background-color / fill
定位: left、top / x、y (圓形時cx、cy)

作品展示 GitHub鏈結

PhoneDemo 手機Demo

(Html、Css、Pug、Sass、Javascript、Jquery)

螢幕滑動 => 首頁 -> page1 -> page2 + 滑動音效

Home鍵 => 回到首頁 + 點擊音效

手機規格 =>
iphone5~iphone6s 逐漸放大 + 修改手機規格 + 點擊音效

wiggle => 仿照來電震動 + 音效

turn around => 把弄手機旋轉360度

作品展示 GitHub鏈結

Inventory Calculator 庫存計算器

(Html、Css、Pug、Sass、Javascript、Jquery)

預設庫存數12為基準

小於等於9時 => 警示訊息 -> 數量極少-> 彈出連絡廠商
-> 點擊後顯現撥號中 ("☎ 聯絡中...." + 等待時間 )

小於等於10、小於等於15時 => 警示訊息 -> 賣得不錯

大於15時 => 警示訊息 -> 還剩很多

作品展示 GitHub鏈結

Buylist 電腦周邊購物清單

(Html、Css、Pug、Sass、Javascript、Jquery)

宣告一個空的物件，將商品清單以陣列方式丟入物件內
陣列內容包含 商品名稱(name)、商品價格(price)

宣告兩個新的變數
一個丟入 項目列表清單的html code，
將要取代的值以{{ }}包住。
一個丟入 總價列表 方式同上。

宣告一個function內用for迴圈
來將每一筆商品資料帶入並執行。

作品展示 GitHub鏈結

HomemadeWebpage 自製網頁

(Html、Css、Pug、Sass、Javascript、Jquery、RWD、Vue.js)

navbar => 未滾動時背景透明 -> 滾動時灰階
section#section_ask => 圖片與背景融合、文字淡出
section#section_about => RWD妥善排版
section#section_map_objects =>
RWD分割再分割、物件自動到定點
section#section_role =>
未使用Vue將DB帶入、點擊切換詳細資料
section#section_role 內的 Game HightLight =>
使用Vue將DB帶入、並切換圖片與影片模式

作品展示 GitHub鏈結

WeatherForecast 氣候預測

(Html、Css、Pug、Sass、Javascript、Jquery、RWD、Vue.js、AJAX)

使用氣象局公開API，取得三十六小時各地氣候預測

點擊畫面後 -> 選單顯示、搜尋鍵顯示 -> 選擇縣市 ->
點擊搜尋鍵 -> 文字消失 -> 氣象盒子浮出

動態氣象盒子，指標滑上後顯示整體

上層點擊將溫度成為動態置後層SVG，由高溫置低溫

以降雨機率判定天氣Img。

作品展示 GitHub鏈結