@davidcasto
P
Erwin
@erwindrd2All comments
- P@erwindrd2
The link to your code in GitHub is not working. It put /pages after your repository.
Your card looks nice! It is however not responsive, you are using px for width and height, and also for your padding and margins, you might consider using relative units like rem and em. But since it is a small vertical card, it still looks good on a phone.
You don't have a hover in your design, the cursor changes to a pointer because they are buttons, but the color of the button doesn't change on hover. You have added the color only to the top button with the 'git' class. Try to make it change color with the hover state in your code.
Keep up the good work!
- @davidcastoP@erwindrd2
Looking good.
I would consider using more relative units, like rem and em, to make the card more responsive. You are using a lot of px and that means it is a fixed with regardless of the screen.
It seems you did not create the mobile design, the idea is to have 1 design that looks good on all devices. So for the phone, you most likely need to stack the items as shown in the design.
This article might help you start creating a responsive design.
Keep up the good work!
- @Ridwan1234567890What are you most proud of, and what would you do differently next time?
All feedback is welcomed thank you
P@erwindrd2Hi,
Your site is not visible, probably because you didn't use the index.html but created a qr-code.html. It seems GitHub is expecting an index.html to show.
I wonder why you use rems for margin, padding and even border radius and not for font-size? Personally, I use pixels for border radius, as you normally don't want to increase the border radius based on the font size and rems or ems for font-size, as the screen gets better, the font 'grows' with it to a certain max.
Keep up the good work!
- @iD024What are you most proud of, and what would you do differently next time?
I am proud of how i tackle the problem of the layout of the cards I used flex this time next i would like do the same using grid
What challenges did you encounter, and how did you overcome them?To the desire layout i first used grid but didn't work out well... next used flex where i applied flex on to the container and then divided the columns then adjusted each column to get the layout
What specific areas of your project would you like help with?I need help with the code... its just bad i know it 💀😭😭 if someone made my 10 lines of code into 3 i won't be surprise
also need help with the responsive with smaller screen sizes please use GitHub if you can to push newer code
P@erwindrd2Hi, When looking at your code, I suggest you study HTML structures. For example, you are not using an H1 and are not using span the way it is supposed to be used. With a good HTML structure, writing CSS would be easier. Some info about HTML structure can be found here.
Regarding the CSS, I am not sure why you are setting a font-family (Poppins) in your CSS reset. That font is not used in the design, so it shouldn't be in your code.
I'm also not sure why you set your body to display:flex? You can center items with margins without the need for flex.
You might consider using media queries to make the site responsive. More about media queries here.
I like your use of the clamp function for font-sizes. You might consider using them for spacing as well. Since you are using px to define the width and height for the cards, they will not be responsive. The same for images. More information on responsive design can be found here.
Keep trying and pushing forward, and you will improve fast, keep up the good work!
Marked as helpful - P@j3dd3rsWhat are you most proud of, and what would you do differently next time?
I am proud I finished the whole project and managed to apply all my knowledge.
I would try and think ahead better in future and create some more reusable classes which I realised would've made my code better.
What challenges did you encounter, and how did you overcome them?Scaling the elements was a bit tricky as I wasn't sure if I was applying the right logic using width %s throughout. But I managed to solve it and get to the right solution.
What specific areas of your project would you like help with?Is there a way to make my CSS cleaner in any way? Was there a better way to make it responsive?
P@erwindrd2I like your solution, looks more robust than mine. I never used the width % as far as I remember. Likewise, I did use width vh sometimes, especially in the footer section. Your CSS looks clean to me.
Overall, nice job!
- @AndreiaBernardoWhat are you most proud of, and what would you do differently next time?
Colocar as grades em ordem e fazer o responsivo
What challenges did you encounter, and how did you overcome them?Deixar na ordem e o responsive
Fiz varias tentativas, até achar que a melhor foi usando o flex-wrap
What specific areas of your project would you like help with?Na parte do css gostaria de um feedback sobre a organização
P@erwindrd2You are using too much px values. Try to use rem or em to make the text in your design more fluent. The font size and colors of the text of the name and personal title are not the same as in the design. Your code is not really responsive. Take a look at 890px in your browser DevTools. The gaps between the different cards are not staying consistent at different screen sizes. AT mobile size, it looks like your work is right aligned instead of in the center.
Keep practicing and you will be alright!
Marked as helpful - @PattykevWhat are you most proud of, and what would you do differently next time?
It was easier to me to design the pattern.
P@erwindrd2Nice job!
A few things you might consider next time.
- Your background color is different from the one used in the design.
- The font you use is a serif font, while in the design a sans-serif font is used.
- It seems you forgot the 'quote' background image on the purple card.
- Your design goes to mobile at around 375 pixes. It seems a little late. You might consider the tablet breakpoint to be at around 700 and the laptop/desktop breakpoint around 1100 or something. It is small at 730 pixels.
- Not sure if you did it deliberately, but your design is left aligned on the screen. It might be nicer to see if the design is in the center of a screen.
Keep up the good work!
- @Yousef-AbumahfozP@erwindrd2
Nice job.
A few things that might improve the code, your font is different from the font in the design. It seems like it is a serif font, while the design uses a sans-serif font. Also, be aware that the quote image is not correctly positioned, and it should not be visible on the mobile design.
Keep up the good work!
- @rafael-study-repoWhat are you most proud of, and what would you do differently next time?
I'm most proud of how I implemented responsive layouts using CSS Grid in combination with media queries. The structure is clean, readable, and easy to maintain, which made it straightforward to support multiple screen sizes without cluttering the code.
If I were to do it differently next time, I might explore using container queries or even a utility-first CSS framework like Tailwind to further streamline responsiveness and styling consistency.
What challenges did you encounter, and how did you overcome them?One of the main challenges was designing the desktop layout, which required positioning four cards in a very specific and asymmetrical arrangement. To solve this, I used CSS Grid with named grid areas, which allowed for precise control over the placement while keeping the code organized and easy to read.
This approach made it much easier to tweak the layout without sacrificing responsiveness or maintainability.
P@erwindrd2Looking good!
It's nice to see other solutions to the same problem. I like your grid only solution, and also your border solution to colored borders. It's a different from what I used as solution and but results are the same.
- @Alishaa-987P@erwindrd2
Hello,
I see your image is not shown in the preview. The solution is to not add ./ or / in front of your image folder. Just use "image/<imagename.jpg" and it will show in your live preview.
On the design, it is best practice to create a separate .css file for your styles, so you keep the structure (the HTML file) and your styles(css file) separated.
Also, have a good look at the fonts being used. You did not specify a specific font to have your design look like the given design, so your design shows the browser default font.
Keep improving and don't forget to have fun!
- @glrodriperez98What are you most proud of, and what would you do differently next time?
I'm most proud of learning and using CSS Grid for the first time in this project. It was a new layout tool for me, and it really helped organize the cards in a clean and responsive way. Figuring out how to position the cards exactly like the design using Grid rows, columns, and
grid-template-areaswas a big win and boosted my confidence with layout design.Next time, I’d spend more time experimenting with Grid early in the project instead of jumping between layout methods. I’d also try using
What challenges did you encounter, and how did you overcome them?minmax()andauto-fit/auto-fillto make my Grid even more flexible for different screen sizes, however that will need more research and practice.One of the biggest challenges was getting the card layout to match the design across screen sizes. The cards were either too narrow or stretched out, especially on desktop, and mobile responsiveness took some back-and-forth tweaking. I solved this by adjusting the container width, card max-widths, and media query breakpoints more precisely. I also had to debug overlapping grid rules and fix conflicting styles that caused the layout to break.
What specific areas of your project would you like help with?I’d love feedback on how to structure responsive layouts more efficiently, especially when combining Flexbox and Grid. I’d also like to get better at translating designs more precisely without relying too much on trial-and-error, and would appreciate tips on how to choose breakpoints based on the design rather than using arbitrary widths.
P@erwindrd2Looking good!
However, it seems you missed the difference between the tablet and the desktop version. Look closely at the colors and location of the cards in both designs.
When breakpoints are not clearly given in the design, it is up to the developer. Personally, I use 700 for tablet and 1100 for desktop/laptop when no hard breakpoints are given in the design. But that is just a personal preference.
- @Gurjit05KWhat are you most proud of, and what would you do differently next time?
I got to learn how to make a responsive website.
What challenges did you encounter, and how did you overcome them?I faced challenges in styling.
What specific areas of your project would you like help with?I would like to learn all new and old features to improve my skills.
P@erwindrd2Looking good!
However, it seems you missed the difference between the tablet and the desktop version. They are the same in your solution, but they are different in the design. Perhaps you can adjust the code so the tablet version will also be conform the design.
- @giannindmWhat specific areas of your project would you like help with?
- How to reduce font size for mobile without media queries
- How to vertically center the card on the page
P@erwindrd2Looks nice!
Regarding the areas where you would like to get help: To reduce font-sizes on mobile without media queries, checkout the clamp function as described here: clamp function
A handy calculation tool can be found here: fluid type scale
To vertical center the card on the page there might be more options, I usually use
margin: auto auto;This will center the object.
Marked as helpful - @Onenne1What specific areas of your project would you like help with?
I would like help with making more responsive designs
P@erwindrd2Nice solution and nice code.
The only small suggestion I have is to not use px in your media queries for screen sizes. I prefer using rems like, for example, this: @media (width<(700 / 16 * 1rem)){}
For mobile screens.
Marked as helpful - P@ShixuLuoP@erwindrd2
Very nice and clean code! (Found a solution with the button in your code I struggled with and missed, so thank you for that). :)
The only small suggestion I have is maybe you can combine some CSS lines so you don't have to repeat the same line so much, like with the fonts and the letter-spacing for example.
- @KumaKorinP@erwindrd2
Very nice! It looks like you forgot the divider between the instructions and the nutrition. Other than that, well done!
- @End-Us3rP@erwindrd2
Hi,
Nice one, superb! Looks exactly like the design.
- @himanshuydvak47P@erwindrd2
Hi,
Noted you should use main selector in your HTML. Also see if you can use margin in your css the space above the illustration is too much. And your author picture is also not contained in the card. As it is a .svg file, you might want to include is as plain html instead of a img. (Open the svg in a text editor and copy past the code in your html file). Your header should not be an H4 but an H1. You start with H1 and build using the correct hierachy. You can not have an H4 without H1, H2 and H3 first. Try to make the button and your header links so change them when the use hover over them.
Good luck and don't forget to have fun!
Kind regards, Erwin
