Skip to content
OverviewSolutions
0
Comments
1593
Matt Studdert
@mattstuddert

All comments

  • P
    Daniel 🛸•44,740
    @danielmrz-dev
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • Angular 🅰️
    • SASS 🎨
    • TypeScript 🔷
    • BEM Notation 🅱️
    • Mobile first workflow approach 📲

    My first GURU level project 😊

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Designo Multi-Page Website built with Angular + SASS 🅰️

    #angular#angular-material#sass/scss#typescript#rxjs
    4
    Matt Studdert•13,611
    @mattstuddert

    Congrats on completing your first guru-level project, Daniel! I've really enjoyed watching your journey. You're completing projects to a high level. Keep up the great work! 👍

  • Matt Studdert•13,611
    @mattstuddert

    Nice work getting so close to the design without Figma! I recommend reading this article about responsive typography to help with your font-size question. You can use clamp() to ensure the text never goes smaller or larger than specific sizes.

    I hope that helps. Keep up the great work! 🙂

  • Matt Studdert•13,611
    @mattstuddert

    Awesome work on this project, Johnny, and it's brilliant to see you livestream yourself working through it. I hope you enjoyed the project! 🙌

  • Matt Studdert•13,611
    @mattstuddert

    Nice to see you posting a new solution, @FluffyKas! 🥳 That's interesting you've been focusing more on back-end stuff lately. How have you found the switch to more full-stack development?

  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this project, Yazdun! I've never used TypeScript personally, but I just wanted to say nice job. Your project looks fantastic, and it's obvious you've paid great attention to detail.

    I also love the challenge difficulty badge you've created for the README.md file!

    Keep up the incredible work! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this project, Kevin! It looks great and works well!

    My main piece of feedback would be to avoid adding event listeners to non-interactive elements. For example, you're using li elements to switch timers and an img element to open the settings modal.

    Whenever you expect a user to interact with an element, you should use an interactive element (e.g. a' or button`). This will allow people who can't/don't use a mouse or trackpad to use your app.

    As the timer switchers and the settings trigger don't navigate to new pages, I'd recommend using button elements to trigger the actions.

    It's always a good habit to try navigating anything you build while only using your keyboard to see if you can still use the app. If not, it needs refactoring to make it more accessible.

    I hope this helps. Keep up the great work!

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Brilliant work on this challenge, Nakoya! Your HTML looks great, and you've done an excellent job getting the solution close to the design. My only small suggestion would be to add focus states so that the label has an outline when the corresponding input is focused. You can do that with the sibling CSS selector like this input:focus + label. The visual state changes if you use the arrow keys when on the radio inputs, but you'll notice if you tab through the page, there's no initial style to provide a visual cue.

    I hope that helps. Keep up the incredible work! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this challenge! You've hit the nail on the head with the design comparison. I like the subtle animations you've added as well. Here are a couple of small pieces of feedback:

    • If you scroll down on a page and then navigate to a new one, the screen remains halfway down the page. I'd expect it to pop up to the top when navigating to a new page.
    • The items are duplicated between the Movies and TV Series sections on the Bookmarks page. So there are movies showing in the TV series section and vice versa. You could use .filter() instead of map to return only the items of a given category.

    Amazing work overall. Keep it up! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Hey Angelo! Excellent work on this challenge! It's great that you've made such an effort on the responsive side. You have quite a few instances where you're setting specific heights, widths, margins, and other values to position elements. This seems to be what's contributing to most of your repetitive code.

    I'd recommend checking out Every Layout, which is an excellent resource to help shift layout decisions onto the browser instead of manually overriding your own code and fixing positions.

    If you find yourself writing code like margin-left: 13%; and top: -410px;, it's usually a sign that there's a better way to do it. These are what developers call "magic numbers" as they're pretty arbitrary and are essentially plucked from thin air.

    You'll find yourself using them less and less as you continue to gain experience building projects. So, for now, it's mostly a case of being aware of it and then trying to find more reusable solutions whenever it happens again.

    I hope this helps! 🙂

    P.S. Please try to avoid swearing in your messages as it goes against our community guidelines. You can edit your message by going to "Visit challenge hub" at the top of this page and updating your solution. Thanks! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Good to see you getting back into it, Gerben! Doing this project as a time-limited challenge is a fun idea. I know this was more about speed vs getting everything "right", but I'd recommend checking out the accessibility report 🙃

    I hope you're doing well!

  • Matt Studdert•13,611
    @mattstuddert

    Great to see you post a solution for your first premium challenge, Raymart! ✨

    Your project looks fantastic, and I love the extra details like the animations and the sticky header. Great to see you add the prefers-reduce-motion query as well for those who prefer not to see animations.

    I'd recommend reviewing your implementation of the "Create plan" page with keyboard navigation in mind. I couldn't choose individual options as it always focused on the group when tabbing through the content. I could use the arrow keys, but I'd expect to be able to tab through the options easily and select one using space or enter, which I wasn't able to do.

    I'd recommend adding the name attribute to your radio inputs as well so that they're grouped appropriately.

    I hope that helps. Keep up the excellent work! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Fantastic work, Danilo! Your solution looks great, and the animations are really smooth! Just a quick heads up that the LeafletJS map isn't working for me at the moment. It has the words "No Active Subscription" tiled across it.

    Keep it up! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this challenge, Maria! I really like how you've adapted it and made it your own. One area I'd recommend reviewing is using buttons to trigger actions like replying and deleting comments. If you expect a user to interact with an element to trigger an action, it needs to be an anchor tag or button to ensure it's accessible to anyone not using a mouse/trackpad.

    I hope that helps. Keep up the awesome work! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this solution, Mateusz! Your project looks incredible, and I like how you've used Storybook and implemented tests.

    There are a couple of areas you could improve, which would be great to see:

    • You've used buttons for setting up the game and restarting a game, which is great. However, you've not used them for the actual game tiles, which means they're not accessible to anyone navigating using a keyboard. Adding buttons would make playing the game accessible to anyone not using a mouse/trackpad.
    • As @yaloswog mentioned above, the CPU player isn't smart. An excellent way to test yourself further would be to make the CPU smart. This would mean the CPU would proactively block potential winning moves from the player and try to build sequences of its own to win.

    Keep up the amazing work! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Awesome work on this challenge! The visual side looks great. One thing I'd recommend improving is the accessibility of it. You're not using interactive elements, like button, for the tabs, start/resume, or to open the settings modal. This means anyone not using a mouse/trackpad can't use the application.

    I'd recommend refactoring to add interactive elements and test navigating the app using only a keyboard to see if the accessibility has improved.

    Keep up the good work! 👍

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Wow, now that's what I call customising a project and making it your own!! 😍

    I love that this simple project sparked that idea and turned into this. What you've created is AWESOME!! Fantastic work on this challenge, Remus.

    I'm already looking forward to seeing what you build next! 🙌

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this challenge, Clément! I like the additional verification you've added, and your solution scales up/down really well on different screen sizes 🙌

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this challenge! Your code looks good, and I like that you've added a 2-by-2 grid for tablet screen sizes to help with the responsiveness. Keep up the great work! 👍

    Marked as helpful