Portfolio Site

Coming back to FCC means redoing the challenges and this time I’ve tried to push myself where I can.

This is my compulsory portfolio page: https://codepen.io/JammyPiece/pen/pwVrog

It’ll be nice to finally get some projects on it.

Next stop on the journey is basic javascript so here’s where I need to hunker down from the beginning to get a good grasp for the hard bits. Allons-y!



I’m still here! Or rather, my computer is still here and I’ve been hiding in a corner not touching it for a long while- the depression having put a kabosh on any motivation I had. So, I’m about to relaunch into making my own private portfolio site. I’d started it but then abandoned it. I think I was trying to do too much too soon and burnt out. But that way, I’ll never succeed.

So, I’ve gone to Dev.to for some uplifting reads, watched some ChristheFreelancer videos on youtube and am minutes away from jumping back on the horse, if only I could remember which way round the horse should face…

Slow but steady

1960's female computer scientist

I’ve been working through my Sam’s textbook at a steady rate. It’s good as there’s not too little, nor too much code to copy. I continue to develop my website- it’s really basic and chunky and horrible at the moment. But I know I’ll get to jazz it up with bootstrap once I get back on Free Code Camp. What a knowledge of html or css won’t help with is the poor quality photo- note to self: take a better one in work clothes…


I’ve had 2 major learning points since I last wrote. The first was -webkit/-moz pre-fixes alongside the column lines. I love the simplicity of the wording. Also, I was having difficulties with the headings inside the column wandering off to sit where they wanted. However, I eventually discovered that the ‘page-break-inside:always’ did the trick.

I had to create a table to position my projects-to-be gallery. Allegedly, you shouldn’t be using tables for positioning things but at the moment that’s all I know so it’ll have to do. I’m itching to get creating now and see what you can actually do with javaScript. At the moment, everything’s quite static with html/css.

Back on the horse

Well, I decided to get back on Free Code Camp a bit early as I’ve been getting disillusioned with with my text book- Sam’s HTML, CSS and JavaScript. It had started out well and I felt I was getting extra concepts that with FCC but then I started typing out the exercises and realised that there were quite a few concepts that hadn’t yet been explained, or not fully enough in order for me to properly understand what was going on.

So I’ve restarted JavaScript on FCC from the beginning. I ought to get back where I was tomorrow. I can’t totally blame my book though. I’m struggling to retain anything at the moment but maybe that’s just because JS is hard if you haven’t done any coding before at all…or maybe that’s just an excuse and I need to work smarter.

I’ve just rejoined the gym and been going through posts on Pinterest for some motivation.  My favourite is “your speed doesn’t matter. Forward is forward.” Make it so.


Back on the books tonight and the rest of the DOM chapter. It was about using the Document Object Model to make buttons to move your browser back and forwards history-wise, make text disappear and reappear and also add text typed into a box to show further up the page. ‘Dynamically’ as they say. I’ve found the explanations really hard to visualise. While typing out the examples does certainly help, there’s tons of code that I can only hope I’m only meant to have a vague knowledge of rather than actually know off by heart (I hope). Tomorrow should bring variables, strings and arrays so hopefully more familiar territory.


I was meant to be doing more on JavaScript this evening- which I did for a bit- until I developed the irrational notion that I had to jazz up my clock project beyond the bit I copied  learned from the book. So, behold the wonderous borders. Be amazed at the use of a box shadow and blinded by central alignment of my text here. It took me 2 bloody hours of going round in circles losing my alignments and chasing the rectangles around. It won’t win any design awards but it’s as done as I can think to make it right now. I did also learn about wrappers/containers and how to overlap text on a shape so it was a good exercise in itself. However. No more excuses and back to DOMs tomorrow.

Another Stab at Bootstrap

I can’t say that Bootstrap and I get along very well. I’m slowly coming to slight understanding of it but it feels like one step forward and two steps back. I just get a hint of understanding, that penny dropping moment then, when I go to repeat the action in a different site, it goes haywire…After my problem with the nav bar (turns out I was using the newer version of Bootstrap which wasn’t supported by the code I was cutting and pasting) I was fearful of not knowing enough before moving on. So I built another portfolio site for the sheer hell of it. I’m fond of no.1 as it’s my first but the second one looks more professional. The only thing I didn’t manage to do was get it to smooth scroll but I’ve given up since it’s a JavaScript thing and I’m learning this next. Screenshot of my newest creation below. Zero responsivity. No building from mobile up. But it’s my baby, as imperfect as it is…4thsitesnip

Oh dear…

It’s taken me less than a week to hit my first bump (although it feels like a mountain) in the road. For FCC, I’m tasked with creating a first portfolio for sharing your other projects with.  The format is reasonably straightforward- a scrolling site with sections about you, your portfolio and contact details.  But I spent all-day repeatedly scrubbing out the coding for  my blasted navigation bar. It wouldn’t stay put, text wouldn’t line up, one thing got sorted but made another thing worse. Most frustratingly, the code is all up on the internet- you just have to pick the right sections to copy and paste but even then I was getting into a right mess. I seem to have reached a sort of compromise with it. I’m going to leave the navbar alone for a few days while I sort out my portfolio and contact sections out. I’ll let you know how it goes.


Today was Bootstrap day. Bootstrap is like a ready made css file that you can upload to your html. It has lots of pre-made classes for you to choose from. I didn’t find it much easier than doing long-form css but given both are difficult for me right now, that’s probably not a true reflection of what it can do.

I made an other version of my 1st website using Bootstrap this time. I managed to centre text plus use rows and columns to help with spacing. Still nothing to write home about but I’m glad I did it for the practice. Again, you’re missing out on the glorious animated gif and can’t make out the alternative to Lorem Ipsum- Bacon Ipsum that I used. Google them!

Bacon and eggs website snip


Bacon and eggs

Screenshot of first website

I’ve just made the most basic of sites using html and css using most of the commands I’ve learned so far. It won’t be winning any prizes for design but it was a good exercise. You’re also missing out on the glorious dancing bacon and egg gif…I made lots of little errors, generally to do with spelling. Unfortunately, just one letter wrong cause big problems. But it only took 1.5-2 hours so it wasn’t bad. Next up: Bootstrap…