espringer21
@espringer21All comments
- @ChikairoSubmitted 14 days ago
- @Andymiguel25Submitted 20 days agoWhat are you most proud of, and what would you do differently next time?
Grid has been a big issue for me. Understanding how it works has been difficult . This Project isn't responsive yet
What challenges did you encounter, and how did you overcome them?Making it Responsive. Understanding how to adjust rows and column
What specific areas of your project would you like help with?Making grid layout responsive.
@espringer21Posted 20 days agoGreat job!, your solution closely matches the design.
I would recommend researching media queries. Media queries allow you to apply CSS styles depending on a device's media type (such as mobile vs. desktop). This will help with responsiveness allowing your grid to adjust by screen sizes.
0 - @stephany247Submitted 21 days agoWhat are you most proud of, and what would you do differently next time?
I’m proud of the responsive design and interactive hover effects that enhance user engagement.
Next time, I would prioritize accessibility features and consider using a JavaScript framework for better component management.
What challenges did you encounter, and how did you overcome them?This was my first time using CSS Grid, so I had to read up on it from W3Schools to understand its properties and functionalities. I overcame initial layout challenges by experimenting with different grid settings until I achieved the desired responsiveness.
What specific areas of your project would you like help with?I would appreciate feedback on enhancing accessibility features and optimizing the responsive layout further for different screen sizes. Additionally, guidance on best practices for organizing CSS and using a JavaScript framework like React would be helpful.
@espringer21Posted 21 days agoGood Job!, your solution closely matches the design.
I personally use flexbox instead of grid. I prefer to use rows and columns and adjusting the gap as needed. I feel it's faster and easier to manage and if you want to write less css.
0 - @lgwardaSubmitted 21 days agoWhat are you most proud of, and what would you do differently next time?
Successfully translating the design mockup into a functional and visually appealing component is a significant accomplishment. The attention to detail in the layout and styling showcases a strong design sensibility. However, there are a few areas for improvement.
What challenges did you encounter, and how did you overcome them?I encountered an issue where the "Perfume" text was not displaying on the desktop version. After debugging, I discovered that moving the Perfume element into the resolved the problem. This adjustment ensured that the text was properly rendered in the desktop layout.
What specific areas of your project would you like help with?I'm seeking feedback on my HTML and CSS code, and I'm also interested in receiving advice on coding standards and organization.
@espringer21Posted 21 days agoGreat job looks good, your solution matches the design!
0 - @VSKarthikTSubmitted 29 days agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of how I implemented the overall structure and styling of the recipe page. The layout looks clean, responsive, and the use of custom fonts gives the page a polished look and using media queries with mobile first approach
What challenges did you encounter, and how did you overcome them?One challenge was figuring out how to space the content properly, especially when working with flexbox and grid layouts. I wanted to ensure that the text was easy to read and that there was enough space between elements. I overcame this by using consistent padding and grid gaps to create clean spacing between sections. Understanding the behavior of border-collapse and how padding and borders interact was tricky too, but applying borders at the row level and adding padding directly to cells worked out well.
What specific areas of your project would you like help with?Borders and gaps: I'm curious about how I handled the table borders and spacing between rows in the nutritional box. Is there a better way to manage borders when collapsing them and still maintaining some separation between rows? and also I wanted to know more about media queries
@espringer21Posted 29 days agoGreat Job!! just some minor differences like bolded words and numbers, the markers on the ul and ol color and numbers may be changed to brown.
Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency. With looking at your code you handle media queries correctly.
Marked as helpful0 - @sapWRLDSubmitted about 2 months ago@espringer21Posted 30 days ago
Good Job!! your solution closely matches the design, some improvements could be made if your wanting to double check you have all five links with working active states.
0 - @EKriley-ciSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Fier : Je suis particulièrement fier de la mise en page responsive que j'ai réussi à mettre en œuvre. Le fait que la carte s'adapte bien aux différentes tailles d'écran montre que j'ai bien compris les concepts de Flexbox et des media queries.
Différemment : La prochaine fois, je passerais plus de temps sur l'optimisation des images pour améliorer les temps de chargement et l'expérience utilisateur. J'intégrerais également des tests utilisateurs pour recueillir des feedbacks plus tôt dans le processus.
What challenges did you encounter, and how did you overcome them?Défis : Un des principaux défis était de garantir que tous les éléments interactifs aient des états de survol et de focus cohérents sur toutes les plateformes. Cela demandait une attention particulière aux détails et à la compatibilité cross-browser.
Solution : J'ai surmonté ces défis en utilisant des outils de développement comme les DevTools des navigateurs pour tester et ajuster les styles, ainsi qu'en consultant des ressources en ligne et des forums pour des conseils spécifiques.
What specific areas of your project would you like help with?J'aimerais obtenir de l'aide pour améliorer les performances globales du site, en particulier en ce qui concerne l'optimisation des images et des animations.
Aussi, des conseils sur la façon de rendre le code plus maintenable et évolutif seraient très appréciés, surtout en ce qui concerne la structuration des fichiers CSS et HTML.
@espringer21Posted about 1 month agoGood job! your solution includes semantic HTML and is accessible. Some small improvements to more closely match the design is applying border to all sides then using border-width to expand the right and bottom sides and fixing the margin between each line.
Marked as helpful0 - @sheriff-demiladeSubmitted about 1 month ago@espringer21Posted about 1 month ago
Great Job!! your code is well structured and readable. Your solution does not extremely differ from the design.
0