iT邦幫忙

鐵人檔案

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

30 天線上自學前端 系列

連續 30 天,天天上前端的線上課程並記錄這個過程。
在決定參賽以前,已經上完這套課程共 490 個小節的 194 個小節。
194 個小節中包含基礎和中階的 HTML、CSS、Javascript,以及已完成兩個階段性的小遊戲 project:Drum Kit & Dice Game。
給自己第 30 天的目標是上到第 317 小節,經過的這 100 多個小節中會完成 1 個小遊戲(The Simon Game)和 2 個小挑戰,還有 317 小節的階段挑戰:做一個能後台寫文並發布的部落格。

參賽天數 1 天 | 共 72 篇文章 | 21 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 1] [The Simon Game] 紀錄使用者按過的按鈕

首先要有一個空陣列才能來記錄: var userClickedPattern = []; 紀錄使用者點過的按鈕,然後丟回陣列裡: document.getEl...

2022-09-01 ‧ 由 wscindy 分享
DAY 1

[Day 2] [The Simon Game] 使用者按過的按鈕加上特效、告知目前關卡

延續 Day 1 所寫的 addEventListener('click'),今天再加上按下去時,要去替換已經在 CSS 裡的 .pressed 特效,並且在...

2022-09-03 ‧ 由 wscindy 分享
DAY 1

[Day 3] [The Simon Game] 告知下一關、遊戲結束 | 遊戲完成!

預計下週末才要做出來的東西,沒想到今天就完成了。 昨天一直卡在玩家的遊戲規則。 遊戲規則是電腦一關給一個新提示,但玩家每一關都要按之前所有關卡的顏色。 遊戲規則...

2022-09-03 ‧ 由 wscindy 分享
DAY 1

[Day 4] [The Unix Command Line] 前端告一段落,要開始了解些後端的東西

在鐵人賽開始之前,已經先上玩這個課程裡面的 JavaScript、CSS、HTML,接著已經完成了三個網頁的小遊戲,其中一個小遊戲是 The Simon Gam...

2022-09-04 ‧ 由 wscindy 分享
DAY 1

[Day 5] [Node.js] 安裝 Node.js

OK,我知道這很奇怪,我說要 30 天自學前端,但比賽沒開始幾天就開始學後端了。我往後看了前端課程安排,看來這段了解後端的課程是沒法完全略過的,因為看起來都會用...

2022-09-05 ‧ 由 wscindy 分享
DAY 1

[Day 6] [Node.js] 終端機使用 Node.js 執行 .js 檔案

昨天已經裝好 Node.js,以及課程裡面推薦安裝的終端機 app Hyper。Command line 跟第四天所記下的 command line 大同小異,...

2022-09-06 ‧ 由 wscindy 分享
DAY 1

[Day 7] [Node.js] 試試看原生 Node 模組

安裝 Node 之後,Node 有隨附一堆內建模組。昨天看課程有提到用一些 Node 的用法,今天的課程內容是可以如何用 Node.js 來用 local fi...

2022-09-07 ‧ 由 wscindy 分享
DAY 1

[Day 8] [Express] 用 express 做一個 server

首先用 Hyper cd 到目標的資料夾,然後創一個叫做 server.js 的檔案: (base) wwwsss@wwwsssdeMacBook-Pro fr...

2022-09-08 ‧ 由 wscindy 分享
DAY 1

[Day 9] [Express] 用 express 做一個 server: the GET request

鐵人賽目標是 9/30 上到課程的第 371 節,目前在 228 節。 接續昨天,目前用 chrome 開 localhot:3000,會出現 Cannot...

2022-09-09 ‧ 由 wscindy 分享
DAY 1

[Day 10] [Express] 用 express 做一個 server: 了解跟試著做做看 Routes

昨天用 app.get 做了一個 callback: app.get('/', function(request, response){ respons...

2022-09-10 ‧ 由 wscindy 分享