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

0 Like 0 留言 1988 瀏覽

鐵人賽 SideProject30 DAY 24

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

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

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

luna0228 ‧ 2023-10-09

0 Like 0 留言 1186 瀏覽

鐵人賽 Modern Web DAY 21

連我阿公都會-手把手教你架網站系列第 21 篇

技術【Day21】前端框架淺談＆React環境

在寫了數個的純前端的專案後，我們會發現，每個專案幾乎都會寫到一樣的東西。為了方便，從以前的專案copy一些元件套用在新的專案上是常有的事，但又要因應新專案而反覆...

ttdragon0722 ‧ 2023-10-06 ‧團隊最強資工大電神

0 Like 0 留言 1323 瀏覽

鐵人賽 Modern Web DAY 19

連我阿公都會-手把手教你架網站系列第 19 篇

技術【Day19】常見切版應用（3-1）頁頂Header實作

在介紹完了前兩日的可滑動選單與彈跳視窗後，今天我們將要進入 ── 頁頂Header的實作。 header的詳細作用和規劃在我們的前導：《網頁的基礎設計理論》已有...

ttdragon0722 ‧ 2023-10-04 ‧團隊最強資工大電神

0 Like 0 留言 860 瀏覽

鐵人賽 Modern Web DAY 16

連我阿公都會-手把手教你架網站系列第 16 篇

技術【Day16】Github介紹：讓大家看到你的網頁！

在前面14天中，我們一同學習，並且大概了解如何做一個網站了。而今天！我將帶您了解GitHub，並將您所製作的網站，透過存放在GitHub內，散播出去，讓更多人看...

ttdragon0722 ‧ 2023-10-01 ‧團隊最強資工大電神

0 Like 0 留言 462 瀏覽

鐵人賽 Modern Web DAY 15

連我阿公都會-手把手教你架網站系列第 15 篇

技術【Day15】專題實作：簡易計算機

前些日子呢，我們一同學習了許多有關網頁三件套 —— HTML、CSS、JS的內容。納在本日的篇章中，我將帶著您使用這幾日所學，來實作出一個計算機的應用！完成效...

ttdragon0722 ‧ 2023-09-30 ‧團隊最強資工大電神

0 Like 0 留言 716 瀏覽

鐵人賽 SideProject30 DAY 23

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

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

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

luna0228 ‧ 2023-10-08

0 Like 0 留言 1187 瀏覽

鐵人賽 SideProject30 DAY 22

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

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

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

luna0228 ‧ 2023-10-07

0 Like 0 留言 1925 瀏覽

鐵人賽 SideProject30 DAY 21

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

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

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

luna0228 ‧ 2023-10-06

0 Like 0 留言 1246 瀏覽

鐵人賽 SideProject30 DAY 20

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

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

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

luna0228 ‧ 2023-10-05

0 Like 0 留言 2875 瀏覽

鐵人賽 SideProject30 DAY 18

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

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

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

luna0228 ‧ 2023-10-03

0 Like 0 留言 1496 瀏覽

鐵人賽 Modern Web DAY 14

連我阿公都會-手把手教你架網站系列第 14 篇

技術【Day14】Javascript物件設計！我所知道的物件導向。

本篇，我們要提到的是程式語言中，非常重要的概念 —— 物件導向。聽著好像很複雜，其實我們現實生活都充滿了物件導向的概念。淺顯一點地解釋，便是把細小的東西以「物...

ttdragon0722 ‧ 2023-09-29 ‧團隊最強資工大電神

0 Like 0 留言 1890 瀏覽

鐵人賽 Modern Web DAY 13

連我阿公都會-手把手教你架網站系列第 13 篇

技術【Day13】讓網頁動起來（3）使用GSAP設計動畫！

上網衝浪是現代人人具備的技能，您是否曾在某些商業網站看過一些炫酷異常的動畫？就拿Apple（台灣）的官網來舉例，隨便點選進入它們任意商品的頁面，往下滑動，便會有...

ttdragon0722 ‧ 2023-09-28 ‧團隊最強資工大電神

0 Like 0 留言 1917 瀏覽

鐵人賽 Modern Web DAY 12

連我阿公都會-手把手教你架網站系列第 12 篇

技術【Day12】讓網頁動起來（2）元老級插件jQuery！

上一篇中，我們淺談了JavaScript的基礎，但想要更加深入JS的領域，光有基礎的概念是遠遠不夠的。因此，本篇將為您借紹JS中的最受歡迎的元老級插件 ── j...

ttdragon0722 ‧ 2023-09-27 ‧團隊最強資工大電神

0 Like 0 留言 866 瀏覽

鐵人賽 SideProject30 DAY 17

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

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

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

luna0228 ‧ 2023-10-02

0 Like 0 留言 1049 瀏覽

鐵人賽 Modern Web DAY 11

連我阿公都會-手把手教你架網站系列第 11 篇

技術【Day11】讓網頁動起來（1） → Javascript 速成

在前面的七篇中，我們講解了構成網頁設計的基礎要素：CSS。但這遠遠是不夠的，CSS只能賦予網頁靜態的美術效果與資訊展示。然而，我們對現代網站的期望通常都具備動態...

ttdragon0722 ‧ 2023-09-26 ‧團隊最強資工大電神

0 Like 0 留言 542 瀏覽

鐵人賽 SideProject30 DAY 16

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

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

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

luna0228 ‧ 2023-10-01

0 Like 0 留言 1240 瀏覽

鐵人賽 SideProject30 DAY 13

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

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

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

luna0228 ‧ 2023-09-28

0 Like 2 留言 882 瀏覽

鐵人賽 SideProject30 DAY 15

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

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

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

luna0228 ‧ 2023-09-30

0 Like 1 留言 2773 瀏覽

鐵人賽 SideProject30 DAY 11

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

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

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

luna0228 ‧ 2023-09-26

0 Like 0 留言 1151 瀏覽

鐵人賽 SideProject30 DAY 12

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

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

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

luna0228 ‧ 2023-09-27

0 Like 0 留言 725 瀏覽

鐵人賽 Modern Web DAY 10

連我阿公都會-手把手教你架網站系列第 10 篇

技術【Day10】前端撰寫（7）CSS框架

在前幾日中，我們總共講解了六篇CSS的基本屬性，內容之多，但都僅是蜻蜓點水的帶過而已，可見CSS的上限非常之高，學習它必然是一段漫長之路。以前在設計網頁時，我...

ttdragon0722 ‧ 2023-09-25 ‧團隊最強資工大電神

0 Like 0 留言 1134 瀏覽

鐵人賽 Modern Web DAY 9

連我阿公都會-手把手教你架網站系列第 9 篇

技術【Day09】前端撰寫（6）淺談RWD響應式網頁設計

擷自 digitalsynopsis.com 在前面的篇章中，我們學習了如何撰寫CSS的各個屬性來設計出精美的網頁，但您是否有想過：「用電腦設計出來的網頁，為...

ttdragon0722 ‧ 2023-09-24 ‧團隊最強資工大電神

0 Like 0 留言 1288 瀏覽

鐵人賽 Modern Web DAY 8

連我阿公都會-手把手教你架網站系列第 8 篇

技術【Day08】前端撰寫（5）CSS Position

在上一篇中，我們提到了CSS中，快速排版向的屬性：display: flex 。但有時，flex並不適用於較小且單一的元件，也無法協助我們更精細地刻出我們所想要...

ttdragon0722 ‧ 2023-09-23 ‧團隊最強資工大電神

0 Like 0 留言 402 瀏覽

鐵人賽影片教學 DAY 7

一起來實作響應式網頁設計系列第 7 篇

技術一起來實作響應式網頁設計：CSS的各種選擇器 Day7

影片教學重點回顧昨天的教學影片當中，我們了解如何轉寫CSS來套用到指定的選擇器當中，而昨天我們使用HTML的元素作為選擇器來套用，今天將要介紹其他選擇器，...

coding19 ‧ 2023-09-22

0 Like 0 留言 1030 瀏覽

鐵人賽 Modern Web DAY 7

連我阿公都會-手把手教你架網站系列第 7 篇

技術【Day07】前端撰寫（4）CSS Flex屬性，並使用Flex做一個簡單頁尾（Footer）

在本篇中，我們將介紹CSS中的flex。如同它的名字flex般，這個屬性非常具有彈性，有著能夠適應各個網頁縮放比例的自適應能力，可以說是我們在做網頁設計中的排版...

ttdragon0722 ‧ 2023-09-22 ‧團隊最強資工大電神

0 Like 0 留言 985 瀏覽

鐵人賽 Modern Web DAY 6

連我阿公都會-手把手教你架網站系列第 6 篇

技術【Day06】前端撰寫（3）CSS基本樣式

在上一篇中，我們學習了如何選擇並指定我們所需的元件並對其進行客製化。本篇我們來將淺談一些CSS基本、又好用的樣式，了解這些屬性，保證能讓您在網頁設計上更加得心應...

ttdragon0722 ‧ 2023-09-21 ‧團隊最強資工大電神

0 Like 0 留言 2439 瀏覽

鐵人賽 WordPress DAY 11

【輕鬆學習，輕鬆教學】跟著我的步驟，輕鬆架設屬於你的學習管理平台！系列第 11 篇

技術 Day11 網站設計工具 - Figma 設計師都在用的工具

網站設計工具 - Figma Figma是一個非常流行的設計和協作工具，特別適用於設計師和團隊。它允許使用者創建、共享、評論和協作設計項目。以下是對Figma...

pellok ‧ 2023-09-22

0 Like 0 留言 883 瀏覽

鐵人賽 SideProject30 DAY 10

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

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

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

luna0228 ‧ 2023-09-25

0 Like 0 留言 1725 瀏覽

鐵人賽 SideProject30 DAY 9

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

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

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

luna0228 ‧ 2023-09-24

0 Like 0 留言 1859 瀏覽

鐵人賽 SideProject30 DAY 8

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

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

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

luna0228 ‧ 2023-09-23

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

技術 【Day21】前端框架淺談＆React環境

技術 【Day19】常見切版應用（3-1）頁頂Header實作

技術 【Day16】Github介紹：讓大家看到你的網頁！

技術 【Day15】專題實作：簡易計算機