Feedback on first website created

Hi All,

Just created this site as my first personal project:

Would love some feedback on the general design and layout.

Many thanks


You could add some animation on hover for exemple for the navbar and the social icons.

The dimensions of the photos in gallery feels a bit weird, photos are stretched or shrinked.

The background image takes a lot of time to load. I don’t really know how you could improve it.

Lastly, personally, i think in your menu page, the blocks are way too big. And the text take too much space, you could reduce the width of your paragraphs.

Overall it’s very nice and simple. Keep going like that!!

Hi @rheece123, your website is very beautiful, also UX-wise.
The only thing I suggest you to change are the email address and the phone number in the table reservation page. I would make them as link that trigger respectively a mailto and tel action. That way the user can pass to the mail composition and phone call without having to switch apps manually.

<a href=“”…
<a href=“tel:0123456789”…

1 Like

The background picture is a jpg with an extremely high resolution (in fact it’s a 3.2 MB image).
I suggest you to not keep such a huge image, scale it down in different sizes: 1 for big screens, one for medium and one for small screens.
Than use media queries to apply the correct background based on the user screen dimensions.


Hi simonebogni,

I have resized the background image and it seems to load in faster now. Just resized it for all screen widths, didn’t bother adding more media queries. Still getting used to how to best optimise images.

Thanks for the suggestion.

Hi JohnPA,

Do you know how best to maintain the aspect ratio for images as I just resized them within the css?

Also will resize the paragraphs on the menu page as yeah, after looking at them for a while, they do seem a little bit too big.

Thanks for the feedback and suggestions.

Hi All,

Many thanks for all of the suggestions. I have made some amendments, would hugely appreciate some feedback on the website.

Hey @rheece123 , NOW the image loads really fast! and weights much less (roughly 300 kb)! Very good job! :slight_smile:

I like the idea of the google map in the “reserve a table” page. I didn’t see it earlier because I checked from the phone. It would be nice to have it on small screens as well. It could be quite useful because the user can use it to pass directly to the Google maps app, providing a huge benefit to the user.

I also like the idea of the reCAPTCHA.

Again, very good job!

You’ve done a nice job. A few things to consider: your image alt tags are image 1, image 2, image 3… Give them meaningful descriptions.
I was confused after clicking the allergen advice button and seeing a list of unrelated food. Have the restaurant state specific allergens for its food on the website. Third-party, random sites are not good. ONLY the chef knows precisely what goes into the food. NEVER leave that to the customer because they probably do not know what the ingredients are.

Reservation page:
Correct the words and letters in bold.
If you would like to make an Reservation online… ; We can only respond to Online Reservation Enquiries if made at least 3 days in advance.

Is respond the right word there? Looking at the rest of the sentence, maybe it should read, ‘We can only confirm online reservation enquiries if made at least 3 days in advance’.

All of the form fields are very long, when viewed on a desktop PC.

It seems unusual not to have an ‘About Us’ section or page. Restaurant history and provenance can persuade people to visit. Ask the restaurant for some info about the history of the restaurant, and the origins of the chefs and food. People are interested in that kind of thing. Sure, you do what the client asks, but if you show an interest in their business, you can offer advice as to what should be included on a website as well, which could make the difference between being recommended to others or not.

1 Like

Gosh Google’s reCAPTCHA is a pain. Recently, I spent about two minutes clicking the CORRECT boxes. There must be other ways of anti-botting than Google.

Hi leebut,

Thanks for the suggestions and taking the time to give constructive feedback.

Completely forgot about the alt image tags so can add those quickly.

About the allergens link, this was the only suitable link I could find as the real restaurant this is based off don’t even have anywhere on their site about this information. Here is the real website if your interested:

Also the about us section was never added as there is very little information about this restaurant on this site, I guess I could make some info up.

This site wasn’t really about the content, it was about taking what I had learnt about HTML and CSS and implementing them into a site without following any tutorial or course and just Googling stuff when I didn’t know how to do anything.

Again really grateful for your advice and will make some changes based on your suggestions.

Yeah was messing around with the media queries for 500px width and thought the map was too big. Guess I could change the size of the map and make it fit the page better on a smartphone.

Again thanks for the suggestions simonebogni.

I see, you’re just using the content as practice. Yours looks better than their existing site. :slight_smile: Be careful doing that, because you could get into legal issues using a real business name and address and content (menus), especially if your pages get indexed. I’m not sure if Netlify ‘sandboxes’ projects from crawlers. Yeah, I may be serious, but it’s better to create something completely fictitious than to use another company’s name and risk getting sued for unauthorised use of its name and content.

Good point leebut. Didn’t think of the legal aspects, could easily change the restaurant name and change the map location. Guess I could also add the about us page you recommended if I base the website on a completely fictional company.

Again thanks for the help.

You’re welcome. Better to be safe than sorry. :smile_cat: