Skip to content
OverviewSolutions
15
Comments
11
girldocode
@girldocode

All comments

  • girldocode•260
    @girldocodePosted about 1 year ago

    overall it looks very nice. just add border-radius to the perfume section.

    1
  • girldocode•260
    @girldocodePosted about 1 year ago

    it looks really nice. just apply border-radius to the image.

    Marked as helpful
    1
  • kamalesh87•10
    @kamalesh87Submitted about 1 year ago

    i ve tired to do but i thought by seeing others code would help me learn more techinical knowledge so i just posted it do give me the feedbacks!!

    Results summary component solution

    1
    girldocode•260
    @girldocodePosted about 1 year ago

    Actually you did a good job , if you want to improve more ,you can try using these in your code:

    => use flex property set to center to bring that circle in middle.

    => use border radius on card.

    => give margin + padding .

    => use linear gradient.

    => use opacity to lightens the colors on summary section.

    0
  • girldocode•260
    @girldocodePosted about 1 year ago

    thanks for the review . i will apply this in my upcoming projects.

    0
  • Mennatallah Hesham•1,490
    @Mennatallah-HishamSubmitted about 1 year ago

    Hello, Frontend Mentor community. This is my solution for the Qr-Code Component challenge

    Today marks the beginning of the Newbie Challenge, a unique opportunity for me to offer solutions for HTML/CSS challenges specifically designed for newcomers. Throughout this challenge, I aim to provide comprehensive guidance to fellow developers by adhering to industry best practices. By focusing on key areas such as

    • Semantic HTML
    • Clean web page structure
    • CSS enhancements
    • Accessibility
    • Performance Optimization,

    I aim to address common mistakes observed in the challenges submitted by other participants. Through this initiative, I hope to not only solve newbie-level projects but also share valuable insights and tips to aid in their learning journey.

    In this challenge, I focused on reducing the load time of Google fonts to improve page performance by 880ms. you can check this article

    This solution is tested by

    if you want me to review your code, just comment (the challenge name + the areas you want me to focus on) and I will provide a review as soon as possible.

    QR Code Component

    2
    girldocode•260
    @girldocodePosted about 1 year ago

    Thanks for sharing great article. It is helpful resource to know about web accessibility. Your font CSS is missing color and size. Did you notice?

    0
  • girldocode•260
    @girldocodePosted about 1 year ago

    You can add font family to improve text appearance. Overall looks nice.

    0
  • girldocode•260
    @girldocodePosted about 1 year ago

    Overall looks nice. Just add margin around card. And also check font family.

    1
  • girldocode•260
    @girldocodePosted about 1 year ago

    Nice. You have used CSS nesting, it is good practice. You just need to add little margin in around card in mobile version.

    Marked as helpful
    1
  • girldocode•260
    @girldocodePosted about 1 year ago

    Looks beautiful, but need little focus on media query. At some point image does not show in mobile version.,

    0
  • KNaingrW•70
    @KNaingrWSubmitted about 1 year ago

    What did you find difficult while building the project?: Achieving precise alignment and spacing of elements in smaller mobile views was challenging. Ensuring a consistent and visually appealing layout across different screen sizes required careful adjustments.

    Which areas of your code are you unsure of?: While I have tested the code extensively, I'm always cautious about cross-browser compatibility and responsiveness, especially on older browsers. Additionally, I would benefit from feedback on the overall code structure and organization to ensure it follows best practices and is maintainable.

    HTML/CSS Grid, Flexbox, Media Queries

    1
    girldocode•260
    @girldocodePosted about 1 year ago

    You can improve few things

    • Background colors
    • Sizing
    • Fonts
    0
  • girldocode•260
    @girldocodePosted about 1 year ago

    Looks nice but you need to improve few things like colors, fonts, and some spacing issues.

    Marked as helpful
    0