A Portfolio for the Beginner – Using a Navbar with Scrollspy

Difficulty: Easy

Estimated Time: 10-20 hours

Website Link


Hardest Part

For me, I had the hardest time getting alignments working. I remember trying everything to get my bootstrap wells spaced evenly and vertically centered. If there’s one thing that has to be tough for a beginner is vertical centering. Even getting my title centered correctly was challenging at times because I put it over an actual image tag image (I know I know, I should have used background-image but I didn’t know about that yet…).

If anyone is having trouble centering or aligning anything, check out these resources:

My Advice

Don’t let not knowing something get to you. Just Google it or check Stack Overflow. Also if something isn’t working, check that:

  • Your scrollspy anchor tags are pointing to the correct Id’s
  • You added bootstrap to the header so inside your <head></head> tags at least includes
    • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
  • You added javascript bootstrap and jQuery to the body so inside your <body></body> tags after your main content includes
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  • You spelled everything correctly. Even 1 wrong letter can throw it all off.
  • You have no errors in the developer console. If on chrome hit Ctrl+Shift+I to see the console log.

My Journey

When I first started this project I was really pumped – I mean who wouldn’t want their own portfolio to show off their work. But as I started working on it I realized 2 things. First, I had nothing to show off. Second, I did not know enough yet to actually make a very nice portfolio. I would be better off using WordPress or Wix.

So, after I realized this would be more for the practice than for showing off my work, I decided to at least try out something new. For me, that was adding text over the title background image. This turned out to be a pain because I put the image in an image tag and then positioned the text on top using styling. This is really finicky and learned first-hand to use CSS background-images instead.

Moving on from the title, the next part was putting text in the About Me section. I decided to use bootstrap wells. This was nice because it took out some styling I needed to do, but it also caused me a lot of problems trying to get them to arrange nicely with my profile picture. I briefly mentioned this problem above.

Essentially, it took a lot of messing with styling to get the spacing to my liking, and so that it was responsive as well. Having a responsive website these days should be number 2 on important features of any website, right below having an actually functional website.

The easiest part of the whole project was actually setting up my project display images. I used the bootstrap caption and linked to the image. When I first did this I linked images to imgur.com. However, I learned quite quickly that CodePen does not support Imgur image linking, so I have since switched all my image hosting to Flickr. I definitely recommend them, I haven’t had a dead image link since I switched. And they have a very fast server response so images load without any lag.

I wouldn’t be a good blogger if I didn’t mention the main point of the project, which was to use scrollspy and integrate it within a navbar. This was pretty straightforward, and honestly, the hardest part was finding out what the term was because they don’t mention it. If you’re having trouble finding it or implementing it, this W3Schools page is quite helpful.

WARNING: You have to add the bootstrap javascript and jQuery dependencies to your document in order for scrollspy to work!

Also, in order for scrollspy to work, you need to have a working navbar as well. I recommend combining a responsive bootstrap navbar with a fixed navbar. The two at examples at the bottom of this page should be perfect.


Closing Remarks

This was a very eye-opening project in terms of my ability to implement a feature I thought was really neat – the scrollspy effect. Although it took me close to 15 hours, it built confidence and really helped propel me to the next set of challenges and harder projects.

Just continue working and remember that after this is javascript, no more plain HTML and CSS!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: