What I'm most proud of is how I've started to think more functionally in my code. This new perspective made me much more comfortable and effective when approaching DOM manipulation tasks.
Kudos! You did a wonderful job and your code was well documented. Your HTML was clear and very readable. Your CSS was clean, concise, and easy to follow. I did notice that you had some instances of BEM and the remaining classes within a normal naming structure. I would suggest potentially maintaining one naming-structure, if possible. JS looks great as well.
Keep up the great work!
You are doing great work and I am very glad to be reviewing your submission.
#HTML Your HTML looks fantastic—well-structured and easy to review. One suggestion I’d offer is regarding your use of the <section> tag, specifically in this example: <section class="img"></section>. You might consider using a <div> or another more semantically appropriate element instead.
The reason is that <section> is typically used for grouping related content and often includes a heading element like <h1>, <h2>, or <h3>. It’s generally intended for standalone sections of content with an intended purpose (such as a specific website component). That said, your current implementation still works—this is just a suggestion to align more closely with semantic HTML best practices.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section
#CSS Your CSS is clean and very easy to read. Kudos! Just a couple of small notes to share.
I noticed your breakpoint is set around 1200px, which might be a bit early since that range still includes many desktop screen sizes (typically 1024px to 1200px). You might consider shifting the breakpoint to a slightly smaller width to better target tablet or smaller device layouts. Just a suggestion—your current setup still works well!
Another tip: I noticed you're setting fixed widths on some elements, like in .share { width: 330px; }. While this works, it can make your layout less responsive on smaller screens. Instead, consider using max-width—this allows the element to shrink as the screen size decreases, making your design more flexible and mobile-friendly.
#JS JS was easy to read and very clean as well.
I kindly noticed you're using inline styles within your <div>, like this:
<div class="share" id="share" style="display: none;">While this works, you might consider using CSS classes to manage visibility instead. For example, you could create .share--inactive and .share--active classes to represent the different states:
<div class="share share--inactive" id="share"></div>.share--inactive { display: none; } .share--active { /* your visible state styles here */
Then, in your JavaScript, you can toggle these classes using addEventListener and classList.toggle() or classList.add/remove. This approach keeps your HTML cleaner and separates structure from styling, which is a good practice in modern web development.
Overall, you are doing wonderfully and we're all in this together! Happy to review your work and keep up the great work!
Next time, I will try to write cleaner CSS code and use clamp() for font sizes.
I had a few problems positioning the header images using the position property in CSS. Eventually, I used margin to avoid overflow and layout issues.
I appreciate any feedback you may have. Thank you!
You're doing a great job! Kudos! Just a couple of notes that may be helpful. Your HTML markup looks great. A great element is the <picture> element. It allows us to change the header image at a certain breakpoint. This is super helpful when we need switch pictures.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture
#CSS Great use of custom properties for your colors and typography. The only thing I would re-examine is your breakpoints. I feel like the hero-image switched over to the mobile-hero-image a bit too soon at 1267px.
Keep up the great work! We are in this together!
Great job! Clean cod! We took a similar approach with using ':nth-child'. I would potentially reconsider the media query layout. The cards render on the smaller side and are centered in the middle of the screen at 975px. You could potentially look into larger cards or a flexible grid layout, by chance. You are doing great and we're all in this together! Keep up the great work!
Proud to have utilized grid in a way that I had not previously.
What challenges did you encounter, and how did you overcome them?Grid in general was challenging for me.
What specific areas of your project would you like help with?ANYTHING!! open to any feedback to improve. Thanks in advance!
You did a great job! Clean code. Great use of the media query. To vertically align your testimonial grid on the web page -- you can wrap the grid in a flex-box and 'align-items: center' (need to include height, as well.
#CSS: For class naming, you may want to look into BEM (Block, Element, Modifier).
You're doing great. We're all in this together. Cheers!
i am proud of being able to use css grid for this project.
What challenges did you encounter, and how did you overcome them?using grid to build the layout of the cards was difficult..
What specific areas of your project would you like help with?i will need link to articles that can help me understand css grid so well.
Overall, you are doing an amazing job. Kudos! Just a couple of quick pointers that may be useful: The icons kindly needs a little bit of margin to give it some additional spacing above and below the image. If this was intentional, please disregard.
Your breakpoints are looking good! Maybe we can potentially adjust the media query at approximately 775px because there is a slight overflow of text.
I would also potentially reconsider using the height property on your container(s) unless its 100% or 100vh when using flex box to vertically align your content.
HTML structure looks really good.
Great use of color variables within your CSS and Grid.
It was a pleasure to review your code and you are doing great. We are in this together and keep up the great work!
