Restaurant home page code critique

So this was a fun project.
Back story, my sister is studying graphic design at UCF. As part of the program she is also studying web design. For her final she had to redesign a web page for an actual business. Her code came out a bit wonky and because it is an entry level class they did not address the subject of responsive design. She mentioned she would like to see how I would have coded the site.

The challenge I took was to re code the site making sure it stayed true to the original graphic design but became responsive.

My code pen

original code

I f anybody would be interested in reviewing the code and giving feed back I would trully appreciate it.
This has been my first coding challenge of this level and would be very interested to see what people have to say.

1 Like


So for the most part your code is responsive, however I’m noticing just a few little issues when looking at it on smaller screen sizes (Note: I used Screenfly to test it on different device dimensions).

  • At under 360 pixels your hero h1 (“BEST PIZZA”) pinches together.

  • Have you considered looking into making the nav-bar into a responsive drop down one, hamburger-menu style? Your current set up works but may be a slight pain to use on a mobile device and design-wise the “Order Online” portions starts to break from the actual nav bar.

  • Also, just me being a little nitpicky, but I think the “It all starts with the freshest ingredients” can be done in such a way where on smaller screens you aren’t seeing just a little of a tomato with the words cutting off most of the image.

Just small suggestions but again, overall it looks responsive.

Hope that helped!

I really appreciate the feedback