My portfolio project.. Need your feedback, thanks in advance

Code Feedback
1

few days ago I saw a portfolio page for a camper here, I liked it and decided to build it from scratch as my portfolio project with some modifications to meet the user stories FCC put for us.

here is my portfolio project
Some feedback would be nice… beside I want to remove the margins of the body, how can I do it ?

…thanks in advance

N.B: here is the original one

1 Like
2

Hey @mohamedeliwa

This is definitely a good start. I’m going to be picky about some aesthetic stuff, so please don’t be disheartened, . And keep in mind that they are only suggestions, and that I’m new at this (I recently joined the cohort that camper has organized with a bit of experience, but I’m not a pro!). Also, I don’t know very many technical terms, so I tried to describe them with various non computery terms.

I’m looking at your portfolio page and see several things from a design perspective that could be improved:

  1. Your nav bar at the top has a couple of things happening, first of all you can’t click any of them (no links), secondly the nav bar disappears when scrolling down the page it’s really good to have it fixed at the top and thirdly there are no divisions between the links.
  2. Overall your page is very “centered heavy” - This means that there is basically nothing filling the screen at full size. It would be really great to see the info spread out at a larger screen size, and smaller at phone size.
  3. The background colours also don’t flow evenly from one to another. It’d be good to get some tones that flow more gently - the change in colours that I noticed this the most for was from the orange to the purple.
  4. It’s also not utilizing the responsive design features of bootstrap to its full capacity. When I make the screen smaller there is very minimal change keeping the projects and placeholders on the screen.

I hope this helps!
Laura :slight_smile:

3 Likes
3

@mohamedeliwa I like the design and that you don’t style ids and don’t use much inline styling (I only see it in your Font Awesome elements: style="font-size:100px;"). Here are some more thoughts:

  • I prefer having a fixed header (like @lauracpope mentions) versus the home button in each section, but that’s a matter of personal preference. All of your navigation links work well for me, however, that’s likely due to the browser I’m using (Chrome). You may want to remove the <button> elements from the navigation links and just use <a> elements.

  • The top header bar isn’t full width. Is that intentional? If so, why?

  • Some of your colors fail the contrast check. @lauracpope’s suggestion on choosing background colors that flow evenly from one to another will probably help with this.

  • Generally, you want to put the following within your <head> element:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto Slab' rel='stylesheet'>

  • You have three <h1> elements in your HTML. :slightly_smiling_face: You’re really only supposed to have one of those unless you have them nested within <article> or <section> elements (and maybe some other HTML5 semantic elements). Even then, it’s recommended to only have one <h1> element per page. Here’s more about that.

    So, in this case you’d probably want one <h1> that’s the title, probably turn the following into an <h1>:

    <span class="mohamed">

    into

    <h1 class="mohamed">

    Or just style the <h1> itself and drop the class. Then, use <h2> elements for the ‘About me’, ‘Portfolio’, and ‘Contact me’ headers. You can see the outline at the bottom of this link (after you paste your HTML into the text area and click “outline”) along with a bunch of other errors and issues related to the HTML markup.

  • I recommend watching the following hour-long screencast: Let’s Write Semantic Markup. I learned a lot from this. It’s really interesting to watch his thought process as he creates his HTML markup and it also shows the thought process behind creating the HTML markup before doing any CSS work. Coding sites this way helps to cut down on HTML validation errors, at least in my experience so far.

Keep sharing your code and working hard. You’re doing great work!

2 Likes
4

thank you @lauracpope for your feedback …I’m really happy about it
I’ve edited my portfolio
I hope you check it out again, and tell me your suggestions :slight_smile:

sorry, I don’t fully understand this. what do u want me to do, you want me to hide place holders ?
sorry my English is not that perfect

5

thank you @camper, I edited the syntax trying to be more semantic …I hope you can check it out

yes, it was intentional … I thought this might be more nice. as it doesn’t need the full width so why it should be.

really thanks for this video it was great…

1 Like
6

Nice. I like the fixed header, but that’s my preference. I like the header being full width on mobile and a right column on desktop. I can understand why you didn’t want to make it full width on desktop views.

If you do want the header to be full width on mobile, you’ll want to add padding to the sections so the section headers don’t get covered by the navigation header:

Screenshot_20171025-090319
Screenshot_20171025-090319719×917 224 KB

As for colors, I like the one color look. If you want more colors, take a look at this site to help you find good colors that go well together.

1 Like
7

added the padding ,thanks.

8

Hey @mohamedeliwa

You’ve definitely done some good changes! I hope you’re having a good day! I’ve got a few more comments that may/may not be helpful for you!

  1. With the background colour, now you appear to have gone to the other extreme. Now I can’t tell where each section ends/begins. It’d be great to get some complementary colours separating the sections. I’ve found this link helpful to determine colours that are unique, while not overwhelming each other (scroll down to “related color palettes”):
    https://www.hexcolortool.com/#6950d7

  2. The responsive design features I’m talking about are when the screen is made to a smaller width/height, and the website remains clean when doing this switch over throughout the size changes, such as computer screen to phone screen sizes. (If this still doesn’t make sense, feel free to ask for clarification again!!)

3 I really like your addition of the nav bar! I would also put the “Home” button in the Navbar, instead of putting them in the body, because now with the navbar up top, that’s where people are most likely to for the ‘home’ button.

  1. I don’t know if this is on purpose or not, but all your media links are not linked to anything yet.

  2. Another fun thing to add would be a profile picture (it doesn’t have to be of you, even a placeholder of a cartoon could be fun to add in), it helps personalize it more.

  3. I would also put your name on one line in the “home” part of your page, because with it on two lines it almost looks like they are two unrelated words.

I hope this helps!

Laura :slight_smile:

2 Likes
9

@lauracpope sorry for delaying reply … I have problem with my connection.
anyway I edited my portfolio … I hope I did it better than last time.
if you like, you can check it ?
@lauracpope @camper
…I’m sorry guys, for being annoying with my requests. I hope you are not annoyed :slight_smile: