All solutions

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

Hi 👋

This is my solution to the Sunnyside Agency landing page.

I've been doing some landing page type projects over the last few weeks just to really become accustomed to the process of building SPAs with React.js, Next.js, and TailwindCSS.

What challenges did you encounter, and how did you overcome them?

Honestly this project turned out to be much more difficult than I originally anticipated. It is very much image-centric and I struggled initially with applying different layouts with absolute and relative positioning of images and overlayed text whilst maintaining good responsivity.

However, I'm pretty happy with the end result.

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

If anyone has experience or some words of wisdom for dealing with these kinds of pages where a lot of the layout consists of images then I'd love to hear from you.

Thank you all 😁

Hi all 👋

I've been working on this project for quite some time! Had a bit of trouble with client side navigation not working during deployment and so ended up changing hosting provider.

I really liked this challenge, and I've learned a lot. It's the first time I've had any experience using three dimensional effects in CSS.

Here are some of the cool features I'm happy with:

• Three-dimensional card flipping in the directors section of the about page.
• Client-side validation on change and on submit for instant feedback.
• Floating labels in the form.
• Generally well-structured Next.js project using layouts and components where necessary.

As always I am super grateful for anyone who takes the time to take a look at my work, and would love to hear any feedback.

Thanks 😁

Hi everyone 👋

Finally got round to finishing this project. Had a bit of trouble with the API integration not allowing requests due to an authorisation issue (on a publicly available endpoint). Resolved itself in the end, must have been a server-side issue.

I quite enjoyed this project. It is my first time using the next-themes third-party package for adding dark mode functionality. Having up until this point only manually implemented dark mode switching impressed with how simple the interface is. I understand why people discourage reinventing the wheel when it comes to software development. But honestly, I like to do it to understand what is really going on under the hood, with localStorage and the MediaQueryList in this specific example.

I am as always super happy to receive any feedback, positive or negative 😁

Hi everyone 😁

I've slowly been working on this challenge for a couple of weeks now and I think I have finally got it finished. I've really enjoyed working through it and have learned a lot. Most notably:

• Using the context API and CSS variables to create light/dark mode themes without using the context in every component.
• Wrapping components with containers for defining sizes and other styles, allowing for more reusable components.
• Complex controlled component forms using different inputs at different viewports.
• Layout animation using Framer Motion.

I've added a few extra components that are not defined in the specification such as a reset button for the form inputs to remove all queries, and maybe too many animations and transitions 😅

Any feedback will be much appreciated as this is one of the bigger projects I have worked on.

Hi all 😁

I've decided that I am going to do a couple more simpler projects whilst I work on some larger and more time-consuming ones to practice judging the values for CSS properties without relying on Figma.

I feel like I do not have a very good intutive understanding of dimensions in CSS, and so I plan to rectify it with more challenges just like this.

Hi all 😌

This is my first Frontend Mentor project of the year. I decided to go back to basics and get some practice using vanilla JS and CSS after spending the last six months or so using React for my frontends. I am quite happy with the responsivity of the component. The transitions and validation also add a nice touch.

As always, I am very much interested in any feedback (especially constructive) that can be given. It really is the best way to learn.

P.S. I just want to make a point of thanking the Frontend Mentor community as a whole, which has been incredibly encouraging, supportive, and helpful throughout my development. It is no exaggeration to say that the skills I have gained over the last year are owed to a significant degree to this community.

Hi everyone 😀

In my recent revamp of the FAQ Accordion Card project, originally completed on 24th August 2022, I’ve given it a bit of a makeover as part of my ongoing effort to polish up my GitHub portfolio. The idea was to not just make it look more professional, and improving the overall user experience.

Here’s a quick rundown of what’s new:

• I’ve transformed it into a Node.js project, which means I’ve got a development server up and running, and I can now compile SASS into CSS using some handy npm run commands.
• I switched from using pixel units to relative units (rem), basing it all on a 10px font size. This makes it way more adaptable to different screen sizes.
• The design approach is now mobile-first. It’s all about enhancing responsiveness and ensuring a top-notch user experience on smaller screens.
• For a bit of flair, I’ve added smooth transitions to the FAQ sections. They now expand and collapse smoothly, and there's a cool rotating caret icon to add that extra bit of visual feedback.

Hi everyone! 😀

In my latest update to the NFT Preview Card Component Challenge, which I initially tackled back in September 2022, I've given the project a fresh coat of paint as part of sprucing up my GitHub profile.

My goal was to bring the project up to speed with the latest development practices and to make my portfolio look even more professional. Some of the improvements I have added are adding the hover icon on the image, shifting to relative units in CSS for better flexibility, and refining the desktop layout.

Hi everyone!

I originally completed this challenge back on the 12th September 2022.

However, I am currently in the process of an overhaul of my GitHub profile to finalise projects so they are a little more presentable.

Some of the enhancements made here are:

• General overhaul of layout and styling of the landing page.
• Email form validation.
• Mobile menu bar with transitions.

Any feedback is more than welcome.

Thanks.

Hi all ☺️

I have had this project mostly finished for a while now, and have finally got round to polishing it off.

Any feedback would be greatly appreciated.

Hi all ☺️

Very much enjoyed this project. It is the first one I have worked on with the stack I have decided to really focus on becoming competent with.

Any feedback would be greatly appreciated.

Hi all ☺️

Another design completed. I am trying to focus with these projects to get the mobile design as perfect as possible. Any feedback would be greatly appreciated 😃

Hey all ☺️

Just another project where I've been what I'd call CSS drilling. Just working on simpler HTML/CSS projects so I can get lots of practice creating responsive layouts and improving on my Sass architecture.

Hi everyone.

It has been a long time since I have submitted a solution here. I've been trying to do too many things at once and have been unable to focus until recently. However, I am happy with the results I have with this project.

I have built it using HTML and Sass using BEM and the 7-1 architecture to make the design more manageable and more composable.

If I am honest I have quite enjoyed taking a step back and focusing on getting the styling pixel perfect with the design rather than getting deep into program logic. It was exactly what I needed to get back into the swing of building projects again.

Any feedback, particularly on accessibility of the HTML or architecture of the file structure would be very much appreciated!

Hi everyone.

I decided to take on this project as a tool to practice basic HTML and CSS without using any other frameworks.

I have mostly been working with React.js/Next.js and TailwindCSS recently, and really feel that my skills with HTML/CSS/VanillaJS are suffering as a result.

As such, I plan to work on a few of these simpler challenges just to refresh my memory before my ability completely vanishes 😅

Greetings 😃

I really enjoyed this project! I embarrassingly underestimated the amount of work involved, but I have learned a lot.

Most significantly, I have had lots of practice creating modals with portals in React, something I hadn't used before.

I don't have any questions to ask from this challenge but as always, feedback is sincerely appreciated.

Hi everyone 😊

It's been some time since I have been here as I have recently moved country and of course that requires some adjustment (in other words, time away from dev 😟).

I started this project some time ago and only just got around to getting it to a deployable standard. It is quite a special one as it is the first time using four different frameworks/libraries. I have used it as a sandbox for learning (albeit, slowly):

• Next.js
• TailwindCSS
• Framer Motion
• react-hook-form

As such, it has taken me quite some time to get it to where I want it to be. I am certain that the code is quite a mess, but as it is my first time using these technologies, I am just happy that I have a working application.

That said, as always I am extremely grateful for any feedback.

Thanks ☺️

Hey everyone! 😀

I completed this challenge some time ago, but have decided to built upon it and resubmit.

In the first iteration I used a hard-coded <div> based design for the visualisation, and have now redone it completely using D3.js.

This is the first time I have worked with D3, except for a few tutorials. Hence, it would be really great if anyone with knowledge of the library could give me any feedback on how I have built the visualisation.

The visualisation code is found at ./js/visualisation.js in the accompanying repository.

Thanks again! 🥴

Hi, everyone 😃

I really enjoyed this project. I did everything I could to make it more realistic, like:

• Rather than hard-coding values, I created a JS object with what I thought was a realistic structure one could expect to fetch from an API, and then used props to pass that data to the appropriate components (always taking the principle of least privilege into account).

For example:

{
    social: 'instagram',
    handle: '@realnathanf',
    followers: 11234,
    dailyData: {
        dailyFollowers: 1099,
        dailyLikes: 5462,
        dailyLikesChange: 2257,
        dailyViews: 52343,
        dailyViewsChange: 1365,
    },
}

• I created a global state for the theme and passed it around to the appropriate components for styling light and dark themes (using the Context API)

• I focused on reusability of components, creating a Card component for the general styling of the dashboard component, and using a mapping function to render the correct icon based on the social attribute passed to the component as shown above.

• I created a utility function for formatting values, such that for example 51345 would be rendered as 51k. This proved to be far more difficult than I originally anticipated, but I am quite happy with the result. The source code can be found under ./src/Utils.js

• Finally, as I am learning a little bit of design at the moment, I decided to recreate the project from the design images in Figma. This has given me a lot of practice using components, frames etc. I won't however share the design file here as it would undermine the benefits of becoming a pro member here at FM.

Any feedback would be very welcome!

Hi, everyone.

This is the first project I have completed in so long!

I've mainly been focusing on building backend skills. However, I am at the point now that I can take a step back and get up to a similar level with frontend development.

I think this is the first project I have completed on here using React.

It was quite a fun project, and has given me tons of practice moving data between components (both up and down the component tree).

Any feedback would be greatly appreciated!

Hi everyone! 😃

It's been a while since I have submitted anything here. I have been working pretty hard on another frontend mentor challenge and using it as a project to learn Django. I am really enjoying joining the dots between the frontend and the backend.

I decided to do this smaller project in the meantime because I don't want my newly-acquired frontend skills to start slipping now I am predominantly working in Python and Django.

I don't really have any questions for this one, but it was definitely a fun project.

I am particularly pleased with my hamburger button that I have created from scratch using CSS ::before and ::after pseudo-elements, as well as a closing X by utilising transforms on those pseudo-elements.

Thanks

Hi all.

I've had this challenge sitting in my active challenges for weeks now, so I decided to get it done. I found the overlay on the main image to be quite difficult! This is the first time that I have used ::before and ::after pseudo-elements, and I can think of a few other challenges I have already done which would have been much easier having already known these.

Hello everyone.

This was by far the most difficult challenge I have worked on, both in terms of the styling and the calculator logic. I have learned quite a lot! It's the first time that I have used ES6 classes on a Frontend Mentor project, and I found it made the codebase far more manageable.

I've added a few extra little features as well, such as transition smoothing when changing themes and an on-off button.

Hi, all.

This was the first challenge I have worked on working with an external API.

I have a question regarding AJAX. If you take a look at the live site and click the button quickly you will see that there is some delay, meaning that the content does not change with every click. This seems very ugly. What would be the best solution for something like this? Maybe to not use asynchronous JS so that the button does not function until the content is received by the browser?

Thanks