Looking to hire developers?
@mattstuddert
@grgrnkoo
Submitted
Almost pixel-perfect(without pro and Figma)
The only solution I found about making text shrink with the screen size is to apply vh or vw. Both give a huge flexibility to a font size, so everything breaks.
Can you please tell me other options?
@mattstuddert
Posted
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! 🙂
@jmagrippis
Submitted
I livestreamed development of this!
Counts as BDD, since there was always a failing Playwright test before moving on to implement more 🧪
I got into a few rabbit holes but it was fun for me 😄 Was it fun for you?
The main UX thing I was debating with myself, is the "Submit Answer" button. Shouldn't it be a single tap on the actual answer you want to choose, and that's it?
Would have been easier to do with SvelteKit / Next.js, but I wanted a place where I can just group all solutions, no matter if I go with Svelte or React. Would you like to see me take on more?
I have bought a domain for this project, but Frontend Mentor doesn't accept it 😛 You can check the app there too!
@mattstuddert
Posted
Awesome work on this project, Johnny, and it's brilliant to see you livestream yourself working through it. I hope you enjoyed the project! 🙌
@FluffyKas
Submitted
Hey guys,
I haven't submitted anything in a while so I'm happy I could find some time for this. Feels like I've been focusing on different things at work lately (even some backend stuff) so I really enjoyed doing CSS again. ^^
This was a quick and easy challenge, I learned nothing new, I just wanted to have some fun with it and see how rusty my CSS got in the past few months.
Take a look if you want, if you see any mistakes, don't be scared to point them out. Have a good day, peeps! ❤️
@mattstuddert
Posted
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?
@Yazdun
Submitted
Hello everyone, This challenge turned out way more trickier than I've anticipated. Specially It took me some time to come up with a solution for masonry layout on the landing page.
This is the first time I'm using Typescript and the reason I took this challenge was learning Typescript, So I'd like to get some feedbacks in regards to TS 😅
I'd like to know about your thoughts and opinion on this solution, possible issues you encounter or any improvements you may come up with.
Thanks in advance
@mattstuddert
Posted
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
@mrfinesse47
Submitted
I found that having a non-monospaced font for a timer where the text is changing constantly is very difficult to keep steady in place. If I had to ever make a timer again i'd use a mono-spaced font. Any ways how do you guys like it?
@mattstuddert
Posted
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
@nakoyawilson
Submitted
@mattstuddert
Posted
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
@BenjaDotMin
Submitted
I went with local storage to store the users bookmarked items, so they persist on refresh.
Thank you for any time spent on feedback!
@mattstuddert
Posted
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:
.filter() instead of map to return only the items of a given category.Amazing work overall. Keep it up! 👍
Marked as helpful
@Jorahhh
Submitted
Really nice and funny challenge!
I tried to make this landing page super responsive on almost the most (common) screen. But I'm not sure of what I've done. SO!
I did maybe too many '@media screen', but I'm sure there is another (and right) way to make it responsive as well, without using tons of lines code.
Had some problem with the orange square (in my code '.info'). I was undecided if I should use 'position: absolute;' or 'position: relative;'. By the way, I think that was not the better choice.
That's all, people! I would be glad if anyone would leave some feedback (or suggestion), specially on the first point.
@mattstuddert
Posted
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
@GerbenDol
Submitted
Been away for a while, decided to do this challenge in a maximum of 15 minutes.
@mattstuddert
Posted
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!
@pikapikamart
Submitted
Hello. This is my 24th challenge here and my first premium challenge taken^^
This challenge was taken around January but took me too long to build it. January and early February was really hectic as again, lots of school activities/projects and even short film animations, those was grouping so that I had to shift my focus for it at the time! Glad that it was over. Phew:>>
I picked this challenge as a first out of the premium challenges because this challenge was the one that I really want to create when I saw way before the challenges here at fem and i'm really glad that I was able to take this one!!
This is my first time using styled-component as well. I haven't searched articles about what is the proper approach or convention when using styled-components. That is why for every styled-component that I used, I prefixed it with a "Styled" word like "StyledNavbavList", I was thinking that it is too verbose and kind of felt a bit off at first but I just continued with it. It will be really nice if you share your thoughts about using styled-components, specially naming each styled.
I added some animations as well on the site and I think I got the functionalities right? Hehe, hoping so. For the create-plan page, I initially thought that there will be no logic in the price computation, the moment when I had to push now the site, I saw a readme on the challenge folder from the challenge.zip, there it was. The logic for the computation :>>> That was close submitting a not fully functional site!!
Lastly, if you could give me a resource/information on how to render svg dynamically. For example, I have 3 svgs in a folder, how can I just import that and use it without using the svg as a value for src prop in the img. Thanks!
(The hover for the social media icons was supposed to make it colored paleOrange but never did it because I want to render svg dynamically and not manually adding svg code if there is such a way)
Overall, I am really happy with this one and hoping that I could not tackle more challenges. Thank you for checking this one out!!
@mattstuddert
Posted
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
@daniloparrajr
Submitted
Check out the cool split text effect using mix-blend-mode!
This is my first time using GSAP in a project and it turns out pretty easy!
Looking forward to creating more projects with GSAP!
@mattstuddert
Posted
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
@mariapenaa
Submitted
Hey! This is one of my first projects with firebase, so there are probably still a few errors I have to workout. I´m still learning how React apps should be organized, and near the end of this project I realized I had made many mistakes when I created each component. So I would really appreciate any feedback related to react and how the data flow should be organized. Thanks!
@mattstuddert
Posted
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
@mlatka9
Submitted
Feel free to give me any feedback
@mattstuddert
Posted
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:
Keep up the amazing work! 👍
Marked as helpful
@BenjaDotMin
Submitted
Thank you for any time spent!
@mattstuddert
Posted
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
@Miculino
Submitted
Hey guys!
This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D
Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.
From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)
There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!
Here are the technologies / tools I've used for it:
Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!
Thanks a lot for checking out my project and see you in the next challenge!
@mattstuddert
Posted
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
@ccreusat
Submitted
I added more verification with the modal component (create, update/edit message and delete). I need to optimize Comment and Reply components. They share a lot of similar code.
Any feedback is welcome :)
@mattstuddert
Posted
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
@PhoenixDev22
Submitted
Hello There, I have completed this great challenge, I have learned a lot. I would love to hear your suggestions regarding clean code, and other things. Please let me know if I have made something in the wrong way. Thanks in advance.
@mattstuddert
Posted
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
@TunUnpred
Submitted
I haven't started switching themes yet. I don't think your feedback takes that into account, thanks.
@mattstuddert
Posted
Hey Khaled, nice work. The main thing I'd recommend working on with this project would be to make it accessible. At the moment, you're using div elements instead of buttons for the keys. div elements aren't interactive and so can't be accessed by people not using a mouse/trackpad to click on the keys. Always be sure to use interactive elements if you expect the user to interact with the page.
Also, you're not using any of the technologies you've added as tags. I'd recommend removing the tags so that they match up with what you've used to build the project.
Keep it up!
Marked as helpful
@NiladriMallik
Submitted
@mattstuddert
Posted
Hey Niladri, it seems the live version of your project hasn't been updated since you made edits to your code. This is why the reporter is still showing duplicate ID errors. If you use the inspector to look at the HTML in your project, you'll see the duplicated anchor tags with the "cancel" ID.
I'd recommend clicking on the "Learn More" links in the report to try resolving the other issues. Most of them will be cleared up by adding a main element and a h1 for the main heading, which in this instance would be the "Order Summary" heading.
Also, I'd recommend avoiding IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
I hope this helps! Keep up the good work! 👍
Marked as helpful
@byronbyron
Submitted
Hello ladies and gentlemen! Here's another React project with Tailwind. Getting the filtering to work properly was quite tricky 😅. Really please with the final result for this one! Feel free to leave a like and maybe even a comment as well. Happy coding everyone!
@mattstuddert
Posted
Hey Byron! Fantastic work on this challenge. The filtering is definitely the most challenging part of this project, and you've done an excellent job. Your solution matches the design brilliantly as well, and I can't see any accessibility issues. Keep it up! 👍
@BenjaDotMin
Submitted
Hello there! This was a fun little project, and I got to try implementing a functioning map. Any advice is welcome!
@mattstuddert
Posted
Hey Benjamin! Excellent work on this project. I'm glad to hear you enjoyed it! Your solution looks fantastic, and it's good to see you made the map interactive. I'd recommend reviewing the accessibility and HTML reports and resolving those issues. But you've done a brilliant job overall. Keep up the great work! 👍
Marked as helpful
@Madmanden
Submitted
@mattstuddert
Posted
Hey Christian! Nice work on this challenge. Your solution looks great! I'd recommend reviewing how you use section elements. Sections are typically used to outline standalone groupings of content on a page. For example, an introductory section or a "How it works" section on a landing page. I'd expect a section element as a child of the main element to wrap the whole card component for this layout. I'd then use div elements for the smaller content divisions.
I hope that helps. Let me know if you have any questions! 🙂
Marked as helpful
@igor-ostojic
Submitted
I am very proud of the smooth animations i managed to make with JavaScript / CSS for both mobile and desktop versions of the site.
If there is an easier way of animating pop-ups / modals , please let me know !
@mattstuddert
Posted
Fantastic work, Igor! Your solution looks excellent! As @Dev-Martinien mentioned, I'd recommend reviewing the accessibility report and resolving those issues.
To answer your question about the animations, how you've done it by toggling classes and keeping the styles in your CSS is perfect. Wherever possible, it's best to keep your styles in the CSS. JS libraries like GSAP are brilliant for more complex animations and sequences, but that would be overkill for this.
When reviewing your code, I noticed a couple of areas where I'd recommend tweaking things:
section .right_section .social_wrap .name_and_date .avatar which would be much be as .avatar. Creating overly specific selector chains can lead to specificity issues, especially in larger codebases. So it's best to keep selectors as simple as possible.max-width media queries at the moment. Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and benefit from loading in fewer styles for mobile users, which can be a nice performance gain.I hope these tips help. Keep up the great work! 👍
Marked as helpful
@dewslyse
Submitted
Comments and feedback welcomed. Happy New Year!
@mattstuddert
Posted
Happy New Year! 🎉 A great solution to kick off 2022! It matches up beautifully with the design. Well done!
One small thing I'd recommend reviewing is how you're doing the hover state for the image. Instead of having two img tags, you could wrap the main img in the anchor tag and then use a pseudo-element with a background-image for the hover state. This would clean up the HTML ever so slightly 🙂
Keep up the brilliant work!
Marked as helpful
