First Project - Feedback Please

Hello FCC!

This is my first project, so I am looking for some feedback. I’m mostly looking for feedback on how I did the layout with the grid system and how I can improve the responsiveness on smaller screens, but any other help or tips would be much appreciated.

Here it is on CodePen.

Let me know what you think!

I like the background image, very good pattern.

Layout is working and good for desktop, but not for mobile! it’s broken. check:


Check that kind of too much space after the image, same about the image goes off the bound.

I suggest, for mobile let the main container fit the screen. In mobile space is gold. You should utilize every space of screen, and avoid wasting. it doesn’t mean let elements go so tight and make mess, no spacing between elements are required too.

I just checked if you remove that margin: 5% 10% 5% 10%; of your #grid rule, could help you to utilize more space.

Fix the space after image also.

Same for the text content, and two column like layout. Again 2 column like layout works for desktop, but it might not be good for mobile. Because text/page will be hard to read. Try to make it 1 column when it’s for mobile.

Try to use a very simple layout which works in heart, you may check this article comes with a responsive 2-column(for desktop), 1 column(for mobile) layout.

I also suggest you use a lighter background colour, a transparent white could work too.

Monospaced fonts (like the font you used for title “A Bountiful Life”) are good for source/code contents. It’s not critical, but I think using serif, or sans-serif is better.

Like to see some updates with some fixed layout soon.

Keep goin on great work, be patient, no rush and do the job pro and great.

Happy programming.

1 Like

Thanks for the help NULL_dev!

I’ve spent another hour making some edits, and I think my project has improved under your guidance. Your article helped a lot and I’ll definitely be referring to it when I’m ready for the survey form project. I’ve added media queries for screen size to help with the desktop vs mobile layout. I’ve changed the layout to one column for small screens and a few more edits to help with spacing of the text when contained in such small areas. I think it looks a bit better, but let me know what you think.

Also, I’ve changed the background color to a lighter gray as you suggested and I was stunned to see how much more the blue background popped out in contrast! Colors are important!

DUDE! Wonderful progress, yes, really good progress.

Indeed you will be one great dev soon.

I see the layout is very great, and all issues gone! very good.

Two small suggestions: use background: #ffffffde; for your #grid, and try it. I think it’s better than solid gray! But this is just a suggestion, you may ignore.
Same try box-shadow: 4px 4px 3px #0073b4;

I still think if you go with a little less margin/padding from left and right side for main container will be great. try to remove margin: 5% 5% 5% 5%; and box-shadow from #grid rule for mobile, and try it.

I say this update is super good, well done.

Keep going on great work, like to see more works and progress from dear Nick.

Happy programming.

1 Like