Skip to content
OverviewSolutions
17
Comments
16
P
Robert Crocker
@robcrock

All comments

  • Yousef Attia•310
    @Deeperr0
    What are you most proud of, and what would you do differently next time?

    I am very proud of the animations in the features section.

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

    Animating the features part was a bit difficult especially with the blue rounded div behind the pictures.

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

    Anything regarding the animations and responsiveness or how to write cleaner react code or things like file structuring would be appreciated

    Bookmark Responsive Landing Page using React and TailwindCSS

    #react#tailwind-css
    1
    P
    Robert Crocker•410
    @robcrock

    The biggest things catching my attention on first glance is that the header image is a bit larger than the design and it's falling off of the right hand side of the screen.

    I tried filling out the form at the bottom, but I don't get the error message I would expect.

    I also noticed that several of the interactive elements aren't changing on hover as you would expect them to.

  • P
    Robert Crocker•410
    @robcrock

    Visually, I can see that the size of the logo should be reduced and the nav moved down. The top row of content that changes is too tall and the navigation buttons are getting squished. In looking more closely at the site there a layout shift happening when you click on the nav buttons, which is a little jarring. You can also use the svg for the shop now arrow they provided instead of the character code. Speaking of code, I briefly looked at your code and noticed that you're reaching to the DOM for the toggleMenu function, which you did get working, but you might want to look at useRef when reaching out to specific DOM elements. All that being said, great work standing up this fully functioning solution 👏

    Marked as helpful
  • Gakii•600
    @G-Gakii
    What specific areas of your project would you like help with?
    • I'm not sure how to set the close icon in the mobile design so that clicking it takes me back to the homepage.
    • I have too much bulky javascript code. Is there a method to write better by using Tailwind for styling and minimising the amount of js code?
    • media queries in Tailwind. I'd appreciate any resources you can recommend to help me understand better.

    loopstudio landing page with tailwind

    #tailwind-css
    1
    P
    Robert Crocker•410
    @robcrock

    This is a fantastic start, but I bet it could feel 1000% better with transitions on the hover effects and proper sizing of the elements. It feels very zoomed out when you go to view the site.

  • P
    Robert Crocker•410
    @robcrock

    Looks great. The only feedback I have on this one is to work on improving the alignment between the design spec of the text and your solution.

    Marked as helpful
  • P
    Nate Valline•420
    @nvalline
    What are you most proud of, and what would you do differently next time?

    This was the first time implementing Typescript and a dark/light mode into an application. I feel like I picked them up fairly quickly. I know I have more to learn with Typescript, but this was a good first project.

    As for the dark/light mode, I elected to handle it with dynamic classes. For this project I feel like it works well, though for larger applications I'm not sure if there is a better way.

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

    Figuring out the question progress bar was the biggest hurdle I faced. I was able to find some information online that provided the right direction and I was able to figure it out in the end.

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

    If there is a better way to handle the dark/light mode feature, I would be interested in hearing other options.

    Also, if there are any general suggestions/tips to improve upon my code I'm all ears.

    Thanks!

    React, Typescript, & SASS

    #react#react-router#sass/scss#typescript#vite
    1
    P
    Robert Crocker•410
    @robcrock

    You could use a context provider to wrap your child components that need to inherit the theme. That being said, I thin you did a good job especially in how you're handling the error state. I personally didn't even take the time to implement the bonus points, so well done. Bravo!

    If you would like to fix a bug, I found one. After you click submit answer you can continue selecting different options and even set the correct answer to be correct and incorrect at the same time. It's a little funky.

    Marked as helpful
  • P
    Robert Crocker•410
    @robcrock

    I like how you set up the min/max password length constants. I also like how you have set up the copy to clipboard reset using setTimeout.

    You asked for feedback on your Tailwind. In my solution I learned how to use the group utility class to style child based on interactions made on the parent. I used this in the Copy to Clipboard button and icon in the Generate button. Maybe you'd like to use it to? https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state I don't think you have setup the hover state of your Copy to Clipboard yet.

  • P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    What are you most proud of, and what would you do differently next time?

    This is my first finished React App. Reviews are welcome :D

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

    Anything was new for me so i learned a lot

    Tip Calculator App

    #react#vite#tailwind-css
    1
    P
    Robert Crocker•410
    @robcrock

    It looks like you did a great job on the design. One thing I see, which I initially missed too, was creating a disabled state for the button that's set before users input their data.

    You may also want to expand on the README using the template provided by Frontend Mentor.

    The last piece of advice, and this is React specific, is to start your component names with an uppercase letter, but NOT your variable names. I see that the Bill and other state variables start with an uppercase letter. This can be problematic since React tries to treat those as components.

    Marked as helpful
  • Tremaine McKinley•40
    @tremckinley
    What are you most proud of, and what would you do differently next time?

    I am most proud of my ability to deploy the site. HTML and CSS are not new to me and this challenge was a fun warm-up, but my goal is to put more code out there and get out of the sandboxes and tutorials.

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

    This was my introduction to Vercel. I also used many different devices, which gave me more github practice. Branching & merging this project was good experience.

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

    Going beyond vanilla frameworks.

    Deployed QR Code component - HTML & CSS warmup

    1
    P
    Robert Crocker•410
    @robcrock

    Great job on your first challenge. Just wanted to hop in and share some more helpful resources. I noticed that you could have used an h2 instead of a header and a div instead of a span. To learn more about all the tags and their uses refer to MDN. And since you probably aren't worried about how the content in this card wraps, flex-direction: column might slightly more direct than flex-flow. Know that everything above is just nit picky. Your solution totally works and looks great 😊

  • SMHN•200
    @smhnfreelancer
    What are you most proud of, and what would you do differently next time?
    1. I use the Tailwind CSS, and it's made it more challenging.
    2. I used the fetch API and the .then approach.
    What challenges did you encounter, and how did you overcome them?

    I was stuck with the javascript at the beginning, then I created another subgrid div, which I appended the dynamically generated content, then the problem was solved, but for an unknown reason my Event Listeners were not working properly.

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

    I need more guidance and reference in terms of Javascript, so I will go for the OOP approach later on.

    Frontend Mentor - Time tracking dashboard

    #tailwind-css
    1
    P
    Robert Crocker•410
    @robcrock

    You did an amazing job matching the design. I finished this challenge as well, but I didn't work nearly as hard thanks to levering React. You probably learned more taking the raw Vanilla JS route, but I would encourage you to try again in the future with something like React or Svelte. You're very talented to complete this task the way you did.

    I also wanted to say that I took the subgrid approach too, but then I figured out that I could simplify things by creating a grid with 4 columns and letting the profile card span 2 rows on desktop. The dynamic row span approach allowed me to completely remove the subgrid concept and greatly simplify my code.

  • TPAIN22•390
    @TPAIN22
    What are you most proud of, and what would you do differently next time?

    learning forms

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

    handle changes

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

    submitting to database

    Newsletter-Sign-up

    #react#tailwind-css
    1
    P
    Robert Crocker•410
    @robcrock

    You'll be so much closer to the solution just by bumping up your font size and adding the appropriate spacing to the content. Don't be afraid of setting a height on your card. I also just noticed that the padding you have around the content of your card is a little more than the solution.

  • TPAIN22•390
    @TPAIN22
    What are you most proud of, and what would you do differently next time?

    a

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

    b

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

    c

    article-preview

    #tailwind-css#react
    1
    P
    Robert Crocker•410
    @robcrock

    First off, the card looks great. Because this is a critique, I wanted to find a few things to key in on incase you would like to iterate on the submission:

    1. The solution doesn't have much of a shadow. Changing yours to be closer to the solution would make a big difference.
    2. If the tooltip was a little wide the share links could get enough room to not feel as squished.
    3. The footer on mobile feel jarringly different from the solution. If you could keep the share button in the same position as it is in when it is inactive, then it will feel much better.
    4. Your card changes for several more breakpoints than the two in the style guide. You could get closer to the design and possible save some awkward in between states be only design for the two screen sizes in the style guide.
    Marked as helpful
  • P
    Robert Crocker•410
    @robcrock

    I looked at your code and it is truly pro level code you have written there. Fantastic work!

    The only feedback I can seem to stir up might be to use utility classes instead of strong tags and think of using Zod to infer your types instead of manually keeping them updated throughout the component tree.

  • Eugene Amedior•140
    @Eugene-ak
    What are you most proud of, and what would you do differently next time?

    Sass is a very useful css preprocessor and makes writng css very easy. It allows all the functionalities of vanilla css and more. I found out in this project that using it in next js is as simple as just changing the css files extensions to scss. It can be used in a modular way just as css mosule works. I am enthusiastic about being able to use it in my project with next js.

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

    I flowed through this project smoothly and encounters no challenges.

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

    In future projects, I'm going to learn more about adding custom fonts and metadata to my website and webpages.

    Social links profile

    #next#react#sass/scss#typescript
    1
    P
    Robert Crocker•410
    @robcrock

    The HTML is nice and easy to follow. My only feedback there is that you could've have used a string template to make the alt text more specific. The anchor tags could have also been put in an unordered list and some dummy links could have been added to those anchor tags.

    Marked as helpful
  • Sayeed Munees•130
    @sayeedmunees
    What are you most proud of, and what would you do differently next time?

    Learned how to add a box shadow transition when hovering over a card.

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

    I wasn't able to add hover over transition, but later I found out and added it.

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

    I would love to know how to change the pointer color.

    Blog preview card - Solution

    1
    P
    Robert Crocker•410
    @robcrock

    I really like what you did with the footer. I think I'm going to use that as inspiration!

  • P
    Robert Crocker•410
    @robcrock

    I wanted to provide some high-level feedback on the design:

    • You nailed the border-radii for the card and the image
    • The text hierarchy looks great
    • I also notice that the color for the background, text, and border don't match the design

    I think updating the colors to match the design would be a great improvement!

  • P
    Robert Crocker•410
    @robcrock

    I would also say that your class names seem a bit more specific than class names should. Additionally, I noticed that the text is italicized in your solution, but not the mockup.