iT邦幫忙

前端相關文章
共有 615 則文章
鐵人賽 Modern Web DAY 12

技術 Day 12 - 切版基礎打底(二) : 必學CSS運用

Day 12 - 切版基礎打底(二) : 必學CSS運用 每日一談 嗨,大家好 ! 我是阿蘇今天是Day12,我們一樣繼續談談CSS的實作運用,有哪些是必學、...

鐵人賽 Modern Web DAY 11

技術 Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎

Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎 每日一談 嗨,大家好 ! 我是阿蘇今天是Day 11,不知不覺終於突破 Day10 啦 !...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10:Webpack 學習筆記

一、前言 Webpack 是網頁的打包工具。當我們的網頁越寫越大,檔案越來越多(例如一個網站有好幾個.html檔案),甚至還有使用到框架。這時候我們可以使用...

鐵人賽 Modern Web DAY 10

技術 Day 10:Form 驗證功能實作

組件實作 : Demo 一、前言 驗證功能(Validate)用途在於能夠避免使用者輸入不符合格式的資料,統一的資料格式方便讓程式處理。Form 表單內容...

鐵人賽 自我挑戰組 DAY 9

技術 Day 09:UI 設計工具 Figma 快速入門

成果展示: Demo 一、前言 為了逼迫自己學習 Figma 這個線上工具,於是特別寫這一篇。身為一個前端工程師,為什麼需要特別去學習 UI 設計的工具呢...

技術 2022 鐵人賽|Day8 【CSS】排版寵兒 Flexbox - 下篇

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 接續上篇~~ 主題筆記 三、放在 Flex items...

鐵人賽 Modern Web DAY 8

技術 第 8 幅 - 剪裁遮色片,隨心所欲留下「重點部位」

有沒有被標題騙進來~ 每次想到剪裁遮色片腦袋裡就會浮現...嘿嘿嘿!今天就帶大家來認識剪裁遮色片,剪裁遮色片顧名思義就是將某個形狀遮在其他圖片上,看到圖片時只會...

技術 2022 鐵人賽|Day7 【CSS】排版寵兒 Flexbox - 上篇

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 Day 6 介紹了經典的三大 display,接者就來整理...

鐵人賽 自我挑戰組 DAY 8

技術 Day 08:臺灣郵遞區號

組件實作 : Demo 一、前言 當我們在填寫表單資料的時候,有時候會帶入一些郵遞區號的資料,這些資料要一個個去建立,可能需要花滿多時間,這時候我們就可以...

鐵人賽 Modern Web DAY 9

技術 Day 09:Form 組件實作

組件實作 : Demo 一、前言 Form 表單組件主要出現在需要取得使用者的資訊,比如商品訂單、問卷填寫、選擇操作等等各種需要使用者輸入資料的行為,都可...

鐵人賽 Modern Web DAY 8

技術 Day 08:RWD 響應式排版實作

組件實作 : Demo 一、前言 在行動裝置當道的時代,網頁的版面也隨著手機出現而有所改變,為了符合各種裝置較好的閱讀體驗,RWD 技術【1】也隨之誕生。...

鐵人賽 Modern Web DAY 7

技術 第 7 幅 - 加入真實圖片,讓你的 Canvas 更有料

學過幾何,圖片當然也是不可或缺的元素!相信大家日常生活中也很常用到圖片縮放、裁切、在圖片上繪圖等功能。今天的圖片範例都會用可愛的動物表情包來做範例,希望大家可以...

鐵人賽 Modern Web DAY 7

技術 Day 7 - 動手繪製 Wireframe 線框稿(Figma教學)

Day 7 - 動手繪製 Wireframe 線框稿(Figma教學) 每日一談 嗨 ! 大家好,我是阿蘇今天是Day 7 ,今天會分享 Wireframe...

鐵人賽 Modern Web DAY 10

技術 Day 10 - Prototype 原型互動 / 產品模擬

Day 10 - Prototype 原型互動 / 產品模擬 (Figma 教學) 每日一談 嗨,大家好 ! 我是阿蘇今天是Day10 ,今天來跟大家談談 P...

鐵人賽 Modern Web DAY 8

技術 Day 8 - Figma 繪製精美 Mockup (一)

Day 8 - Figma 繪製精美 Mockup (一) 每日一談 嗨,大家好 ! 我是阿蘇今天是Day7 我們即將進入設計階段,這邊一樣也是使用 F...

鐵人賽 Modern Web DAY 6

技術 Day 6 - Wireframe 線框稿

Day 6 - Wireframe 線框稿 每日一談 嗨 ! 大家好,我是阿蘇不知不覺就來到了 Day 6 ,有沒有開始對 Side Project 有些靈...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07:色彩的基本入門

一、前言 在寫網頁時,除了命名規則、排版會讓我們感到困擾之外,顏色搭配也是我們會感到糾結的一部分。配色是一種直觀的感受,所以要掌握它並不是那麼的容易,接下來我...

鐵人賽 Modern Web DAY 7

技術 Day 07:Card 組件實作

組件實作 : Demo 一、前言 Card 組件通常會出現在像是購物網站的商品資訊,或是影片追劇等電影介紹中,其實只要是文字加上圖片的一個群組,都可以是一...

鐵人賽 Modern Web DAY 6

技術 第 6 幅 - 圖形應用:旋轉!變形!我閉著眼~

標題不知道會不會透露了我的年紀哈哈哈,在下標時不知道為什麼腦袋浮現旋轉、跳躍,我閉著眼!雖然閉著眼是寫不出 code 的~ 聽歌配文章 旋轉!旋轉!旋轉!Rot...

鐵人賽 Modern Web DAY 5

技術 Day 5 - 開發前準備(三) : 蒐集資料、擬定風格

Day 5 - 開發前準備(三) : 蒐集資料、擬定風格 每日一談 嗨 ! 大家好,我是阿蘇又來到了Day 5,今天來談談比較輕鬆的主題那就是如何蒐集 Sid...

鐵人賽 Modern Web DAY 4

技術 Day 4 - 開發前準備(二):規劃開發期程

開發前準備(二):規劃開發期程 每日一談 嗨大家好 ! 我是阿蘇今天是 DAY4,今天談的主題是 Side Project 規劃開發期程,不要小看開發前的規劃...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06:Git 學習筆記

一、前言 不管前端或是後端,Git 都是一個重要的工具,Git 其實就是一堆用來控制版本狀態的指令(版本控制),還有另外一個東西叫做 GitHub,它能夠遠端...

技術 2022 鐵人賽|Day4 【Javascript】關於 Hoisting

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 原本以為自己已經懂 Hoisting(提升),但今天再次接...

鐵人賽 自我挑戰組 DAY 5

技術 Day 05:寫作帶給我的人生意義

一、前言 從不會寫文章,到開始經營 Blog 這個過程,經歷了一些波折,從最早「無名小站」(時代的眼淚)開始經營第一個 Blog 到租借虛擬主機架設 Word...

鐵人賽 Modern Web DAY 6

技術 Day 06:Loader 組件實作

組件實作 : Demo 一、前言 今天我們要來製作 Loader 的組件,Loader 組件主要會出現在換頁或是網頁刷新(例如 AJAX)的等待時間,除了...

鐵人賽 Modern Web DAY 5

技術 Day 05:Slideshow 組件實作

組件實作 : Demo 一、前言 slideshow 幻燈片組件可以為網頁帶來動態的效果,與使用者產生互動,我們用 6 張圖片組成一個輪播視窗。你除了可以...

技術 2022 鐵人賽|Day5 【Javascript】const 失靈? 關於 Data types

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 不知道大家有沒有產生過這樣的疑問.. const pers...

技術 2022 鐵人賽|Day6 【CSS】三大典型 display

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 接觸排版初期,總是苦惱於元素的換行、並排 ... 主題筆...

鐵人賽 Modern Web DAY 3

技術 Day 3 - 開發前準備(一) : 發想主題

開發前準備(一) : 發想主題 每日一談 嗨大家好 ! 我是阿蘇今天是 DAY3,今天來開始進入正題,談談 Side Project 主題,中間也會分享自己開...

鐵人賽 自我挑戰組 DAY 4

技術 Day 04:論如何學習

一、前言 你是不是曾經有過一種經驗,就是當你努力的讀書,努力的學習,網路上查了一堆資料,也寫了一堆筆記,記在腦袋裡面的東西過了幾天之後就全部遺忘,彷彿不存在過...