I made the proactive choice to enrol into a UI/UX bootcamp while managing my full-time job. And part of this transition is the goal to create a portfolio. For a span of four (4) weeks, I dedicated one (1) week to design and planning and an intense three (3) weeks for coding.

The biggest challenge here is my lack of coding background before joining the bootcamp- so how can I bridge this gap and bring my design concepts to life without coding knowledge?

I started with getting some inspirations - understanding what a portfolio looks like and also how case studies are written. I saved all of these resources I found into moodboards.

Based on my research, portfolios are normally simple and brief. It comes with a homepage, about me page and the case study page. So I decided to create those main pages and start designing.

Another important thing to do is writing my case studies. So I also drafted three (3) case studies based from my previous works. I chose a group project (SisterWorks), an individual redesign project (Australia Post) and my first ever work (Tripinary). I want people to see how much I improved.

I dreaded this part due to my lack of experience but I'm not a quitter. I started by annotating my design.

Then to my first ever index.html. Initially, based on the groupings of my annotation I created the HTML then proceeded to CSS. But when I coded the About Me page, I learned that its actually easier for me to create the HTML of the whole page then apply CSS after.

It wasn't an easy ride, W3schools became my bestfriend. Here are a couple of the challenges I faced while coding, aside from wondering most of the time why my code did not work.

Challenge 1: Image in my hero was difficult to code.

Solution: Used relative position to create that floating effect.

Challenge 2: Having to copy the code of universal elements into each CSS file takes time.

Solution: Created a separate .css that contains universal elements (named it general.css). This includes the font style and text, navigation menu and dropdown menu. I was coding my About Me page when I realised this solution and it was one of the best idea.

Challenge 3: For our case studies, we were asked to code it using Bootstrap. However I was able to find a solution on how to code it without Bootstrap.

Solution: I chose a part (the jumbotron) to code using Bootstrap and just coded the rest without it. If given enough time to learn Bootstrap I would have taken that.

One of the greatest learning here is that its helpful for the designer to know how to code in order to create practical and feasible design. Also, when I will start working with developers, I will be able to communicate my design intentions better and also understand the technical limitations and possibilities of the design.

Now, I'm so proud to share to you my portfolio in gitHub