Portfolio Website

For this project I created a portfolio website from scratch. This was the first website that we started with a blank slate and wrote every line of HTML and CSS. I really enjoyed the mix of design and code involved in implementing the idea that was in my mind.

There weren’t too many new concepts introduced with this assignment but a preprocessor (LESS) was used so I tried to make liberal use of variables and mixins.

Newspaper Website

This was a sprint challenge completed over a three hour period. The main objective of this project was to implement a component that made it possible to filter a certain articles based on a data tag. Based on our experience the week before, we could have certainly implemented the article cards as well. Given the time sensitive nature of the sprint, though, we just focused on the tabs. In addition, I built a carousel component from scratch to cycle through several images.

The previous week we learned how to use Javascript to make our HTML/CSS static pages dynamic. We learned about the DOM and how to modify HTML elements dynamically. We also learned about events and how to listen for, and act on them. And finally, we learned about component architecture and how to build components that share functionality and styling with many elements.

User Interface Project

For this project we were given a full week to act as a front end developer at a web development agency and develop a marketing website based on a style guide and a few mock ups.

In addition to testing the HTML, CSS/LESS, and JavaScript skills I developed over the previous eight weeks, time management and working with a project manager were key in completing everything on time.

I completed the MVP early and built out several extra pages for the website, reused several JavaScript components across the new pages, and experimented a little with Vue.js by implementing a Markdown converter in a form field.

Like the portfolio website above, it was very rewarding to start with a blank document, build a HTML scaffold, realize the design with LESS, and then add functionality with JavaScript.