@samyr-meloSubmitted about 2 months ago
Latest solutions
Latest comments
- @Youssef-fPosted about 1 month ago
- Improve Accessibility: • Add alt text to images in a more descriptive way (e.g., "A freshly made omelette on a plate" instead of "foto de omelete"). • Use semantic HTML elements like <section> for different sections (e.g., preparation, ingredients, instructions). • Ensure that the <h1> tags are used appropriately. You have multiple <h1> elements; consider using <h2> or <h3> for subsections.
Use Consistent Class Naming: • Some class names are in English (.receita, .ingredientes), while others are mixed (.instrucao). Standardizing the names (all in English or all in Portuguese) improves readability.
CSS Feedback: 1. Improve Consistency in Spacing & Alignment: • The .preparacao section’s text alignment is set to justify, but this may not be necessary. Centering or left-aligning text could look better in smaller screens. • The .calories div has gap: 350px, which is too large for smaller screens. Use flex-wrap: wrap; for better responsiveness. 2. Enhance Mobile Responsiveness: • The .calories section may overflow on smaller screens. Adjust the padding: 28px 300px 10px 20px; to be responsive using @media queries. • The .receita h1 font size is quite large. Use clamp(32px, 5vw, 55px); to make it more adaptable. 3. Fix Footer Positioning: • Your footer is position: fixed; but this can overlap content on smaller screens. Consider using position: relative; or sticky.
0 - @raymondkembsSubmitted 2 months ago@Youssef-fPosted about 2 months ago
Hello there, your project look awesome! here is some review :
Strengths 1. Clean Structure: • The HTML structure is simple and well-organized with semantic elements like <div> for sections and meaningful class names. • The use of a separate CSS file (home.css) helps maintain a clean separation of concerns. 2. Styling Consistency: • The use of custom properties (--green, --grey900, etc.) for colors ensures consistency and makes it easier to update the theme later. • The consistent use of Flexbox provides a responsive and centered layout. 3. Typography: • The inclusion of the Google Font (Outfit) adds a polished look to the design. • Font sizes and weights are appropriately set for different text elements (e.g., name, city, and comment). 4. Hover Effects: • The hover effect on the social media links is intuitive and visually appealing, providing clear feedback to users. 5. Accessibility: • Including alt attributes in the <img> tags improves accessibility and SEO.
Areas for Improvement 1. Responsiveness: • While the layout works well for the given height (600px), it may not adapt seamlessly to smaller or larger screen sizes. Consider adding a media query to handle varying screen dimensions. 2. Image Optimization: • The width and height attributes of the image are hardcoded. Use responsive styles like max-width: 100% and height: auto to ensure the image scales properly across devices. 3. Interactive Elements: • The social media links are placeholders (href="#"). Adding real or placeholder URLs (e.g., href="https://github.com/") would improve realism and functionality. 4. Semantic HTML: • Replace the <div> container holding the social media links (<div class="mycon">) with a <nav> element to improve semantics for navigation. 5. Contrast Issues: • While the colors are visually appealing, consider checking their contrast ratio against accessibility standards (WCAG). The light green text on the dark background might not meet the required contrast ratio for some users. 6. CSS Optimization: • Avoid redundant code. For example, font-optical-sizing: auto; might not be necessary for this project. • Combine shared styles (e.g., justify-content: center; and align-items: center; used multiple times) into reusable classes to reduce duplication.
0 - @iindtySubmitted 6 months ago@Youssef-fPosted 6 months ago
Here’s some detailed feedback on your solution:
- Semantic HTML Strengths: You have used semantic elements like <h1> for the title, and appropriate <p> tags for paragraphs, which is great. Improvements: Use more semantic HTML elements. For example: Wrap the blog content in an <article> element instead of using generic <div> containers. This enhances accessibility and SEO. Use <header> for the top section that includes the title, date, and learning tag. Consider using <time> for the date to make it semantically clear that it represents a date.
- Accessibility Strengths: The alt attributes on your images (<img>) are well-implemented, which is crucial for screen readers. Improvements: For better accessibility, the color contrast between text and background should be checked. For example, the light gray text in .detail (#6b6b6b) might be harder to read against a white background for some users. Tools like the WebAIM Contrast Checker can help ensure proper contrast. Consider adding aria-label or aria-labelledby attributes for interactive elements like your hoverable <h1> for better screen reader support. Add a :focus state for any interactive elements (like links or hoverable headers), so users who navigate via keyboard can see which element is currently focused.
- Responsive Layout Strengths: You have implemented a media query for screens smaller than 416px, which shows that you've considered responsiveness. Improvements: Test on a variety of screen sizes, especially between 416px and tablet size (~768px). The layout might feel squeezed between these ranges. You might consider adding additional breakpoints to improve layout scaling for medium-sized devices. Consider using flex-grow or grid-template-columns to allow your card to adjust better across different viewports, giving more flexibility to the layout.
- Code Structure and Reusability Strengths: Your CSS is generally well-organized and uses modern features like flexbox. The use of @media queries shows that you are keeping responsiveness in mind. Improvements: You could refactor some CSS to be more reusable by grouping similar properties. For example, both .learning and .name use font-weight: 800. Consider creating a utility class for bold text, and then apply it wherever needed (e.g., .bold-text). Use CSS variables for frequently used values like colors (#f4d04e appears multiple times, so setting it as a variable would increase maintainability).
- Design Consistency Strengths: The overall layout, with a structured card design, looks good and closely follows the blog preview card concept. Improvements: The hover color on the <h1> (yellow) might be too close to the background color, making it less noticeable. Try using a darker or more contrasting color for hover states. The avatar image (.sec3 img) width is set to 10%, which could lead to disproportionate scaling, especially on larger screens. Consider using px or rem units for more consistent sizing.
0 - P@cookie-monster01Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
The project itself was easy, I was able to use both flexbox, media queries for a responsive design. I have used and for enclosing the content within it. I have used id attribute on section called #main and have used a class .first-division. I have created a separate CSS file for styling, called app.css. Both #main and .first-division have a display of flex, #main has a flex-direction of row, while .first-division has flex-direction of column, and have applied justify-content to flex-start. I have provided #main with a padding of 115px on top and bottom to be able to center the .first-division. I have used padding and scale to increase the size as well as to manage white space as per the reference on and . I have also used to positioning to shift content to the top relatively. I have used media queries at 580px, 480px and 375px.
What challenges did you encounter, and how did you overcome them?I was using max-width property but not box-sizing property to control the flow of the content. I remembered to apply it, and it worked better.
What specific areas of your project would you like help with?I believe I come to the same results with more number of steps, maybe i would like examples of how i could have done it differently in a fewer steps, or what could have been more efficient solution.
