Frontend Mentor

Table of contents

• QR code component
• Time tracking dashboard
• NFT preview card component
• Calculator app
• Interactive rating component

QR-code-component

• Live URL: github-pages
• Source code: GitHub

Descrition from Frontend Mentor

A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.

Techologies I have used

• HTML
• CSS
• JS

Tweak

I added a button whitch translates the text from english to french with a spinning animation.

Time-tracking-dashboard

• Live URL: github-pages
• Source code: GitHub

Descrition from Frontend Mentor

A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.

Techologies I have used

• HTML
• CSS
• JS
  • data.js (with only othe JSON as a const)
  • script.js (main js file)

Tweak

I added two additionnal layers of responsiveness using media queries

NFT preview card component

• Live URL: github-pages
• Source code: GitHub

Descrition from Frontend Mentor

This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

Techologies I have used

• HTML
• CSS
• JS

Tweak

You can generate random alterations by clicking on it's name or seach for a specific one by using the input at the bottom. It will affect its price and the numbers of days left to buy it.

Calculator app

• Live URL: github-pages
• Source code: GitHub

Descrition from Frontend Mentor

This calculator app will be a great test of your CSS and JS skills especially. If you're wanting to practice using Grid, this challenge will be perfect for you!

Techologies I have used

• HTML
• CSS
• JS

Tweak

• I added a bonus row of keys with the parenthesis, the square and the cube
• I added 2 more themes (gradient + trans flag)
• I made the calculation safe
  • by converting numbers like 0011 into 11 instead of 9
  • by allowing calculs using parenthesis as multiplication operator like Ex: 5(10) = 50 / (10)(10) = 100
• I made it possible to use the keyboard keys

Interactive rating component

• Live URL: github-pages
• Source code: GitHub

Descrition from Frontend Mentor

This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

Techologies I have used

• HTML
• CSS
• JS

Tweak

• I changed the submit button to practice using the ::after pseudo element
• I made the image from the "thank you" part (illustration-thank-you.svg) move up and down