All solutions

What are you most proud of, and what would you do differently next time?

It feels good to have tried and tested out using styled-components. It's something I was curious about when I first started submitting solutions.

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

It'd be interesting to know if there is a more elegant way to handle the form validation on submission - there are a lot of if conditions to handle all the possible scenarios.

What are you most proud of, and what would you do differently next time?

Having completed the original FAQ challenge it felt only right to complete the updated version!

I tried to make this component as accessible as possible by:

• using semantic html and the most appropriate interactive elements
• styling the accordion with focus states to improve the experience for those who navigate the accordion using a keyboard
• utilising aria-expanded, aria-hidden, aria-controls attributes

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

Any accessibility specific feedback would be very welcome.

Hi everyone 👋

Good to be back committing code again!

I had fun adding a little hover & focus animation.

Any feedback that could help me to improve would be very welcome.

Happy coding 🤙

Hi everyone 👋

I had a lot of fun with this challenge!

The shopping cart functionality is the perfect use case to learn React's useContext hook. I also really appreciated Tailwind CSS helping to speed up the development process to focus on learning React.

A nice little addition was playing around with framer-motion & react-toastify.

Any feedback that could help me to improve would be very welcome.

Happy coding 🤙

Hi everyone 👋

Glad to get this one over the line - scandalous how long ago I started the project!

A really great challenge to stretch my coding skills. It was fun integrating the shrtcodeAPI, tackling user input validation and working with localStorage.

In addition to the brief I added a delete button so users can manage their list of short URLs more effectively and followed along with a Web Dev Simplified YouTube tutorial adding Firebase authentication.

Two points I'm aiming to refactor is how I've used the useEffect hook when working with localStorage. And moving the logic of adding to localStorage at the point of input, not all in the output component.

Any feedback that could help me to improve would be very welcome.

Happy coding 🤙

Hi everyone 👋

A fun project to get back in the saddle after taking the summer out to avoid burnout. I wanted to try Tailwind CSS to see what all the utility-first CSS hype is about. Very intrigued to see how it might scale in a larger React app.

I added a mobile navigation and some JS client-side form validation.

Any feedback that could help me to improve would be very welcome!

Happy coding 🤙

Hi everyone 👋

I'm really happy to be posting an advanced challenge solution. It's the culmination of a lot of hard work and the direct result of taking on FEM challenges almost exactly a year on.

This challenge was a great chance to hone in on manipulating api data, improving my ES6 knowledge, practicing React Router levelling up my single page application skills and I was able to get more familiar using npm packages.

I made the theme switcher detect the user's operating system preference, added a loading spinner and was conscious to make the user interface navigable using a keyboard.

Any feedback that could help me to improve would be very welcome!

Happy coding 🤙

Hi everyone 👋

Great to finally submit a React solution, something I never thought would have been possible this time last year.

It was an excellent chance to practice working with props, useState, raising state up, create react app and utilising accessible html like fieldset and radio inputs.

Any feedback that could help me to improve would be very welcome!

Happy coding 🤙

Hi everyone 👋

This challenge was gruelling and rewarding in equal measures.

I took it as an opportunity to implement and learn the following:

• working with local storage to remember the user's theme preference
• using parcel-bundler
• get a small amount of practice using JavaScript modules

I've had a few thoughts on where I can improve the project further over the next few weeks:

• improving accessibility for the triple input toggle
• the size of the toggle needs to increase for mobile users
• wrapping the text for extremely long numbers and including commas

Any feedback that could help me to improve would be very welcome!

Happy coding 🤙

Hi everyone 👋

I had a little fun with this one, as the advice is cached for 2 seconds I decided to add a loader and disable the button until some more advice was able to be fetched.

Any feedback that could help me to improve my understanding of working with APIs is very welcome. I'm thinking about adding some error handling.

Anyway until next time, happy coding 🤙

Hi everyone 👋

I upped the ante again on this one and really had to persevere to improve my knowledge and experience with JavaScript.

I'm really happy with the result and the styling. I also really appreciate the ui design on this challenge, it looks great 👏

Any feedback that could help me to improve would be very welcome, with a focus on the following:

• i'd like to learn a more elegant way to remove special characters on the inputs (perhaps some thoughts on RegEx)
• is there a way to avoid leading zero's, for example at the moment you could enter 000100 into the inputs
• finally I chose <button> for the tip inputs, is there some more suitable/accessible mark up

Until next time, happy coding 🤙

Hi everyone 👋

Good to be back after having a few weeks off over the holidays.

I used this challenge to learn more about accessibility, focusing on:

• semantic mark up and use of interactive elements
• custom focus states
• use of aria-label
• making sure i removed animations and transitions for people that prefer not to see them

I also had a play around with some animations which was great practice!

Any feedback that could help me to improve my understanding of accessibility would be very welcome!

Happy coding 🤙

Hi everyone 👋

Wow what a challenge - I took my time with this one and finally relinquished the desire to complete as many challenges as I can in as little time as possible.

I probably learnt the most from this one project than all the others so far. Forcing myself out of tutorial hell, I didn't copy and/or use code I didn't understand and I used google/MDN to work through the solution however difficult or time consuming.

It was worth all the effort.

🐛 However I do have one little bug to squish - the discounted price when toggled doesn't persist once the html range input is slid back and forth.

If you could suggest a resolution or have any thoughts, it'd be great to hear from you!

Happy coding 🤙

Hi everyone 👋

Great practice using pseudo-elements and positioning curved sections.

Any thoughts welcome!

Happy coding 🤙

Hi everyone 👋

I'm not looking for feedback on this one as it was a follow along!

However I would like to say thanks to Frontend Mentor providing this excellent learning opportunity alongside Scrimba and Kevin Powell - perfect timing in my development! Being able to cross over from theory/tutorials to see how development works in the real world is invaluable.

My biggest takeaways are:

• The design system and how Kevin builds out all the components in the design files before starting the site build
• Using utility classes, css variables and the alternative approach to customisable inline styles
• Accessibility - learning more about ARIA
• The JS in general and hiding/showing content using html attributes
• Having access to professional design files and getting closer to the real world development process

Happy coding 🤙

Hi everyone 👋

It's about time i kicked it up a notch and levelled up to the Junior challenges. I think i will stick to the HTML/CSS one's until I make significant progress with learning JavaScript.

It was fun to build out a whole page not just a specific component. Overall i'm happy with the result but definitely feel I could have re-factored / approached some elements differently.

Any thoughts welcome!

Happy coding 🤙

Hi everyone 👋

This turned out to be a fun one.

Another great opportunity to practice JavaScript and client-side form validation. I learnt some big lessons from the base apparel challenge and it's really motivating to see small progressions on each challenge.

Any thoughts welcome!

Happy coding 🤙

Hi everyone 👋

This was a fun little challenge.

Overall I'm happy with the result but I fumbled through the JavaScript and client side form validation - it kinda works! I haven't formally learnt any JS so I think it's time to fully commit.

I'd really appreciate some help or useful resources on how JS form validation works and how to implement it. Also any useful feedback when adding styles with JS, as an example when I added the error message it made the design jump, I used some negative margin to counteract this which felt like a hack.

Happy coding 🤙

Hi everyone 👋

Well well well ... mobile-first!

I think this is a turning point for me, i finally embraced the dark-side. And what can i say, it's liberating. My code feels cleaner, simpler and more legible. It might be due to the design but i'm definitely converted 👀

I took the time at the start of the project to really understand how to work with min-width instead of max-width and it paid off. I also got a bit unnecessarily carried away with @keyframe animations at the end and changing them up per breakpoint 😂

Anyway, your feedback would be greatly appreciated!

Happy coding 🤙

Hi everyone 👋

This was an interesting little test. The social sharing popup was fun to style and a decent challenge to get the show/hide toggle to work.

Any thoughts welcome!

Happy coding 🤙

Hi everyone 👋

Another really enjoyable one to code up. I definitely feel like i'm speeding up and have carved out a decent little workflow.

Any thoughts welcome!

Happy coding 🤙

Hi everyone 👋

I really enjoyed coding this one up, the UI design is pretty cool. Great practice for my layout skills, responsive design and grid workflow. I almost certainly could have simplified my use of grid in the overall layout.

Really happy with the result but keen to hear your thoughts especially on my grid usage and any improvements on responsive background image positioning.

I had a little fun with some animations and inline SVGs.

Happy coding 🤙

Hi everyone 👋

I've been looking forward to this one since starting the front-end mentor challenges - it definitely stretched me. I really enjoyed practicing my layout skills, some DOM manipulation and having fun at the end with @keyframes.

I found placing the illustrations fiddly, especially responsively too. If there is a simpler way to manipulate them i'd love to find out how. Any thoughts on my mark up and if there are some efficiencies in my css - it'd be great to hear what you think!

Happy coding 🤙

Hi everyone 👋

I must admit i underestimated the time it'd take me on this one, it was a little more fiddly than expected.

I had fun learning how to use pseudo elements and working with responsive background images. My solution is definitely not the same as the design 😂

It'd be great to have some feedback if there are more elegant solutions and reasons as to why they work.

Happy coding 🤙