@naufaluqh
Latest solutions
Responsive card with JavaScript button interactivity
Submitted 12 months agoIs it better to not use IDs at all? Because I can achieve the same purpose of getElementById with querySelector. Should I use BEM naming convention on IDs? I would also like to know if I have used the BEM convention properly. Any other bits of feedback are appreciated :)
Responsive card using media queries
Submitted about 1 year agoAny form of feedback as to where I can improve would be appreciated.
Responsive Mobile First Recipe Page
Submitted about 1 year agoHow could I have used the element instead of divs. I tried this, but you cannot apply borders to elements. Also, how can you make padding/margin responsive - in my case the top margin of the image match the inline padding of the card when screen size changes. Any other pieces of advice is appreciated.
Social links card using semantic html elements
Submitted about 1 year agoWhich are the most effective CSS properties for responsiveness and how should I be using min-width/max-width and height properties.
Latest comments
- @z-mn
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! :)
- P@JJorgeMS13What 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-mnWell 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 helpful - @adewalemudasiruWhat 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-mnGreat 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.
- @ZakJam@z-mn
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
- @Ibtehaj-Ali-1What 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-mnThis 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.
- @lakshyasharmaaa@z-mn
Very good solution - well done! Maybe you could start using CSS variables for better structured/simplified code.
