Northcoders Bootcamp: Weeks 9–10… Front-End, what a State.
After a speedy 2 months we’re now finally at week 9, aka the week I’d been most excited to finally reach… Front-end! With having had only very brief experiences with HTML and CSS before this, the concept of front-end was entirely alien to me and I LOVED IT! The idea of being able to visually build something with near instant feedback on what was happening was really exciting.
As a very visual person I’m not afraid to say I really appreciate a good design aesthetic, particularly with software, and so I was excited to finally learn what front-end entailed and dive straight into it! Good news, I was pleasantly surprised. I don’t know why I initially expected we’d spend 3 full weeks purely on HTML and CSS but when on Day 1 of this new block we dove straight into using Javascript my mind was blown! Who knew we wouldn’t be writing long messy HTML files with huge paragraphs of text all over the place…
We began with being introduced to the DOM (Document Object Model) and learning about the structure of how a front-end application may work. After an incredibly fun couple of sprints building a tiny quiz app and then what was essentially a login screen utilising a form (mixed with some truly HORRENDOUS but hilariously fun 90’s style CSS just for good measure) we met what would be our future and essentially the core of our front-end understand ing…. REACT and its many, many HOOKS!
Developed by Facebook, React hooks are a relatively new feature to Javascript and I have been told have been very well received and widely adopted among developers, so I was eager to get to grips with them quickly. Being able set information as State and then map through arrays of this information to build the information on web pages is SO powerful! I was honestly blown away. Don’t get me wrong, getting my head around the concept of setting the state and a myriad of other hooks was a bit of a struggle, but thankfully we had a bunch of really fun sprints to help with the understanding.
This block we had been given much more creative freedom over the sprints we could do. Typically in the back-end block we had one sprint to focus on at once, whereas this time around we were provided with 4–5 to choose from which was really fun. It just shows how diverse the use of hooks can be, and what can be created with them! Some of my cohort chose sprints focusing on a hangman style game, or sudoku, or e-commerce websites to name but a few. It was great to see what others could create, especially factoring in the limited CSS skills we were developing. A few of us made some solid attempts at utilising a couple of frameworks such as Bootstrap or Bulma to assist (but it didn’t get us very far!).
Pair programming was a little bit more of a challenge in this block surprisingly. As we became more comfortable with us, we became more confident and this was a really interesting dynamic when it came to pure design decisions after we’d finished with the hook logic. It was a lot of fun but seeing each person’s individual interpretation of design was really interesting, and another great learning opportunity actually!
As the fortnight progressed, I realised how crucial it was to begin planning ahead with what the end product may end up looking like. We used a design website Figma to mock up some rough ideas of what we were building toward visually and which components state may need to be present in, however nothing beats a bit of pen and paper for some quick scribbles of a basic webpage in my opinion!
Overall, I really enjoyed front-end (dare I say more than back-end) I think due to the design element and the use of React. It’s really user friendly from what I’ve used so far, and I’ve enjoyed playing around with public APIs to throw together a few basic apps to interact with the data from them. As I now approach the finish line (one more week of front-end where we build the other half of a full-stack project we began in back-end) and then the final three weeks of group project work ahhh!), it’s honestly so interesting to seeing both sides collide and how they interact together.
I’m really excited to see what else I can learn and pick up as I head into the final four weeks of the bootcamp, and what I can build! The excitement is REAL heading into the project phase. Near full creative control in my hands, now this will be exciting!
