P
@yudin7324
P
Coder-Liz
@Coder-LizAll comments
- P@Coder-Liz
Awesome! Your solution is definitely much better than mine. The layout looks good on all screen sizes.
Marked as helpful - @TheOnly1TYP@Coder-Liz
Awesome, your layout looks really good.
- @Gbw699P@Coder-Liz
Awesome, your solution is very accessible.
- P@DalaScriptWhat are you most proud of, and what would you do differently next time?
- I’m proud that I finished the project quickly ⏱️, it looks exactly like the design 🎯, and also has full DOM functionality. ⚡️
- The challenge was styling the radio and checkbox buttons 🎛️, but I handled it easily. 😎✅
- Any advice from other developers would be appreciated. 🙏👨💻
P@Coder-LizAwesome, your solution looks exactly the same as the design.
- @AnthoniaEfeP@Coder-Liz
Great job! However, I noticed one thing in your solution: there's no hover effect, and you forgot to change the favicon.
Marked as helpful - @nodegreecodeWhat are you most proud of, and what would you do differently next time?
This time, I focused on organizing my app’s logic and exploring new architectural approaches. I found two suitable solutions for a small project like this: Module Architecture using IIFE and Event-Driven Architecture (EDA) with an Event Bus, utilizing Publishers and Subscribers. Since IIFE is somewhat outdated, I chose EDA.
I had already worked with event handlers in my previous project, Tips Calculator, and wanted to deepen my understanding by applying them again.
In this project, I built a component that validates whether the user has selected a rating and displays an error message accordingly. After submitting a rating, I also implemented a return function that allows users to go back to the rating form. This feature is, of course, purely for practice within this project.
What challenges did you encounter, and how did you overcome them?When it came to CSS, one of the challenges was styling the selected rating button—specifically, setting its background and creating the "glowing shadow" effect around the star.
In JavaScript, the tricky part was figuring out how to properly validate the radio inputs and reset the UI to its default state after "rerouting" back to the submission form.
P@Coder-LizGreat job, the layout looks really good.
- @AchigyusWhat are you most proud of, and what would you do differently next time?
This project was a huge learning opportunity for me. I learned how to create and host a database on MongoDB Atlas. I also learned how to communicate with my database by setting up a Node.js/Express server on my local machine. I also learned how to deploy the server to a hosting site and use CORS to limit traffic. I also learnt a lot about CSS variables
What challenges did you encounter, and how did you overcome them?Setting up the database and the server to get data was one of the most challenging parts of this project
What specific areas of your project would you like help with?I would like help with the
index.ts,app.js, anddb.jsThanks
P@Coder-LizGood job!
- @TarestaWhat are you most proud of, and what would you do differently next time?
I am not proud at all this time because I procrastinated too much on this project. I definitely would work on this problem of mine and be more diligent for my future projects.
What challenges did you encounter, and how did you overcome them?There were many as a matter of fact. The main one I could think of putting the logic behind this project into practice. I have written a detailed version in my README.ms file.
What specific areas of your project would you like help with?I would welcome any suggestions. I am still working on code refactoring and would love to know how can I improve my code, feel free to point out any mistakes. I know I must have made a lot.
P@Coder-LizThe link below contains my solution for this project. Maybe you can check and compare it to yours, and see how I structured my HTML, SCSS, and JavaScript. https://www.frontendmentor.io/solutions/password-generator-app-7G-OOB9fAx
- @AlfiZainWhat are you most proud of, and what would you do differently next time?
calculate tips and create dynamic element values
What challenges did you encounter, and how did you overcome them?capture elements, take their values and calculate them
What specific areas of your project would you like help with?everything
P@Coder-LizCongratulations! Your layout looks really good, but when I view your code, I notice that you structure your SCSS partials differently than I do.
- @RadeQuP@Coder-Liz
Your layout really looks good, and maybe next time you can use the Live Sass Compiler extension to compile your SCSS to CSS, which will streamline your workflow by automatically generating CSS files as you make changes to your SCSS files in Visual Studio Code.
- @Danii215P@Coder-Liz
Congrats! Your layout really looks good, and I like how you style the CTA button on hover.
- @uheron96P@Coder-Liz
Congrats for completing this challenge. I think your solution is better than mine.
- @zarakWhat are you most proud of, and what would you do differently next time?
I used SASS this time to see if I could make my CSS more organised. I definitely think it helped, although I'm not quite sure whether I split my CSS properly across the
What challenges did you encounter, and how did you overcome them?layoutandcomponentfiles. That is, sometimes I was unsure whether something belonged inlayoutorcomponent. I used a mix of CSS grid and flexbox. Initially I considered just using grid for everything. But then I thought maybe I could use flexbox as a way to indicate "This part of the layout is simple", whereas with grid things can get a bit more complicated. Of course if I later decide I need grid instead of flexbox I can just change it.The main challenge was trying to get the pictures to appear at the edge of the screen like in the mockup. I also realised that I was better of using
width: 100%for the individual images instead of hard coding a width and height. I probably should have set amax-width: 100%now that I think about it.I just tried a bunch of different stuff and found something that looked alright. I thought it would be complicated making it responsive, but grid just makes responsiveness so convenient. Also, in the media queries things just kinda fell into place.
What specific areas of your project would you like help with?I'd like help with the overall organisation of the CSS. Also, I'm wondering if the use of the translate transform is okay for the images in the header, or of there is an alternative approach that may work better.
P@Coder-LizMaybe consider using a CSS methodology like BEM (Block Element Modifier) for clear, organized CSS that's easier to understand and maintain.
- @criskwyP@Coder-Liz
Maybe next time you can use percentage unit on your container to improve your responsive design.
Marked as helpful - @MoksziP@Coder-Liz
I tried to preview your site (https://mokszi.github.io/four-card-feature/) but it's 404. I'm just interested to know if your design have responsive layout.
- @sanjv12P@Coder-Liz
I notice that the layout doesn't look good on tablet.
- @thunkercP@Coder-Liz
Your layout looks good! I notice the font you use on your headings is different from the design.
- @nsokolovacWhat specific areas of your project would you like help with?
As in previous projects I have confusions about arrangement/alignment. If you have more experience, please give me suggestions or recommendations how to arrange content and items. Also which units to use regarding sizing of page. Thanks in advance :)
P@Coder-LizOn this project I use percentage (%) for fluid layout that adjust to parent container and I use pixels (px) for fixed dimensions. Here's my example code: .wrapper { width: calc(100% - 3rem); margin-inline: auto; }
