Skip to content
OverviewSolutions
2
Comments
2
youssef
@Youssef-f

All comments

  • youssef•20
    @Youssef-fPosted about 2 months ago

    Here’s some detailed feedback on your solution:

    1. 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.
    2. 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.
    3. 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.
    4. 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).
    5. 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
  • cookie-monster01•80
    @cookie-monster01Submitted about 2 months ago
    What 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.

    Responsive web design with flexbox and media queries

    2
    youssef•20
    @Youssef-fPosted about 2 months ago

    I like the way you used the media query and the scaling.

    0