Your code is well-structured and follows good practices, but there are always opportunities for improvement, particularly in terms of maintainability, readability, and responsiveness.
Here are a few suggestions:
Accessibility: Ensure your component is accessible. Use semantic HTML and ARIA attributes where necessary.
Responsive Design: Consider making the card responsive for different screen sizes.
Code Organization: Separate concerns by creating smaller components if needed.
Consistency in Styling: Ensure consistency in styling, using classes and utility classes appropriately.
Optimization: Optimize images for better performance.
export default function Card() { return ( <div className="group relative h-[522px] w-[384px] bg-white stroke-black rounded-2xl p-6 space-y-6 border border-neutral-black"> <Image src="/images/illustration-article.svg" alt="Illustration of the article" width={336} height={200} className="h-[200px] w-full rounded-xl" /> <div className="flex flex-col gap-3"> <div className="font-bold text-sm bg-primary-yellow w-[82px] h-[29px] rounded-[4px] px-3 py-1 flex justify-center items-center"> Learning </div> <p className="text-sm">Published 21 Dec 2023</p> <h1 className="group-hover:text-primary-yellow text-2xl font-extrabold"> HTML & CSS Foundations </h1> <p className="text-neutral-grey"> These languages are the backbone of every website, defining structure, content, and presentation. </p> </div> <div className="flex items-center gap-3"> <Image src="/images/image-avatar.webp" alt="Profile picture of Greg Hooper" width={32} height={32} className="rounded-full" /> <p className="text-sm font-bold">Greg Hooper</p> </div> <div className="absolute bg-neutral-black h-[522px] w-[384px] rounded-2xl -top-4 left-2 -z-10 group-hover:-top-2 group-hover:left-4 transition-all duration-300" /> </div> ); }
I hope this suggestion helps you.
Completing my first project is the proudest thing for me because this will be my motivation to work on other projects so that later it will become my capital in working on client projects when I become a front-end developer later. I will of course work on existing projects at another time.
What challenges did you encounter, and how did you overcome them?The challenge I faced was when I tried to make the design exactly as instructed. But in the end I was able to complete it as best as possible and of course with help from various sources.
What specific areas of your project would you like help with?such as the online qrcocode maker website, and w3schools to see color picker references.
Your code is good. However one of the noticable things or features in your code is the color. You can use the Chrome extension "Color Picker" to get the proper hex codes for the colors of blue and other shades of it.
As far as I can remember the color codes was provided also in the stylingguide.md
So far you can adjust those and we will check more on your code.
Rating and feedback are highly appreciated. I would like to know the best practices for Web Designing and JavaScript. Kindly indicate part where I can improve.
How can I get the same color for the accent? Should I use other color I just change the opacity of the colors of accent
Please rate my work. And also advice on the best practices for creating pages. I'm using SASS for this which I just just learned.
