@hellcsabaSubmitted 3 days ago
Yulia
@YuliaLantzbergAll comments
- @YuliaLantzbergPosted 1 day ago
Hi Csaba. It's a good solution. However I've noticed a few things that maybe can be improved. First, there is an email on the success page. You need to change this to the one that the user entered. Second, you wrap the label and the placeholder for the error text into div and then you put the error message inside span. As much as I know, <span> tag we need inside other inline elements. So, you could, for example, to put it inside label and to get rid off div. But if you use div yet, then it's better to take a <p> tag. Hope it makes sense. Happy coding :-)
Marked as helpful0 - @SuhasPatnaikSubmitted 6 days ago@YuliaLantzbergPosted 3 days ago
Hi Sushas.It's looking good. For me, even the background color you've chosen looks much nicer than the one from the original design. However, after the initial click on the share button, the footer appears not smoothly, jumping. It's because you create the elements on the flight and it takes some time. Simple manipulating classes allows to use transition property to make it nicer. Also, I noticed, that you use the var keyword for variables and it's not a good practice in modern js. Here is an article about it: https://medium.com/@conboys111/why-should-you-avoid-var-and-use-let-or-const-instead-in-javascript-1c8d10d7482a
Marked as helpful0 - @YuliaLantzbergSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
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
@YuliaLantzbergPosted 3 months agoSo taking in consideration all the discussions above, I've rewritten the entire project, HTML and CSS both.
1 - @MikDra1Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
💻 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! 💡
@YuliaLantzbergPosted 3 months agoHi. 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.
Marked as helpful0 -
- @danielmrz-devSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
- React ⚛️
- Styled Components 💅🏽
- TypeScript 🩵
- Mobile first workflow approach 📲
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 😊
@YuliaLantzbergPosted 3 months agoHey. 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
Marked as helpful0 - @GnandalSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
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.
@YuliaLantzbergPosted 3 months agoHi. 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.
- Though "clear all" looks like a link, actually it acts rather like a button. So I'd use the button tag for it and style it like a link.
- Throughout the CSS code you are not consistent in using rems. I mean, in some places you use px and in some rems and it's no really any need to use px. It's better to stick to rems for better responsiveness and also better readability. To make rems easy to use, you can set font-size to 62.5% in the root element. So it will be 10px and all rems will be multipliers of 10 and then you will not need any complicated calculations to use it.
- I couldn't figure out this selector - input-group>div:nth-child(-n+3) - is it every div in input group that is smaller than the third one? Why did you use so complicated selector instead of class? It's hard to read and will be hard to maintain if application is growing or used as a component.
- Why didn't you choose the fieldset tag to group elements in the form. It's also good for accessibility and for structuring the form, I think.
- And in the js file, I see there are many variables that are not changing, but you still use let for them instead of const. For example the variables in the beginning of the file: let empty_result = document.getElementById("empty-result"); let completed_result = document.getElementById("completed-results"); let form = document.getElementById("mortage_repayement_form"); And actually most of the variables in there. It's a not good practice as I know because it increases the chances of getting bugs. Especially if another developer will work with your code. Hope my comment is more helpful than annoying ;-) Happy coding.
0 - @erath-riseSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
As a warm-up project, it's simple. The project focuses on how front-end developers can flexibly use layout
@YuliaLantzbergPosted 3 months agoHi. 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. :-)
0 - @MikDra1Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
💻 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! 💡
@YuliaLantzbergPosted 3 months agoHey. 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.
Marked as helpful0 -
- @wonderlust101Submitted 3 months ago@YuliaLantzbergPosted 3 months ago
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
0 - @MikDra1Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
💻 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! 💡
@YuliaLantzbergPosted 3 months agoHeyyy. 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.Marked as helpful0 -
- @MikDra1Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
💻 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! 💡
@YuliaLantzbergPosted 3 months agoHey 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 ;-)
Marked as helpful0 -
- @abubakar-sadiq001Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
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; }
@YuliaLantzbergPosted 3 months agoHi. 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 :
- "Verified Graduate" has the same color as the person's name with 50% opacity
- Review paragraphs inside the quotations have the same color as well, but are at 70% opacity And I think, you set the 0.7 on name and no opacity on the quote text. And about the background colors, you have them defined in the style-guide.md file. Hope this is useful. Regards
Marked as helpful0
