@namanajmeraSubmitted 16 days ago
Latest comments
- @isAlvarezDevPosted 13 days ago
Hey Naman, how you doing? Great solution. The only thing I will recommend you is, you should separate the html in several components instead add all in page.jsx and import these to the page. For example, there are 5 cards, which have img, name, header and description. You could make a base for these and use parameters to get the data. This will improve the readability and modularity
The rest is okay. Good job. Have a good day!
0 - @VaclavKeySubmitted 13 days ago@isAlvarezDevPosted 13 days ago
Hey man, great solution. It just looks exactly as the original design heh. The only thing I could tell you is, between 1025px and 1140px there are several changes with the top margin property. Sometimes it doesn't has margin but other times does.The rest is pretty good.
Have a good day!
1 - @moyinoluwa001Submitted 24 days agoWhat are you most proud of, and what would you do differently next time?
I am most proud of successfully implementing the staggered grid layout that gives the design a modern and dynamic look. It was challenging to balance the alignment and spacing while maintaining responsiveness across different screen sizes. Additionally, ensuring the cards maintained their visual hierarchy while preserving the clean and structured design was quite rewarding.
If I were to do this project again, I would focus more on optimizing the CSS for maintainability by using variables for colors and spacing. I would also explore using CSS Grid more extensively to enhance flexibility in layout adjustments. Finally, I would consider adding subtle animations to enhance user engagement and make the interactions feel more fluid.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was achieving the staggered grid layout while maintaining consistent card sizes and ensuring the design was responsive. It was tricky to position the cards in a way that looked visually appealing without breaking the layout on smaller screens.
To overcome this, I experimented with CSS Grid properties, such as
grid-template-columnsandgrid-template-rows, combined withtransform: translateY()to achieve the desired offset effect. I also used media queries to adjust the layout for different screen sizes, ensuring a smooth and adaptive user experience.Another challenge was maintaining consistent spacing and alignment between the cards. I addressed this by utilizing CSS Flexbox properties for alignment and ensuring all cards had equal padding and margins.
By breaking down the layout into smaller sections and testing frequently, I was able to incrementally adjust the design until it matched the desired look.
What specific areas of your project would you like help with?I would like help with the following areas of my project:
-
Responsiveness and Cross-Browser Compatibility: Although I implemented media queries to make the layout responsive, I want to ensure it looks consistent across all devices and browsers. Any feedback on improving the responsiveness or handling edge cases would be appreciated.
-
CSS Optimization: I used a combination of Grid and Flexbox for the layout. I would like feedback on optimizing the CSS for better performance and maintainability. Are there more efficient ways to achieve the staggered grid layout?
-
Accessibility Improvements: I aimed to make the site accessible, but I would appreciate suggestions on improving the semantic structure, ARIA labels, or any other accessibility best practices.
-
Code Readability and Maintainability: Any feedback on improving the organization, readability, or maintainability of my HTML and CSS would be beneficial.
I welcome any other general feedback or suggestions for enhancing the overall design and user experience.
@isAlvarezDevPosted 24 days agoHey, Abdulrahmon. I saw your code and I'd like to recommend you a few things.
First of all, try to remove all the comments because that only annoys when someone else is trying to watch the code. As a rule, it's not necessary adding comments except if the code (function, method, class...) is really complex and, these are really brief.
One thing to improve the accesibility is, instead add a
divwith a classcard, you could change it for<section>check the documentation about section tag.The media query, .card-layout has a
display:grid; gap: 20pxit's not necessary adding them again. You already had them before.Another thing is, convention. For example, it's better if you have all the colors in hex instead a mix with hex, hsl and rgba. Just follow one of them and that would be okay. This point is more to maintain the uniformity of the code.
That's all for now. Great solution and happy codding! :)
Marked as helpful0 -
- @chryspenalberSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I was proud of successfully adapting the code for smaller screens without major difficulties. I finished the project in two days, but I believe it could have been faster. And I think I could work better on accessibility next time.
What challenges did you encounter, and how did you overcome them?Actually, I didn't encounter any major challenges with this project. Adapting the code for smaller screens was simple and straightforward. I was able to complete it quickly without any difficulties.
What specific areas of your project would you like help with?I would like to know what I can improve in terms of semantic HTML and accessibility.
@isAlvarezDevPosted about 1 month agoHey, Chrystiana. Good job, your solution is great.
There are two thing I would advise you. The first one is, the <b> tag is deprecated, MDN suggests using <strong> because <b> is an element doesn't convey such special semantic information. The second one is, you should read about clamp() property in css. It will help you to create dynamic font sizes and spacing. Instead of type a specific font-size o padding depending the screen width, with clamp() can make it easy for you.
Marked as helpful1 - P@nashrulmalikSubmitted 2 months ago@isAlvarezDevPosted 2 months ago
Hey man, I like your design, it's the same as the project itself. On the other hand, these lines in your css, its better if you use the link tag on the hmtl because it forces the browser to download imported stylesheets sequentially, rather than allowing parallel downloads and you can solve it using the link tag.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap');By the way, the <div class="content"> you could change it for a section tag or article to improve the semantic. Have a good day!
Marked as helpful0 - @JosiasSandovalSubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
Si tuve algunos incovenientes
@isAlvarezDevPosted 3 months agoHey man, I saw your code and... I'd like to recommend you to use more semantic HMTL, for example, the tags: <header><main><footer><section><article>
Instead of using a lot of divs, you can use those I mentioned and you will have a better SEO and accessibility. On the other hand, your github link is fallen.
Another thing is, please, don't use more than one <h1> tag. Google itself will penalize you because its not recommended. Have a hierarchy well structured with all the headers and thats all.
Marked as helpful1
