Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
5

Ann

@anastDev110 points

A newbie in the tech world with a passion for learning and growing. Has a solid foundation in Flutter, HTML, CSS, JavaScript, and React. Currently exploring the tech industry with a focus on modern development tools. Eager to expand skills and contribute to exciting projects.

I’m currently learning...

I am actively enhancing my skills and knowledge in these languages through hands-on projects.

Latest solutions

  • Responsive Product Card Preview using Bootstrap

    #accessibility#bootstrap

    Ann•110
    Submitted 9 months ago
    • I faced challenges in deciding where to focus on Bootstrap’s built-in classes versus adding my own custom styles. It took some time to strike the right balance, but I eventually refined my approach by experimenting with both.

    • Another challenge was adjusting the media queries for responsiveness on smaller devices. I overcame this by tweaking the layout in Bootstrap and writing specific custom media queries to ensure a smooth experience on mobile screens.


    1 comment
  • Responsive Recipe Card Page Using CSS Flexbox/Styling and Custom Lists

    #accessibility

    Ann•110
    Submitted 10 months ago

    I'd love some feedback on making my code more concise, readable, and reusable, without losing functionality. Any tips on improving this would be greatly appreciated!


    0 comments
  • Responsive social links page - CSS Flexbox/Bootstrap/Hover-Focus State

    #bootstrap#accessibility

    Ann•110
    Submitted 11 months ago

    I’d appreciate any constructive criticism on how to improve my code, especially in making it more concise and well-structured.


    2 comments
  • Responsive page using CSS Flexbox and Media Query

    #bootstrap#accessibility

    Ann•110
    Submitted 11 months ago

    I’d really appreciate some feedback on how I’m using "em" and "rem" units. I want to make sure I’m using them effectively and understanding their impact on responsiveness and accessibility.


    0 comments
  • Responsive View Solution using CSS and Media Query

    #accessibility

    Ann•110
    Submitted 11 months ago

    I'd like help with a few specific areas of my project:

    1. Integrating Bootstrap's Card Component with Custom CSS : I want to understand how to effectively use Bootstrap's card property while incorporating custom CSS to personalize the design.

    2. Exploring Alternative Methods to Center the Card : I'm interested in learning different techniques for centering the card within the page, beyond the methods I've already used.

    3. Enhancing Responsiveness : I'm looking for alternative approaches to improve the responsiveness of the card, ensuring it adapts seamlessly to various screen sizes.


    0 comments

Latest comments

  • EdMatheus•170
    @ed-matheus
    Submitted almost 2 years ago

    Responsive Landing Page - Product Preview Card

    #accessibility#bootstrap
    1
    Ann•110
    @anastDev
    Posted 9 months ago

    Your code looks clean, and you’ve done a great job using semantic HTML and organizing your CSS. The media queries show you’re thinking about responsiveness, which is essential.

    1.Mobile Version Issues:

    • It seems like the mobile image isn’t displaying as intended because of the opacity setting (opacity: 0;). This is likely the source of your difficulty. If you want the mobile image to display instead of the desktop image, ensure that the desktop image is hidden on smaller screens (display: none;) and not just made transparent.
    @media (max-width: 576px) {
      .product_image > .desktop-image {
        display: none;
      }
      
      .product_image > .mobile-image {
        display: block;
        opacity: 1;
      }
    }
    

    2.Container Width Adjustments:

    • In your media queries for larger screens (e.g., @media (min-width: 768px) and up), you’re adjusting the width of the card container gradually. Consider consolidating the widths into fewer breakpoints unless you see specific needs for these small increments.

    Suggestion:

    • You could try setting the card width at major breakpoints (e.g., 576px, 992px, and 1200px) to simplify and reduce CSS redundancy.

    hope I was a bit helpful :)

    Marked as helpful
  • KWaren•60
    @KWaren
    Submitted over 1 year ago

    Recipe-page with SASS

    #accessibility#sass/scss
    1
    Ann•110
    @anastDev
    Posted 10 months ago

    Hey, just a heads-up—I'm still learning, so I might not get everything perfect with my feedback!

    One thing I noticed is that the fonts seem a bit different from the design. In the style-guide.md, it suggests using Young Serif (Weight: 400) and Outfit (Weights: 400, 600, 700). Adjusting those might help match the design more closely! Also, some of the colors could be tweaked to align better with the original design.

    I think reducing the space between the h1 and the paragraph could also help make things feel a bit more cohesive. A smaller gap might make it easier for readers to associate the title with the description.

    Maybe try reducing the spacing between them to around 24px and adding padding-top: 40px; to keep things balanced. You might also want to review a few other elements to make sure they’re consistent with the design.

    But great job overall! Keep it up!

  • tylerhyndman484•100
    @tylerhyndman484
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of my use of pseudo elements and media queries.

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

    No real challenges, pretty easy project.

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

    I would like to continue to improve on the pseudo elements usage and media query usage.

    Responsive Social Links Card

    #accessibility
    1
    Ann•110
    @anastDev
    Posted 11 months ago

    As someone new to the coding world, I’m still learning and growing my skills. Please bear with me if some of my observations or feedback aren't entirely accurate.

    • The solution effectively uses semantic HTML.
    • It’s accessible, and I don’t see any immediate improvements needed in that area.
    • The layout is responsive and well-designed. I especially liked the use of pseudo-elements and media queries, such as:
    *, *::before, *::after {
        box-sizing: border-box;
      }
    
    • The code is well-structured, readable, and reusable. I’ll definitely refer back to it in the future because of how well it’s written.
    • From my perspective, the solution matches the design perfectly.
    Marked as helpful
  • Vanessa•160
    @petrihcour
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    With this project, I used to use Bootstrap without React. I used it with HTML only. It was a good learning experience.

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

    I ran into an issue with the card not being horizontally centered on the screen. Turns out, I needed to ensure the body has 100vh in order for it to be horizontally centered.

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

    Any feedback on what I could have improved would be amazing.

    Responsive Blog Preview Card using Bootstrap and HTML

    #bootstrap
    1
    Ann•110
    @anastDev
    Posted 11 months ago

    As someone new to the coding world, I’m still learning and growing my skills. Please bear with me if some of my observations or feedback aren't entirely accurate.

    Does the solution include semantic HTML?

    The solution effectively matches the design, which is great. However, I noticed that the styling is mixed into the HTML, which can be a bit confusing. Separating the CSS from the HTML might help improve clarity.

    Is it accessible, and what improvements could be made?

    The design looks solid, but separating the CSS from the HTML could make it easier to manage and improve accessibility by ensuring that styling does not interfere with content structure.

    Does the layout look good on a range of screen sizes?

    The layout looks good and aligns with the design across different screen sizes. However, ensuring the CSS is properly separated might enhance responsiveness and make adjustments easier.

    Is the code well-structured, readable, and reusable?

    While the code is functional and readable, separating the styling into a dedicated CSS file could improve its structure and reusability. This change would make the codebase more modular and maintainable.

    Does the solution differ considerably from the design?

    The solution closely matches the design. The main area for improvement is organizing the code better by keeping HTML and CSS separate to avoid confusion and enhance overall code quality.

  • Adebukola Adeyinka Omowole•280
    @Adebukol
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I was proud of coming back to coding, it's been a long time. It was really a memory refresh and fun at the same time.

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

    I had forgotten some stuff honestly. W3 school was able to help out. Thumbs up

    Responsive Qr code

    #accessibility
    1
    Ann•110
    @anastDev
    Posted 11 months ago

    As someone new to the coding world, I’m still learning and growing my skills. Please bear with me if some of my observations or feedback aren't entirely accurate.

    1. The solution included semantic HTML
    2. I think that the website is accessible :
    • Text alternatives for non-text content are used.
    • There is sufficient color contrast between text and background as there is an underline at the anchor tag.
    1. The layout looks good on a range of screen sizes. One thing I noticed is that users need to scroll to see the full design, which might impact usability.
    2. The code is readable and good-structured.
    3. The solution closely matches the design. The only difference I noticed is that the design includes a shadow on the card. Good job!
    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub