diff --git a/content/docs/frontend/5. Data Fetching.md b/content/docs/frontend/5. Data Fetching.md
index 7342a90..5cc3b24 100644
--- a/content/docs/frontend/5. Data Fetching.md	
+++ b/content/docs/frontend/5. Data Fetching.md	
@@ -39,13 +39,12 @@ axios는 [XMLHttpRequest](https://ko.javascript.info/xmlhttprequest)를 기반
 1. 메인페이지에 있는 포켓몬 리스트를 REST API를 통해 가져와 보아요.
    1. [PokeAPI v2](https://pokeapi.co/docs/v2)를 통해 필요한 API를 찾아보아요.
    2. 이를 통해 REST API 문서를 읽는 법을 배워보고 Axios 또는 Fetch API를 사용해서 HTTP 요청을 보내 보아요.
-   3. 또한 이를 통해 REST API의 단점을 알 수 있을 거예요.
 2. 포켓몬 디테일 페이지에서 필요한 포켓몬 정보는 GraphQL을 통해 가져와 보아요.
    1. [PokeAPI GraphQL Playground](https://beta.pokeapi.co/graphql/console)를 통해 쿼리를 유추해 보아요.
-   2. REST API와 비교했을 때 어떠한 장점이 있는지 알아보아요.
+   2. 만약에 REST API로 구현 했으면 어떠한 상황이 발생했을 지 생각해보고 GraphQL의 장점을 느껴보아요.
 
 ### 프로젝트 실습 Tip 📌
 
-1. 첫 번째 과정에서는 2 개의 REST API가 필요해요!
-2. 무료 API라서 너무 많은 요청을 보내면 IP 영구 밴을 당할 수 있기 때문에 렌더링 될 때마다 요청이 되지 않게 cache 기능을 사용하거나 useEffect를 잘 활용해보아요!
-3. Compoenent와 Effect는 pure하게 만드는 것이 권장돼요! React 18에서는 이를 더 잘 지킬 수 있도록 Strict mode(개발 환경에서는 기본적으로 strict mode가 활성화 되어 있음)에서는 두 번 렌더링해서 이 성질을 잘 지키고 있는지 확인해요! 따라서 useEffect 안에 있는 코드가 두 번 실행되는 것은 정상이니 걱정하지 마세요!
+1. 무료 API라서 너무 많은 요청을 보내면 IP 영구 밴을 당할 수 있기 때문에 렌더링 될 때마다 요청이 되지 않게 cache 기능을 사용하거나 useEffect를 잘 활용해보아요!
+2. Compoenent와 Effect는 pure하게 만드는 것이 권장돼요! React 18에서는 이를 더 잘 지킬 수 있도록 Strict mode(개발 환경에서는 기본적으로 strict mode가 활성화 되어 있음)에서는 두 번 렌더링해서 이 성질을 잘 지키고 있는지 확인해요! 따라서 useEffect 안에 있는 코드가 두 번 실행되는 것은 정상이니 걱정하지 마세요!
+3. `GraphQL: Language Feature Support`, `GraphQL: Syntax Highlighting` vscode extension을 설치하면 syntax highlighting과 auto complete등의 편리한 기능을 사용할 수 있어요!
diff --git a/content/docs/frontend/6. Tailwind CSS.md b/content/docs/frontend/6. Tailwind CSS.md
index 51d8522..11e2748 100644
--- a/content/docs/frontend/6. Tailwind CSS.md	
+++ b/content/docs/frontend/6. Tailwind CSS.md	
@@ -1,8 +1,45 @@
 +++
-title = "7. Tailwind CSS"
+title = "6. Tailwind CSS"
 description = "CSS 유틸리티 라이브러리인 Tailwind CSS를 알아봅니다."
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
 weight = 270
 +++
+
+새로운 class와 id의 이름을 짓고 기존의 class와 id의 이름을 기억하는 일은 정말 힘들어요. 하지만 특정한 속성과 값을 가지는 class를 미리 만들어두고 이를 재사용하면 이러한 문제점이 해결되지 않을까요? 이런 아이디어에서 출발한 CSS 유틸리티 라이브러리인 Tailwind CSS를 알아보아요!
+
+## 📚 공부할 내용
+
+- [Tailwind CSS 기초 가이드](https://www.youtube.com/watch?v=xT8bFaHA0tc&list=PLkfUwwo13dlUzcBq9qnjDdybJPKZZvNI1&index=1&ab_channel=%EC%A0%9C%EC%A3%BC%EC%BD%94%EB%94%A9%EB%B2%A0%EC%9D%B4%EC%8A%A4%EC%BA%A0%ED%94%84)
+- [Tailwind CSS 공식 문서](https://tailwindcss.com/docs)
+
+기초 가이드 영상을 간단하게 살펴보고 프로젝트 실습을 하면서 감을 익히는 게 좋을 것 같아요. 실습 과정에서 필요한 내용은 공식 문서를 참고하면 됩니다.
+
+## 🎯 프로젝트 실습
+
+Tailwind CSS를 프로젝트에 설치 및 환경 설정하고 기존에 작성한 CSS 코드는 다 지우고 Tailwind CSS를 사용으로 전환해요.
+
+### 0. Editor 셋업
+
+1. `Tailwind CSS IntelliSense` 확장 프로그램을 설치해요.
+   1. `Ctrl + Shift + P`를 눌러 명령 팔레트를 열어요.
+   2. `Preferences: Open Default Settings (JSON)`를 입력하고 엔터를 눌러요.
+   3. `"editor.quickSuggestions":{ "strings": true }`를 추가해요.
+   4. 이렇게 해야 Tailwind CSS의 class를 자동 완성할 수 있어요.
+2. `npm install -D prettier prettier-plugin-tailwindcss` 또는 `pnpm install -D prettier prettier-plugin-tailwindcss` 명령어를 통해 Prettier와 Tailwind CSS 플러그인을 설치해요.
+   1. `module.exports = { plugins: ['prettier-plugin-tailwindcss'], }`를 `prettier.config.js` 파일에 추가해요.
+   2. 이렇게 해야 Tailwind CSS의 class를 자동 정렬할 수 있어요.
+
+### 1. Tailwind CSS 설치
+
+1. `npm install tailwindcss` 또는 `pnpm install tailwindcss` 명령어를 통해 Tailwind CSS를 설치해요.
+2. `npx tailwindcss init` 또는 `pnpx tailwindcss init` 명령어를 통해 `tailwind.config.js` 파일을 생성해요.
+3. `tailwind.config.js` 파일에서 `content` 속성에 `['./src/**/*.{js,jsx,ts,tsx}']`를 추가해요. 
+4. `App.css` 파일에 `@tailwind base;`, `@tailwind components;`, `@tailwind utilities;`를 추가해요.
+5. `npm run start` 또는 `pnpm run start` 명령어를 통해 프로젝트를 실행해요.
+
+### 2. Tailwind CSS 사용
+
+- class 또는 id를 하나씩 지우고 Tailwind CSS으로 대체해요!
+- `App.css` 파일에 위에서 추가한 @tailwind 3 줄 빼고는 모두 없어야 해요.
diff --git a/content/docs/frontend/7. Next.js.md b/content/docs/frontend/7. Next.js.md
index 3267e9e..4c5a603 100644
--- a/content/docs/frontend/7. Next.js.md	
+++ b/content/docs/frontend/7. Next.js.md	
@@ -1,5 +1,5 @@
 +++
-title = "8. Next.js"
+title = "7. Next.js"
 description = "Next.js를 이용해 SSR을 구현해봅니다."
 icon = "article"
 date = "2023-09-11"
diff --git a/content/docs/frontend/8. Git, Github.md b/content/docs/frontend/8. Git, Github.md
index 1b7216f..e662bda 100644
--- a/content/docs/frontend/8. Git, Github.md	
+++ b/content/docs/frontend/8. Git, Github.md	
@@ -1,5 +1,5 @@
 +++
-title = "9. Git & Github"
+title = "8. Git & Github"
 description = "코드의 버전 관리를 위해 Git과 Github를 사용해봅니다."
 icon = "article"
 date = "2023-09-11"