Build A Personal Portfolio Webpage

I finished the first zipline in FreeCodeCamp build a personal portfolio webpage. FreeCodeCamp recently changed their website. This change lead to some ziplines coming earlier in their map, a list of tasks. I was further along in their curriculum but decided to go back and start the ziplines.

To start go read the instructions for the zipline here. I started the zipline by doing the html first. Then I proceeded to add the styling afterwards. Where to start on the first zipline is one of the most asked questions in FCC. Starting with the html is one way to get the ball rolling along. Specifically, you can try implemting the navbar by reading the bootstrap docs. If your comfortable with css and chrome dev tools you can start here instead and use the Chrome dev tools to look at the nav. Hint: press F12 to bring up the chrome dev tools.

For design I tried implementing Google’s Material Design. You can read Material design docs. Basic document styles i.e header, footer, etc. I implemented the specs according to material design. For conversion of sp,scalable pixels, I read this post by author Sebastian Ekström. Extra information on formatting Bootstrap buttons can be found at this post.

The next issue I had was how to display my portfolio. I chose to implement a card design choosen from Google’s material design. Google has a recommended strategy for using cards listed here. Another issue a lot of people run into implementing the background scroll effect to there site. You can do this by adding background-attachment: fixed;. w3schools website has good example of this on there website under the sub-heading More Examples.

Lastly, building the portfolio site was a nice change of pace from the algorithm problems in FCC. The hardest thing was setting up the initial tags and button styling in css. I spent the rest of my time looking for decent background images. I settled on photos from stocksnap. The photos there are great to get started with. Just be wary of using really big images. I try to keep my image sizes less than 1.5mb. If your looking for a helpful community to learn javascript I suggest freecodecamp. Till next time have great day!!