I started to feel more fluent
What challenges did you encounter, and how did you overcome them?It was a bit challenging the hover overlay. I first thought to do it with js but I wanted to find the pure CSS solution
So taking in consideration all the discussions above, I've rewritten the entire project, HTML and CSS both.
💻 Hello, Frontend Developer Community,
This is my solution for the Calculator app.
Scored 97,5% on Google Pagespeed Insights! 🚀
Solution with 100% W3C validation accuracy 🌟
Custom-built CSS animations for a smooth user experience 💫
Three custom schemes to choose 🖼
You can use calculator with your keyboard ⌨
Fully responsive design crafted with a mobile-first approach 📲
Enjoyed every moment coding this! 😎
Feedback is always welcome—let’s grow together! 🌱
Completed 5 out of 13 Intermediate Challenges so far—keeping up the momentum! 🔥
👨💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
As I am starting my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡
Hi. It's looking and working great. Just maybe it's better to make a guard preventing division on 0. Also, the dot is not working on the keyboard. About the js, I'd add one class to the "calculator__grid" div and in CSS would target the child divs through it. Then in js it'd take less code lines to add and remove all the classes. But all that are minors. Your work is really good as always. I'm learning a lot from your challenges. I hope I will get to this challenge soon.
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
This project was a very good challenge both on the styles and the logic of the calculator. I realised that I need to improve my programming logic skills by doing this project. I really enjoyed using Styled Components. I'm not sure if my approach on the color theme feature was the best, but it's the best I could do with my current knowledge.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
Hey. Wow. It's looking just like a stamp of the design. Just awesome. There are a few things to notice. *I'd use enums to set theme colors instead of function. I think it will simplify code and there are only 3 colors, so that is not a big enum. *Maybe splitting it into smaller components, like buttons, display and so on, will improve readability and ease of maintenance. *From the UX point, I think it's better always to display some output. This means when I enter the action for the number, the previous input disappears and I don't know if something went wrong or if it should be like that. So, it's better when the previous input remains on the display or even that additionally the next input is displayed. Like: 7 + then 7 + 10 then 7 + 10 =. And maybe only the result to output separately. *There is a small bug. There is no guard for division on 0. So output is infinity. And also I can add numbers to infinity then. It's better just to prevent division on 0. Hope my comments make some sense. Regards
I want to used some frontend framework like react or preact for this challenge
What challenges did you encounter, and how did you overcome them?How to customize some inputs elements, they was great challenge but I overcome.
Hi. It looks very similar to the design, except for the 'clear all' link and also I liked that you used the CSS variables. But I have some thoughts going through the code.
As a warm-up project, it's simple. The project focuses on how front-end developers can flexibly use layout
Hi. It's looking great as a fit to design. But you use px in the CSS and it makes it less responsive. For example, if you shrink it to mobile width the second button's text expands on 2 lines, and cuz of that its height becomes greater than other buttons. I guess this problem would be resolved if to use rems. And it's really simple if you set in HTML element font-size to 62.5% so that all rems will be multiplies of 10. Also, as you've chose to use react framework, then it could be composed of components like a Card and Button. Hope it's somehow helpful. :-)
💻 Hello, Frontend Developer Community,
This is my solution for the Order summary card.
Scored 94,25% on Google Pagespeed Insights! 🚀
Solution with 100% W3C validation accuracy 🌟
Custom-built CSS animations for a smooth user experience 💫
Card is featured with front and back side ✨
Custom bubble animation which changes every time you refresh 🔘
Custom box-shadow and border colors each time you hover on the back side button 🔅
Fully responsive design crafted with a mobile-first approach 📱
Enjoyed every moment coding this! 😎
Feedback is always welcome—let’s grow together! 🌱
👨💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
Looking forward to hearing your thoughts and suggestions! 💡
Hey. That's awesome. Really loved the back animation. Just one thing. On card itself there are options to cancel order or change the plan. But there is no way actually to use these options cuz the card is reversing when you hover it. So maybe it's better to put this hover effect on the front 'proceed to payment' button.
Looking awesome. Actually I had the problem in my code with this task. The images are not loading in prod. But your solution is looking ideal. Also fit the design and also well structured code
💻 Hello, Frontend Developer Community,
This is my solution for the Fylo landing page with dark theme.
Scored 96.25% on Google Pagespeed Insights! 🚀
Solution with 100% W3C validation accuracy 🌟
Custom-built CSS animations for a smooth user experience 💫
Added sticky header with a special animation when scrolled ✨
Custom button animation on click and on hover 🖱
Fully responsive design crafted with a mobile-first approach 📱
Enjoyed every moment coding this! 😎
Feedback is always welcome—let’s grow together! 🌱
Completed 14 out of 30 Junior Challenges so far—keeping up the momentum! 🔥
👨💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
Looking forward to hearing your thoughts and suggestions! 💡
Heyyy. Looking good but there are some notes.
*In HTML you put header inside main tag. Usually they are sibling tags and I don't see in this case why to change it. The header can absolutely be a separate element here without need of any outer container except body tag.
*You haven't any spacing between the beginning of the page and the header element.
*The quot icon is hidden behind the card. I guess z-index will resolve the problem or according to the original design you need to align it. (Tho I think with z-index it will look cooler)
*The list in the footer is not aligned. It should be smth like flex-start and not center.
*And there is a small bug with the hover effect when in mobile view, the button itself is growing unproportionally. Tbh, I don't know if it's your bug or of the browser.
*The email check works perfectly
*Why did you define the header effect only for screens greater than 1600? It will look great and useful also on smaller screens. But it's looking awesome anyway.
*For me a bit hard to read code when the media queries are spread in between regular code and code is not structured as per the page or HTML structure. But, it's only my opinion and I guess it's more about personal preference.
Hope it's somehow helpful.
💻 Hello, Frontend Developer Community,
This is my solution for the Launch countdown timer.
Scored 97,5% on Google Pagespeed Insights! 🚀
Solution with 100% W3C validation accuracy 🌟
Custom-built CSS animations for a smooth user experience 💫
Fully responsive design crafted with a mobile-first approach 📱
Enjoyed every moment coding this! 😎
Feedback is always welcome—let’s grow together! 🌱
👨💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
Looking forward to hearing your thoughts and suggestions! 💡
Hey Mik. It's looking great! Just one small thing I've noticed. The cards jump and change their width sometimes. I think it is related to the width of every specific number. I'd define more fixed width boundaries of the cards maybe, so that they wouldn't depend on the width of their content. Enjoy ;-)
Every challenge I solve opens the door to new experiences and knowledge to flow😍
What challenges did you encounter, and how did you overcome them?I spent 30mins+ just trying to match the backgrounds with CSS color pallets. but finally, it helps me get my back covered.
What specific areas of your project would you like help with?box1 { background: hsl(263, 55%, 52%); } box2 { background: hsl(213, 20%, 28%); } box3 { background: #fff; } box4 { background: #1d1728; } box5 { background: #fff; }
Hi. Looking nice. But it's better to use rem or em instead of px for better responsiveness. Also, I think there is a bit of confusion about fonts styling. According to the documentation :
Proud of my ability to style this using Flexbox and CSS grid
What challenges did you encounter, and how did you overcome them?Initially was trying to use only Flexbox starting from mobile-first, but quickly realized the desktop design would be much easier with CSS Grid.
What specific areas of your project would you like help with?Any feedback is always welcome
Hi. It's looking nice. Just the cards should have the white background. And in code I saw you use mostly px. It's better to use rem or em for responsiveness. Then it looks better at the vast variety of screen sizes and needs fewer changes in media queries. Enjoy your coding.
High Sudhanshu. I loved that you used some responsive features in your code, like max-width (that I, btw, forgot to use in my solution) and rem. But there are some visible differences between the original design and your solution. For example, the left side in your solution (the image) is smaller than the right side and in design they are equal. Also, there are visible differences in font sizes and vertical margins. Probably it will be easier for you to calculate actual size of rem if you will set font-size 62.5% in HTML element , so it will be 10px and all rems will be multiplies of 10 and not 16 (the default size of the browser).
Another thing is, you define Montserrat font 4 times in the code. In other words, this font family is used everywhere in this page's text, except for 2 appearances. So, you can define it only once in the body element and other elements will inherit it. It is important for the reusability and maintenance of the code. If you need to change it, you do it only once, instead of 4 times.
Hope my comment is useful for you. Enjoy your coding ;-)
