Frontend Mastery: Zero to Hero with React & Next.js
Enroll now for learning Frontend Mastery: Zero to Hero with React & Next.js through Offline Class.
Days
Hours
Minutes
Seconds
Frontend Mastery: Zero to Hero with React & Next.js কোর্স কারিকুলাম
Week 1: Getting Started with Frontend Development
- Orientation Class – Introduction to frontend development, course roadmap, tools setup (VS Code, Git, Chrome DevTools)
- HTML Basics – Structure, elements, attributes, forms, tables, semantic HTML.
- Advanced HTML – Accessibility (ARIA), SEO-friendly HTM
- Assignment: Build a simple portfolio page using HTML.
Week 2: Styling Websites with CSS
- CSS Basics – Selectors, box model, display, position, flexbox.
- Advanced CSS – Grid, media queries, animations, transitions.
- Maintainability, BEM methodology
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height & Width
- CSS Position
- CSS Flexbox
- CSS Z-index
- CSS Pseudo Class & Elements
- CSS Display - inline, inline-block, block, none
- CSS Box-Shadow
- CSS Formating
- CSS Tranforms
- CSS Transitions
- CSS Animations
- CSS Responsive - Media Query
- Build a responsive landing page
Week 3: Mastering Git & GitHub for Collaboration
- Git Basics – Repositories, commits, branches, merging
- GitHub Workflow – Pull requests, and issues
- Real-world Git usage – Collaborating with teams, GitHub Pages deployment
- Assignment: Push your landing page project to GitHub
Week 4: JavaScript Fundamentals
- Introduction to JavaScript – Variables, data types, operators, functions
- DOM Manipulation – Query selectors, event listeners, modifying elements, etc.
- ES6+ Features – Template literals, arrow functions, destructuring, etc.
- Practice Project: Interactive to-do list.
Week 5: Deep Dive into JavaScript
- Asynchronous JavaScript – async/await, Basic problem-solving.
- API Handling – Fetch API, JSON, error handling.
- JavaScript Best Practices – Clean coding, debugging.
- Practice Project: Weather app using OpenWeather API.
Week 6: Introduction to Tailwind CSS
- Tailwind Basics – Utility-first approach, installation, setup.
- Customizing Tailwind – Colors, spacing, typography, theming, etc.
- Building UI Components – Buttons, cards, modals, grids.
- Practice Project: Tailwind-based personal portfolio.
Week 7: Components library of tailwind and Figma.
- Components library – Explore the component library with a real project.
- Basic Figma – Basic knowledge about Figma for smooth development.
- Practice day - Practice tailwind and component library.
- Building UI Components – Buttons, cards, modals, grids.
- Practice Project: Tailwind-based personal portfolio.
Week 8: Introduction to React.js
- React Basics – Components, JSX, props, state.
- Event Handling & Forms – handle events with forms and others.
- React Hooks – useState, useEffect, useContext.
- Practice Project: Task management app (CRUD operations).
Week 9: Advanced React & State Management
- React Router – Dynamic routing, navigation, 404 pages.
- State Management – Context API, the difference between local state and global state.
- React Performance Optimization – Memoization, lazy loading.
- Assignment: Add authentication to the task management app.
Week 10: Exploring Next.js Basics
- Introduction to Next.js – Why Next.js, pages, routing.
- Data Fetching – SSR, SSG, and ISR. Data fetching with server and client.
- Dynamic Routes & API Routes – Serverless functions.
- Practice Project: Blog website with dynamic content using Next.js.
Week 11: Authentication & Deployment
- User Authentication – NextAuth.js, JWT authentication.
- Deployment – Vercel, Netlify, Firebase hosting.
- Best Practices for Production – SEO, security, performance.
- Assignment: Deploy the blog project with authentication.
Week 12: Advanced Next.js & Full-Stack Concepts
- Connecting Next.js with Databases – Firebase or supabase.
- Building Full-Stack Apps – Backend APIs, authentication, CRUD.
- Real-World Project Planning – Teamwork, best practices.
- Practice Project: Full-stack eCommerce store using Next.js & Firebase.
Week 13: Working with APIs & Third-Party Libraries
- REST API vs GraphQL – Fetching and handling data.
- Using Libraries in React/Next.js – Axios, Chart.js.
- Explore about npm packages
- Assignment: Integrate external API into the blog project.
Week 14: Testing & Debugging
- Introduction to Testing – Unit tests, integration tests.
- React Testing Library & Jest – Writing basic tests.
- Debugging Techniques – Performance profiling, console debugging.
- Practice Project: Add test cases to the task management app.
Week 15: Freelancing & Career Growth
- Building a Portfolio – Showcase projects, GitHub profile.
- Getting Freelance Clients – Fiverr, Upwork, LinkedIn.
- Resume & LinkedIn Optimization – Personal branding.
- Assignment: Create a professional developer portfolio.
Week 16: Real-World Capstone Project
- Project Planning – Wireframing, setup, team roles.
- Development & Debugging – Best coding practices.
- Presentation & Peer Review – Feedback session.
- Graduation & Certification – Recognition for successful completion.
- Certificate of Completion after project submission.
Bonus: 3-Week Job Placement Training (For students who complete on time): Create Linkedin Account & Remote Job Hunting (Who will Complete Module-1 to 15 Successfully)
- Introduction of Linkedin?
- How to Open LinkedIn Account?
- How to Optimize LinkedIn Profile?
- How to Make ATC Highest Score CV?
- How to Apply for Remote Job?
- How to Contact with Foreign Company to Get Job?
- How to Communicate Company Founder & CEO and HR Department?
- How to Take Interview Preparation?
- WordPress Developer Interview Questions.
- Assignment