Looking for feedback on my Product Landing Page (Project 3)

Code Feedback
1

Hi! I’m looking to get some feedback and a little help with my Product Landing Page.

  1. I’m struggling with the formatting of my code itself (feeling like my HTML/CSS are both kind of discombobulated, but can’t really understand what feels “off”). If I have a messy coding problem, I want to work on getting good habits going now rather than later.

  2. I am struggling to get the grids (“Restoration,” etc.) centered and the same size! I am going to review the flex box lesson but I truly cannot figure out how to make it work.

  3. I don’t know how to get the email form at the bottom centered, either!

This project “passes” in terms of the user stories, but I want to improve it and make sure I am building good coding habits, too. I feel like these are simple fixes that I am overthinking…

https://codepen.io/henryhankry/pen/qBxEvPr Here is my link! Thank you in advance!

2

  1. I have seen worse CSS. It is all just part of learning and it’s all opinionated. It’s a big topic, I’d suggest learning from others and picking what you like. Read articles and watch videos on the topic. You can also search for CSS methodologies.

  2. align-items: center on the flexbox container is making the cards have different heights, so remove that. You can give the flex children flex: 1 or just give them a width (be careful not to create overflow with fixed widths). Then give the flexbox container a max-width and an auto margin to center it.

  3. You centered the video so you do know how to do it, at least using flexbox. Usually what you do is give everything a container and then center using the container. There are a lot of ways to center in CSS so how you do it depends.

Some links

3

Thank you for this thorough feedback! Glad to know my CSS isn’t the worst possible. And yes, I have been confused about when to use align-items/if that was even the best way to center the grid, so this helps me a lot. I’m gonna check out those links and see if I can get things to work the way I want! I really appreciate you taking the time to look :smile:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.