Basic Information and Introduction to Frontend Development

• Overview

Methodology

Codexra Education Model (Theoretical lecture, task completion, real world projects)

Weekly Class Hours

10 Hour

Week 1: Web Fundamentals and Introduction to Next.js (10 hours)

Day 1 (5 hours)

• HTML, CSS, JavaScript fundamentals (3 hours)
• What is Next.js? Setup and structure introduction (2 hours)
• Lab Exercise: Create your first Next.js application.



Day 2 (5 hours)

• Pages and Routes: Page management in Next.js.
• Task: Develop a simple application with multiple pages.

Week 2: Components and Style Management (10 hours)

Day 3 (5 hours)

• React components and usage in Next.js (3 hours)
• Styling with CSS and modules (2 hours)
• Lab Exercise: Develop product components for an e-commerce page.



Day 4 (5 hours)

• Global style management, introduction to Tailwind CSS or Styled-Components.
• Task: Style multiple components.

Week 3: Dynamic Data and API Integration (10 hours)

Day 5 (5 hours)

• Working with dynamic routes and parameters.
• Lab Exercise: Create dynamic pages for a blog application.



Day 6 (5 hours)

• API Routes in Next.js.
• Task: Create a simple API and integrate it with the frontend.

Week 4: Next.js Features and Performance (10 hours)

Day 7 (5 hours)

• SSR (Server-Side Rendering) and SSG (Static Site Generation).
• Lab Exercise: Develop an app comparing different page creation methods.



Day 8 (5 hours)

• Performance optimization in Next.js.
• Task: Develop a faster loading website with image optimization.

Week 5: State Management and Data Processing (10 hours)

Day 9 (5 hours)

• React State and Context API.
• Lab Exercise: Develop a shopping cart application.



Day 10 (5 hours)

• Data retrieval and filtering.
• Task: Create an app that lists and filters data from an API.

Week 6: Authentication and User Management (10 hours)

Day 11 (5 hours)

• User authentication (JWT or Firebase).
• Lab Exercise: Create a login and registration system.



Day 12 (5 hours)

• Authorization and protected routes.
• Task: Create a simple admin panel with user roles.

Week 7: Application and Final Checks (10 hours)

Day 13 (5 hours)

• Review and improve the project structure.
• Task: Complete missing features and improve the application.



Day 14 (5 hours)

• User testing and feedback.
• Lab Exercise: Create a demo environment for real users.

Week 8: Real World Project (10 hours)

Day 15 (5 hours)

• Prepare for the project presentation.
• Task: Complete a project addressing a real-world problem.



Day 16 (5 hours)

• Final project presentation and evaluation.

Results and Achievements

Through this curriculum, participants will progress from beginner to professional level and learn the full web development process using Next.js. Practical exercises and real-world projects will not only enhance their technical skills but also improve their project management and problem-solving abilities.