I could learn new things and I am proud of it.
What challenges did you encounter, and how did you overcome them?I did encounter challenges in styling.
What specific areas of your project would you like help with?I would like help in all features to gain skills.
Your code is very easy to read and understand—great work! One small tip regarding your <main> tag: since you're using display: flex, if you’d like to create space between your two main sections, you can try using the gap property with a set pixel value, or apply justify-content: space-between. You could even combine the two for more control. This approach helps you manage spacing without relying heavily on margin or padding.
I'm glad that I was able to implement the UI changes based on data.
What challenges did you encounter, and how did you overcome them?As always, I still struggle with making the page responsive. So far, I'm still using the media queries but I'm not sure if that's the best solution.
I also had problems with accessing the data.json file when I deployed on GitHub Pages. It turned out I just need to change the path to be "./data.json".
What specific areas of your project would you like help with?I would very much appreciate any suggestions that could improve my skills.
Thank you!
Hello there! Your code is clean, DRY, and easy to follow—great job!
Regarding page responsiveness, media queries are typically used to ensure the layout adjusts across different screen sizes. If you plan on revisiting this challenge, a fun next step could be to dynamically create each <li> element using JavaScript, instead of manually typing each one out in the HTML.
Again, great work, and I hope you find this suggestion helpful!
Hello there! Overall, your code looks great. If I may, I have a few suggestions that I hope you find helpful. First, for the input border, using the full border property might help it more closely match the design images provided. Try this: border: $grey solid 1px;. This should help achieve a look closer to the original design.
Second, for the success message, the bolded email ('ash@loremcompany.com') is meant to be dynamically replaced with the user's input I believe. You can accomplish this by using JavaScript’s textContent property to set it equal to the value of the input field.
Lastly, to simplify your JavaScript, consider storing your document.querySelector() selections in let or const variables at the top of your file. This way, you won’t need to repeatedly call document.querySelector() throughout your script.
I hope this feedback is helpful—best of luck on your coding journey!
I finally did it. It was a headache. Messed up a lot of things. Not the best code and has a lot of mistakes. But it id acceptable.
What challenges did you encounter, and how did you overcome them?The changes to make after the share button was clicked. Was stuck out there and lost all the hope. Got help from some sources and chatgpt.
What specific areas of your project would you like help with?Anything is appreciated.
Overall, your code and solution look great! My only suggestion would be to keep all image files in a separate folder. This makes it easier to quickly locate the HTML, CSS, and JavaScript files at a glance. It’s especially helpful in larger projects with many different file types.
Hello there! I hope you're doing well.
I wasn’t sure if this was intentional, but I noticed that the final product is missing some elements compared to the preview image. Since I’m not certain if that was by design, I wanted to focus on a few general suggestions that don’t involve the testimonial colors, content, or sizing—if that’s okay!
First, consider moving your CSS into a separate file to make your HTML more readable. You can link an external stylesheet by adding this to the <head> section of your HTML file: <link rel="stylesheet" href="/index.css">.
Next, using semantic HTML tags like <main> or <section> could improve readability and navigation, especially for others reviewing your code. This isn’t a major issue, and I only recently started incorporating them myself, but they do help structure the content more clearly.
Lastly, and I know I said I wouldn’t mention styling—but just a quick note! In the testimonial for Kira Whittle, adding the CSS property grid-row: span 2; would allow the element to stretch across both rows of the grid, aligning more closely with the intended design.
I hope this feedback is helpful rather than unnecessary, and I wish you the best of luck with the rest of the Learning Path challenges!"
First, consider placing the cards inside the <main> tag. If the page had a navigation section or a footer, everything from the headings to the cards would be considered the main content, making <main> the appropriate semantic wrapper.
Second, you could use the max-width and/or min-width CSS properties to have better control over the card widths at different screen sizes, ensuring a more consistent layout across various viewports. The only gotcha is that these properties should be used alongside the width property, which can be set with an absolute px size or % to maintain responsiveness.
