Kerry's Blog

Kerry's Blog is a freelance client's frontend website I helped create using Vue.js and SCSS (requested by the client) by converting a provided Adobe XD web design layout into its HTML5/CSS3 equivalent.

• Visit Website

• Web Development

What I Did

Using the provided Adobe XD Web Design layout, I created a Vue.js frontend website requested by the client that is mobile friendly and used SCSS (also requested by client) to handle the styling of the components and web layout. My responsibility was primarily to focus on the frontend of the website. The work was managed via a development branch using Git.

To keep things modular and organized, I decided it to be best that each "UI Element" be their own component to keep the code non-repetitive and easily maintainable on the developer side of things. With that in mind, every piece that was rectangular, you can assume they were made as their own individual Vue component file. For instance, the email list subscription forms each have their own component (one per style). To take things a step further, I utilized the SCSS partials file feature to keep HTML code stylings in their own file, general component styles in their own, etc. I also made sure each component had their own local SCSS styling to prevent any conflicting style changes.

The Technology Stack

• HTML5
• CSS3
• JavaScript
• Vue.js (Nuxt.js)
• SCSS
• Bootstrap
• Git - BitBucket

Challenges

One of the main challenges I faced was learning how to use the bootstrap-vue library. Normally, I would use Bootstrap as a CDN link, not as a npm module for my Vue.js projects. The second thing I found most challenging was trying to make things pixel perfect since Bootstrap has its own values and the designer has her own values, things can get tricky when the site changes from mobile, to tablet, and finally into its full sized desktop layout.

Something else I found somewhat challenging was getting lines to show up on the navbar as specified in the design requirements. It involved two horizontal lines on the top and bottom of the navbar. I rarely have to use CSS ":before" and ":after" selectors so hence the challenge. However, I have used it once before so it wasn't too difficult figuring out how to implement that. I believe I also utilized the border property to resolve any remaining spacing issues such as displaying the olive green color on the very top and the very bottom of the lines.

What I Would Do Differently

If I had to tackle a similar project again, what I would probably do differently is instead of creating a CSS file to override the Bootstrap file's designs, I would probably do a direct change in the CSS pre-processor code for Bootstrap to prevent any weird hiccups. The main benefit is performance and guaranteed results that no weird coloring issues would occur. The one negative about this approach though, which made me not pursue this route for all my projects has to do with the fact that if the developer wants to update the version of Bootstrap to the latest version, then the styles could potentially be overwritten.