Day 12 - 切版基礎打底(二) : 必學CSS運用 每日一談 嗨，大家好 ! 我是阿蘇今天是Day12，我們一樣繼續談談CSS的實作運用，有哪些是必學、...
Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎 每日一談 嗨，大家好 ! 我是阿蘇今天是Day 11，不知不覺終於突破 Day10 啦 !...
一、前言 Webpack 是網頁的打包工具。當我們的網頁越寫越大，檔案越來越多（例如一個網站有好幾個.html檔案），甚至還有使用到框架。這時候我們可以使用...
組件實作 : Demo 一、前言 驗證功能（Validate）用途在於能夠避免使用者輸入不符合格式的資料，統一的資料格式方便讓程式處理。Form 表單內容...
成果展示: Demo 一、前言 為了逼迫自己學習 Figma 這個線上工具，於是特別寫這一篇。身為一個前端工程師，為什麼需要特別去學習 UI 設計的工具呢...
附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！ 背景脈絡 接續上篇～～ 主題筆記 三、放在 Flex items...
有沒有被標題騙進來～ 每次想到剪裁遮色片腦袋裡就會浮現...嘿嘿嘿！今天就帶大家來認識剪裁遮色片，剪裁遮色片顧名思義就是將某個形狀遮在其他圖片上，看到圖片時只會...
附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！ 背景脈絡 Day 6 介紹了經典的三大 display，接者就來整理...
組件實作 : Demo 一、前言 當我們在填寫表單資料的時候，有時候會帶入一些郵遞區號的資料，這些資料要一個個去建立，可能需要花滿多時間，這時候我們就可以...
組件實作 : Demo 一、前言 Form 表單組件主要出現在需要取得使用者的資訊，比如商品訂單、問卷填寫、選擇操作等等各種需要使用者輸入資料的行為，都可...
組件實作 : Demo 一、前言 在行動裝置當道的時代，網頁的版面也隨著手機出現而有所改變，為了符合各種裝置較好的閱讀體驗，RWD 技術【1】也隨之誕生。...
學過幾何，圖片當然也是不可或缺的元素！相信大家日常生活中也很常用到圖片縮放、裁切、在圖片上繪圖等功能。今天的圖片範例都會用可愛的動物表情包來做範例，希望大家可以...
Day 7 - 動手繪製 Wireframe 線框稿(Figma教學) 每日一談 嗨 ! 大家好，我是阿蘇今天是Day 7 ，今天會分享 Wireframe...
Day 10 - Prototype 原型互動 / 產品模擬 (Figma 教學) 每日一談 嗨，大家好 ! 我是阿蘇今天是Day10 ，今天來跟大家談談 P...
Day 8 - Figma 繪製精美 Mockup (一) 每日一談 嗨，大家好 ! 我是阿蘇今天是Day7 我們即將進入設計階段，這邊一樣也是使用 F...
Day 6 - Wireframe 線框稿 每日一談 嗨 ! 大家好，我是阿蘇不知不覺就來到了 Day 6 ，有沒有開始對 Side Project 有些靈...
一、前言 在寫網頁時，除了命名規則、排版會讓我們感到困擾之外，顏色搭配也是我們會感到糾結的一部分。配色是一種直觀的感受，所以要掌握它並不是那麼的容易，接下來我...
組件實作 : Demo 一、前言 Card 組件通常會出現在像是購物網站的商品資訊，或是影片追劇等電影介紹中，其實只要是文字加上圖片的一個群組，都可以是一...
標題不知道會不會透露了我的年紀哈哈哈，在下標時不知道為什麼腦袋浮現旋轉、跳躍，我閉著眼！雖然閉著眼是寫不出 code 的～ 聽歌配文章 旋轉！旋轉！旋轉！Rot...
Day 5 - 開發前準備(三) : 蒐集資料、擬定風格 每日一談 嗨 ! 大家好，我是阿蘇又來到了Day 5，今天來談談比較輕鬆的主題那就是如何蒐集 Sid...
開發前準備(二):規劃開發期程 每日一談 嗨大家好 ! 我是阿蘇今天是 DAY4，今天談的主題是 Side Project 規劃開發期程，不要小看開發前的規劃...
一、前言 不管前端或是後端，Git 都是一個重要的工具，Git 其實就是一堆用來控制版本狀態的指令（版本控制），還有另外一個東西叫做 GitHub，它能夠遠端...
附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！ 背景脈絡 原本以為自己已經懂 Hoisting(提升)，但今天再次接...
一、前言 從不會寫文章，到開始經營 Blog 這個過程，經歷了一些波折，從最早「無名小站」（時代的眼淚）開始經營第一個 Blog 到租借虛擬主機架設 Word...
組件實作 : Demo 一、前言 今天我們要來製作 Loader 的組件，Loader 組件主要會出現在換頁或是網頁刷新（例如 AJAX）的等待時間，除了...
組件實作 : Demo 一、前言 slideshow 幻燈片組件可以為網頁帶來動態的效果，與使用者產生互動，我們用 6 張圖片組成一個輪播視窗。你除了可以...
附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！ 背景脈絡 不知道大家有沒有產生過這樣的疑問.. const pers...
附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！ 背景脈絡 接觸排版初期，總是苦惱於元素的換行、並排 ... 主題筆...
開發前準備(一) : 發想主題 每日一談 嗨大家好 ! 我是阿蘇今天是 DAY3，今天來開始進入正題，談談 Side Project 主題，中間也會分享自己開...
一、前言 你是不是曾經有過一種經驗，就是當你努力的讀書，努力的學習，網路上查了一堆資料，也寫了一堆筆記，記在腦袋裡面的東西過了幾天之後就全部遺忘，彷彿不存在過...
阿蘇蘇
東尼先生
珊迪
iThome鐵人賽
看影片追技術