Facebook Themed Portfolio Project - Feedback Please?

Always wanted to make a website that looked like Facebook haha, so that is what I set on once I started learning HTML/CSS.

Anyways here is my very first project (I don’t really count the tribute page):

Full Page link: click here

Any feedback and suggestions will be appreciated.

Also, for some reason I could not get my Navbar to collapse on smaller screens, so I used a non-javascript method to accomplish that. (took me hours of Read-Search-Ask). But if anyone could tell me how to fix that with javascript then it would be appreciated.

Thanks Guys!

Nice work! One caveat: the nav-bar disappears after scrolling down. It means that I would have to go to the top to use it again (for which there seems to be no convenient option). While it is your design, I feel that a fixed nav-bar would be a bit more convenient. Otherwise, great work, love the design and colors!

1 Like

You are right, now that I think about it, it really is inconvenient haha. Will fix the navbar to the top
Thanks for the feedback! :smiley:

Fixed it! Though when you click on the home button it kinda looks weird now with the spacing between the jumbotron and the navbar haha

Aha, this is one of the first facebook themed portfolios that I have seen. Looks pretty good so far! :smile_cat:

For navbar help, you can refer to the bootstrap documentation. Try messing around with the examples first to see how it works.

If I had to give you one suggestion, it’d be to clean up the html. Your html should be properly nested and I recommend adding additional comments to mark the ends of divs. Maintainability is important.

Keep up the great work!

1 Like

Thanks for the feedback! :smiley:

I have tried W3 GetBootstrap and several other resources but still couldn’t find what was wrong with it. Even tried copying the example given on the Boostrap site, and still couldn’t find the problem. As far as I understand it is probably something to do with Javascript, but I will fix it soon enough. For now I found out if you just replace the button with a checkbox, and mask it with navbar icon then it works the same way as the normal button does. Except the Javascript effects ofcourse.

As for cleaning/nesting up the HTML I am not sure what you mean? Sorry newbie here haha
If you mean using tabs or spacing, then I did that when I wrote the code on my text editor. Once I was done I just simply copy pasted it to Codepen, and it removed my tabs for some reason.

Looks good! Just one small change I’d make: Your picture is not centered when it wraps around below 1000ish px. You can add the center-block class to fix that.

1 Like

Hey thanks man, it’s something I have been looking for a solution for sometime actually. Didnt know you could use a center-block class. Just looked it up on the bootsrap documentation. Thanks for the tip!