iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

初階網頁學習與製作 系列

在這次挑戰中,我將學習並運用HTML和JavaScript來搭建一個功能齊全的網站。透過學習HTML,我將掌握如何構建網站的基本結構和內容展示;透過JavaScript,我將能夠為網站添加互動功能,使其更具動態性與使用者體驗。這個挑戰將幫助我全面了解網頁開發的基本技術,並提升我的實作能力。

參賽天數 12 天 | 共 12 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文 團隊不想努力了
DAY 1

Day-1 鐵人挑戰的開始💦

哈囉大家好!今天是我鐵人挑戰30天的第一天,這次的挑戰主題是:在30天內架設一個網站。對我來說,架設網站是一個全新的領域,因此非常具有挑戰性。不過,挑戰就是要踏...

2024-09-15 ‧ 由 sopha 分享
DAY 2

Day-2 HTML的認識✨

今天,我要來認識並了解何謂HTML與他的用途。 -HTML是一個標記語言,用於呈現在網路瀏覽器上。我們可以藉此創建網頁上的各種內容,包含圖片、字體大小等。-HT...

2024-09-16 ‧ 由 sopha 分享
DAY 3

Day-3 HTML表格的使用🍖

表格可以快速統整、查看不同類型的資料與數據,今天我要運用HTML來建立表格。 -HTML的 table 標籤用來建立表格,表格的主要標籤包含:• caption...

2024-09-17 ‧ 由 sopha 分享
DAY 4

Day-4 HTML表單的認識🎁

HTML表單是用來蒐集使用者輸入資料的一個重要工具。它通常包含各種可互動的元素,像是文字框、按鈕、下拉選單、核取方塊等,讓使用者能夠提交數據到伺服器進行處理,今...

2024-09-18 ‧ 由 sopha 分享
DAY 5

Day-5 CSS的認識🧩

CCS 是一個強大的樣式語言,可以有效控制網頁的佈局與外觀。藉此,可以實現靈活的設計、強大的互動性來提升使用者體驗。今天,我就要來了解一些CSS的基礎。 CSS...

2024-09-19 ‧ 由 sopha 分享
DAY 6

Day-6 磚塊遊戲(1) 基本結構🧱

今天,我要運用HTML開始製作我第一個遊戲-磚塊遊戲,並使用 canvas 元素來控制網頁的基本結構以下是我的程式碼與執行結果程式碼: 執行結果: 當我在尋找有...

2024-09-20 ‧ 由 sopha 分享
DAY 7

Day-7 磚塊遊戲(2) 球的移動🎭

今天的磚塊遊戲的進度,我要讓我的球能夠動起來! 要如何要讓球動起來呢?只需要將球繪製在螢幕上,然後不斷清除並重新繪製,每次讓球稍微移動一點點。這樣一來,球就會看...

2024-09-21 ‧ 由 sopha 分享
DAY 8

Day-8 磚塊遊戲(3) 球的反彈🥏

由於在昨天的程式碼中,只要球一跑出canvas外就會不見了。所以我今天要加一段程式碼讓他可以反彈回來,使得遊戲能夠繼續進行。在今天的過程中要使用邊界檢查的方式來...

2024-09-22 ‧ 由 sopha 分享
DAY 9

Day-9 磚塊遊戲(4) 碰撞顏色變換🎨

當球碰到畫布邊緣時,我們透過呼叫 getRandomColor() 函數來隨機改變球的顏色。每次碰撞後,球會反彈並改變為新顏色。 getRandomColor(...

2024-09-23 ‧ 由 sopha 分享
DAY 10

Day-10 磚塊遊戲(6) 擊球板子繪製🏏

今天,我將新增一段程式碼來產生一個可以擊球的板子,並且讓球在碰觸到板子後能夠反彈。首先,我們需要定義出板子的高度、寬度以及它出現在畫布上的初始位置。這些設定將決...

2024-09-24 ‧ 由 sopha 分享