Stefan Bojkovski• 560
@xStephx
Submitted
shalri
@shalri
All comments
- shalri• 600
@shalri
Posted
Nice work as always! Hope this helps: pixelparallel. This extension helped improve workflow. Cheers!
7 What are you most proud of, and what would you do differently next time?
I'm very proud to have written possibly good code, structured much better than my usual.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was definitely how to retrieve the correct values and pass them to the function that calculates the tips. In the end, I opted to call the function on every input:
billNumber = Number(event.target.value); calculate(); });To prevent it from being executed when the values are not ready, I used an if statement:
if (billNumber && tipNumber && peopleNumber)What specific areas of your project would you like help with?
For the custom button, I always used
type='radio'. I think I could simply usetype='number'.shalri• 600@shalri
Posted
Good job on the design sir! Although, the Custom tip is not working as expected the rest of the app is working properly.
0- anderu• 230
@anderutan
Submitted
What are you most proud of, and what would you do differently next time?
create layout with grid with tailwindCSS, next time should minimize the component as current Card.jsx take the job of rendering, should use Card for layout only and render in Profile.jsx
What challenges did you encounter, and how did you overcome them?
use grid for the layout as i render data inside Cards.jsx so i have to cut the Profile.jsx into 25% | 75% then inside Cards.jsx cut into 25% | 25% | 25%, i don't think this is good practice
What specific areas of your project would you like help with?
better way to plan the layout before start writing code
shalri• 600@shalri
Posted
Another good job sir! Regarding the grid, you can set the parent container to 4 columns and then just span the children. This way you can avoid using specific percentages and just let the grid do the heavy lifting. I submitted my solution just now. Check my code to see how I implemented it. Cheers.
0 - anderu• 230
@anderutan
Submitted
What are you most proud of, and what would you do differently next time?
Try to use React Hook Form for the form and validation
What challenges did you encounter, and how did you overcome them?
try to understand the basic of react hook form and implement in this project, the main challenge i face is try to create style for invalid email like when should have red color background and text and when user focus or not
What specific areas of your project would you like help with?
Refactor my code to separate it into smaller part
shalri• 600@shalri
Posted
Good job! The attention to detail is very impressive. I submitted this challenge earlier and getting the the design for the invalid form entries tested my patience. Seeing you implement them perfectly shows effort and a firm grasp of CSS and JavaScript. Well done, sir.
0 - anderu• 230
@anderutan
Submitted
What are you most proud of, and what would you do differently next time?
use popover component from headlessui for the popup panel of social media icon
What challenges did you encounter, and how did you overcome them?
different design of desktop and mobile for the social media panel, at last i decide to create both version and show when screen size different
What specific areas of your project would you like help with?
In mobile version, when you click on the share icon then social media panel will popup but the icons is slightly adjust the gap between and i not sure how to deal with it
shalri• 600@shalri
Posted
Good job! I am also looking into HeadlessUI for my React projects. Well done, sir.
0 - Daniel999l• 100
@Daniel999l
Submitted
What are you most proud of, and what would you do differently next time?
I managed to get the flexbox to work as i wanted it to.
What challenges did you encounter, and how did you overcome them?
I need a lot of help in flexbox
What specific areas of your project would you like help with?
I need a lot of help in flexbox
shalri• 600@shalri
Posted
Good job on this one. Just keep on practicing... Cheers!
0 - Daniel999l• 100
@Daniel999l
Submitted
What are you most proud of, and what would you do differently next time?
Just by seeing the screenshot, I was able to deduce how I was going to write the CSS code. especially the "flex direction: column;" for the middle layout with two different card.
What challenges did you encounter, and how did you overcome them?
I had a very stupid problem that took me a while to get. in my media query instead of "(min-width: 1024px)", I wrote "(min-width: 1024)". It took me a while to get it but I was able to solve it and I finished the project soon after
What specific areas of your project would you like help with?
I'm good for now.
shalri• 600@shalri
Posted
You may have submitted the dev branch... looking forward to seeing the finished challenge.
0 - Urias Ramos• 170
@Urias-Ramos
Submitted
What are you most proud of, and what would you do differently next time?
I feel proud to complete the challenge and improve little by little.
What challenges did you encounter, and how did you overcome them?
It was my biggest challenge yet, but it was really easy.
What specific areas of your project would you like help with?
I still don't understand the ARIA rules well.
shalri• 600@shalri
Posted
The body background Eggshell: hsl(30, 54%, 90%) will really make the design pop. This is shown in style-guide.
Play around with media queries so you'll have even more control of your responsive design and breakpoints.
Good effort on this one. Just a little fine-tuning will go a long way. Cheers!
0 - joaomarcosSR• 80
@joaomarcosSR
Submitted
What are you most proud of, and what would you do differently next time?
..
What challenges did you encounter, and how did you overcome them?
..
What specific areas of your project would you like help with?
..
shalri• 600@shalri
Posted
Nice execution, sir. Well done!
0 - Gunal K• 80
@Gunal-k
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of how the styling turned out for the preview card container. The use of Google Fonts, the color scheme, and the layout adjustments contribute to a visually appealing design.
However, if I were to approach a similar front-end challenge next time, I'd focus more on ensuring browser compatibility and responsiveness. Testing across different browsers and screen sizes is crucial to delivering a consistent user experience. Additionally, I would aim to make the CSS code more modular and organized, perhaps by utilizing CSS preprocessors like Sass or by breaking down styles into reusable components. This would enhance maintainability and scalability of the codebase.
What challenges did you encounter, and how did you overcome them?
One challenge I encountered was ensuring that the layout and styling were responsive across various devices and screen sizes. To overcome this challenge, I utilized media queries to adjust the styles based on the viewport width. By testing the layout on different devices and using tools like browser developer tools to simulate various screen sizes, I was able to identify areas that needed adjustments and fine-tune the CSS accordingly.
Another challenge was selecting an appropriate color scheme that not only looked visually appealing but also provided good contrast and readability. To address this, I experimented with different color combinations and tested them in the context of the preview card layout. I also considered accessibility guidelines to ensure that text and interactive elements had sufficient contrast for easy readability.
Lastly, integrating external fonts from Google Fonts posed a minor challenge in terms of correctly importing and applying the font styles. However, by following the documentation provided by Google Fonts and ensuring proper syntax in the CSS import statement, I was able to successfully integrate the desired font into the project.
Overall, by leveraging testing, experimentation, and attention to detail, I was able to overcome these challenges and create a visually appealing and functional front-end design for the eMentor challenge.
What specific areas of your project would you like help with?
If I were seeking help with this project, I might ask for feedback on specific aspects such as:
-
Visual Design: Are the colors, typography, and overall layout aesthetically pleasing and appropriate for the content?
-
Responsiveness: Does the layout adapt well to different screen sizes and devices? Are there any specific breakpoints or adjustments that could improve the responsiveness further?
-
Code Optimization: Is the CSS code well-organized, maintainable, and efficient? Are there any redundant styles or opportunities for optimization?
-
Accessibility: Are the colors and contrast levels suitable for users with visual impairments? Are interactive elements accessible via keyboard navigation?
-
Browser Compatibility: Have I tested the layout across different browsers to ensure consistent rendering and functionality?
-
User Experience: Is the user experience intuitive and seamless? Are there any improvements that could enhance usability or interactivity?
-
Performance: Are there any performance bottlenecks, such as large image files or excessive CSS/JavaScript? Are there optimizations that could improve page load times?
Receiving feedback on these areas can help me refine and improve the project, ensuring it meets both functional and aesthetic requirements.
shalri• 600@shalri
Posted
Good job on getting the design and layout of the blog review card. However, I noticed that your design is the active preview of the design. Might be just an oversight on your part, adjusting the box-shadow to the normal state should be an easy fix.
0 -
- ubeydanasir• 50
@ubeydanasir
Submitted
shalri• 600@shalri
Posted
Good clean css! Good job, sir.
0
