Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
P

Jen

@En-Jen
Denver, Colorado
1,230Points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

React, a11y, styled-components, Redux, animations πŸ‘©β€πŸ’»

Latest Solutions

  • Desktop design screenshot for the Pomodoro app coding challenge

    Pomodoro Timer | React | Redux | Styled Components | Sound Effects

    • HTML
    • CSS
    • JS
    6
    Jen1,230
    Submitted

    Hey FM community! I don't have any specific questions but I'd love any/all feedback on this solution. I've only been learning React the last few months so any feedback on anything related to React, Redux, or Styled Components would be much appreciated.

    I wasn't able to figure out how to style the arrows that the user clicks to increase or decrease the value in the inputs of type="number" in a way that it would work on all browsers so I just scrapped styling the arrows but I think that's something I can live with.

    If you're curious to read more about this project, feel free to read the detailed README. Just to summarize, this project includes sound effects, Redux Toolkit for state management, and a few little animations 😊

  • Desktop design screenshot for the Coffeeroasters subscription site coding challenge

    Coffeeroasters Subscription Site | React | Styled Components | a11y

    • HTML
    • CSS
    • JS
    11
    Jen1,230
    Submitted

    I would love feedback on this challenge! This is my first multi-page challenge and I am still fairly new to React, therefore any React-related feedback would be highly appreciated. What do you think of the file structure and the way the code is organized? Am I splitting up my components appropriately? How is my use of styled-components? This is also my first challenge where I tried to focus a lot on best accessibility practices. Please let me know about accessibility areas I could improve on.

    I wrote a detailed README for this project so feel free to check that out, but I'll just summarize a few of the things I implemented:

    • a skip link
    • smooth scroll animation
    • a sticky Sidebar in the plan page (only on laptop breakpoint and up)
    • a responsive Spacer component to add whitespace between components instead of using margins
  • Desktop design screenshot for the Todo app coding challenge

    Todo app | React | styled-components | Drag and Drop

    • HTML
    • CSS
    • JS
    9
    Jen1,230
    Submitted

    Hey everyone, I'd really appreciate some feedback on this one. This was a really big project for me since I'm still pretty new to React and it's my biggest React project I've developed. It was also my first time styling a React project with styled-components. I really enjoyed the sass-like experience of using styled-components and being able to conditionally style elements with JS (very useful for the different colors with the two themes).

    The main thing that still needs fixing is that when the user drops a todo item after dragging it (which is implemented with the react-beautiful-dnd library), sometimes there is a brief flicker on the items. Has anyone encountered this before in your projects and have you been able to fix it?

    Another thing I'd love feedback on is the structure of my project. Should I be splitting my elements up into even more components? Some of the components I created are strictly css (with styled-components) and don't involve any React. I did this for things that are repeated a few times throughout the project, like for buttons with images in them and for elements wrapped in a box with the same border-radius, box-shadow, width, padding, etc. Is that an appropriate use of a component?

    Any other feedback you have is totally welcome!

  • Desktop design screenshot for the FAQ accordion card coding challenge

    FAQ Accordion | React | Mobile first

    • HTML
    • CSS
    • JS
    0
    Jen1,230
    Submitted

    This was my first solo project using React. Honestly the JS part of this challenge wasn't bad, but positioning the images was the trickiest part. Any feedback on my use of React, CSS, or the way I've structured my files would be appreciated!!

  • Desktop design screenshot for the Single price grid component coding challenge

    Single price grid component using flexbox

    • HTML
    • CSS
    4
    Jen1,230
    Submitted

    This is my first solo project just testing out my skills with HTML and CSS (using flexbox). Any feedback about class naming, using margins vs padding or media queries would be helpful as I am still learning about the conventions for all of these things. I'm also not sure if it's ok to just use the <a> tag for the call-to-action button vs. the <button> tag. Thanks!

  • Desktop design screenshot for the Project tracking intro component coding challenge

    Tracking Intro Component | SCSS, BEM, JS | Mobile first

    • HTML
    • CSS
    • JS
    2
    Jen1,230
    Submitted

    Decided to make a custom hamburger that transitions into an X when clicked instead of using the provided images for the mobile navigation toggle. Any feedback is welcome on my solution!

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    Meet Landing Page | Svelte + GSAP | Surprise!

    42
    P
    Jen1,230 | Posted 12 months agocommented on ApplePieGiraffe's "Meet landing page" solution

    Wowww I'm blown away by your creativity 🀯 Like who would think to include avatars of FM members as an easter egg? It works so well and is so clever though! This really makes me want to play around with ScrollTrigger now! Thanks so much for sharing your beautiful solutions with the community πŸ™Œ Absolutely amazing job, keep it up!!

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS
    • API

    React Countries REST API + Styled Components

    7
    P
    Jen1,230 | Posted 12 months agocommented on Aaron Stroud's "REST Countries API with color theme switcher" solution

    Hey Aaron, really well done!!😊 I went ahead and bookmarked it so I can study it more and learn from it. I really like the country card loaders that are displayed during the initial API call and the sound effect on toggle between light and dark mode is a really nice touch πŸ‘

    One suggestion I have is maybe have more of the country card loaders during the initial API call so that there aren't any big blank spaces on the screen without loaders if the user is viewing it on a wider desktop.

    Also, it looks like you're doing quite a bit of prop drilling with the prop handleSearch (it's passed to FilterableCountryList, then FilterControls, then SearchBar before it's actually used) Could you declare that function in the SearchBar component so that it lives in the component that actually uses it? You could use Redux to manage the state and access countryFilter in App.jsx and then dispatch the action to change the state from SearchBar.jsx. I realize learning Redux may seem daunting but it's worth it!

    Overall super awesome job and keep up the great work!! πŸ’ͺ

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Coffee Roasters

    3
    P
    Jen1,230 | Posted about 1 year agocommented on Dragos Popescu's "Coffeeroasters subscription site" solution

    Hey there, just came to check out your solution to this challenge after seeing that you left feedback on mine 😊 Really nice job on it! I love the little coffee cup favicon you included and the order summary message before the user selects any options. The detailed README is also really nice to see πŸ‘ One thing I noticed is a bug when the user doesn't select the coffee subscription options in the order that they appear on the plan page. I tried selecting them out of order and then even when I had made a selection for every question, the button to open up the modal was still disabled. Something I would consider doing for future projects is to break up your scss into more files (organized by page, components, etc.) so that you don't have over 1000 lines of code in one big scss file. Overall you did a really nice job on this challenge! Keep up the good work πŸ’ͺ

    -Jen

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Designo multi-page - REACT

    20
    P
    Jen1,230 | Posted about 1 year agocommented on Rayane's "Designo multi-page website" solution

    Hey Enayar, just want to return the favor and leave you a comment on your solution 😊 Absolutely amazing work, everything looks and functions beautifully and your use of animations is really impressive!! I loved the animations so much that I've been learning all about Framer Motion since I first peeked at your solution. Really the only suggestion I have for an improvement is to make the Designo logo in the footer into a link that routes to the home page like you've done for the Designo logo in the header.

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    FAQ accordion card with SASS

    3
    P
    Jen1,230 | Posted over 1 year agocommented on Elisabeth L.'s "FAQ accordion card" solution

    Hey Elisabeth, nice job on this challenge!! It definitely took me forever to position the images too, so not sure if I'll be much help in that regard. Looks like your accordion is working well and it's responsive. I also like the animation you included for the box image.

    I noticed that the text color isn't changing when the user hovers over the questions in the accordion. It looks like you just used the wrong CSS selector for that declaration. Instead of

    button:hover {
        color: $hover-color;
      }
    

    it should be

    .faq-button:hover {
        color: $hover-color;
      }
    

    It would also be nice to have the cursor set to pointer on the questions in the accordion. I'd also recommend changing your media query to a bit of a wider screen width because at 1000px width, the box image is getting cut off a little on the left side.

    Happy new year and happy coding! -Jen

    1