Client Project Site

Just did up a website for a friend for free. I have been working with HTML, CSS and JS since March. I am hoping to get a front end dev job soon.

This site took me about 2 days to build out, it was originally from a theme and I switched up the code, added some different parts to it and whatnot.

Would love to hear your thoughts,

https://affectionate-knuth-9179eb.netlify.app

Let me know good or bad,

Thanks

I still want to add the footer to all the portfolio pages but besides that please let me know what you would change / add / remove.

Also if someone has experience doing freelance - what can you charge for a site like this once I host it and attach the domain and everything is set up.

Hope to hear back,

Thanks

Hi @Dobs!

I like your site. Just a couple of things that I noticed.

When the site loads it loads the bottom of the page instead of the top. So, I would check that on your end and see if that is happening to you too or if it is just me.

Also for the services section it would be nice if the titles where better aligned.

Lastly, in the about section, the bold font is a little hard to read. So maybe go with a lighter font weight like regular 400.

Good job!

Happy coding!

1 Like

Nice job, @Dobs! It looks quite nice and shiny. I had the same thoughts as jwilkins, that it would better for it to load up top instead of at the bottom, and that the About font should be changed.

Also, I think the fonts in the Portfolio section should match the text in the front page (and definitely not serif), and the Back button should be aligned and not sticking out a bit into the center like it is now.

I also started in March and just started learning Bootstrap a few days ago . You’re doing good!

1 Like

Thanks both of you for taking the time to look it over.

Everything is well noted and I am going to start making some changes. Yes it loads at the bottom of the page for me as well but it doesn’t do that on mobile. I thought that had something to do with my cache but since its happening for others guess its not just me.

I just went and checked and looks like I had autofocus on and that was the problem, so I fixed that. Now it’s loading at the top which lets you see the header content animations.

@jwilkins.oboe in the services section are you referring to making the heading “custom lettering” on one line like the rest of the titles, if so well noted and I am going to fix that.

  • About Section change font
  • Fonts in portfolio section should match text on front page
  • Back button should be aligned ( I noticed this as well and its something I am going to change, its especially sticking out on mobile )

Thanks for taking a look again and going to the portfolio pages to do a deeper dive @CactusWren2020 .

Thanks and happy coding everyone!

1 Like

I would be careful porting over a Wordpress theme. For one, you are likely going to load more code that you need (JS/CSS) or have something error out because of something missing (check the console. This might also explain the load state of the page).

It is also not smart for anything business-related as it may be a breach of the theme license. Using it as inspiration is fine, copying code and modifying it, is likely not.

BTW. The nav is overflowing the header because of the fixed height (991px to 768px).

1 Like

I don’t think it has anything to do with Wordpress its a HTML/CSS theme but yes you’re right about to many files. First thing I do is go through and see what files are doing what and remove what the site doesn’t need and build from there. Helps with clutter, loading times and I know what each file is doing.

When you buy the theme you are purchasing either the regular license or extended license. These give you permission to add, change and modify the theme to then put it into production for projects. You just need to re buy the theme each time you’re going to use it. If selling it you will need the extended license however. So yes, it is fine in this case as I have the license by purchase and this is a website I am making free of charge.

Outside of that care to touch on two things just so I can get a better idea of what you mean, sorry hard to understand through text sometimes.

  • Check the console this might explain the load state? Are you talking about the site loading towards the bottom of the page? If so I fixed that just haven’t deployed yet and it was caused by the autofocus in my HTML.

  • Nav overflowing the header. What exactly do you mean by this? Sorry for my lack of understanding. When you scroll the nav is supposed to show up and be fixed to the top, just not sure where and what you’re talking about. When I search for those specific heights within my CSS file they don’t exist. Please let me know so I can fix it.

Thanks so much for taking the time to reply and help @lasjorg

Thanks!

Is this what you mean here?

You are right sorry. I just saw the template on themeforest and I always just automatically think of WordPress themes when I see that. But it’s just a HTML Template and I’m sure you are allowed to modify it (didn’t really look much at the license).

Yes, it is easier to see if you scroll down to a part of the page where the background is white.

1 Like

Oh damn, definitely need to fix that!

Thanks for taking a really close look to see all that. Thanks I will fix this for the next push to GitHub.

Nice eye. I saw it the original way I posted the screenshot of but never thought to scroll down.

No problem. Here are a few more things.

  1. The items in the services grid feels a little cramped. I’m not sure the normal Bootstrap container can really contain a four-column layout like it is now. It is always an issue when you have some number of items and they don’t really fit with the columns you want, but if you can add another item and make it a three-column layout it might look better. You might also try using the container-fluid class and giving it a custom max-width. It will break out of the container constraints set on the other sections, which isn’t normally something you want but in this case, it might work for the layout and this specific section.

  2. The pop-up “tool-tip” hover text is also overflowing the page at some screen widths. Not really sure what a good solution to this is. I didn’t look, but if JS is involved one option is to calculate the location and adjust the position depending on how close to the edge the pop-up is.

  1. I would make the form inputs more visible (maybe some combination of border and background color)

  2. I would ditch the Impact font for paragraph text. It really isn’t that great for anything other than headings. But I would personally go with a different font.

1 Like

Great, this is all great thank you.

I’m going to get on all of this today.

Much thanks again!

Okay guys, we are almost ready to launch this site.

Need to optimize all the images and a few other small things and should be ready for launch after that.

Would love to hear final thoughts on the site,

www.imagineers.ca

Changed some things around. It should be fully optimized now. Let me know if anyone see’s anything that seems off,

Thanks