@MaulidFajarSubmitted 5 months ago
Software Developer with experience across the full-stack. Specialized in Front End Development using React, Next.js, TypeScript, and JavaScript. Currently bushing up HTML, CSS, JavaScript, and other frontend fundamentals and seeking new job opportunities.
I’m currently learning...CSS Flexbox and Grid. Learning more about web accessibility, scalability, and security.
Latest solutions
Article Preview Component Solution
Submitted 5 months agoI would like some help in placing the tooltip above the share icon when page is displayed in desktop version.
Testimonials Grid Section Solution
Submitted 5 months agoDifferent ways on how to effectively use CSS Grid to organize the layouts without having to rely on
grid-areaandgrid-template-areas.Four Card Feature Section
Submitted 5 months agoI would like more guidance on how to utilize CSS grid more efficiently.
Product Preview Card Component
Submitted 5 months agoWhat I hope to improve on this project is for the desktop view, I would like to improve the padding and perfume image in the card so that when the user shrinks and expands the width, it would not leave extra space. Right now I am using lower margins on the card component product details to resolve this extra space issue for the perfume image.
Recipe Page using HTML/CSS
Submitted 7 months agoI would like to see how I can improve my CSS code to make it more maintainable and reusable.
Social Links Page in HTML/CSS
Submitted 7 months agoI was wondering if there is any way I can make the h2 and p elements appear next to each other so that the Name and Location items can look the same as the one in the solution. Also, if anyone has a more effective approach in getting the Card item centered on all sides that would be awesome. Any feedback is greatly appreciated.
Latest comments
- @chenmeisterPosted 5 months ago
Solution looks good. Great job on getting the modal to display above the share icon.
Marked as helpful0 - @SunilParbhooSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I enjoyed practicing CSS Grid. I utilized the grid for the desktop layout of the card elements, however I think next time I may try using it for the card itself (elements inside the card).
What specific areas of your project would you like help with?I am always open for any insights on how to make my code more professional and always open to hearing how I can improve.
@chenmeisterPosted 5 months agoOverall, the solution for the CSS Grid looks like the design provided. However, I've noticed the width of the entire testimonials grid covers up the entire screen. What I would suggest is to add a
width: min(95%, 70rem)to the.containerclass in your CSS File. That way it would give the container some width padding without having to stretch across the screen. Also, the best way to debug if your flexbox code is working is to utilize chrome dev tools and click on the icon next todisplay: flex;for your specified CSS class. Keep up the good work!0 - @cgeguizabalSubmitted 5 months ago@chenmeisterPosted 5 months ago
Great job! This solution looks exactly like the design. Good use of flexbox and grid to organize the layout. Keep up the great work!
Marked as helpful1 - @sunnyeggSubmitted 5 months agoWhat challenges did you encounter, and how did you overcome them?
For the card, I struggled a little bit with the responsiveness, such as setting the margin of the card, to make the card centered on the page. From the previous challenge, I learned that I can use
min-height: 100vhto make the page full height, and then usedisplay: flexandjustify-content: centeron thebodyto center the content.@chenmeisterPosted 5 months agoOverall, great job! Looks exactly like the design. Taking the mobile first approach is the right way to go. HTML and CSS code is very organized and readable. Keep up the great work!
0 - @Jamal-DigitalSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Not really proud, i have a lot of difficulties working with the desktop style.
What challenges did you encounter, and how did you overcome them?Yeah, i'll like to have a feedback on how i could develop the desktop design without affecting the mobile design.
What specific areas of your project would you like help with?I am looking forward to your feedback.
@chenmeisterPosted 5 months agoOverall the solution looks fine. However, I did notice the box components are wider than the design. What I would suggest is to add a max-width to the box components ex.
max-width: 375px. Also, I highly recommend using CSS grid for the box components as they will make the flow more organized.Marked as helpful0 - @JogramadorSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have made the change from one column (mobile) to two columns (web).
What challenges did you encounter, and how did you overcome them?Image. I was able to use the source tag to change the image based on the screen size
What specific areas of your project would you like help with?I need to improve my understanding of rem and spacing.
@chenmeisterPosted 5 months agoOverall, this solution looks really good. It looks almost exactly like the design. I am also studying more about rem and spacing. While looking at the source code, I saw you took the mobile first approach with CSS. Keep up the great work.
0
