組件實作 : Demo 一、前言 Testimonials 這個組件意思是「證言」,類似推薦信的感覺,也就是網路上的文章底下常見的留言評論區,先不討論這些...
組件實作 : Demo 一、前言 Tooltip 是文字提示的組件,感覺上它很容易被忽略,其實這一個功能在網頁上也很常找到它的芳蹤,其實作的原理,也不會太...
一、前言 Gulp 是工作流程自動化的工具,可以幫我們處理一些需要重複執行的指令,像這類繁瑣的工作,可以交給 Gulp 來處理,在初學 Gulp 時,可以直接...
組件實作 : Demo 一、前言 在寫某些專案或者是練習,時不時會看到::before、::after這類元素的用法,在第一次接觸時,總是會感到困惑,不清...
組件實作 : Demo 一、前言 Animation 動畫是網頁中不可或缺的重要元素,它能夠為網頁帶來生命力,讓整個網頁「活了起來」,在本篇中介紹幾個語法...
組件實作 : Demo 一、前言 關於 JavaScript 的故事其實是這樣的:「JavaScript 誕生於 1995 年的景網通訊(Netscape...
組件實作:Demo 一、前言 Typing Effect 是一種好用的文字效果,看似簡單的語法下,其實藏著一些不太好理解的概念,例如 CSS 的 Anim...
Day 12 - 切版基礎打底(二) : 必學CSS運用 每日一談 嗨,大家好 ! 我是阿蘇今天是Day12,我們一樣繼續談談CSS的實作運用,有哪些是必學、...
一、前言 其實,我也不知道自己怎麼會想加入這個主題,只是有點想要學習 Vim 的基本操作,順便紀錄一下學過的操作方法,現階段我也沒有想要背任何的指令或是快捷鍵...
組件實作 : Demo 一、前言 Tab 組件是一種高互動性的組件,構造是由一個 Menu 選單和一個訊息框組合而成,當選單項目被選中時,會切換到對應的訊...
Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎 每日一談 嗨,大家好 ! 我是阿蘇今天是Day 11,不知不覺終於突破 Day10 啦 !...
組件實作 : Demo 一、前言 網頁上要顯示店家、場地等地理位置資訊,都會使用到 Google 地圖來輔助。在這個篇章中,我們要來研究關於 Google...
組件實作 : Demo 一、前言 Modal 指的是互動視窗,也就是讓畫面跳出一個蓋板訊息框。使用 Modal 背景大多由半透明黑色覆蓋;訊息框(互動視窗...
組件實作 : Demo、Demo2 一、前言 原本預定這篇要來寫 pug 的學習筆記, 但是對於 CSS 的 Position 的用法還有一點不熟悉,所以...
組件實作 : Demo、Demo2 一、前言 Timeline 時間線的功能很常出現在履歷表,或是各種跟年分有關的介紹。原本參考 W3schools Ho...
Day 10 - Prototype 原型互動 / 產品模擬 (Figma 教學) 每日一談 嗨,大家好 ! 我是阿蘇今天是Day10 ,今天來跟大家談談 P...
一、前言 Webpack 是網頁的打包工具。當我們的網頁越寫越大,檔案越來越多(例如一個網站有好幾個.html檔案),甚至還有使用到框架。這時候我們可以使用...
組件實作 : Demo 一、前言 驗證功能(Validate)用途在於能夠避免使用者輸入不符合格式的資料,統一的資料格式方便讓程式處理。Form 表單內容...
Day 8 - Figma 繪製精美 Mockup (一) 每日一談 嗨,大家好 ! 我是阿蘇今天是Day7 我們即將進入設計階段,這邊一樣也是使用 F...
附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 接續上篇~~ 主題筆記 三、放在 Flex items...
成果展示: Demo 一、前言 為了逼迫自己學習 Figma 這個線上工具,於是特別寫這一篇。身為一個前端工程師,為什麼需要特別去學習 UI 設計的工具呢...
組件實作 : Demo 一、前言 Form 表單組件主要出現在需要取得使用者的資訊,比如商品訂單、問卷填寫、選擇操作等等各種需要使用者輸入資料的行為,都可...
有沒有被標題騙進來~ 每次想到剪裁遮色片腦袋裡就會浮現...嘿嘿嘿!今天就帶大家來認識剪裁遮色片,剪裁遮色片顧名思義就是將某個形狀遮在其他圖片上,看到圖片時只會...
Day 7 - 動手繪製 Wireframe 線框稿(Figma教學) 每日一談 嗨 ! 大家好,我是阿蘇今天是Day 7 ,今天會分享 Wireframe...
附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 Day 6 介紹了經典的三大 display,接者就來整理...
組件實作 : Demo 一、前言 當我們在填寫表單資料的時候,有時候會帶入一些郵遞區號的資料,這些資料要一個個去建立,可能需要花滿多時間,這時候我們就可以...
組件實作 : Demo 一、前言 在行動裝置當道的時代,網頁的版面也隨著手機出現而有所改變,為了符合各種裝置較好的閱讀體驗,RWD 技術【1】也隨之誕生。...
學過幾何,圖片當然也是不可或缺的元素!相信大家日常生活中也很常用到圖片縮放、裁切、在圖片上繪圖等功能。今天的圖片範例都會用可愛的動物表情包來做範例,希望大家可以...
附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 接觸排版初期,總是苦惱於元素的換行、並排 ... 主題筆...
標題不知道會不會透露了我的年紀哈哈哈,在下標時不知道為什麼腦袋浮現旋轉、跳躍,我閉著眼!雖然閉著眼是寫不出 code 的~ 聽歌配文章 旋轉!旋轉!旋轉!Rot...