Tag: projects

Building a portfolio

In my last post I spoke about building my tribute page on codepen. I have now completed my second project, my portfolio page

It took me so much longer than I thought it would. It turns out that even some of the things you think will be simple are actually more difficult than you think. 

I had to scrap my first layout because it just wasn’t possible, or at least not for me given my current skill level. Once I’d settled on a second layout I spent a long time trying to get my navigation bar to be spaced correctly. Even now it’s not quite perfect but it’s good enough that I’m happy with it for the time being but will go back to it later when I’m more skilled. 

My biggest headache was the buttons to my social media pages. I actually had to use the free code camp forum to ask for help with this. I basically couldn’t get them to align centrally on my page and spent hours on it. In the end I’d missed a simple bit of align:center; coding, which I’d actually tried really early on but had put it in the wrong place. 

I’ve got there in the end though and can always develop the page as I move forward. I thought I’d share with you some tips and hints about the more challenging aspects of this project and what I have learnt from it:

  1. Draw a basic layout on some paper, a post it note or an old receipt. This will help you picture what you’re aiming for. I don’t mean decide on font or the shape of your buttons straight away but just the basic structure. Where’s the navigation going to be? How are you going to break up the page (if you are)? Where are your images going to sit? Once you have this you can code towards that structure and then fiddle with the details as you get to each of them.
  2. Take a break but don’t stop. A couple of times I hit some difficulties. I would spend loads of time on one aspect, the hover on a navigation or the positioning of an element. I found that moving onto the next element helped. It stopped the building frustration in its tracks. I’d then go back to the issue an hour, two hours or a day later until I solved it. If you get really stuck, ask. There’s hundreds of people out there who can answer your question. And who knows, one day you might be able to help them back. 
  3. Try to learn but know your limits. Initially I tried to use bootstrap a lot for my page in order to make it as responsive as possible but I will admit I have struggled to get to grips with bootstrap. In the end I settled on just using bootstrap for my social media buttons. I learnt loads during the process about lots of things, including bootstrap, but I knew I wasn’t going to be able to build a full bootstrap site. If I kept on going I probably could have done a whole bootstrap page after a day or two, maybe longer,  but I wanted to continue with free code camp. I cut my losses and used the html and css that I knew I could build with. 
  4. Finally, building is the best way to learn because I learnt more in the few days I spent building this page than I did in the whole of free code camp up until that point. That’s no dig at free code camp but it’s true that the best way to learn is to do.

I’ve now started the next part of the camp which is Javascript, it’s very different to html and css but I’m excited to learn something new.