Awesome to see you post a project, BurritoDoggie! Great to hear from APG that you're getting into coding. I'm looking forward to seeing more of your projects! 🙂
Founder of Frontend Mentor. I love helping people learn about web development. When I'm not working on Frontend Mentor, you'll often find me teaching evening and weekend workshops at General Assembly in London.
I'm currently learning...
I'm spending my spare time learning about 3D web development using Three.js at the moment. The 3D web is an area that fascinates me, so I want to know more about it!
No solutions submitted yet
That was fast!! Amazing work on this challenge, Jun! Your solution looks amazing and functions perfectly based on the brief. The one small thing I noticed was that the layout breaks slightly at
320pxin the dev tool emulator on the invoices index. It might be worth playing around with that a bit. That's me being super picky, though! 😅
How did you get on with the challenge? Did you learn anything new while working through it?
Nice attempt at this challenge, Indu! That is odd about the screenshot. As it runs on a slightly older version of Firefox at the moment, it seems to be rendering your solution differently. The input is being pushed down because the two radio selection messages above render over two lines in the screenshot. I wouldn't worry too much about it though 🙂
I'd recommend removing the
floatproperty from the repertoire for the most part. Now that we have Flexbox and Grid, floats shouldn't be used for layout purposes anymore.
Overall you've done a good job, though! The main thing I'd recommend would be to spend some time refining the details a bit to get it matching up closer to the design. Attention to detail is a key part of being a front-end developer, so projects like this are a great way to practice.
Did you learn anything new while working through this challenge? It's a tricky one!
Keep up the great work! 👍
Hey Alex, I think you've done an amazing job! The animations are indeed smooth, as you mentioned, and add a very polished feel to the game. I also like the game switcher you added to the logo.
My main advice would be to use interactive elements, like the
buttonelement, to trigger the actions as opposed to
divelements. As it stands, your game is inaccessible to anyone navigating using a keyboard. Ensuring the interfaces we build are accessible to as many people as possible is a key part of a front-end developer's role.
Keep up the great work. I love what you've done with this challenge! 👍
Great to see you post another project, Jen! How have you been getting on with React so far? It definitely takes on a new level of complexity as you build larger projects!
You've done an excellent job on this challenge. Your app looks great and functions as expected based on the project brief. Here are some thoughts after taking a look at your code:
- I'm not a fan of the
useViewport()hook. Having a resize listener constantly running on the window isn't something you want to do if it can be avoided. Is there a reason you opted for this approach as opposed to using a media query?
- In the
App.jsfile, you're defining a
saveLocalTodosfunction and then calling it immediately. As you're calling it straight away, you don't need the definition at all. So you can remove the function and just set the items in the
useEffecthook without it being wrapped in anything.
- Don't only show the delete todo button on hover. As it is, people navigating using a keyboard can't delete todos. I'd recommend trying to navigate and complete tasks using only your keyboard on any projects you build. This will give you a good insight into whether or not your project is navigable by keyboard users.
- As Steven mentioned, avoid setting
widthproperties, except for particular circumstances where you have an obvious reason. Typically, you want the inner content of an element to dictate the dimensions of an element. For example, you've set a
heighton the todos. Try typing out a really long todo and see what happens. Ideally, you'd want the todo to grow with the content.
- You've got
ItemBox.jsin their own file, but they're not actually doing anything other than being exported. If you're creating a component, I would recommend trying to keep all concerns for that component locally in the file. I'd recommend reading this "styled-components happy path article by Josh Comeau". It will hopefully give you some more ideas on this. As with anything, keep practising, and you'll develop better habits as you become more experienced with the tool.
- As Steven mentioned, the idea of React is to componentize code as much as possible to maximise reusability. An example of where you can break down a component further is the
Todo.js. This could be broken up into smaller chunks, like the checkbox, text, and delete button.
I hope this helps. Keep at it and let me know if you have any questions! 🙂
- I'm not a fan of the