Skip to content
OverviewSolutions
11
Comments
10
Yanna
@yannancls

All comments

  • P
    Carlos Santana•260
    @cacesasa
    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

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

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

    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
  • Yanna•250
    @yannancls

    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
  • Yanna•250
    @yannancls

    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.

  • Yanna•250
    @yannancls

    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!

  • Yanna•250
    @yannancls

    The h1, h2, and h3 tags' font sizes could have been larger. Examining the image of the designed result, I believe the <li> inside the <ul> are brown. The padding between the image and h1 may be reduced, and the appearance of the table at the end can be improved by making it centered or justifying it. Finally, decide if you want to name classes in Pascal, Camel case, or another format. Overall, it is responsive, you did a wonderful job!

  • Fernanda Tollotti•140
    @fernandatollotti
    What are you most proud of, and what would you do differently next time?

    In this project, I take pride in successfully implementing CSS techniques to enhance my knowledge and skills in frontend development.

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

    I did not encounter any difficulty with the challenge.

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

    I would like to know if the use of rem in CSS is correct, as I studied according to the guidelines provided by the platform's developers.

    Social Links Profile - Flexbox CSS

    1
    Yanna•250
    @yannancls

    Overall, the expected design appearance was properly executed, and the code was readable. Tags were used appropriately, and the website is responsive. Good work!

    Marked as helpful
  • Yanna•250
    @yannancls

    Based from the Figma file that was given to us, you did not apply the hover effect to your work but still, the code are readable and the final look are great!

  • Yanna•250
    @yannancls

    The code was readable and well structured. It really did what was said in the instructions, good job!