All solutions

👾 Hello, Frontend Mentor Community,

This is my solution for the Loopstudios Landing Page.

• Scored 98.6% on Google Pagespeed Insights! 🤩
• Comes with Custom navbar w/ scroll-in & scroll-out animation 🔥
• Accessible hamburger menu w/ ES6 🍔
• Actually i delayed to post this solution, this was completed about 5 months ago ⏪
• Minified the css files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Advice Generator.

• Scored 99% on Google Pagespeed Insights! 🤩
• Solution with 99.9% Percent Accuracy 🎯
• API is Integrated using async / await, which helps me to write code more cleaner
• Custom 3D Dice with realistic spinning animation 🔥
• Dynamic browser-bar theme feature, exclusively for Mobile devices ✨
• Minified every source files during build to improve site's performance 🚀
• Used Eslint with Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of enthusiasm while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Newsletter Signup Component.

• Scored 99% on Google Pagespeed Insights! 🤩
• Solution with 99.9% Percent Accuracy 🎯
• Used Regular Expressions for Form Validation 🔍
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Made this solution responsive for Tablet devices 🪄
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the News Homepage.

• Scored 97% on Google Pagespeed Insights! 🤩
• Changed some of the font color's intentionally due to it's bad contrast which may affect accessibility 🙅🏻‍♂️
• Custom navbar w/ scroll-in & scroll-out animation 🔥
• Solution with 99.9% Percent Accuracy 🎯
• Accessible hamburger menu w/ ES6 🍔
• Minified the css files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Sunnyside Landing Page.

• Scored 98% on Google Pagespeed Insights! 🤩
• Custom navbar w/ scroll-in & scroll-out animation 🔥
• Solution with 99.9% Percent Accuracy 🎯
• Custom dotted outline for interactive elements like buttons, a to help low visioned and color disabled people 🎭
• Accessible hamburger menu w/ ES6 🍔
• Minified the css files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Insure Landing Page.

• Scored 99% on Google Pagespeed Insights! 🤩
• Added custom outline for interactive elements like buttons, a to ensure better accessible solution ✅
• Used inclusive-menu-button script by Heydon to craft accessible hamburger menu and i modified as per my usage as well 🔍
• There are some edge cases for this script, if you're willing to read then head to this solution's thought section 💁‍♂️
• Minified the css files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Clipboard Landing Page.

• Scored 98% on Google Pagespeed Insights! 🤩
• Minified the css files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Results Summary Component.

• Scored 98.3% on Google Pagespeed Insights! 🤩
• Minified the css files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

Thoughts :

• I'm not good in terms of using gradients in css, so that i can't match the gradient as same per the design. I don't have figma file to figure out the right gradient mixin (want to purchase premium account for that)

• PS: This solution meant to be submitted 2 days ago 🥲, I'm back also so you can expect more solutions from me!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Project Tracker Intro Component.

• Scored 98.4% on Google Pagespeed Insights! 🤩
• Added outline for interactive elements like buttons, a to ensure better accessible solution
• Minified the css & js files to improve site performance 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

Thoughts :

• My primary goal during building this project is to build it accessible as much as possible. In the end i figured about how we can make accessible hamburger menu for Mobiles without affecting the horizontal menu for Desktops.
• The Hamburger menu for mobile will support Enter, Space, ↓ to open the menu, and then we can use ↓ to traverse the menu items.
• Used inclusive-menu-buttonscript by Heydon to quickly implement these functions. Actually this script was build for dropdown menu, in our case we use for Hamburger menu.
• The edge case i faced is to apply implement these logics on for mobile devices, so that i added conditionals to watch window size whether it's mobile or not & uses watchMedia api to set these logics otherwise the logics won't be applied
• The watchMedia is not added as a eventListener, So if you try to switch Desktop to mobile in RWD Mode then the Hamburger menu will won't work, I'll try to add an event listener for that
• Feedback regarding these implementations are also welcome!

.

👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Article Preview Component.

• Scored 98.65% on Google Pagespeed Insights! 🤩
• Solution with 99.9 Percent Accuracy 🎯
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

Questions :

• The Largest Contentfull Paint (LCP) has showing error, There is no indications about why it's arising and affecting the performance score. For more details check out this report
• And the color combinations for font's are not enough, they causes accessibility issues. Can anyone know any web apps for checking right color contrast to improve accessibility?
• These two are the primary questions arises for me, feedbacks regarding these stuffs are greatly welcomed!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Interactive Rating Component.

• 100% Accessible solution with form integration, you check by pressing tab key along with ← & → to traverse your rating selection finally hit enter to submit your result
• Learned the usage of fieldset, legend, & radio input elements to build well accessible form
• Scored 99.5% on Google Pagespeed Insights! 🤩
• Actually it's been overwhelmed at this part because of performance issues. So i injected the css and js inside the html file itself to improve site performance. results 86% => 99.5% 🚀
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Ping Coming Soon Page.

• Scored 99.5% on Google Pagespeed Insights! 🤩
• It's been the first time using wc-toast to get live toasts 🎉
• Bundled the modules with webpack module bundler 📦
• Used npm for package management 🛠️
• Used Prettier code formatter to ensure unified code format ⚙️
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun while building this challenge ! 🤠
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the 3-Column Preview Card Component .

• Used Prettier code formatter to ensure unified code format ⚙️
• Solution with 99.9 Percent Accuracy 🎯
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun building this challenge during my exam times ! 😝
• Feel free to leave any feedback and help me to improve my solution 💡

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Huddle Landing Page with Single Introductory Section.

• It's been the first time using Tailwind CSS along with yarn as package manager 🛠️
• Used Prettier code formatter to ensure unified code format ⚙️
• Scored 99.125% on Google Pagespeed Insights! 🤩
• Solution with 99.9 Percent Accuracy 🎯
• Layout was built responsive via mobile first workflow approach 📲
• Had a lots of fun and pain building this challenge ! 🥲

Now for the questions :

• Regarding, css optimization for production. I tried tailwindcss's --minify for css code reduction. but it ended up with removing the manual style i wrote on input.css
• But surprisingly the apply directives won't get affected but manual css does
• At last i used an online css minifier for production, So i want to know why --minify purges manual css on input.css file
• And, This is for the first time i using Tailwind CSS so apologizing for to many arbitrary values to attaining so called Perfection
• Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Stats Preview Card Component.

• I learned to use mix-blend-mode to do some magic with header image
• Layout was built responsive via mobile first workflow approach
• Had a lots of fun building this challenge !
• Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Intro Component with Signup Form.

• I learned how to use regular expressions for form validation using JavaScript
• The toughest part is searching for variable font of Poppins for this challenge, but there's not available. Ended up with individual font files for each font weights
• Layout was built responsive via mobile first workflow approach
• Had a lots of fun building this challenge !

Now for the questions :

• Does the heading "Learn to code by watching others" can be a <h1> element or not ?, If not then please let me know why.
• Can anyone share any best accessibility tester (especially for form) , i want to test this form for whether it's accessible or not
• Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the FAQ Accordion Card Challenge .

• I learned how to use and style the <details> and <summary> HTML elements.
• Eventhough the <details> doesn't need JavaScript i used it to ensure that only one summary want to show up during others are closed.
• If all summary are opened it's not looking nice, so only i provided that logic using js
• Scored 100% on Google Pagespeed Insights! 🤩
• Layout was built responsive via mobile first workflow approach
• Had a lots of fun building this challenge !

Now for the questions :

• I have no idea about heading structures, if you have any idea regarding to improve my heading structure then please leave a feedback
• And the <details> element has support for tabfocus, so when the user hits the tab then outline will arise if user hit enter then summary is opened. But how a visibility disabled person can use this ? i used screen readers but i'm not satisfied with that
• Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

👾 Hello, Frontend Mentor Community,

This is my solution for the Profile Card Component.

• Had a lots of fun building this challenge !
• Got some experience in pagespeed optimization and rapid prototyping the site
• Scored 100% on Google Pagespeed Insights! 🤩
• Layout was built responsive via mobile first workflow approach
• Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

CUSTOM TWEAKS..🚀 :

• Added smooth hover effect while hovering the card in desktop mode

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice!

👾 Hello, Frontend Mentor coding community,

This is my solution for the Single Price Grid Component.

• Feel free to leave any feedback and help me to improve my solution (or) make the code clean!
• Had a lots of fun building this challenge !
• Got some experience in handling layout with css grid
• Layout was built responsive via mobile first workflow approach

CUSTOM TWEAKS..🚀 :

• Added button clicked effect by styling the transform property for :active pseudo-class

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice!

👾 Hello, Frontend Mentor coding community. This is my solution for the Profile Card Component.

• Feel free to leave any feedback and help me improve my solution or make the code clean!
• Had a lots of fun building this challenge! I remastered the design as Khabib Nurmagomedov's profile card

CUSTOM TWEAKS..🚀 :

• Aesthetically crafted hover effects with smooth transitions
• Comes with an easter egg
• Then what, come on let's smash 😂

👨‍🔬 Follow me in my journey to finish all newbie challenges (HTML/CSS) to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice!

👾 Hello, Frontend Mentor coding community

• This is my solution for the Social proof section challenge.

TWEAKS 🚀:

• Hover effects

👨‍🔬 Follow me in my journey to finish all challenges (HTML/CSS/JS) to explore solutions that aspires everyone with custom features and tweaks

Ill be happy to hear any feedback and advice!

Mobile First 📱 > 🖥

• Nothing to complicated, layout was built with CSS Grid and Flex.

All feedback is greatly appreciated!

TWEAKS 🚀

• Smooth zoom-in transition while hovering the card

👾 Hello, Frontend Mentor coding community.

This is my solution for the Product preview card component challenge.

A quick challenge with some customization.

🎨 I added some custom features:

• Box-shadows
• Intro animations using ScrollReveal.js

👨‍🔬 Follow me in my journey to finish all challenges (HTML/CSS/JS) to explore solutions that aspires everyone with custom features and tweaks

Ill be happy to hear any feedback and advice!

Hello everyone..👨‍💻

• This was an excellent challenge to train and improve my knowledge with grid & flex layout.
• This helps me to practice about turning designs into actual website
• I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!

Feel free to leave comments on how I can improve my code.

Peace be upon you..✨