@DandyHypeSubmitted 5 months ago
P
clickglue
@clickglueAll comments
- @Johanh0Submitted about 1 year agoP@clickgluePosted 5 months ago
Hi Johan, what I like is that your code is clean, easy to read and well commented. So it is easy to follow. I think the overall result misses some details (slider, :hover, copied indication) compared to the figma file, but those are details. Good work, one or two iterations and it should be excellent!
0 - @fernandogadebarrosSubmitted 5 months agoP@clickgluePosted 5 months ago
Hi, great solution. There are some design differences but that is positive creativity I guess. I liked the fancy confirmation when copied! I see you used react, typescript and SCSS (even tailwind), and that is very interesting (I used just HTML, CSS and JS, three files only). I'm curious about your workflow and if you are happy with the speed of developing with these frameworks. I tried to find where you calculate the strength (because I thought that was an interesting part of the challenge) but I couldn't find it. Congratulations with the result!
0 - @DandyHypeSubmitted 5 months agoP@clickgluePosted 5 months ago
Hi, Great solution. The code looks clean and well organised. I can learn from your disciplined implementation of BEM. I tried to understand how you did the strength calculation, but didn't. But it works very well, congratualtions.
0 - @arsh-deSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that i was able to get the design and it looks dynamic according screen size of the device. I also changed the background color for input form as it was barely visible beforehand. I will try to improve my class names next and maybe use tailwind or bootstrap to finish the project. I will also practice more on JS as this time I was unable to get it right.
What challenges did you encounter, and how did you overcome them?I was unable to make JS work, I tried many times and failed every time, making my JS file a mess with different variable names that I didn't remember, and in the end I had to look at other people's solution to know what i was doing wrong. Next time I will do it on my own.
What specific areas of your project would you like help with?After this project, the part where I need to make the most effort is my JS skills and I will simply have to do more projects. Now I am going to challenge myself for making 1 project a day or even half of it at least. I am looking for some feedback, if someone can help me with variables naming and improve my design.
P@clickgluePosted 5 months agoHi, I think your solution is visually very good! There is a bit of an issue with the responsiveness around 768 px, but I think you can solve that. Functionally it doesn't work as it should. Your JS looks quite complicated, I suggest you take a look at other solutions of the same challenge and then try to simplify. If you've read the article on refactoring: there is a lot of value in writing DRY and simple JS, with just one task for each function! Good luck and keep on the good work!
Marked as helpful0 - @DandyHypeSubmitted 5 months agoP@clickgluePosted 5 months ago
Hi Dumitru, I liked your solution, great job! Some small issues with the functionality:
- It takes default two persons after reset, while the field displays '0'
- If I apply a custom amount, it takes 5%
Your JS code look quite organized, so I guess it will be easy to maintain and fix!
0 - @MajeedatwahabSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of how i was able to navigate writing my Html code in such a way that it became sort of easy for me to style accordingly.
What challenges did you encounter, and how did you overcome them?Styling, a million times............
i made a lot of research and watched a couple videos on YouTube.
P@clickgluePosted 5 months agoHi, very interesting to see how you made everything work with relatively straightforward JS. Maybe next step is to see if you can be more precise with the design (font weights, sizes etc.) and reponsiveness (issues between 700-1000). But very well done! You might also be interested in learning React as a next step!
Marked as helpful0 - P@webdevbynightSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I used the
What challenges did you encounter, and how did you overcome them?:has()selector to select, within the form, the paragraph which does not have one single child.To display the label, the error message and the field, I first used flexbox; but, when submitting the form with invalid input, the alignment between the label and the error message was buggy on Safari. To fix this problem, I used a grid.
What specific areas of your project would you like help with?Do not hesitate over giving feedback about accessibility if there are improvements in my code to make form validation fails correctly rendered by screen readers.
P@clickgluePosted 6 months agoHi, goodnight. Fine solution, looks good. Something a bit off when you start typing an email address: it turns red immediatly, but maybe that is on purpose? Thank you for the link to the article on form validation, very interesting. I do have the feeling you maybe 'overorganize' a bit. There are many SCSS files for example. Are they really nescessary? It might become difficult to identify issues. Or maybe it is boilerplate, I don't know. But the end-result is very good, and that's what counts!
0 - @ash-109Submitted 6 months agoP@clickgluePosted 6 months ago
Hi, I think you have build a clean and solid solution. The code is easy to read and maintainable, the design is good. The responsiveness is a bit unpredictable between appr 375 and 768.
Marked as helpful0 - @KorneyChervonenkoSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
in my opinion it is rather "Intermediate" than "Junior"
P@clickgluePosted 6 months agoGreat solution! I learned a lot from looking how you structured and build the project. Also very precise! I have no remarks that could help you further improve.
0 - @tedaussie75Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I used React js and Styled components to make this page
What challenges did you encounter, and how did you overcome them?I had to understand all the states managements and how to pass the props properly to correct components
What specific areas of your project would you like help with?The optimization
P@clickgluePosted 6 months agoGreat solution, very clean and precise. Fully functional and responsive. I see you use some kind of testing library, I will look into that. I don't have any remarks or comments that can help you, very good and I learned a lot.
Marked as helpful0 - @lois-mSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Declare my color in variables.
Next time i will declare it without HSL to add it when i need it.
What challenges did you encounter, and how did you overcome them?Manage gap in grid. There are some different spacing between element in the page that i didn't see at first
P@clickgluePosted 6 months agoWell done Lois! Made good use of flex and grid, variables in CSS, reset etc! A problem that I often have is that after many iterations, the code becomes quit complicated. That is probably not good for performance and maintenace. What I try then is rebuilding the solution but with simplified structure. Also, I think it would be good if you apply 'semantic HTML': See here
Marked as helpful1 - @ghamsinSubmitted 6 months agoP@clickgluePosted 6 months ago
Hello ghamsin. I like your solution, it is clean and close to the design. You've implemented a CSS reset and variables in CSS to simplify the code, I think that is very good. One small remark on the naming of the classes. You use several types of connections (single underscore, double, doudble hyphen etc.) I doesn't seem to be BEM but maybe that wasn't your intention? Thank you and good luc wth next challenges.
Marked as helpful1 - @zololadeSubmitted 6 months agoP@clickgluePosted 6 months ago
Hi Zololade, I've studied your olution with great interest. You have 67 lines of CSS, I had 213! Your solution is way cleaner, more compact and probably way easier to integrate and maintain. The way you used JS to manipulate class lists was an eayopener for me, I'm gong to try that too. To be honest, I don't have any suggestion for improvement, really impressive!
0 - P@MinamakhloufSubmitted over 2 years agoP@clickgluePosted 6 months ago
Hi Mina, I like your solution. I've found it a difficult challenge but it looks like you did this with ease! For example, I love your smart and simple solution of the vertical line and number. You have such a clean HTML file and I've learned how much you can do with CSS. Also, I think the responsiveness in the areas in between teh media queries are quit good (a small issue with the alignment of the header fotos). Thanks, very helpful!!
0 - @DAJ350Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of creating tailored designs for desktop, tablet and mobile.
What challenges did you encounter, and how did you overcome them?Nothing that really stands out.
What specific areas of your project would you like help with?Open to any advice.
P@clickgluePosted 6 months agoHi Daniel, I'm very impressed with how clean and precise your solution is. You even made an SVG for the logo! I'm very curious how you do that. Do you use special software or do you code this 'by hand'? I also see you make size specific sections in your HTML and that you use desktop as default: Is that a best practice? It looks clean! I'm also curious about your workflow: do you work from top to bottom? Do you start with CSS classes fro the design file (looks like it in teh VAR declarations). Thank you for the link tot the clamp value calculator. Maybe you are also interested in this site: https://utopia.fyi/, that also supports dynamic spacing etc. Learned a lot, thank you!!
0 - @SlickVick1995Submitted 6 months agoP@clickgluePosted 6 months ago
Hi Victor, this was a complicated challenge, don't you think? From looking at your site, I think some links to files have gone missing. The given sizes look good, but when trying to change screensize with the responsive sliders, the intermediate values create some unwanted artefacts (proportions of the logo, photos's overlapping title). Your CSS file looks clean and I can learn a lot from your use of ID's and ::before elements etc. Thank you!
0 - @artemkotko14Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of making my first project on Frontend Mentor. I hope it's just a beginning of something great.
P@clickgluePosted 6 months agoWauw if this is your first project, you've done an excellent job and there will be great things coming! Your style of coding is clean and precise. You keep things simple and well structured, very important. Three tips that you might find usefull: the more complicated the projects become, the important it will become to plan your work in steps. Maybe you already doing that, but it might help. Secondly: many good websites use a CSS reset, to make sure the design shows up correctly. Het is a link. Thirdly, you might consider looking into CSS variables. This helps you making consistent layouts, also in complex projects. Good luck, you will be great!
0
