Ann

Latest comments

• 

  EdMatheus•170

  @ed-matheusSubmitted over 1 year ago

  

  Responsive Landing Page - Product Preview Card

  #accessibility#bootstrap

  1

  40
  

  Ann•110

  @anastDevPosted 6 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

  0
• 

  KWaren•60

  @KWarenSubmitted about 1 year ago

  

  Recipe-page with SASS

  #accessibility#sass/scss

  1

  10
  

  Ann•110

  @anastDevPosted 8 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!

  0
• 

  tylerhyndman484•100

  @tylerhyndman484Submitted 9 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

  30
  

  Ann•110

  @anastDevPosted 8 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

  1
• 

  Vanessa•160

  @petrihcourSubmitted 9 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

  20
  

  Ann•110

  @anastDevPosted 9 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.

  0
• 

  Adebukola Adeyinka Omowole•280

  @AdebukolSubmitted 9 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

  20
  

  Ann•110

  @anastDevPosted 9 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.

  3. 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.
  4. The code is readable and good-structured.
  5. 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

  1