iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

1995到2021,php到react網站開發歷程 系列

這次我與我們幾個組員參賽的主要目標是完成一個由react架構起來的nft網站,而我會就我負責的部分,也就是前端跟一點後端來做介紹,順序部份我認為直接從react開始講起可能會太難懂,所以這30天應該會從一些最基本的網站架構技巧開始講起,各重點大概如下:

一、前端基礎(html, php, css)。

二、資料庫(mysql)。

三、進入Javascript、react。

四、nft網站架構。

五、成果展示。

希望可以從這些重點一步一步向各位介紹網頁的架構和方法!

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文 團隊Obit0 Studio
DAY 21

DAY21-導覽設計之Navbar

前言: 接下來要來完成我們網站的導覽部分了,這裡阿森主要分為兩個大項目,分別是Navbar和Sidebar。Navbar就是一般看網頁時會浮在最上面的導覽選單...

2021-10-03 ‧ 由 Cooksuhr 分享
DAY 22

DAY22-導覽設計之Sidebar

前言: 今天我們要來完成前面提到的Sidebar,我會從Navbar接著開始接著講,那就讓我們開始吧! 目標: 這裡就廢話不多說,直接上完成的樣子! 然後如...

2021-10-04 ‧ 由 Cooksuhr 分享
DAY 23

DAY23-一般頁面設計

前言: 做完網站最基本的導覽功能後,接下來要進入的就是我們的頁面了!在製作頁面的同時,阿森也會善用React的特性,也就是製造出重複利用性高的元件,像是製作一...

2021-10-05 ‧ 由 Cooksuhr 分享
DAY 24

DAY24-資訊卡頁面設計

前言: 昨天我們介紹了一個普通的資訊頁面是如何完成的,今天我們要來介紹另一個很常用到的頁面種類,資訊卡頁面! 那廢話不多說,先來看看效果吧! 長這樣: 再來...

2021-10-06 ‧ 由 Cooksuhr 分享
DAY 25

DAY25-問答頁面設計

前言: 幾個基本的頁面都設計得差不多啦~這次的挑戰也快接近尾聲了!今天就讓阿森來介紹一個有點小特效的問答頁面要怎麼寫吧! 效果: 可以看到當我們滑下來的時候...

2021-10-07 ‧ 由 Cooksuhr 分享
DAY 26

DAY26-在firebase上架你的react網站吧

前言: 今天是第26天啦,阿森在整個開發的部分也差不多完成了,準備進入最後上架測試階段! 在上架的部分阿森選擇使用firebase來當host,因為使用起來真...

2021-10-08 ‧ 由 Cooksuhr 分享
DAY 27

DAY27-Firebase Domain設定

前言: 昨天跟大家介紹了如何把你寫好的網頁透過firebase deploy到網路上,但目前還只能透過一個預設的網址來做連結,像下面這樣看起來很沒fu。 今天...

2021-10-09 ‧ 由 Cooksuhr 分享
DAY 28

DAY28-React NFT網站成果展示

前言: 到了倒數第三天了,一開始目標要完成的NFT網站開發也到一個段落啦~今天阿森要來展示一下綜合前幾天的內容(還有我自己的一點改良),最後的成果會是如何!...

2021-10-10 ‧ 由 Cooksuhr 分享
DAY 29

DAY29-總結一下吧

前言: 來到倒數第二天啦,昨天我們展示了最後的React成果,今天就讓我們來把這三十天的東西總結一下吧!畢竟阿森在這個暑假也是什麼都碰一點,最後才能寫出來這樣包...

2021-10-11 ‧ 由 Cooksuhr 分享
DAY 30

DAY30-參賽心得

這個暑假就像開頭第一篇說的,應該是大部分人度過最長的一個暑假,我原本也沒什麼目標,打算好好休養生息,但還好我的朋友們找我做了這麼一個Project,讓我學到了很...

2021-10-12 ‧ 由 Cooksuhr 分享