From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Skills grid

Skills grid

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Skills grid

“

Welcome to this session on creating a skills grid for your React portfolio project. Our goal is to display a grid of technical skills using icons and labels. Each skill will be represented by a reusable skill card component, making our code clean and efficient. This is a great way to showcase your abilities to potential employers in an attractive and organized manner. Now I am adding an empty div within the Skills column. This will eventually hold our grid of skill icons. We'll populate it in the next steps. Let's install the React Icons package using npm to access popular icon libraries like Font Awesome, Simple Icons, and more in React Components. If you go to react-icons github webpage, you can see all available icons. We will be using Font Awesome 5. And Simple Icons. Moving to the Skills Experience section component. Now it is time to import the icons we'll be using from react-icons-fa. I am including icons for React, HTML5, CSS3, Node.js, Python, and Git. I am importing…

Contents