Personal Portfolio Page - Feedback Appreciated!

Hi pals, just finished this challenge and would appreciate any/all feedback.

Thanks!

&nbsp in the text when what it looks like you want is to space the buttons out. You might want to consider doing that in your css.

On small screens hamberger menu does not work, also there is an error in javascript: Uncaught Error: Bootstrap’s JavaScript requires jQuery (these are a related issue).

Perhaps look at your word spacing/choice of doing block text on different size screens so the words are spaced correctly for most views.

On the nav bar button box-shadow, my opinion would be either make them more defined as buttons or take away the borders all together. Right now they seem like they might be an accident.

Lastly, and this is really just my opinion, so feel free to disregard, you might want to pick your colors from a pallet that is related. It could just be me but the green at the top and the blue body colors do not seem to belong on the same page. Check out this pallet page here for ideas https://color.adobe.com/create/color-wheel/ you can plug your background in and have it give you pallet options that work with that. Again, that is just an opinion.

On small screens hamberger menu does not work, also there is an error in javascript: Uncaught Error: Bootstrap’s JavaScript requires jQuery (these are a related issue).

Not sure why that error is coming up, I added Jquery and Jquery UI to the Javascript… Any clue how to fix that?

Perhaps look at your word spacing/choice of doing block text on different size screens so the words are spaced correctly for most views.

What other options beside block text do i have? And how do space words other than putting one space between them?

That is what it looks like on my screen. The space between each word is much wider than the letter font size seems to call for. I didn’t spend to long on this but I think this is a side effect of other things you have going on.

You are loading Bootstrap CSS and all kinds of glyph icon fonts. You might want to remove the duplicates. Bootstrap actually contains glyph icons in the bootstrap.min. You can probably get away with just bootstrap.min.css and font-awesome.min.css.

While you are on the CSS tab, consider using something like:

body {
  padding-top: 70px;
}

Instead of

<br><br><br><br>

to pad the page.

For the javascript error and the hamburger not working, try putting your jquery above your bootstrap js in the settings. You need to have jQuery loaded before Bootstrap for bootstrap to use it.

Since I was poking around more, I also noticed you have divs that say

<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">

You only need to use the smallest col size you want it to apply to. So the above could be

<div class="col-xs-12 col-sm-6"> 

Anything larger will be 6 columns wide.

1 Like

You are loading Bootstrap CSS and all kinds of glyph icon fonts. You might want to remove the duplicates. Bootstrap actually contains glyph icons in the bootstrap.min. You can probably get away with just bootstrap.min.css and font-awesome.min.css.

While you are on the CSS tab, consider using something like:

body {
padding-top: 70px;
}

Will do, sounds good!

Since I was poking around more, I also noticed you have divs that say

You only need to use the smallest col size you want it to apply to. So the above could be
Anything larger will be 6 columns wide.

Don’t i need all those classes to make sure they look good on all sizes of screens?

<div class="col-xs-12 col-sm-6">
In this example, anything larger than sm will also be 6 columns wide no matter how big the screen gets, so you don’t need md and lg. If you wanted something different for the md or lg, then you would need to specify those.