Learn RWD language

HTML & CSS

HyperText Markup Language 超文本標記語言,簡稱:HTML。
HTML 描述了一個網站的結構語意及內容元素,網頁瀏覽器可以讀取HTML檔案呈現視覺結果,HTML 是一種標記語言而非程式語言,由 W3C 定義和維護。

Cascading Style Sheets 階層式樣式表、串接式樣式表,簡稱:CSS。
CSS 是一種用來為 HTML 文件添加樣式(顏色、字型、大小、間距...等)的電腦語言,CSS 能夠對網頁中元素的排版進行像素級精確的控制,由 W3C定義和維護。

JavaScript

JavaScript 是一種高階程式語言,由網頁瀏覽器直接編譯執行,常被簡稱:JS。
最初是 Netscape 公司在 Netscape Navigator 2.0 產品上設計並實現,原名 LiveScript。 1997年已經由 ECMA(歐洲電腦製造商協會) 通過 ECMAScript 實現語言的標準化,所以也稱為 ECMAScript,簡稱 ES ,在2015年 ES 來到第 6 版,有較大幅度的更新,因此在學習使用階段常提到 ES6 以後版本。

Section 1

練習目標:縮圖清單排版 + 替換大圖呈現

Product Introduce

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem repudiandae soluta iste eligendi mollitia ea tempora dignissimos modi vel rerum. Ipsum, expedita! Esse impedit repellat non tempore perspiciatis voluptatem odio?

Quis quasi unde voluptates deserunt. Asperiores deserunt eum earum quod fuga, porro ab et officiis obcaecati velit id consectetur animi iure numquam magnam quae ipsum fugit tempore saepe repudiandae eligendi.

Sint, atque fugiat dolores numquam consequatur architecto facilis commodi unde quo sed autem, mollitia exercitationem dolor ab. Ut fuga voluptas voluptatibus suscipit molestias, nostrum animi, dolores tempora ipsum veritatis voluptates.

Aut, veritatis deleniti. Voluptate, sequi corrupti necessitatibus dolores, eveniet hic neque tempora pariatur praesentium ratione corporis non atque facere aliquam ab laboriosam cupiditate, reiciendis omnis. Magnam nulla corrupti dolor aut.

Section 2

練習目標:頁籤目錄排版 + 縮圖清單排版 + Modal呈現介紹 + Ajax載入資料

天然蘆薈洗顏乳

天然蘆薈化妝水

天然蘆薈精華乳

天然蘆薈精華液

自然保濕洗顏乳

自然保濕化妝水

自然保濕精華乳

自然保濕精華液

蒂莫絲精華眼霜

蒂莫絲特潤精華BB霜

蒂莫絲特潤精華修護液

蒂莫絲特潤精華修護霜

Section 3

練習目標:表單設計 + 欄位檢驗 + 檔案上傳預覽檢查

報名表

姓名:
稱謂:
熟悉語言:
(至少勾選一項) 請至少勾選一項
選擇地區:
留言內容:
報名日期:
報名班次:
選擇顏色:
  • 上傳照片最多 10 張
  • 每張照片容量最高 1M
  • 照片寬度最小 1000px
  • 檔案類型必須是 jpg、png、gif
  • 按下【確定送出】才完成上傳

教案講義 (建議使用電腦查看學習
因此這裡不設計手機版
)