Skip to content
OverviewSolutions
3
Comments
3

Adhizah

@Adhizah50 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Social links profile

    Adhizah•50
    Submitted 5 months ago

    I would appreciate feedback on improving the responsiveness of my design. Currently, it looks fine on desktop-sized screens but could be better optimized for mobile devices. I’m also looking for suggestions on how to improve the styling of my buttons .

    Another area I would like feedback on is the usage of semantic HTML. I want to ensure that I am using best practices and that my code is as accessible and SEO-friendly as possible. Any suggestions on making my structure cleaner or more semantically correct would be very helpful.

    1 comment

  • Blog preview card

    Adhizah•50
    Submitted 5 months ago

    Areas I Would Like Help With

    One specific area I would like help with is improving the responsiveness of my design, especially on smaller screens. While I used flexbox for layout, I feel that the design could be better optimized for mobile devices. I would love to get feedback on using advanced Flexbox techniques to enhance the layout further.

    Additionally, I want to explore CSS Grid for creating more complex, two-dimensional layouts. I haven't used CSS Grid extensively yet, and I am interested in understanding how to implement it effectively in this project to improve the overall structure and design.

    Lastly, I am also interested in getting feedback on my use of box-shadow for visual depth. I am not sure if the shadow effect is consistent across all screen sizes, and I would appreciate any suggestions for improving its appearance.

    1 comment

  • QR-CODE component using html and css

    Adhizah•50
    Submitted 5 months ago

    Specific Areas I’d Like Help With

    I would really appreciate help with understanding Flexbox more deeply. While I used it for centering elements in my layout, I’m still not fully confident in how to apply its full range of capabilities. Specifically, I would love more clarity on:

    1. Flexbox Container Properties: How to effectively use properties like justify-content, align-items, and flex-direction to create flexible and responsive layouts.

    2. Flexbox Item Alignment: Understanding the different ways to align individual flex items within the container, particularly in more complex layouts.

    3. Flexbox vs Grid: When to use Flexbox vs CSS Grid, and how to determine which one is best suited for different layout scenarios.

    Any guidance or resources that explain these concepts in detail would be greatly appreciated!

    1 comment

Latest comments

  • Adhizah•50
    @Adhizah

    What I Like

    Clean HTML Structure:

    • The HTML structure is well-organized and clear. It uses appropriate semantic elements, such as <section>, <ul>, and <li>.
    • The use of the <img> tag for the avatar is good, and I appreciate that you included an alt attribute for accessibility, even though it could be more descriptive.

    Areas for Improvement

    Accessibility of the Avatar Image:

    • The alt attribute for the image is empty. To improve accessibility, consider describing the image (e.g., alt="Profile picture of Jessica Randall").
    Marked as helpful
  • Carliytox•80
    @Carliytox
    What are you most proud of, and what would you do differently next time?

    I'm most proud of my ability to implement responsive design using clamp() for fluid font sizes and widths without relying on media queries. It helped me create a smooth and scalable layout. If I were to do this again, I would focus more on optimizing accessibility, perhaps by adding ARIA roles and ensuring all interactive elements are fully accessible. I also want to experiment with using CSS Grid for more complex layouts.

    What challenges did you encounter, and how did you overcome them?

    One challenge I faced was ensuring that all hover states were consistent across different screen sizes. To solve this, I carefully reviewed the CSS properties and adjusted the font sizes and element spacing using clamp() and rem units to ensure better responsiveness. Another challenge was refining the layout's responsiveness on mobile, which I addressed by using a mobile-first approach and applying Flexbox to achieve a clean and responsive design.

    What specific areas of your project would you like help with?

    I’d love feedback on the following:

    How I can further improve accessibility on the page—specifically if there are any better practices for enhancing screen reader compatibility. Any suggestions for improving the CSS structure, such as using pre-processors like SASS or organizing the code better to avoid redundancy. Recommendations for ensuring cross-browser compatibility, especially on older bro

    Blog Preview Card - Frontend Mentor Challenge

    1
    Adhizah•50
    @Adhizah

    3. Responsiveness:

    • The layout appears to be responsive, especially with the use of clamp for the width of the container and images, which adjusts according to the viewport width.
    • One area to consider is ensuring the layout maintains a balance on extremely small screens (like mobile), where the flexbox properties might cause the layout to get too compact. You could use media queries to tweak the padding and layout further.

    Improvement suggestion:

    @media (max-width: 480px) {
  main {
    padding: 15px;
  }
}
  • Adhizah•50
    @Adhizah

    Strength

    The code is clean and easy to read.

    Weakness

    The alt text for the image is too generic and could be more descriptive.