Personal Portfolio Webpage Tiles

Hello,

This is a link to my current project: https://codepen.io/multiplify/pen/bGLNVOX?editors=1100

I am stuck on the tile portion of the personal webpage. I don’t understand how to make the photos dynamically resize. I am also struggling with adding some spacing between my images. I’ve tried using grid-gap but I must be doing it wrong. I also want to add that nice border around them with the description of what each project is beneath but I am quickly losing hope.

Example of what I would like to emulate.

The course also never really went over how to host images and where to pull them from so I have just been using a third party site.

Thanks for your time

  1. The images still need to be responsive (Make an Image Responsive). I would also suggest setting the images to display: block

  2. Give the grid container justify-items: center. Then remove the margin on the paragraph elements inside and give them a background color and some top/bottom padding. Should work OK and is nothing fancy.

You might want to increase the min size on the image auto grid a bit, as 500px is kind of large. I would set it to no more than 400px, or more realistically 320px which is about when you can accept a page overflow. You can control the number of columns the auto grid creates by giving a max-width to the grid container and centering it with auto margin.

I can post an example if needed. But do try it first.

1 Like

Thanks a lot!

I was able to make exactly what I wanted from your advice.

Any other general tips to make it more polished/better designed? I haven’t messed with font and color yet, I figure I will do that after I get the general layout set up how I want it.

There isn’t really that much on the page to comment on. When you finish it you can create a thread in the feedback section.


I will say you should spend a little more time on naming things.

Class names like item1, item2, and item3 are not descriptive. As they are containers for sections you can use the type of section it is for the names (e.g. hero-section, projects-section, contact-section).

The class name container2 doesn’t tell us what the difference between it and the container class is. In this case, container2 is the grid for the portfolio projects so something like projects-grid would be better. The class container is fine but container2 is just confusing.