@fachridp
@Sodiq-faruq
Submitted
What are you most proud of, and what would you do differently next time?
I am able to get the value a user enter to my form i'm very proud of that
What challenges did you encounter, and how did you overcome them?
Funny i do not remember how to center a div😂, just a little google search.
@fachridp
Posted
So how do you make that div to the center?😂
@youssefcharfeddine
Submitted
What are you most proud of, and what would you do differently next time?
i'm proud that my skills in html and css are getting better i still have a little trouble in responsive web desgin but i will work for it ..
What specific areas of your project would you like help with?
everything especially responsive web desgin and thanks ...
@fachridp
Posted
Hey mate, you have done a great job on this challenge, almost perfect tho, but there is ain't perfect in this world hehe.
Here's some advice from me based on what i'm see :
div class="Main". You don't have to write like that, you can write <main></main> instead. Read the article that i give you to understand about semantic html and try to implement them from now on.<img /> tag inside a div.letter-spacing: your_value_here instead.line-height : your_value_here to your text2 class, to give those line paragraph spacing with vertical axis (up to bottom).bacground-color: white when i resize my browser to mobile screens.And i think that's it from now. Hope you doing well in your next challenge and have a nice day mate.
Marked as helpful
@reemoon-ctrl
Submitted
@fachridp
Posted
Did you have any difficulties in making this challenge?
@EnriekNP
Submitted
What are you most proud of, and what would you do differently next time?
What I am most proud of in this project is that I finally mastered using both Grid and Flexbox to create a layout. Prior to this, I had never used Grid and Flexbox for layout design. Achieving this is truly an exciting milestone for me.
What challenges did you encounter, and how did you overcome them?
One of the challenges I encountered was positioning the modal (newsletter/success) in the center of the layout using Grid. Initially, I struggled to center the modal. However, I discovered that using align-content: center;, justify-content: center;, and justify-items: center; solved the problem and perfectly centered the modal.
What specific areas of your project would you like help with?
If possible, please review my CSS. I am a complete beginner when it comes to CSS; previously, I was only taught to use it in a way that worked for desktop layouts without considering responsiveness. Please teach me the best practices in CSS if there are areas that need improvement.
@fachridp
Posted
*, *::before, *::after of the form padding: 0 and margin: 0.newslatter-modal class does not stick to the side of the browser when on mobile screen.margin. Add it to your media queries.success-modal class, provide margins for the vertical and horizontal axes at mobile screen. Add it to your media queries as well.But you've done your best, the rest is to stay consistent and keep practicing by doing small challenge projects (don't watch too many tutorials without hands-on experience) first from this website or from other websites or from other sources. Have a nice day mate! 😊
Marked as helpful
What are you most proud of, and what would you do differently next time?
Reflecting on the project, I am particularly pleased with how I implemented responsive design principles to ensure the product preview card component functions seamlessly across diverse devices. This involved using flexible layouts and media queries to adapt the interface from mobile screens to larger desktop displays, enhancing user accessibility and interaction.
What challenges did you encounter, and how did you overcome them?
One of the main challenges I faced was mastering the element for loading different-sized images based on media queries, requiring focused learning and experimentation to integrate effectively into the project.
What specific areas of your project would you like help with?
I don’t need help with any specific areas of my project at the moment.
@fachridp
Posted
flex-wrap: wrap to card__body__price to prevent card__body__price__full from escaping the card__body container if the browser width is reduced.max-width or calc() method in it to get better results (watching tutorials on youtube about it will help you a lot later).But you've done a great job, keep learning and practicing by continuing to work on new projects to improve your frontend developer skills.
Marked as helpful
@ARIFCAHYO09
Submitted
@fachridp
Posted
Semangat bang :)
