First personal trainer website

This is my first client website I have made for a personal trainer. It is incomplete! Stuff needs to be done. However, I do need advice. Would like some other coder’ feedbacks on my first site on what I can do to improve it by looking more professional and modern. I am working on the navbar such as different style, colour, logo, fixed-top, etc. But I mainly want to focus the site itself when scrolling down. What else would you put or what would you improve on? Would love the worst and best feedback to get it right.

One thing, however, I am really struggling on is my Instagram feed. When the screen change to different sizes like phone screen sizes I can’t get the images to be on the same width and size. Please what am I doing wrong here? Thanks.

http://johnsonsandc-co-uk.sites.stackstaging.com/

Good job on scoring your first client! Now let’s make sure he’s a bit happier than he would be after seeing this :stuck_out_tongue:

  1. The font. It’s too large, and there isn’t much justification for why you would make it like this. The usual font used on the web for regular text is <20px, yours is 23. Fix it.

  2. Headings between sections are barely visible. Yes, anyone can take a second to see that it says “About Me”. Don’t make them do it, just make it more visible. Either make the image darker (drop opacity) or give your text in there a slight dark background.

  3. Headings are important, so make them look more distinctive from the regular text. Do you see any difference between card-title and card-text, besides one more pixel in font-size? You don’t, cause there isn’t one.

  4. The button in your hero-section isn’t centered (it has a right margin).

  5. Your text in the carousel (paragraphs) are not centered, you have set the left margin to 100px for whatever reason but not right, so it just took all the available space. Changing that left margin to margin: 0 auto will center the text.

  6. Work on the overall responsiveness, it’s not great and has too many issues to mention.

  7. Get a better photo of the guy, this one is WAY too low quality. Unless it’s just a placeholder, you need to change it before the site goes live.

  8. (shouldn’t be last but I forgot to mention!) There’s a spacing issue with the text in the section with the trainer’s photo. Make sure the space around top and bottom is consistent.

  9. I’d pick a brighter color for the background, probably white. Makes things more trustworthy.

  10. I’d go easier with the parallax effects, I get that you’re trying to split the site into sections but you have very little content and it looks weird with parallaxes happening every few seconds.

That’s just the basic part. There is still the issue of

  • What the visitor is expected to do when he comes to the site (destination, purpose)
  • Have you made sure, as a designer, he’s got enough pointers to do that (call-to-actions, emphasis on the important elements of the page, etc.)

Right now the page works, and it’s gonna display enough information, but it’s not necessarily gonna convert well.