@CHBNDJSubmitted 3 months ago
What are you most proud of, and what would you do differently next time?
None
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
P
Martin Šikula
@sikulamartinAll comments
- @sikulamartinPosted 2 months ago
if you just put width on body to auto and height to 100vh or 100% it will be centered automaticly, now its in the top left on bigger screens
0 - @ikethedevSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I am submitting this project
What challenges did you encounter, and how did you overcome them?I didn't encounter any problems
What specific areas of your project would you like help with?Nothing with this project
@sikulamartinPosted 3 months agoYou should definitely download the Figma file—it will help you get all the correct widths, heights, and other dimensions. Also, there's no need to use JavaScript for adding active classes. Instead, you can simply use CSS with button:hover or button:focus. Lastly, consider improving the responsiveness of your design.
0 - @fsahinbasSubmitted 3 months ago@sikulamartinPosted 3 months ago
the font is bit off and the color of light theme is also pretty off, but otherwise looks good!
0 - @fsahinbasSubmitted 3 months ago
- @35degreesSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
the color scheme is different than the template because I made two versions I'm happy with the final output. I grinded through a lot of JS coursework to get it right. I had trouble with the values filtering into one 'calculate' function, I learned that I can add a call to a single function from multiple events.
What challenges did you encounter, and how did you overcome them?generally I struggled with the JS, but worked hard to figure out the best solution. Looking forward to hearing feedback.
@sikulamartinPosted 3 months agoOh, I see you used your own design—looks fantastic! The only thing I'm curious about is why it's so small? My high school teacher always emphasized that a website should be designed for everyone, so imagine an 80-year-old grandpa trying to read that small 'number of people' text. But overall, the design is really impressive!
0 - @gina-wang-1021Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Successfully rendering data accrodingly!
What challenges did you encounter, and how did you overcome them?Had slight trouble utilizing async and await key words while fetching data but overcame them after trial and error!
What specific areas of your project would you like help with?Would appreciate any sort of feedback regarding accessibility, responsiveness, clean code, etc. I would also like to try out using SCSS next time, if anyone has any great resources for newcomers in the field, I would greatly appreciate that too!
@sikulamartinPosted 3 months agoI suggest adding cursor: pointer to the daily, weekly, and monthly options when hovering over them. It seems the active section on Figma was overlooked, so that might need some attention as well. Additionally, the border radius on the card-lower could be slightly increased; right now, it overflows onto the blue section and looks a bit off. On line 55, try setting the border-radius to 18px or so. Overall, though, it's looking great!
0 - @A-noob-in-CodingSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
It was easy
What challenges did you encounter, and how did you overcome them?While working on the mobile design, the user_email reflected to the success message overflowed when a long email was inputed
I resolved this using the overflow property in CSS
What specific areas of your project would you like help with?I would greatly appreciate advice regarding:
Using custom icons for radio buttons, cursors and list numbering e.t.c
@sikulamartinPosted 3 months agoon widther screens and on mobile it looks terrible, thats because you used display flex propety wrong, also the section.calculator into looks terrible because of the wrong usage of display:flex i would advise you look at some youtube tutorial or just go back to the learning path about the layouts, your js LGTM, and one last thing that i noticed, on the submit button there should have been linear gradient insted of just a color, so if you dont know how to do that, theres a site, that does it for you : https://cssgradient.io/
Marked as helpful1 - @geraldestebanSubmitted about 1 year ago@sikulamartinPosted 3 months ago
if you dont know how to do the little triangle just go to this site : https://www.cssportal.com/css-triangle-generator/
0 - @hectorlil48Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I was able to accomplish this on my own. It took me a couple of days because I was pretty busy, but I'm happy with the result. Next time, I won't procrastinate to start just because it looks hard. Once I started, things started to flow and I figured out how to code it.
What challenges did you encounter, and how did you overcome them?I encountered an issue with the hero images on my website. At different screen sizes, I needed to hide the mobile image and display two other images positioned beside my main div. I also needed to figure out how to set an image as a background. I struggled with preventing the background image from scaling up on larger screens.
What specific areas of your project would you like help with?I need assistance with setting a fixed background image that doesn't expand on larger screens.
@sikulamartinPosted 3 months agolooks good maybe the only thing that i should point out is the font size of the hero-content div from width size 1023, i think you that should be a little larger but thats only a small thing, but as i said, looks good!
Marked as helpful0 - @JoshuaOluboriSubmitted 3 months ago@sikulamartinPosted 3 months ago
dont use the display:grid on responsive, put it back on display block or something, for example if you look on my solution: https://66bf4b7a832d5718c1f48c5e--effulgent-capybara-b54a35.netlify.app/ you can see that the responsive is way more smooth, so in short, dont use display grid for smaller screens
Marked as helpful0 - @JoshuaOluboriSubmitted 3 months ago@sikulamartinPosted 3 months ago
i highly advice you to use flexbox insted of the display:grid, its more powerfull when it comes down to responsive design, it may be challanging to learn but once you master it it will change all of your responsive problems, for example if you look into my solution : https://66be42b9c24898168a9470d6--tourmaline-haupia-264682.netlify.app/ you can see how much smoother the responsive design looks with the flexbox
Marked as helpful0 - @rajabmaherSubmitted 4 months ago@sikulamartinPosted 3 months ago
body { display: flex; height: 100vh; justify-content: center; align-items: center; }
if you use this your wrapper will be automaticly in the middle of the screen, just be carefull when doing responsive with this, i advice you to put the height of the body back to auto, something like this: @media (max-width: 767.98px) { body{ height: auto; } }
Marked as helpful0
