Skip to content

nalutm/frontend-mentor-challenges

Repository files navigation

Frontend Mentor

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

The challenges

3-column preview card component solution

My first challenge was to build out this 3-column preview card component and get it looking as close to the design as possible.

The users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover states for interactive elements

Screenshot

Mobile

Screenshot mobile design

Desktop

Screenshot desktop design

Links

Four card feature section solution

This is a solution to the Four card feature section challenge on Frontend Mentor.

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size

Screenshot

Mobile

Screenshot mobile design

Desktop

Screenshot desktop design

Links

Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Users should be able to:

  • See hover states for interactive elements

Screenshot

Mobile

Screenshot mobile design

Desktop

Screenshot desktop design

Links

NFT preview card component solution

This is a solution to the NFT preview card component challenge on Frontend Mentor.

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover states for interactive elements

Screenshot

Mobile

Screenshot mobile design Screenshot mobile active design

Desktop

Screenshot desktop design

Links

Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor.

Users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Select and submit a number rating
  • See the "Thank you" card state after submitting a rating

Screenshot

Mobile

Screenshot solution mobile design Screenshot solution mobile feedback design

Desktop

Screenshot solution desktop design

Links

FAQ accordion card solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor.

Users should be able to:

  • View the optimal layout for the component depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Hide/Show the answer to a question when the question is clicked

Screenshot

Mobile

Screenshot solution mobile design

Desktop

Screenshot soution desktop design

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • JS

Author

Releases

No releases published

Packages

No packages published