All solutions

Hi Everyone,

Used React, SCSS and Bootstrap for creating the landing page. I've not used the icons for hamburger menu instead used CSS for creating the same effect.

Appreciate any suggestions for improvement.

Thanks, Shiva

Used React for this challenge. Any feedback for improvement is appreciated.

Made the components using React and added dark/light mode toggle with clip-path loading animation. Used prefers-color-scheme to detect user color preference to switch between color modes.

User can use toggle button to toggle dark/light mode which is stored in local storage which takes precedence over browsers color scheme preference.

Suggestions are welcome.

Hi Everyone,

This is my first full page design to code challenge on frontendmentor. Explored more on react components and added small animations using Framer Motion and React Intersection Observer and it turned out well.

Any suggestions on code or any chance for improving anywhere are welcome.

Thanks, Shiva

Tried React for the first time on this small project. Used some Bootstrap and Saas with BEM for styling. Made it accessible via keyboard.

Any comments on improvement are welcome.

Pricing Component made with HTML, SASS and some JS. Might redo the challenge later to try on the Bonus by removing JS. Tried Gulp for automating tasks. Organizing SASS files by creating folders and files for specific purposes.

Appreciate any suggestions for improvement.

Built the component using sass, bootstrap, clamp for font sizes, used netlify for deployment. This is a small component so tried using webpack and it was not that easy for me to setup. Took most of the time to setup webpack and understanding the slider, shadow dom to make it work on different browsers. Tested on Firefox, Brave, Chrome and Opera and it works fine.

Any comments for improvement are highly appreciated.

Used Bootstrap for the first time in a project. Tried to use bootstrap classes more than css media queries. Appreciate any feedback on code/responsiveness etc.

Thanks, Shiva

Used Grid for the desktop layout. Added small keyframe animations on page load. Used prefers-reduced-motion media query for removing animations for users who set reduce animations in settings.

Appreciate feedback/comments on code structuring or any improvement.

My last newbie challenge. 🎉 Appreciate any feedback for improvement.

This is quite simple challenge when compared to others.

I wanted to use a package for validating email instead of using plain JavaScript just for testing out. I have installed validator.js and tried to link this up. Since this is client side validation, it is used as a standalone script. The script is around 70kb which I have copied and included. Is there any other way to implement the package without the entire file being loaded to the user?

Any feedback is highly appreciated. Happy Coding !!! 🎉

Price Grid Component using Grid and Flexbox. Used Normalize CSS with Parcel V2 which is in Beta for bundling.

Comments on improvement are appreciated.

Experimented with reset css and did all the styling using saas. Implemented show/hide password and made the page accessible entirely via keyboard. Used Parcel Bundler for optimizing the build.

Let me know if there is room for any improvements. Comments are highly appreciated.

Used Grid for the Layout and a little Javascript for handling email format validation. Made the design responsive using media queries in SASS.

Any feedback, suggestions for code improvement are highly appreciated.

This is my first time working on the Mobile first workflow, BEM and Sass. Implemented BEM methodology for naming CSS classes. Used Sass, which went hand in hand with BEM CSS notations.

I tried to match it as close to the design as possible. Any feedback on where I can improve is highly appreciated.

Hi,

I would've planned the transforms part a little earlier into the challenge. I made those at the end and it took some work since display property cannot be transitioned.

Let me know how the code can be improved. Thanks in advance.

Hi Mentors,

Coded the component using desktop first approach. Any code, responsive layout suggestions are welcome.

Suggestions on improving code and responsive design are welcome

Used flexbox for this design. Any code suggestions are welcome.

Built this responsive 3 column card component. Used flexbox for this challenge.

Comments and any code optimizations suggestions are welcome.

Developed accordion card component using JavaScript. Went on to complete the Bonus and removed JavaScript, updated CSS to toggle the answers. In JavaScript version, I was able to hide all other answers and only show the answer that the user clicks on using small logic. But in CSS version, I was not able to hide other answers. Let me know if this is possible without using JavaScript.

Edit Used radio instead of checkbox to achieve hide other answers apart from user selected one. It can also be done using CSS :target selector

JavaScript Version

• Code on GitHub
• Visit Live Site

Comments are much appreciated.

This is my first Frontend Mentor challenge.

Struggled a little with the background SVGs placement. There can be many other ways of doing this but I wanted to practice my skills so I took my time to make the page like as close to the design as possible.

Feedback is welcome. Please mention anything which is not a good practice.