iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 1870 瀏覽

鐵人賽 SideProject30 DAY 11

30天製作RWD個人品牌網站系列第 11 篇

技術 Day11. 切版前知識(一) VSCode 使用教學、擴充套件推薦

嗨～接下來要開始進入切版了，開始切版前，有些必須知道的知識必須了解。之後切版會使用VSCode來做程式撰寫，今天先帶大家認識VSCode這個強大的前端開發軟體吧...

luna0228 ‧ 2023-09-26

0 Like 0 留言 1194 瀏覽

鐵人賽 SideProject30 DAY 18

30天製作RWD個人品牌網站系列第 18 篇

技術 Day18. 切版前知識(八) 響應式網頁(RWD) 大小版畫面規劃

網頁大小版要怎麼規劃呢？在設計稿階段，因為過去工作的關係，比較習慣提桌機版及手機版兩個尺寸。但進入切版階段後，就必須實現每個尺寸下畫面都是符合需求的，所以我會利...

luna0228 ‧ 2023-10-03

0 Like 0 留言 1070 瀏覽

鐵人賽 SideProject30 DAY 6

30天製作RWD個人品牌網站系列第 6 篇

技術 Day6. Figma(1) 教學介紹、繪製Ｗireframe

嗨～從今天開始就是Figma教學了！不知道大家對網頁設計是否有初步的概念了呢？今天會簡單介紹Figma及基本操作方法，再用穿插教學的方式帶著大家使用Figma繪...

luna0228 ‧ 2023-09-21

0 Like 0 留言 1063 瀏覽

鐵人賽 SideProject30 DAY 9

30天製作RWD個人品牌網站系列第 9 篇

技術 Day9. Figma(4) 製作Prototype原型

今天是最後一天的Figma教學，前面幾天介紹了Figma，並以Wireframe為例說明了主要功能的使用方法，應該都有感受到Figma的操作有多簡易、方便了吧！...

luna0228 ‧ 2023-09-24

0 Like 0 留言 940 瀏覽

鐵人賽 SideProject30 DAY 8

30天製作RWD個人品牌網站系列第 8 篇

技術 Day8. Figma(3) 製作Mockup視覺稿

第八天！今天要繼續Figma教學，接下來會先設定好視覺稿尺寸，再依據前面繪製的Wirefame並結合在Day4確定下來的網站風格、用色，忘記的可以回去複習。Da...

luna0228 ‧ 2023-09-23

0 Like 0 留言 927 瀏覽

鐵人賽 SideProject30 DAY 21

30天製作RWD個人品牌網站系列第 21 篇

技術 Day21. 網站開發過程(三) Bootstrap常用元件：Collapse、Accordion、Modal、Navbar

昨天說到Bootstrap的基本內容，Bootstrap很好用的其中一點就是結合了許多前端會使用的元素，製作成元件讓我們可以直接取用，今天會來講講Bootstr...

luna0228 ‧ 2023-10-06

0 Like 0 留言 891 瀏覽

鐵人賽 SideProject30 DAY 24

30天製作RWD個人品牌網站系列第 24 篇

技術 Day24. 網站開發過程(六) 常用JS套件(1)

接下來兩天推薦幾個好用的JS套件，有時候想要的設計不是可以短時間寫成的功能，這時候搭配使用適合的套件，能減少開發時間，大大提升效率，也能讓網站更豐富喔！Day3...

luna0228 ‧ 2023-10-09

0 Like 0 留言 760 瀏覽

鐵人賽 SideProject30 DAY 12

30天製作RWD個人品牌網站系列第 12 篇

技術 Day12. 切版前知識(二) HTML 教學、常用標籤

今天來説說切版時主要用到的技術之一：HTML5。HTML最為人熟知的就是，常用於設計網頁、行動裝置、應用程式等介面設計，網頁瀏覽器能讀取HTML並轉譯成視覺化網...

luna0228 ‧ 2023-09-27

0 Like 0 留言 671 瀏覽

鐵人賽 SideProject30 DAY 20

30天製作RWD個人品牌網站系列第 20 篇

技術 Day20. 網站開發過程(二) Bootstrap介紹、常用語法

不敢相信，我完成2/3的鐵人賽了！接下來也要加油！今天開始是一系列的Bootstrap內容，會從最基本的觀念開始，並推薦常用元件及應用、變化。前面的天數我們談到...

luna0228 ‧ 2023-10-05

0 Like 0 留言 662 瀏覽

鐵人賽 SideProject30 DAY 22

30天製作RWD個人品牌網站系列第 22 篇

技術 Day22. 網站開發過程(四) Bootstrap應用、變化

今天會藉由昨天提到的幾個元件，實際舉範例來說明該如何應用、變化，我個人覺得在腦海中想好畫面最後完成的樣子很重要，我自己習慣的方式是利用VSCode預覽模式，嘗試...

luna0228 ‧ 2023-10-07

0 Like 0 留言 630 瀏覽

鐵人賽 SideProject30 DAY 10

30天製作RWD個人品牌網站系列第 10 篇

技術 Day10. (補充)網頁設計好用工具、網站

終於來到第10天啦！今天再接再厲！網頁設計過程中，其實是很大的工程，往往都不是一天就能完成，今天就要來推薦一些網路上好用的工具、網站，適當配合能夠減少許多不必要...

luna0228 ‧ 2023-09-25

0 Like 0 留言 607 瀏覽

鐵人賽 SideProject30 DAY 28

30天製作RWD個人品牌網站系列第 28 篇

技術 Day28. Git版控工具(二) GitHub、GitHub Desktop

昨天說完Git，今天要來聊聊GitHub是什麼，還有帶著利用GitHub Desktop上版、更新專案，那就開始吧！Day3-5. 制定網站內容Day6-9....

luna0228 ‧ 2023-10-13

0 Like 0 留言 589 瀏覽

鐵人賽 SideProject30 DAY 17

30天製作RWD個人品牌網站系列第 17 篇

技術 Day17. 切版前知識(七) 響應式網頁(RWD) 介紹

今天要來說說RWD響應式網頁，應該大部分的人都有聽過或知道RWD這個名稱，他是現在網頁設計趨勢最基本需要具備的設計原則，幾乎可以說近年來的網站都會實現RWD或大...

luna0228 ‧ 2023-10-02

0 Like 0 留言 562 瀏覽

鐵人賽 SideProject30 DAY 13

30天製作RWD個人品牌網站系列第 13 篇

技術 Day13. 切版前知識(三) CSS介紹、選擇器、常用屬性

嗨～從今天開始是一系列的CSS內容，前一章說到瀏覽器會讀取HTML轉譯成視覺化網頁，並搭配CSS、JavaScript使用。CSS負責網頁呈現的樣式、外觀，Ja...

luna0228 ‧ 2023-09-28

0 Like 0 留言 562 瀏覽

鐵人賽 SideProject30 DAY 25

30天製作RWD個人品牌網站系列第 25 篇

技術 Day25. 網站開發過程(七) 常用JS套件(2)

今天會接下去推薦幾個好用的JS套件，但跟昨天不太一樣的是，今天推薦的套件都是很需要讀文件，比較進階需要設定比較多內容的套件，但只要有依文件製作就能呈現很多種變化...

luna0228 ‧ 2023-10-10

0 Like 0 留言 553 瀏覽

鐵人賽 SideProject30 DAY 7

30天製作RWD個人品牌網站系列第 7 篇

技術 Day7. Figma(2) 插件推薦

嗨大家好，前面幾天內容有點多，今天來談談比較輕鬆的。Figma有許多強大的功能之外，也有許多神人提供插件，可以更多樣、方便製作想呈現的效果，這邊來介紹幾個我常用...

luna0228 ‧ 2023-09-22

0 Like 2 留言 546 瀏覽

鐵人賽 SideProject30 DAY 15

30天製作RWD個人品牌網站系列第 15 篇

技術 Day15. 切版前知識(五) CSS偽元素 ::before、::after

嗨～今天是第15天！終於一半啦！！！今天要來談談CSS的偽元素，有了偽元素讓元素能添加更多效果、變化，網頁設計也能更多樣，是很常用的設定之一。前面的天數有談到：...

luna0228 ‧ 2023-09-30

0 Like 0 留言 526 瀏覽

鐵人賽 SideProject30 DAY 14

30天製作RWD個人品牌網站系列第 14 篇

技術 Day14. 切版前知識(四) CSS進階屬性：Flexbox、transition、transform和更多

先祝大家中秋節快樂！雖然是休假，但鐵人賽不能休息啊嗚嗚不管怎麼說，還是趕快進入今天的內容吧～昨天談到CSS的基本認識並介紹了選擇器、常用屬性，忘記的記得回去看。...

luna0228 ‧ 2023-09-29

0 Like 0 留言 522 瀏覽

鐵人賽 SideProject30 DAY 29

30天製作RWD個人品牌網站系列第 29 篇

技術 Day29. Git版控工具(三) Vercel 網站部署

網站製作完成後，最後就只剩下「部署」啦！通常要將網站上架到網路上，擁有一個屬於自己的網址，是需要額外費用的，但最近很熱門的Vercel提供免費網站部署服務，讓有...

luna0228 ‧ 2023-10-14

0 Like 0 留言 519 瀏覽

鐵人賽 SideProject30 DAY 19

30天製作RWD個人品牌網站系列第 19 篇

技術 Day19. 網站開發過程(一) 共用Layout

今天開始正式進入切版，會先區分共用Layout優先製作，再利用bootstrap的框架，說明我通常如何切版，在這之前先複習一下前面的內容吧！Day3-5. 制定...

luna0228 ‧ 2023-10-04

0 Like 0 留言 518 瀏覽

鐵人賽 SideProject30 DAY 5

30天製作RWD個人品牌網站系列第 5 篇

技術 Day5. 網頁UI設計-Wireframe線框稿

到Day5啦！已經到個小段落了，那就再說明一下，這次的挑戰是以我的作品集為範例，分享給大家RWD靜態網站從頭到尾的製作過程，希望過了這30天你也能創造屬於自己的...

luna0228 ‧ 2023-09-20

0 Like 0 留言 511 瀏覽

鐵人賽 SideProject30 DAY 23

30天製作RWD個人品牌網站系列第 23 篇

技術 Day23. 網站開發過程(五) RWD製作

今天要談實際用CSS調整實現RWD製作。再開始聊RWD製作前，可以先回去複習前面這兩部分，有很大的關聯～Day13-16. 切版前知識-CSSDay17-18....

luna0228 ‧ 2023-10-08

0 Like 0 留言 491 瀏覽

鐵人賽 SideProject30 DAY 27

30天製作RWD個人品牌網站系列第 27 篇

技術 Day27. Git版控工具(一) Git介紹

網站製作完成後，有兩件事還需要做，那就是「部署」、「維護」，這兩項都很需要版本控制工具的協助，就先來談談Git這個版控工具吧！當在自己的本機製作、設計時，因為更...

luna0228 ‧ 2023-10-12

0 Like 0 留言 483 瀏覽

鐵人賽 SideProject30 DAY 2

30天製作RWD個人品牌網站系列第 2 篇

技術 Day2. 主題大綱介紹

前一篇有簡單介紹自己、參賽原因及提及主題今天要來說明這次主題的大綱及預計會有的內容，首先先提供作為範例的我的線上作品集參考。那就開始吧！Luna的線上作品集使...

luna0228 ‧ 2023-09-17

0 Like 0 留言 426 瀏覽

鐵人賽 SideProject30 DAY 1

30天製作RWD個人品牌網站系列第 1 篇

技術 Day1. 前言

Hi～大家好，我是Luna這是我第一次參加鐵人賽，在這之前因為學習、工作上查資料時常常會看到IT邦的文章，沒想到自己有一天也會參與在其中。在第一天想先簡單介紹...

luna0228 ‧ 2023-09-16

0 Like 0 留言 424 瀏覽

鐵人賽 SideProject30 DAY 4

30天製作RWD個人品牌網站系列第 4 篇

技術 Day4. 如何制定網站內容？

有了靈感以後，就要開始規劃網站要放入什麼內容啦！每個人的方式不太一樣，可以善用「5W1H」來思考，也就是Why、What、Where、When、Who、How，...

luna0228 ‧ 2023-09-19

0 Like 0 留言 423 瀏覽

鐵人賽 SideProject30 DAY 30

30天製作RWD個人品牌網站系列第 30 篇

技術 Day30. 結語、心得

喔耶！終於可以脫離苦海了！！今天就是我的鐵人賽最後一天2023/10/15 一定要好好記錄起來！雖說報名鐵人賽的初衷只是因為教授的要求，但在想要寫什麼主題的時...

luna0228 ‧ 2023-10-15

0 Like 0 留言 404 瀏覽

鐵人賽 SideProject30 DAY 26

30天製作RWD個人品牌網站系列第 26 篇

技術 Day26. 網站開發過程(八) 互動設計、添加微互動

倒數五篇，也是網站開發的最後一篇，今天要來聊聊互動設計、微互動。現在的網站除了RWD是不可或缺的之外，在網站中添加各種互動設計也是重要趨勢，小的可以是文字、區塊...

luna0228 ‧ 2023-10-11

0 Like 0 留言 391 瀏覽

鐵人賽 SideProject30 DAY 3

30天製作RWD個人品牌網站系列第 3 篇

技術 Day3. 找尋靈感

做任何事一開始總是最困難的，做網站也一樣，當不知道從何開始時，會很需要一些靈感來激發自己的創意，所以可以養成在日常生活中常常留意看過的設計、網站等等，將喜歡內容...

luna0228 ‧ 2023-09-18

0 Like 0 留言 364 瀏覽

鐵人賽 SideProject30 DAY 16

30天製作RWD個人品牌網站系列第 16 篇

技術 Day16. 切版前知識(六) CSS動畫 Animation

今天是CSS最後一章，最後來講講CSS動畫，運用CSS能夠製作一些基本的動畫，讓畫面更有趣！除了前面說過的transition屬性能利用過渡效果呈現簡單的小動畫...

luna0228 ‧ 2023-10-01