Skip to content

Commit 16cbc3d

Browse files
committed
feat: adjustment
1 parent e114c62 commit 16cbc3d

File tree

5 files changed

+672
-165
lines changed

5 files changed

+672
-165
lines changed

docs/career/react.mdx

Lines changed: 268 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,44 +24,291 @@ React stands as a beacon in modern web development. Its component-based architec
2424

2525
## Our Approach: Learn by Doing
2626

27-
3-Month Intensive Course
27+
# 3-Month React and Ecosystem Course Syllabus
2828

29-
Become a master of frontend development with GeekInk’s comprehensive React course. This program is designed to equip you with the skills and knowledge to build stunning web applications using React. Learn through hands-on projects, expert mentorship, and industry insights to elevate your development career.
29+
## Month 1: Foundations
3030

31-
## Course Duration
31+
### Week 1: Understanding How the Web Works
3232

33-
3 Months (3 times a week, 36 classes of 2 hours each)
33+
<details>
34+
<summary>Module 1 (Lecture): Introduction to the Internet and the Web</summary>
35+
- How the Internet works
36+
- How web browsers and servers communicate (HTTP/HTTPS)
37+
</details>
38+
39+
<details>
40+
<summary>Module 2 (Lecture): Domain Names, DNS, and Hosting</summary>
41+
- Understanding domain names and DNS
42+
- Basics of web hosting
43+
</details>
44+
45+
<details>
46+
<summary>Module 3 (Project Day): Practical Application</summary>
47+
- Create a simple web page explaining how the web works
48+
49+
**Alternative Activities:**
50+
- Write a technical blog post summarizing the week's topics
51+
- Visit a local business to discuss how they use web technology
52+
- Career advice session with a local tech professional
53+
</details>
54+
55+
### Week 2: HTML Basics
56+
57+
<details>
58+
<summary>Module 4 (Lecture): Introduction to HTML</summary>
59+
- Basic HTML structure
60+
- Common HTML elements (headings, paragraphs, links, images)
61+
</details>
62+
63+
<details>
64+
<summary>Module 5 (Lecture): Forms and Tables</summary>
65+
- Creating forms and handling form submissions
66+
- Structuring data with tables
67+
</details>
68+
69+
<details>
70+
<summary>Module 6 (Project Day): Hands-On Practice</summary>
71+
- Build a web page with a form and table displaying some data
72+
73+
**Alternative Activities:**
74+
- Write a technical blog post about HTML elements
75+
- Group discussion on how HTML is used in different websites
76+
</details>
77+
78+
### Week 3: CSS Basics
79+
80+
<details>
81+
<summary>Module 7 (Lecture): Introduction to CSS</summary>
82+
- Basic syntax and selectors
83+
- Applying styles to HTML elements
84+
</details>
85+
86+
<details>
87+
<summary>Module 8 (Lecture): Box Model and Layouts</summary>
88+
- Understanding the box model
89+
- Creating layouts with flexbox and grid
90+
</details>
91+
92+
<details>
93+
<summary>Module 9 (Project Day): Styling Practice</summary>
94+
- Style the previously created web page with CSS
95+
96+
**Alternative Activities:**
97+
- Write a blog post on CSS basics
98+
- Visit a local business to see how they design their web pages
99+
- Group discussion on best practices in CSS
100+
</details>
101+
102+
### Week 4: JavaScript Basics
103+
104+
<details>
105+
<summary>Module 10 (Lecture): Introduction to JavaScript</summary>
106+
- Variables, data types, and operators
107+
- Basic control structures (if-else, loops)
108+
</details>
109+
110+
<details>
111+
<summary>Module 11 (Lecture): Functions and Events</summary>
112+
- Defining and invoking functions
113+
- Handling events in JavaScript
114+
</details>
115+
116+
<details>
117+
<summary>Module 12 (Project Day): Interactive Web Pages</summary>
118+
- Add JavaScript to make the form interactive
119+
120+
**Alternative Activities:**
121+
- Write a technical blog post about JavaScript basics
122+
- Career advice session with a local JavaScript developer
123+
</details>
124+
125+
## Month 2: Git, GitHub, and React Basics
126+
127+
### Week 5: Git and GitHub
128+
129+
<details>
130+
<summary>Module 13 (Lecture): Introduction to Git</summary>
131+
- Installing and configuring Git
132+
- Basic Git commands (init, add, commit, push, pull)
133+
</details>
134+
135+
<details>
136+
<summary>Module 14 (Lecture): Working with GitHub</summary>
137+
- Creating and cloning repositories
138+
- Branching and merging
139+
</details>
140+
141+
<details>
142+
<summary>Module 15 (Project Day): Version Control Practice</summary>
143+
- Create a repository and practice Git commands
144+
145+
**Alternative Activities:**
146+
- Write a blog post about the importance of version control
147+
- Group discussion on how Git and GitHub are used in team projects
148+
</details>
149+
150+
### Week 6: Introduction to React
151+
152+
<details>
153+
<summary>Module 16 (Lecture): Setting Up React</summary>
154+
- Installing Node.js and npm
155+
- Creating a React app with Create React App
156+
</details>
157+
158+
<details>
159+
<summary>Module 17 (Lecture): JSX and Components</summary>
160+
- Understanding JSX syntax
161+
- Creating and using functional components
162+
</details>
163+
164+
<details>
165+
<summary>Module 18 (Project Day): Simple React Component</summary>
166+
- Create a simple React component and render it
167+
168+
**Alternative Activities:**
169+
- Write a blog post introducing React and JSX
170+
- Group discussion on the benefits of using React
171+
</details>
172+
173+
### Week 7: React Components and Hooks
174+
175+
<details>
176+
<summary>Module 19 (Lecture): Advanced Component Concepts</summary>
177+
- Component lifecycle methods
178+
- Class components vs functional components
179+
</details>
180+
181+
<details>
182+
<summary>Module 20 (Lecture): React Hooks</summary>
183+
- Introduction to hooks (useState, useEffect)
184+
- Building custom hooks
185+
</details>
186+
187+
<details>
188+
<summary>Module 21 (Project Day): Hooks in Action</summary>
189+
- Create a React component using hooks
34190

35-
## Course Objectives
191+
**Alternative Activities:**
192+
- Write a blog post on React hooks
193+
- Career advice session with a local React developer
194+
</details>
36195

37-
- **Master Frontend Fundamentals:** Gain a solid understanding of HTML, CSS, and JavaScript.
38-
- **React Proficiency:** Learn to build dynamic and interactive user interfaces with React.
39-
- **Real-World Application:** Apply your skills to real-world projects and build an impressive portfolio.
40-
- **Career Development:** Receive guidance and insights from experienced frontend developers.
196+
### Week 8: React Router and Redux
41197

42-
## Course Outline
198+
<details>
199+
<summary>Module 22 (Lecture): React Router</summary>
200+
- Setting up React Router
201+
- Creating navigable routes
202+
</details>
43203

44204
<details>
45-
<summary>Month 1: Frontend Fundamentals & React Foundations</summary>
46-
- **Project:** Craft an interactive personal portfolio website showcasing your skills.
47-
- **Skills:** HTML, CSS, JavaScript fundamentals, DOM manipulation, React components, props, state.
205+
<summary>Module 23 (Lecture): Redux Basics</summary>
206+
- Introduction to Redux
207+
- Creating a Redux store and actions
48208
</details>
49209

50210
<details>
51-
<summary>Month 2: Building Complex UIs with React</summary>
52-
- **Project:** Develop an engaging e-commerce platform with product listings, cart functionality, and dynamic user interactions.
53-
- **Skills:** React hooks, data fetching with APIs, routing, state management, responsive design.
211+
<summary>Module 24 (Project Day): Routing and State Management</summary>
212+
- Implement routing and manage state with Redux
213+
214+
**Alternative Activities:**
215+
- Write a blog post about React Router or Redux
216+
- Group discussion on state management in React applications
54217
</details>
55218

219+
## Month 3: Advanced React and APIs
220+
221+
### Week 9: Advanced Redux and Middleware
222+
56223
<details>
57-
<summary>Month 3: Real-World Application & Portfolio Building</summary>
58-
- **Project:** Select a project of passion, whether it's a social media dashboard, online learning platform, or a creative web application.
59-
- **Skills:** Advanced React patterns, testing, deployment, portfolio presentation, career guidance.
224+
<summary>Module 25 (Lecture): Redux Middleware</summary>
225+
- Understanding middleware (redux-thunk, redux-saga)
226+
- Handling asynchronous actions with middleware
60227
</details>
61228

62-
## Expert Mentorship & Industry Insights
229+
<details>
230+
<summary>Module 26 (Lecture): Advanced State Management</summary>
231+
- Normalizing state
232+
- Structuring large applications with Redux
233+
</details>
63234

64-
Navigate your journey with the guidance of seasoned frontend developers. Gain invaluable insights into industry best practices and career development, ensuring you're primed for success.
235+
<details>
236+
<summary>Module 27 (Project Day): Middleware Implementation</summary>
237+
- Integrate middleware in the Redux setup
238+
239+
**Alternative Activities:**
240+
- Write a blog post on using middleware with Redux
241+
- Group discussion on advanced state management techniques
242+
</details>
243+
244+
### Week 10: Working with APIs
245+
246+
<details>
247+
<summary>Module 28 (Lecture): Fetching Data with Fetch API and Axios</summary>
248+
- Making HTTP requests with Fetch API
249+
- Using Axios for more advanced requests
250+
</details>
251+
252+
<details>
253+
<summary>Module 29 (Lecture): Handling API Responses</summary>
254+
- Parsing and displaying data from APIs
255+
- Error handling and loading states
256+
</details>
257+
258+
<details>
259+
<summary>Module 30 (Project Day): API Integration</summary>
260+
- Create a React component that fetches and displays data from an API
261+
262+
**Alternative Activities:**
263+
- Write a blog post on integrating APIs with React
264+
- Career advice session with a local developer experienced in APIs
265+
</details>
266+
267+
### Week 11: Project Week 1
268+
269+
<details>
270+
<summary>Module 31 (Lecture): Planning the Project</summary>
271+
- Defining project scope and requirements
272+
- Setting up the project structure
273+
</details>
274+
275+
<details>
276+
<summary>Module 32 (Lecture): Implementing Core Features</summary>
277+
- Building core components and integrating Redux
278+
</details>
279+
280+
<details>
281+
<summary>Module 33 (Project Day): Progress Check</summary>
282+
- Continue building the project, review progress, and troubleshoot issues
283+
284+
**Alternative Activities:**
285+
- Group discussion on project progress and challenges
286+
- Visit a local business for project idea validation
287+
</details>
288+
289+
### Week 12: Project Week 2 and Deployment
290+
291+
<details>
292+
<summary>Module 34 (Lecture): Finalizing the Project</summary>
293+
- Completing remaining features and fixing bugs
294+
- Code reviews and refactoring
295+
</details>
296+
297+
<details>
298+
<summary>Module 35 (Lecture): Preparing for Deployment</summary>
299+
- Optimizing the app for deployment
300+
- Deploying the React app to a platform like Vercel, Netlify, or GitHub Pages
301+
</details>
302+
303+
<details>
304+
<summary>Module 36 (Project Day): Project Presentation and Review</summary>
305+
- Present the final project
306+
- Review and discuss lessons learned
307+
308+
**Alternative Activities:**
309+
- Group discussion on project outcomes and future improvements
310+
- Career advice session with local tech professionals
311+
</details>
65312

66313
## Invest in Your Future
67314

0 commit comments

Comments
 (0)