HTML-CSS-practice

名片設計範例

Html Css

Demo: 01.Namecard_Design

品牌網頁視覺引導

Html Css Saas Mixin and Css Variables

Demo: 02.Style_Guideline

HTML attr 屬性練習

Html Css Attr

Demo: 03.Attr_Practice

LINE 切版簡單練習

Html Css

Demo: 04.LINE_Simple_Wrap

Hover & Active 練習

Html Css Hover Active

Demo: 05.Hover_Active_Practice

CSS Keyframes 動畫練習一

Html Css Keyframes

Demo: 06.Keyframes_Practice1

CSS Keyframes 動畫練習二

Html Css Keyframes Animation-timing-function

Demo: 07.Keyframes_Practice2

靜態 SVG 練習

Html Css SVG

Demo: 08.Static_SVG_Practice

動態 SVG 練習

Html Css SVG Animation

Demo: 09.Dynamic_SVG_Practice

小專案 - 動態天氣盒子

Html Css SVG Animation InputChecked

Demo: 10.Project_Weather_Box

JQuery 計數器

Html Css JQuery

Demo: 11.JQuery_Counter

JSON 菜單

Html Css JQuery JSON Js Array

Demo: 12.JSON_Menu

動態改變 iPhone 外觀

Html Css JQuery

Demo: 13.IPhone_Version_Displayer

Ajax 載入 API 練習

Html Css JQuery Ajax

Demo: 14.Ajax_Practice

動態產生購物車

Html Css JQuery

Demo: 15.Shopping_Cart

Ajax 產生購物車

Html Css JQuery Ajax

Demo: 16.Ajax_Shopping_Cart

RWD max-width & min-width 練習

Html Css RWD

Demo: 17.RWD_Max_Min_Width

RWD 特定條件重新排版

Html Css RWD @media

Demo: 18.RWD_Width_Condition

文字上下移動效果練習

Html Css

Demo: 19.Text_Changing_Effect

Boostrap 基礎練習

Html Css Boostrap

Demo: 20.Bootstrap_Basic_Practice

Boostrap 網格練習

Html Css Boostrap

Demo: 21.Bootstrap_Grid_Practice

Slack 版面切版

Html Css

Demo: 22.Project_Slack_Layout

PlaylistExplore 網站切版

Html Css

Demo: 23.Project_PlaylistExplore_UI

HTML 可拖曳元素練習

Html Css Drag

Demo: 24.Drag_Box_Practice

拖曳清單改變順序

Html Css Drag

Demo: 25.Drag_List_Practice

簡易動畫複習

Html Css Keyframes

Demo: 26.Simple_Animation

播放清單卡片

Html Css

Demo: 27.Playlist_Card

用偽類別和偽元素實作有陰影標題

Pseudo-classes Pseudo-element

Demo: 28.Pseudo_Title

Medium 文章清單設計

Html Css

Demo: 29.Medium_Articles_List

Slack Icon Hover 效果

Html Css

Demo: 30.Slack-icon-hover-effect

純 CSS 半圓與動畫

Html Css Animation

Demo: 31.Semicircle-Animation

三角形

Html Css

Demo: 32.Trangle

三角形牆

Html Css

Demo: 33.Triangle-Wall

蓮花

Html Css

Demo: 34.Lotus

生成蓮花

Html Css

Demo: 35.Lotus-Animation

生成色彩蓮花

Html Css

Demo: 36.Lotus-Animation-Variant

色彩原牆

Html Css

Demo: 37.Color

色彩原牆

Html Css

Demo: 38.Color-Circle

時區們

Html Css

Demo: 39.Time-Zones

錯視滑動圖片

Html Css js

Demo: 40.Sliding-Image-Track

錯視滑動圖片牆

Html Css js

Demo: 41.Sliding-Image-Track-Wall

清單按鈕動畫

Html Css

Demo: 42.Menu-Button-Animation