iT邦幫忙

鐵人檔案

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

中年大叔(40+)前端自學筆記 系列

這是一個七年級大叔在閒暇之餘
寫一些個人自學過程中的筆記與心得分享

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

DAY01 - 中年大叔第三年參加鐵人賽

前言: 這次我第三次參加鐵人賽,去年因為意外而中斷連續發文(停電&沒網路)連參加獎(30天鐵人練成)都沒有...TT 簡單自我介紹一下(雖然以前的鐵人賽...

DAY 2

DAY02 - 建立Next.js專案就踩到坑

前言: 這次鐵人賽的內容是以我學習React+Next.js 的過程中所記錄的筆記與心得教材是在Udemy上面,隨機挑選比較新的課程且好評數量高的 購買證明:...

DAY 3

DAY03 - 從零開始建立Next.js專案

前言: 手動建立專案流程: 在C槽(windows系統)底下建立一個資料夾作為專案名稱 如: C:\ironman_2023 在ironman_2023 底...

DAY 4

DAY04 - 建立App路由

接下來在app 資料夾底下建立 reviews資料夾 底下建立 page.jsx 內容如下 function ReviewsPage() { retur...

DAY 5

DAY05 - 完成APP路由設定

在vs code 底下直接創建資料夾/檔案 的小技巧 操作方法:直接新增檔案 資料夾名稱/檔名.副檔名 接下來要用上面的方法在專案裡多建立幾個頁面 app/ab...

DAY 6

DAY06 - 使用Link取代a標籤

加入Link 在Next.js 裡使用Link來取代原本的 <a> 標籤編輯 app\layout.jsx 內容如下 import Link fro...

DAY 7

DAY07- 在Next.js的專案中使用Tailwind CSS

安裝所需套件: npm install --save-dev tailwindcss postcss autoprefixer npx tailwindcss...

DAY 8

DAY08- 初步完成網頁layout

編輯 app\layout.jsx 檔案內容如下: import Link from "next/link"; import "....

DAY 9

DAY09- 自訂可重複使用的組件(components)

在導入TailWind Css之後,網頁的樣式被清除了,如h1需要使用者重新定義標籤的樣式 編輯 app\page.jsx 檔案內容如下: function H...

DAY 10

DAY10 - 引入靜態資源

在專案的根目錄下建立 public\images 資料夾找一些圖片放到images資料夾裡(可以直接用wiki裡面的圖片) 接著在 app\reviews\ 底...