@nilmusSubmitted 5 months ago
What specific areas of your project would you like help with?
I couldn't really mirror the design's wide margin around the grid, in the desktop view, because when I tried increasing the margin, the grid overflowed
Latest solutions
Testimonial Grid Section
#sass/scssSubmitted 5 months agoI’ve done some cross-browser testing using Lighthouse, but I’m unsure whether there are any additional steps I should take to improve compatibility. Are there any tools or tips I should be aware of to ensure my site works well across all browsers?
Four card feature section
#sass/scssSubmitted 5 months agoHow can I further improve the flexibility and responsiveness of my grid layout? Are there best practices for ensuring that elements in my grid stay proportional and maintain consistent spacing across various screen sizes? Is there a way to optimize my media queries to make the layout even more adaptable?
Product Preview Card Component
Submitted 5 months agoI'm seeking feedback on my HTML and CSS code, and I'm also interested in receiving advice on coding standards and organization.
Social links profile
#accessibility#lighthouseSubmitted 6 months agoI’d appreciate feedback on my CSS media queries and any suggestions for improving the responsiveness of the layout. Are there any best practices or techniques I might be missing?
I’m looking for feedback on how I’ve structured my CSS and HTML files. Are there any tips for improving organization and maintainability, particularly when it comes to naming conventions or file structure?
Latest comments
- @lgwardaPosted 5 months ago
To fix the overflow and mirror the wide margin design correctly, here’s the approach:
Apply a Reset/Normalize Stylesheet: Reset all default margins, paddings, and box-sizing to prevent unwanted behavior.
Use box-sizing: border-box; to include padding and borders inside the element’s width and height, preventing overflow.
Set box-sizing: border-box; Globally: This is a common practice to ensure all elements’ padding and borders are included in their total width and height, which helps avoid overflow issues.
Adjust the margin and padding Carefully: Once the reset is applied, you can confidently control the margin and padding without worrying about overflow.
0 - P@firatyedibelaSubmitted 5 months agoWhat specific areas of your project would you like help with?
All feedbacks are welcome.
@lgwardaPosted 5 months agoYou've made some excellent choices with the technology stack for the four-card feature card. Vite, React, HTML, CSS, and SCSS are all powerful tools for building modern and responsive user interfaces. Your project is off to a great start, and it's evident that you've put in a lot of effort.
One area that could further enhance your project is focusing on accessibility and SEO improvements. By implementing proper semantic HTML, you can make your project more accessible to users with disabilities and easier for search engines to crawl and index. Adding appropriate aria- attributes and ensuring keyboard navigation support will significantly enhance the user experience for individuals who rely on assistive technologies.
In addition, optimizing headings, meta tags, and alt text for images will boost your project's SEO performance, resulting in higher visibility and engagement.
Overall, your project is well-executed and shows great potential. By prioritizing accessibility and SEO, you'll create a more inclusive and discoverable product that caters to a diverse audience. Keep up the fantastic work, and best of luck with your continued development!
Marked as helpful0 - @Lukas3162000Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of figuring out object-fit:cover; to solve the problem of viewing the product picture in an responsive environment.
What challenges did you encounter, and how did you overcome them?I didn't quite get it how to wrap the contents in contents into containers that don't make things too complicated.
And how did i overcome it? I didn't, i made it comlicated and wokred throug so that it at least works and i'll try to improve over the next couple of tasks as i go :D
What specific areas of your project would you like help with?I'd really like to understand, why me content-part of the card in mobile view (below 600px width) doesn't use any margin or padding to the right side & overflows.
I just couldn't figure it out :/
@lgwardaPosted 5 months ago- Semantic HTML:
-
Use more semantic elements: Consider using tags like <section> or <article> to further enhance the semantics of your HTML.
-
Improve image accessibility: Use descriptive alt text for
<img>elements. For example,alt="Bottle of Gabrielle Essence Eau De Parfum"instead ofalt="Parfume". -
Add aria-label to buttons: Describe button actions more clearly for assistive technologies. For example,
<button aria-label="Add to cart">Add</button>.
- Code Structure and Readability:
- Group related styles: Organize your CSS by grouping related styles for better readability.
- Use classes instead of IDs: Rely on classes for styling to enable better reusability, following CSS best practices.
- Design Consistency:
- Alignment with design: Compare spacing, font sizes, and colors with original mockups and adjust as necessary.
- Visual hierarchy: Ensure headings, subheadings, and body text have a clear visual hierarchy.
By addressing these areas, you can enhance the overall quality and usability of your component. Focus on semantics and design consistency, aligning with provided mockups or guidelines when applicable. Implementing these suggestions will lead to a more user-friendly and visually appealing result. Good luck!
1 - @SabinaZusSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the fact that I still remembered most of the basics of HTML although I learned it 2 months ago for only two weeks.
Next time I would probably clean/delete some unnecessary code regularly throughout coding. Only by the end of making finishing touches I noticed there were some lines that didn't have to be there. It simply started piling up and at one point it started to be a bit chaotic and unclear.
What challenges did you encounter, and how did you overcome them?I had difficulty including the last section of the recipe card (Nutrition) into the rest of the card. It was standing alone from the rest and it took me awhile to figure it out. Eventually I noticed that the case sensitivity was the issue the whole time and it solved the whole problem.
What specific areas of your project would you like help with?Is there a simpler way to code the responsive design for other devices? Although my way works I feel it's a bit cumbersome.
@lgwardaPosted 5 months agoHi there! Here are three handy tips for a smoother responsive design workflow:
- Flexbox is Your Friend If you're looking for an easy way to create a one-dimensional layout (either row or column), Flexbox is a great tool to have in your CSS arsenal. It can help make your designs more adaptable across different screen sizes.
- Choose Relative Units When it comes to units in CSS, try using relative units like em, rem, %, or vh/vw instead of fixed pixels. These units can adjust according to the screen size, making your designs more responsive and saving you time in the long run.
- Think Mobile First A great approach to responsive design is to start by designing for mobile devices. Once you have your mobile design down, you can then use media queries to adapt your design for larger screens. This keeps your CSS simpler and more organized! Hope these tips help you out!
Marked as helpful1 - @herieduSubmitted 6 months ago@lgwardaPosted 6 months ago
Your HTML document already has a good foundation, but here are specific assessments and suggestions regarding semantic HTML, accessibility, responsiveness, code structure, and design consistency:
- Semantic HTML Current Use: You use <main>, <h1>, <h2>, <ul>, and <ol>, which are great for structure. Improvements: Use <header> for the title section and <section> for distinct parts (like ingredients, instructions, etc.). Consider wrapping the main content in a <article> tag if it's meant to be a self-contained piece.
- Accessibility Current Status: You have some alt text for images, but it's quite basic. Improvements: Enhance alt text to describe the image in more detail. Ensure color contrast meets WCAG standards for readability. Use ARIA roles if necessary, though the semantic HTML should suffice for most cases.
Marked as helpful0 - @Wambugu-FrancisSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
- learning how to style buttons and also incorporating the hoover effects
@lgwardaPosted 6 months agoOverall, you’ve laid a good foundation for your project. Here are some suggestions to improve your HTML structure and accessibility:
Use semantic HTML elements to enhance readability and accessibility. For example, wrap your main content in a <main> tag, and consider using an <article> tag for the profile section.
Headings: Avoid using multiple <h2> and <h3> tags in a row without a clear hierarchy. Instead, you can use <h2> for the main title and <h3> for subsections, ensuring that they reflect a logical order.
Image Attributes: Add width and height attributes to your <img> tag to prevent layout shifts and improve performance.
Accessibility: Instead of using <label> inside buttons, consider using just the button element or style the anchor tags directly. Labels are generally used with form elements.
0
