@naufaluqhSubmitted 3 months ago
z-mn
@z-mnAll comments
- @z-mnPosted 3 months ago
Good job! The desktop solution looks and works well. One thing that you should be aware of is that you should never skip heading tags - you've used a <h3> tag without there being <h1> and <h2>. This is important for screen readers. You also haven't made the design completely accessible on mobile because the card is too wide - you can set a max-width on it so that it is easier to read. The only other issue is that you are missing the mobile active state. Happy coding! :)
0 - @JJorgeMS13Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Me encanto poder acomodar las tarjetas.
What challenges did you encounter, and how did you overcome them?el mover cosas en tarjetas puntuales, lo supere creando nuevas clases de css.
What specific areas of your project would you like help with?Me encantaria que me ayudarán a saber mas sobre la creacion de clases en Css para que mi desarollo sea mas facil de mantener.
@z-mnPosted 3 months agoWell done. The solution looks good except for the font weight of the headings where yours is too low. Looking at your CSS, I would say that you shouldn't really be using pixels to set widths, heights, paddings, margins and gaps - this should be done using rem and em for better responsiveness. You could also make more variables for properties such as font weight and font size as this will make your CSS easier to maintain. Using pixels primarily in your media query is ineffective as this is only tailored to your screen size - it doesn't work as it should on my screen, for instance. Good job and happy coding! :)
Marked as helpful0 - @adewalemudasiruSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This challenge took longer than expected but It feels good I was able to complete it. I decided on some implementation which I think is not the best approach to my challenges, but It work😂. I'll probably do it better once I figure out a better design approach.
What challenges did you encounter, and how did you overcome them?My biggest challenge during this project was placing the content card/box in the correct position. I didn't immediately think the CSS grid was the solution, so it took me longer trying to figure out how to position the boxes. I just started learning Grid actually and I guess I didn't understand I could use Grid in such a manner. I stumbled upon a similar design and inspected the code and saw what they did, so I just copied their code to Codepen and played with it, it seems easy but I still feel I don't understand it enough but hey, it worked😂. I also had a hard time getting the title description displayed correctly. I had to set a min-max for the description to get the result I wanted but I'm not sure if that was the correct solution but again it worked 😁.
What specific areas of your project would you like help with?I would love to get more clarity on the CSS grid. While ChatGPT and Claude Ai have been helpful, I think getting a professional to help me understand the concept would help me improve my skills a lot.
@z-mnPosted 4 months agoGreat solution! Heading is slightly small but it's not much of an issue. If you're still unable to fully understand grid, playing through this should be helpful. I used the methods I learned from it to build my solution - check my code if you want an alternative grid solution. Grid is quite intuitive when you mentally plan out the grid formation before writing any CSS - this makes it easier to understand what you're doing. In this example I could see the layout could be split into 4 rows and 3 columns - 12 equally sized rectangles filling the space. Then it's just about using the necessary CSS properties to make that layout, and put the cards in the right spot. Hope this helps.
0 - @ZakJamSubmitted over 1 year ago@z-mnPosted 4 months ago
Good job. Although the design is generally accurate the font size is too small for the desktop version and you forgot to add the hover effect. In your CSS you have also repeated a lot of code unnecessarily when writing your media query. The properties that you wrote outside the media query will stay the same if you don't reference them in the media query so you don't have to rewrite them again. You could also use clearer variable and class names so it is easy to understand their purpose (this makes it easier for others to read and understand). Well done and good luck in the future
0 - @Ibtehaj-Ali-1Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I got more fluent in using Flexbox and Grid properties. And I also learned about
Listsand moreselectors.@z-mnPosted 4 months agoThis solution is very good, well done. The only difference is that it does not follow the mobile design where the padding on the image is removed. Perhaps you could start designing mobile-first, this is because it prioritises the content, leading to a minimalistic user design and makes it easier to scale for larger screen sizes. This is only just a suggestion, as you should work how you prefer.
0 - @lakshyasharmaaaSubmitted 5 months ago@z-mnPosted 4 months ago
Very good solution - well done! Maybe you could start using CSS variables for better structured/simplified code.
0 - @KingSlayer3xSubmitted 5 months agoWhat challenges did you encounter, and how did you overcome them?
Items positioning was kind off tricky.
What specific areas of your project would you like help with?Using Flex and grid system for better design.
@z-mnPosted 5 months agoGood job! In order to center the card, you should target the body and set min-height: 100vh, then use display: grid and place-items: center. Your solution is otherwise good excluding the minor font size and line height differences, and the missing border. Happy coding!
Marked as helpful1 - @micfrazerSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I remembered quite a bit for being rusty. I would, however, look at examples first rather than jumping right in.
What challenges did you encounter, and how did you overcome them?Positioning is not my forte; I welcome suggestions for responsive positioning of objects/divs.
What specific areas of your project would you like help with?Again, my particular concern is responsive sizing and/or positioning.
@z-mnPosted 5 months agoTo answer your question, in order to position the .object div in the centre for all screen sizes you should use display: grid on the parent container (in this case the body) and the place-items: center property. Alternatively you could use display: flex with the justify-content: center and align-items: center properties. This is better than guessing values for one screen size which looks like what you've done, and ensures it is at the center regardless of screen size.
You could also import the correct font by going on google fonts and copying the embed code. Otherwise, good job! :)
Marked as helpful0
