React/CSS Tutorial - User Card with Animation!

Опубликовано: 22 Март 2026
на канале: TheNoobCoder
1,087
30

This video covers React and CSS code to make this awesome user card, It is a re-usable component so you can use the same code and show off your whole team and their skills in a very compact manner.

==========================================================

Covered concepts:

1) React re-usable component.
2) CSS
3) Props

==========================================================
Source Code: https://github.com/mtajammulzia/React...
==========================================================

More on Codamy:

➡️ User card with React and CSS -:    • React/CSS Tutorial - User Card with Animat...  
➡️ Sudoku with React and Node (Part 2) -:    • Sudoku with React, Node and Express (Part 2)  
➡️ Sudoku with React and Node (Part 1) -:    • Create Sudoku Using React, Node and Express.  
➡️ Pacman with Ghost AI -:    • Making Pacman with Ghost AI  
➡️ Hashmap Implementation (Part 1/2) -:    • Hashmap Implementation - Separate Chaining...  
➡️ Hashmap Implementation (Part 2/2) -:    • Hashmap Implementation - Separate Chaining...  
➡️ Path search in maze using Processing (Part 2/2) -:    • Path Finding Using A* Search Algorithm  
➡️ Maze Generator using Processing (Part 1/2) -:    • Maze Generator and A* Search Algorithm usi...  
➡️ Learn MongoDB (Part 1/2) -:    • Learn MongoDB (1/2) - Create Locally Hoste...  
➡️ Learn MongoDB (Part 2/2) -:    • Learn MongoDB (2/2) - Create Locally Hoste...  
➡️ Creating a Simple Login UI with React -:    • Creating a Login UI using React Forms!  
➡️ Making TicTacToe with React -:    • ReactJS Learner Project - TicTacToe with R...  
➡️ Learn useEffect -:    • Learn useEffect in a Single Video. React H...  
➡️ Learn useState -:    • Learn useState in a Single Video. React Ho...  
➡️ React Reponsive Navbar Tutorial -:    • Responsive Sidebar-Navbar Switching Tutori...  
➡️ React Navbar Dropdown Tutorial -:    • ReactJS Tutorial - Navbar with a Dropdown ...  
➡️ React Sidebar Tutorial: https -: //   • ReactJS Sidebar Tutorial - Beginner Projec...  
➡️ React Filter Search: https -: //   • ReactJS Filter Search Tutorial - Beginner ...  
➡️ Making Piano Tiles: https -: //   • How to make "Piano Tiles". Easy to learn b...  
➡️ Making Bot to Play Piano Tiles -:    • Playing Piano Tiles with a Bot!  

==========================================================

Find me on:

➡️ Github -: https://github.com/mtajammulzia
➡️ LinkedIn -:   / mtajammulzia  
➡️ Instagram -:   / codamy2021  
➡️ Dev Portfolio -: https://tajammul.netlify.app/

==========================================================

#codamy #codamy2021 #pacman #pacmanghosts #AI #pacmanGhostAI #Astar #A* #Astartsearchalgorithm #mergesort #sortingalgorithm #mergesortjava #datastructures #hashmap #separatechaining #hashfunction #hashmapimplementation #Maze #AStart #A* #Search #SearchAlgoirthm #MazeGenerator #Node #NodeJS #MongoDB #Mongo #MongoClient #react #reactjs #reacthooks #hooks #props #usestate #usestatehook #useEffect #useEffecthook #reactforms #forms #controlledinputs #login #loginui #UI #javascript #Java #NodeJS #CSS #JSX #datahandliing #projects #project #beginnerproject #beginnerreact #learnerstutorial #coding #programming #codamy #tajammul #tutorials #learning