鐵人檔案
對於前端新手來說，只有能夠做出知名網站的Clone，才能夠踏出第一步，成為真正的前端工程師。 我們選擇Instagram當成我們的目標，因為Instagram的...
上回我們完成創建專案以及導入Tailwind CSS，但是並沒有接觸到Instagram的部分，這一回我們會嘗試進行Instagram的首頁版面設定。 首先，我...
在「打造Instagram Clone」系列的第三篇文章中，我們將完成 Instagram Clone 的側邊欄。 首先，我們將編寫側邊欄，先從容易的logo開...
上回我們完成了側邊欄的外觀，這次我們繼續完善側邊欄的功能，讓按下去時字體和icon會有變化。 我們先回到Router.jsx，添加分割線，提升我們的專案與真In...
接下來，我們會先寫出Profile的上半部分。 我們使用Pexels圖庫，這是一個CC0圖庫，不需要擔心侵權的問題。 來到ProfileUserDetails....
我們將回到首頁部分，將首頁分拆成多個部分：Story、Post、HomeRight個別完成。 在Components資料夾下，新增Story和HomeRight...
我們繼續完成post區塊。 首先做出一個post的雛形，post內有圖片，有喜歡、留言、分享、儲存按鈕，滑鼠放在這些按鈕上會變得有點透明，另外，喜歡跟留言按鈕按...
在打造Instagram Clone系列的第八篇文章中，我們將完善Comment區塊。 整個Comment大致上可以分成兩部分左邊顯示圖片的區塊，右邊則是顯示評...
上一回我們幾乎完成了Comment區塊，這一次我們將完成剩下的部分，同樣從PostCard.jsx複製程式碼，修改後ModalBody的內容如下： <di...
我們上回已經完成Instagram的首頁區塊了，接下來我們要繼續打造新的區塊，這次要編寫的是建立新貼文的區塊，也就是按下側邊欄的Create按鈕時會出現的區塊，...
