The Continuation

So this week I went ahead and started making some more progress to finishing up one pull request. My goal for this week was to get some approvals for my Legend pull request. As I have been making changes, the comments suggested further making more changes, so that not only does the legend look more like the Layer5 legend, but also get the table to look more like it too.

This is the reference that I was going for.

After many iterations and changes, I was finally able to get my chart and legend to look almost identical to the reference one.

One of the biggest challenges was to ensure the table and legend were responsive, and would change sizing according to the screen size. Luckily, with Google Chromes device toolbar, it made the job of seeing the website on different devices simple. I was able to emulate iPhone, iPad, iPad Pro and many other different screen sizes.

Here are my final designs, according to screen sizing:

• Desktop
  

• iPadPro
  

• Ipad
  

• iPhoneX
  

One thing that I wanted to challenges myself with was to expand my CSS knowledge, and working on this pull request has really helped out with that front. After many different code changes, playing around with the CSS media queries.

• CSS media queries:

I am actually pretty proud of the work that I have achieved in the pull request, as it has expanded my knowledge of CSS, and how everything works within it, and I know that these newly developed skills will come in handy in my future!

For the next week, I will start work on my next issue, and I will be back with another blog update, showing you guys the progress that I have achieved!