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

Yanna

@yannancls250 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

  • Tip Calculator App using React

    #react

    Yanna•250
    Submitted 8 months ago

    1 comment
  • Time Tracking Dashboard using React

    #react

    Yanna•250
    Submitted 9 months ago

    1 comment
  • Newsletter Sign-up Form with Success Message using React

    #react

    Yanna•250
    Submitted 9 months ago

    1 comment
  • Article Preview Component using React

    #react

    Yanna•250
    Submitted 9 months ago

    1 comment
  • Testimonials Grid Section


    Yanna•250
    Submitted 9 months ago

    3 comments
  • Four Card Feature Section


    Yanna•250
    Submitted 10 months ago

    1 comment
View more solutions

Latest comments

  • P
    Carlos Santana•260
    @cacesasa
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy on how I completed the challenge and with the final result. Using React made the precess simpler with the use of components.

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

    The use of flex and grid container made the challenge simpler and challenge free.

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

    As always, feedback is always welcome, if you see any area that can be improved please let me know.

    Time tracking dashboard

    #react
    1
    Yanna•250
    @yannancls
    Posted 9 months ago

    I noticed that you did not implement the hover state, which is essential for the project. The website's responsiveness is good but it may be better to add some padding to the body so that when the screen gets smaller, the cards do not touch the very edge of the website. Furthermore, I believe it would be better to make some changes when the max-width is 770px, because there are a lot of spaces on the side when the cards are aligned vertically. Overall, a job well done on the completed challenge.

    Marked as helpful
  • Duncan Chege•340
    @duncan-chege
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?
    • I'm proud that I did email validation in another project so I copied the logic in this project
    • I also aligned the elements using CSS Grid, instead of Flexbox which I'm used to
    • I used two components for the default state and success state
    What challenges did you encounter, and how did you overcome them?
    • Passing data from the parent component (App.jsx) to the child component (Success.jsx) was tricky but with research, it became straightforward

    Newsletter Signup form using React & Vite

    #react#vite
    1
    Yanna•250
    @yannancls
    Posted 9 months ago

    You should probably improve your code's responsiveness; as it stands, when the screen width reduces, the photo on the left overlaps the texts on the right. Furthermore, when the maximum width is around 1000px, the screen design appears disordered. But overall, a job well done!

    Marked as helpful
  • Vladimir Gatara•440
    @vgarmy
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    Im proud og how i handle the handleMouseEnter and handleMouseEnter.

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

    it was a little tricky to go from mobil too dekstop design. Coding, coding coding.....

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

    None at this point

    Article preview component - CSS Flex, React

    #react
    1
    Yanna•250
    @yannancls
    Posted 9 months ago

    Hello, I noticed the font colors for your article is different from the preview design provided to us, and the font size should be slightly larger. Furthermore, I believe the article's size is pretty big with the smaller width of the device, and it is not centered. You can also observe that the image of the drawer can still be improved considering the provided picture in the preview design. Lastly, I believe the share icon should be in an active state when the Share.jsx is displayed. Overall, everything is good and it is responsive. Good work!

    Marked as helpful
  • ICode88•280
    @ICode88
    Submitted 9 months ago

    Testimonials grid section DAY 21 with HTML & CSS

    2
    Yanna•250
    @yannancls
    Posted 9 months ago

    The website was responsive and good, however my recommendation is to add a max-width to the main tag so that it looks good even on a large screen. Also, instead of using the div element to add the background picture in CSS, using an img tag would be preferable because it would allow you to apply CSS easily and shorten your code. Finally, I noticed that when I decreased the width, the gaps for card 5 were inconsistent, which I believe you can improve much more. But overall, it was excellent. Great job!

    Marked as helpful
  • Fahim-Haowlader•100
    @Fahim-Haowlader
    Submitted 11 months ago

    Section Design

    1
    Yanna•250
    @yannancls
    Posted 10 months ago

    Reading your CSS file confused me. It doesn't appear to be the correct file or anything, and I think you utilize Tailwind which is cool. And because I haven't tried to learn it yet, it makes it challenging for me to check your CSS. Moreover, the design of your webpage does not exactly portray the intended result based on the photo. I believe you did not use the font family that was provided to us as well as the colors; font sizes can be modified. Also, it is not responsive. It would be great to make it one to improve it.

  • Emerson Silva•40
    @emersonescodes
    Submitted 11 months ago

    Product Preview Card Component

    1
    Yanna•250
    @yannancls
    Posted 10 months ago

    After reviewing your work, I saw that the HTML file was great and the website is responsive. However, some fonts are too huge or small, so you can change them to make your work better. Furthermore, the hover button for the "Add to Cart" was not implemented. Lastly, I appreciate how you have divided your CSS files into distinct groups, though there was a duplicate "* { }". But overall, excellent work!

View more comments
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

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