WordPress Portfolio

In spring 2018, I designed and created a portfolio site for Content Management Systems (WEB 170) for to fulfill the final project requirements for the course. We needed to use HTML5 Blank starter theme and to include navigation, three sidebars, five plugins including a contact form, and a blog page with at least five posts and categories.

The structure of the course and the intersection of the assignment with another final project–Mind Your Time App for WEB 202–encouraged me to design my site early on in the quarter. The first thing I did was formulate the color palette and site architecture, keeping the rubric at top of mind. The first few weeks of the quarter were spent creating HTML templates based on screenshots from the instructor, so I pulled components from that design to inspire my own, including the logo and navigation placement, CSS for the block quote on the front page, and four collapsible boxes on the Features page.

There were several challenges that arose throughout the quarter while I was working on the project, but the most major challenge was my transition from CSS to Sass syntax mid-quarter. I had learned how to set up a developer environment to run the sass –watch command directly from the terminal and compile the Sass code into CSS so I wanted to use that for my site to practice it again. The instructor for the course writes in CSS, so every time we covered a technique in class, I had to translate everything in my head to type it quickly. I ended up understanding everything a little bit better because of that additional layer.

Knowing that the content of the site would be for my app early on helped me to create a beautiful site that I am immensely proud of. Every time I worked on the site, I knew exactly what I wanted the tone and style to be, so I was able to focus on the design and solve problems quickly and efficiently. Designing the site did require me to read a lot of PHP to target specific elements and modify functions, but considering where I started at the beginning of the quarter–not knowing the difference between WordPress.com and WordPress.org–the site turned out very well, despite some inconsistency in the CSS, which I plan to continually improve upon.

Explore my WEB 170 portfolio site. 

Read the code on Github. 

Categorized in: App Ideas, Case Study, Project Management, Website Design