iT邦幫忙

2025 iThome 鐵人賽

DAY 1
0
Modern Web

30天打造純前端互動小遊戲網站系列 第 1

Day 1 | 挑戰開始 & 認識前端開發工具

  • 分享至 

  • xImage
  •  

Day 1|挑戰開始 & 認識前端開發工具

今天是我參加 iT 邦幫忙 30 天鐵人賽的第一天!
這次挑戰的主題是「30 天打造純前端小遊戲網站」,全程只使用HTML、CSS、JavaScript,不會接觸任何後端技術。

為什麼選擇前端:
前端開發是所有網頁互動的門面,
透過 HTML 建立結構、CSS 呈現樣式、JavaScript 實現互動,
就能做出任何人打開瀏覽器就能立即體驗的作品。
這也是我最感興趣的領域!
可以馬上在畫面上看到成果
靈活的設計與動畫讓網站更有生命力
部署簡單,只要一個靜態伺服器就能公開分享

這次會用到的工具:
VS Code:程式編輯器,內建許多前端套件,像是 Live Server 可以即時預覽網頁。
Git & GitHub:版本控制與雲端儲存,最後會用 GitHub Pages 免費部署遊戲網站。
Chrome DevTools:偵錯、調整排版、檢查 RWD 的好幫手。

今天的進度

  1. 確認挑戰方向:確定要做一個可直接線上遊玩的前端小遊戲網站。
  2. 設定開發環境:安裝 VS Code、設定 GitHub Repository、啟用 Live Server。
  3. 初步草圖:在筆記本上簡單勾勒遊戲畫面和主要介面位置。

接下來幾天,我會開始分享網頁切版、RWD 響應式設計與遊戲邏輯的細節,
一步一步完成這個純前端小遊戲網站,期待最後能讓大家直接在線上體驗🎮!


下一篇
Day2 | 遊戲靈感蒐集
系列文
30天打造純前端互動小遊戲網站4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言