@mohamed-fathy3010Submitted 19 days ago
What specific areas of your project would you like help with?
Any feedback is appreciated.
P
Josh Kahlbaugh
@Joshk7All comments
- @Joshk7Posted 16 days ago
This looks really good Mohamed. My solution looks very similar to yours. On thing I did notice is that I did notice is that max-width for the card is set to 37.5rem on mobile (your default styles) which is more than the screen would be at that size so it's redundant. Otherwise, this is really well done.
Marked as helpful0 - @bochranaamaneSubmitted 20 days agoWhat are you most proud of, and what would you do differently next time?
I’m proud of how accurately I replicated the design and ensured it’s responsive. I would focus on improving accessibility
What challenges did you encounter, and how did you overcome them?I faced challenges ensuring the design was perfectly responsive across different screen sizes, but I overcame them by using media queries effectively. Aligning and spacing the sections consistently was tricky, but I resolved it by tweaking the CSS properties. Debugging minor layout issues took effort, but I used browser developer tools to identify and fix them.
What specific areas of your project would you like help with?I might need help refining my responsive design to ensure it looks perfect on all screen sizes. Additionally, I’d appreciate tips on optimizing the CSS code for better readability and maintainability. Guidance on enhancing accessibility and ensuring the design meets industry standards would also be valuable.
@Joshk7Posted 19 days agoThis looks great. I like how you added the extra border to the preparation time to give it more style. The only tip I could give that you might have done already is to build your projects with a mobile first workflow. Creating the website in a smaller screen size first might help make adding styles to media queries easier.
Marked as helpful0 - @ghazibenattiaSubmitted 23 days agoWhat are you most proud of, and what would you do differently next time?
What I'm Most Proud Of
I'm most proud of creating a clean and responsive profile card that adapts well to different screen sizes. I used Flexbox and CSS Grid to structure the layout, which allowed me to center content and arrange buttons in a visually appealing way. I also took care in making the card look modern, with thoughtful color choices and typography using the "Inter" font from Google Fonts. The project improved my skills in responsive design and helped me better understand how to use CSS for layout management.
What I Would Do Differently Next Time
Next time, I would focus on improving accessibility by adding more semantic HTML elements like
What challenges did you encounter, and how did you overcome them?,, and ``. I'd also consider adding ARIA roles to buttons for screen reader compatibility. Additionally, I would experiment with more advanced CSS techniques like CSS transitions or animations to give the buttons a more dynamic feel when hovered over. Lastly, I would explore using a CSS preprocessor like SASS to make the stylesheets more modular and easier to maintain.During this project, one of the main challenges I faced was ensuring that the layout was responsive and looked good on various screen sizes. Initially, I struggled with getting the buttons to align properly and span the width of the container. To overcome this, I used CSS Flexbox and Grid to structure the layout, adjusting properties like
What specific areas of your project would you like help with?justify-contentandalign-itemsfor better positioning. Another challenge was making the hover effects smooth and visually appealing. I solved this by experimenting with different color schemes and transitions until I found the right balance. By learning and applying these techniques, I was able to enhance the design and functionality of the profile card.I would like help with improving the accessibility of my project, particularly in terms of adding ARIA (Accessible Rich Internet Applications) attributes to make the buttons and other interactive elements more accessible for screen readers. Additionally, I am looking for feedback on optimizing the CSS for better performance, possibly by reducing redundancy or improving the load time. Lastly, I would appreciate suggestions for refining the responsiveness on very small screens, ensuring the design remains user-friendly across all devices.
@Joshk7Posted 20 days agoHi Ghazi, well done. If you want you could move the attribution statement into a footer and set display to fixed and bottom to 0 to keep it at the bottom of the page. Other than that, the spacing looks great. I also was wrestling with media queries and this is what I came up with:
@media screen and (max-width: 48rem) { main { padding: 2.5rem; } .container { width: 28.5rem; } } @media screen and (max-width: 23.4375rem) { main { padding: 1.5rem; } .container { max-width: 20.4375rem; padding: 1.5rem; } }Hope this helps. The padding helps ensure that the main content fits within the main element.
0 - @bochranaamaneSubmitted 23 days agoWhat are you most proud of, and what would you do differently next time?
I’m proud of the clean code structure, responsive design, and creative use of SVGs. Next time, I’d focus more on accessibility, optimizing the SVG, and refining hover effects.
What challenges did you encounter, and how did you overcome them?I encountered challenges with centering elements, adding margins to the
What specific areas of your project would you like help with?img-box, and making the SVG look like the design. I overcame these by adjusting padding and margins through trial and error, and refining the SVG styling to match the layout.I would like help with improving the responsiveness of the card design, particularly ensuring the SVG scales perfectly across all screen sizes. Additionally, I want feedback on how to optimize my CSS code to make it more concise and maintainable while preserving the design.
@Joshk7Posted 22 days agoHi there, nicely done. I looked at your html file and you could link to a css file in the head tag of index.html
<link rel="stylesheet" href="./style.css" />The use of svgs for images is a nice touch but an image tag would be simplest:
<img />I like the use of box-sizing: border-box because it makes styling much easier.
However, you could change the sizings wherever you have px to that number of pixels divided by your root font-size to calculate rems. In my solution (24px = 24 / 16 = 1.5rem) this helps make your solution look better on mobile.
An example that could make this project better is with border radius. You could set it to 20px / 16px or 1.25 rem.
Lastly, you can use a css reset to make starting a project much easier: https://www.joshwcomeau.com/css/custom-css-reset
Marked as helpful0 - @ajasmine94Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
This time I was able to utilize something I learned recently which is Flexbox and the use of other units of measurement which really made things easier compared to using fixed width and so on. I think if I were to improve on this again, I would try using the Grid version!
What challenges did you encounter, and how did you overcome them?I think what I encountered this time is the image? It wouldn't fit the container / card so I had to use max-width: 100 to fit it in there, but I'm not so sure if that is the correct solution.
What specific areas of your project would you like help with?I am not so confident if I did well so any feedback in terms of how I fit the items or the use of flexbox would help :) thank you!
@Joshk7Posted 26 days agoA mistake I made for accessibility is not wrapping all of the content within the QR code card in a <main> html tag. Your flex box atttributes look good but the text content below the QR code could be improved by setting these in css:
.card-title { text-align: center; } .card-description { text-align: center; }You could also set border-radius to 10px of the QR code image to round the edges of the QR code.
0
