@kadiryildiri
What specific areas of your project would you like help with?
I had difficulty adjusting the height and width of the boxes.
I'm a software engineer with about 4 years of professional experience. I took about a year and a half break from coding for personal reasons and I'm now trying to get back into it. I have experience in both frontend and backend development, but my passion is still in frontend.
I’m currently learning...how to be more confident in myself and my code.
Latest solutions
Recipe Page
#react#vite#styled-componentsSubmitted 10 months agoI'm still not sure if I should be using styled-components for all of my components. I think it looks cleaner on the component page side, but feels strange having some styled-components without styles. I would like advice from a more experienced styled-component user.
Latest comments
- @Saekit
Great work with this project! The mobile view looks great. For the desktop view, the whole section can use grid instead of separating part of it in a grid and part in flex box. I found this grid generator to be very helpful https://cssgridgenerator.io/ . Using
max-widthcan also help to make the layout less stretched out.Marked as helpful - @keinermendozaWhat are you most proud of, and what would you do differently next time?
I'm proud of the grid layout. Making layouts with grids has always seemed like a challenge to me, so I am happy with the final result.
What challenges did you encounter, and how did you overcome them?I noticed that the font sizes are different for the two designs, so I tried to make the font grow progressively until reaching the size for large screens (I am using a mobile-first approach), that was a bit difficult, and I would be happy to hear opinions about other ways to do it.
@SaekitYour code looks great. It seems like your vercel live website may be getting the incorrect repo since it is showing a different project.
- @keinermendozaWhat are you most proud of, and what would you do differently next time?
I am most proud of creating a product gallery that demonstrates how the component works with different image sizes and varying lengths of text descriptions.
What challenges did you encounter, and how did you overcome them?Without a doubt, the biggest challenge I faced was managing the images. It was difficult to give them the correct size and position, but in the end, I found the aspect-ratio property and the use of a container element for the image to be very useful.
@SaekitYour solution looks great! The demo mode is very cool. I noticed while in mobile view, demo mode looks good, but in desktop view it looks squished in a row.
I also found managing the images challenging, so I learned about the
<picture>tag which is great to use for responsiveness. Check it out: https://www.w3schools.com/tags/tag_picture.asp - @Roman-oryol@Saekit
Your code looks amazing! I don't have any feedback. I feel like I learned a lot from looking at your code haha good job!
- @MinThentWhat are you most proud of, and what would you do differently next time?
I think I'm getting better with flexbox and usage of react.
What challenges did you encounter, and how did you overcome them?I had a little difficulty with passing props to make map method work for printing out the social media links.
What specific areas of your project would you like help with?I would like some help with code reusability and maintenance. Also, suggestions on Tailwind usage would be helpful.
@SaekitThis solution looks good and matches the design well. Well done! I have a couple suggestions for improvement:
- Since the social links are technically navigation buttons it would be better to use an
<a>tag or a<button>tag instead of a<p>within an<li>. Using a button tag will also allow the user to select the button using the tab key. - Some of the formatting, like in
SocialLinks.jsx, is a bit off. Installing prettier in your code editor can help with that. Your Tailwind and reusable components look good!
Marked as helpful - Since the social links are technically navigation buttons it would be better to use an
- @TheCodeCraze@Saekit
Great solution! Just a couple of things I noticed. It looks like you forgot to include the black border color to match the design. The color for the copy also appears a bit too light. In the style guide,
Gray 500ishsl(0, 0%, 42%);, instead of 50%.
