Stay at Home website - feedback please!

Hello everyone, I learned Git and GitHub today and tried deploying one of the projects I have been working on.

I am not completely done with this Stay at Home website yet, but I would like to know what you think especially with my code.

I am currently learning JavaScript, self-teaching, so I do not have any mentors. I am switching careers so I had zero knowledge of coding just a few months ago. I’ve been devoting a lot of time learning to code and would appreciate any help via mentoring or collaborating :slight_smile:

Thank you!

5 Likes

Nice work! Self-learning to code is a daunting task. Your HTML and CSS seem well organized and laid out. It’s easy to navigate and read. Just a few tips and tricks,

  1. The images in your card don’t seem to be fully responsive. If I increase the width or decrease the width of the browser the images do not maintain aspect ratio. It seems you set the images to have a height of 250px and a width of 100% because the original image went beyond or below the height of the containing div. The easiest way to deal with this is to download the images and resize them to 250px. However, in a lot of cases, this is not practical.

  2. Your document scales with the dimensions of the browser window indefinitely. For very large screens the contents get spaced such that it breaks the design.

If you wrap your content, except the header and footer, in a div and set a max-width on it, it will fix 2. To fix 1 it takes a little more planning. Instead of using an img tag you could use a div and set the img as a background image and control how the images look with the background-img property. This way the image size won’t break the dimensions of its containing card but it might cut off some of the content of the image without distorting it.

My go-to method is a combination of the above and adding more breakpoints. By removing the percent margin on the card and setting fixed values so when the browser hits the edge of the card or gets too close, I can add a breakpoint so 3 cards appear per row. then 2, then 1.

1 Like

the art is insanely good. literally one of the best projects ive seen thats actually useful

1 Like

Thank you for your response, I really appreciate it!! :slight_smile: I will refer to your comment as I fix it today. And yes, I was having issues with making the cards responsive and with the image overflow, I thought I could fix it with overflow: hidden. I also need to work on the media queries.

Thank you for the kind words! :slight_smile: I got more inspired to code! I will keep adding more useful content and add more animations maybe.

It really is impressive considering you’ve only been learning a couple months! Besides the image in the cards being responsive, as aforementioned, I would suggest also making the entire card linked rather than just the word inside of it. Keep it up!

1 Like

Thank you for the encouragement! :slightly_smiling_face: I appreciate it a lot especially because I am currently learning JavaScript , and feeling a little frustrated because it is very challenging (difficult! :smile:). But all these kind words made me want to push harder! I am working on the issues and will update this site soon!

1 Like