###### tags: `前端設計工程師養成班`
# ED102 Web/APP前端設計工程師養成班

# UI UX 上課講義
https://docs.google.com/presentation/d/1xHnNL2wjuZue82-0I-uKNtYPrDghMUeHcONN6CcpCqc/edit?usp=sharing

# sass 參考資源
https://sass.bootcss.com/documentation

# Git 講義
https://bryant-huang.gitbook.io/git/

https://git-scm.com/

# 參考網站
1. https://themeforest.net/
2. https://www.cssdesignawards.com/
3. https://www.webdesignclip.com/
4. https://flatsome3.uxthemes.com/shop/
5. http://preview.themeforest.net/item/hervin-creative-ajax-portfolio-showcase-slider-theme/full_screen_preview/23817476?_ga=2.8862197.113215896.1588782797-220591041.1581305097
6. https://www.flaticon.com/
7. https://themeforest.net/?auto_signin=true

# 工具
https://www.pinterest.com/

# 今天上課網站
https://www.apple.com/tw/ipad-pro/
https://www.agoda.com/
https://www.tesla.com/zh_tw/

# chrome 工具

- 網站技術分析 https://www.wappalyzer.com/
- grid 尺規 https://chrome.google.com/webstore/detail/grid-ruler/joadogiaiabhmggdifljlpkclnpfncmj
- colorpick https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
- 同文堂 https://chrome.google.com/webstore/detail/new-tong-wen-tang/ldmgbgaoglmaiblpnphffibpbfchjaeg?hl=zh-TW
- 尺規 https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme/related
- 查看字體大小 https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh

# 5/13 繳交作業項目

### 學姊參考範例：

高于婷同學 [DD103](http://140.115.236.71/demo-personal/DD103/web/%e7%b0%a1%e5%a0%b1PDF/ISLAND%e9%ab%98%e4%ba%8e%e5%a9%b70917.pdf)
賴怡安同學 [DD103](http://140.115.236.71/demo-personal/DD103/web/%e7%b0%a1%e5%a0%b1PDF/T1900826%ef%bc%bf%e8%b3%b4%e6%80%a1%e5%ae%89%ef%bc%bf%e8%8a%b1%e7%b3%b8.pdf)
賴正軒同學 [DD103](http://140.115.236.71/demo-personal/DD103/web/%e7%b0%a1%e5%a0%b1PDF/T1900840-%e8%b3%b4%e6%ad%a3%e8%bb%92-%e5%8f%b0%e7%81%a3%e9%bb%91%e7%86%8a%e6%95%85%e4%ba%8b%e9%a4%a8.pdf)

--- 以下是報告的範例(*選的部分，~~是可以選擇不做~~，如果有做是最好) ---

## 選定主題
> 選定主題開始分析相關網站

1. 網站名稱：airbnb
2. 選定產業別：訂票網

<br>
<br>
<br>

## 主題介紹
> 我們的產品主要是做什麼服務的，能夠有效的完成哪些事？

Airbnb是一個讓大眾出租住宿民宿的網站，提供短期出租房屋或房間的服務。讓旅行者可以通過網站或手機、發掘和預訂世界各地的各種獨特房源。

<br>
<br>
<br>

## 個人網站架構 (Sitemap)


<br>
<br>
<br>

## 網站線框稿 (Wireframe)


<br>
<br>
<br>

## ＊（選）網站 UI Flow

# gsap 動畫
https://greensock.com/gsap/

## 上課檔案
https://github.com/sexfat/ed102

https://cdnjs.com/libraries/gsap/2.1.3

# scrollmagic
https://cdnjs.com/libraries/ScrollMagic

# 滾動視差
https://matthew.wagerfield.com/parallax/

# 範例
https://scrollmagic.io/examples/index.html

# Sass / css預處理器

## Sass環境安裝
不要做重複的工作，重複的工作讓機器做
<br>
<br>
## Install node.js

Install [ Node.js ](https://nodejs.org/en/)

#### If you use Node.js, you can also install Sass using npm

**1. Windows user**
Open your "終端機" CMD

npm install -g sass

輸入 ` sass --version` 看是否有灌成功
如果有成功 會 return `Sass` 版本

**2. Mac user**

Open the Mac's Terminal.app / 終端機

sudo npm install -g sass

輸入 ` sass --version` 看是否有灌成功
如果有成功 會 return `Sass` 版本

# sass 資源
[Sass online 工具](http://www.sassmeister.com/)
[Sass 英文官網](http://www.sassmeister.com/)
[Sass 中文官網](https://sass.bootcss.com/)
<br>
<br>

# VsCode 必安裝套件
[Live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
<br>
<br>

### Vscode setting

"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css/"
        }
    ],

<br>
<br>

# 變數型態

$font-size : 20px;
$color : #333;
$margin : 10px 20px 30px 40px;  // list
$bg-color : (
  'blue' : #0059ff,
  'yellow' : #ffd900,
  'green' : #73ff00
); // map 數值 

$null : null;

body {
  $font-size : 210px;
  font-size: $font-size;
  max-width: 30px;
  margin: $margin;
}

# Mixin

//不帶值
@mixin margin() {
    margin: 0 auto;
    text-align: center;
}
@mixin btn($w , $bgc , $fontSize) {
    width: $w;
    padding: 10px;
    font-size: $fontSize;
    text-align: center;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    background-color: $bgc;
    transition: .2s all ease-in;
    &:hover {
       background-color: darken($bgc , 10%); 
    }
}

//帶值
@mixin margin-num($num) {
    margin: $num auto; 
    position: relative;
    top : $num;
}

@mixin padding($num) {
    padding: $num;
}



.box {
    @include margin();
}

.spec {
    width: 300px;
   @include margin();
}
.btn {
     @include btn(100px , #2e00d6 , 14px);
    @include margin-num(50px);
}

- :null值

  @mixin btn($w , $bgc , $fontSize:null) {
    width: $w;
    padding: 10px;
    font-size: $fontSize;
    text-align: center;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    background-color: $bgc;
    transition: .2s all ease-in;
    &:hover {
       background-color: darken($bgc , 10%);
    }
}

- 預設值

@mixin btn($w , $bgc , $fontSize:14px) {
    width: $w;
    padding: 10px;
    font-size: $fontSize;
    text-align: center;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    background-color: $bgc;
    transition: .2s all ease-in;
    &:hover {
       background-color: darken($bgc , 10%);
    }
}