Skip to content
OverviewSolutions
6
Comments
14
ortiz-antonio
@ortiz-antonio

All comments

  • ortiz-antonio•180
    @ortiz-antonioPosted 3 days ago

    After submitting my challenge, the system asked me to provide feedback. I'm still learning, so if you have a different approach, please let me know.

    Accessibility

    • This challenge represents a section, so it should be inside a complete page. Replace the h1 with an h2, and to pass accessibility tests, add a hidden h1 to represent the main page's header.
    • To improve contrast for accessibility, I darkened the base color. You can find many online tools to help with this.

    Speed

    • Hosted fonts are faster because they don't require an external call. Use font-display: swap or a fallback font to make your page load more quickly.

    SEO

    • Consider adding meta tags to enhance search engine optimization.
    0
  • Evertxs•10
    @EvertxsSubmitted 29 days ago
    What are you most proud of, and what would you do differently next time?

    I think this was a fairly basic one but it feels nice to be able to know the bare minimum that I do and replicate it

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

    I still struggle with aspects of width and height / length, it's hard to understand what takes up what space

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

    Is my project responsive? Does it match the mobile layout?

    I would also like assistance in the height x width/length topic

    Responsive QR Card Component

    2
    ortiz-antonio•180
    @ortiz-antonioPosted 29 days ago

    Good job making your design responsive! Maybe you can improve its appearance by viewing the sizes in the Figma design and adjusting the following:

    • Padding
    • Border radius
    • Font styles

    If you want to improve the quality of the code, follow BEM or another CSS methodology.

    0
  • ortiz-antonio•180
    @ortiz-antonioPosted 2 months ago

    Why don't you use an image for mobile design? In the media query for the desktop design, why do you use a single column?

    Marked as helpful
    1
  • Bridget Akellian•100
    @bakellianSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    lots of googling

    What specific areas of your project would you like help with?
    1. image: can not get object-fit to work?
    2. responsiveness: was trying to find a way to get text to wrap when adjusting screen sizes but can not find a solution

    would love any feedback, thank you

    Recipe landing page

    1
    ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Perhaps increasing the font size based on screen resolution using media queries?

    0
  • ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    You can add padding to the buttons to make them larger, similar to the design.

    Marked as helpful
    0
  • Taiwo Sumayyah•150
    @Sumta4realSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to properly able to use github for my version control

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

    Nothing really

    Blog Preview Card using HTML and CSS

    1
    ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Why does the shadow grow when I hover over the title?

    0
  • ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Nice start! You can inspect the Figma design to view the font specifications and spacing.

    0
  • ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Where is the background image?

    0
  • Fernanda Tollotti•40
    @fernandatollottiSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I take great pride in having achieved this challenge, especially considering that, although I had some knowledge in the field, it had been a while since I practiced this type of activity. The experience allowed me to overcome what seemed like a significant obstacle and reaffirmed my skills and confidence.

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

    The biggest challenge in this type of task is reproducing exactly what is in the image. Even when using layout design tools like Figma or XD, achieving a pixel-perfect result is difficult. Making the layout look exactly the same is a significant challenge for any developer

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

    I would appreciate help especially with spacing and sizing to improve and tackle other challenges throughout my journey. Additionally, the other parts were easier to handle since I already had prior knowledge in HTML and CSS. Any feedback is welcome; I want to grow and become excellent in my field, and also help other developers.

    QR Code Component using Flexbox

    2
    ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Great work! You're using rem units without setting a base font size on :root. This could potentially lead to inconsistencies across different browsers.

    Marked as helpful
    0
  • ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Nice start! Did you intentionally use an oval shape for the avatar?

    0
  • ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Great start! Could you explain why you're using position: absolute? The text seems to shift from the card when I resize the window.

    0
  • ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Love your code! Your semantic markup is excellent.

    Marked as helpful
    0