Date Topics Resources (with Chapters/Sections) Implementation Tasks

- [Kevin Powell CSS Layout Course (YouTube)](https://www.youtube.com/watch?v=3elGSZSWTbM)

May 17 CSS Fundamentals + Box Model, Flexbox - [Flexbox Froggy](https://flexboxfroggy.com/) Clone a responsive navbar + 3-column layout.
- [Grid Garden](https://gridgarden.game/)
May 18 CSS Grid + Media Queries + Responsive Units - [MDN Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) Build a responsive blog layout with Grid.
May 19 CSS Animations + Transitions + Keyframes - [CSS Tricks Animation Guide](https://css-tricks.com/almanac/properties/a/animation/) Animate cards on hover, buttons on click.
- [React Docs: Intro](https://react.dev/learn)
May 20 React: JSX, Components, Props, State - [Net Ninja React Series - Video 1–5](https://www.youtube.com/playlist?list=PL4cUxeGkcC9ij8CfkAY2Jtzdr3z1u2p3y) Create a profile card app using props + state.
May 21 Conditional Rendering + Lists + Keys - [React Docs: Rendering Lists](https://react.dev/learn/rendering-lists) Build a dynamic to-do list app.
May 22 Event Handling + Forms (Controlled Inputs) - [React Docs: Forms](https://react.dev/learn/forms) Create a login/register form with validation.
May 23 React Router + Basic Project Setup - [React Router v6 Tutorial](https://reactrouter.com/en/main/start/tutorial) Build a multi-page blog with routing.
- [BEM Introduction](https://getbem.com/introduction/)
May 24 CSS Architecture: BEM, Utility Classes - [CSS Methodologies Overview](https://medium.com/weekly-webtips/css-architecture-methodologies-81cb43a16240) Refactor your layout with BEM.
May 25 Advanced Styling: SCSS, CSS Modules, Styled Components - [Styled Components: Basics](https://styled-components.com/docs/basics) Use styled-components to rebuild your form app.
May 26 React Hooks: useEffect, useRef, useState (deep dive) - [Overreacted: useEffect Guide](https://overreacted.io/a-complete-guide-to-useeffect/) Enhance to-do app with localStorage + timers.
May 27 useReducer + Context API - [Kent C. Dodds: React Context Effectively](https://kentcdodds.com/blog/how-to-use-react-context-effectively) Theme toggle using Context + useReducer.
May 28 Code Splitting + Lazy Loading + Suspense - [React Docs: Code Splitting](https://reactjs.org/docs/code-splitting.html) Lazy-load components in blog app.
May 29 Reusable Components + Prop Drilling Fix - [ReactPatterns.com](https://reactpatterns.com/) Build a dropdown, modal, and button group.
May 30 Error Boundaries + Custom Hooks - [React Docs: Error Boundaries](https://reactjs.org/docs/error-boundaries.html) Write a custom useFetch hook and wrap UI in error boundaries.
May 31 Advanced React Patterns: Compound Components, Render Props
- React Patterns: https://reactpatterns.com/ - Kent C. Dodds (Render Props): https://kentcdodds.com/blog/render-props Build an Accordion & Tabs component using Compound + Render Props patterns
Jun 1 CSS-in-JS (Emotion, Styled Components) - Styled Components: https://styled-components.com/docs/basics - Emotion: https://emotion.sh/docs/introduction Rebuild profile app using styled-components or Emotion
Jun 2 Intro to React Native with Expo - Official Expo Docs: https://docs.expo.dev/ - Expo Snack Playground: https://snack.expo.dev Setup Expo CLI and build a simple counter app
Jun 3 React Native Components + Styling + Flexbox - React Native Flexbox: https://reactnative.dev/docs/flexbox - Expo Styling Guide: https://docs.expo.dev/workflow/style/ Clone a simple onboarding screen using Flexbox and StyleSheet
Jun 4 Navigation in React Native - React Navigation: https://reactnavigation.org/docs/getting-started - Expo Routing Docs: https://docs.expo.dev/guides/routing/ Build a 3-screen app with Stack and Bottom Tabs
Jun 5 Forms & Text Input in React Native - Forms: https://reactnative.dev/docs/textinput - Controlled Inputs: https://blog.logrocket.com/building-react-native-forms-validate-user-input/
Create a form with validation and error messages (Name, Email, Password)
Jun 6 Advanced State Management in React (Zustand, Redux) - Zustand Docs: https://docs.pmnd.rs/zustand/getting-started - Redux Toolkit: https://redux-toolkit.js.org/introduction/getting-started
Migrate a to-do app to Zustand or Redux
Jun 7 React Native APIs: Camera, Image Picker, Permissions - Expo Camera/ImagePicker: https://docs.expo.dev/versions/latest/sdk/imagepicker/ https://docs.expo.dev/versions/latest/sdk/camera/
Build a photo upload and preview feature with permission prompts
Jun 8 Animation in React Native (Reanimated + Gesture Handler) - Reanimated Docs: https://docs.swmansion.com/react-native-reanimated/ - Gesture Handler: https://docs.swmansion.com/react-native-gesture-handler/
Build a draggable card and sliding panel
Jun 9 React Query / TanStack Query (Web & Native) - TanStack Query Docs: https://tanstack.com/query/v4 - Integrating with React Native: https://tanstack.com/query/latest/docs/react-native/overview
Create a paginated API fetch list with loading/error states
Jun 10 Design Patterns in React - React Design Patterns Book (select chapters): https://refactoring.guru/design-patterns - Component Composition Patterns:Refactor https://reactpatterns.com/
components to follow the Container-Presenter and Controlled-Uncontrolled patterns
Jun 11 Testing in React and React Native (Jest, RTL) - Testing Library Docs: https://testing-library.com/docs/react-native-testing-library/intro/ - Jest Docs: https://jestjs.io/docs/getting-started
Write unit tests for a button, form, and API call
Jun 12 Accessibility in Web and Mobile - Web: https://developer.mozilla.org/en-US/docs/Web/Accessibility - React Native A11y: https://reactnative.dev/docs/accessibility Add proper accessibility labels to form and screen elements
Jun 13 Final Project – Responsive Full App (Web + Native) Use everything you’ve learned! Build a Productivity Tracker app with login, dashboard, form, async API, list view and animation
Jun 14 Mock Interviews + Resume Polishing - Interview Prep: https://frontendinterviewhandbook.com - Resume: https://www.freecodecamp.org/news/software-engineering-resume-guide/
Practice common React/React Native questions, review behavioral answers, polish resume