Arch Studio: An Elegant Architect's Portfolio

What are you most proud of, and what would you do differently next time?

Time spent planning saves tears debugging

While it may not have felt like it during debugging, this project was by far my favorite to complete. I learned how to implement image filters, gradients and had more experience positioning elements absolutely than ever before. As a result, this project took a long time to design and implement from scratch. While I am pleased that the final product shares an almost pixel perfect resemblance to what the artist envisioned, I must admit that my approach to styling elements has not been optimized and can be done with a drastic improvement in efficiency. More time spent in the planning phase will pay dividends in the implementation of the CSS classes. This critique aside, I was pleased by the results of the logic for the contact page, especially implementing the map and form validation features.

What challenges did you encounter, and how did you overcome them?

Keep it simple, stupid and don't repeat yourself

Working on this project exposed me to quite the range of new tools and features, but it also exposed a glaring weakness in my styling. My approach of styling section by individual section is both time consuming and needlessly repetetive. Taking more time to distill overarching themes in the element structure of a website can allow for the creation of modular classes than can be applied to many elements which can then be tweaked as required to acheive a more tailored design. Also, I am well aware of my tendency to fight the browser by defining dimensions as well as margin and padding. For my next project I intend to flow like water.

What specific areas of your project would you like help with?

Experiment like your project depends on it, it might

Working with the picture element, I understand its capablity to load assets for certain window sizes using the "srcset" and "sizes" attributes. In the beginning of my project, I used this to good effect, however I discovered that smaller assets were being loaded when the viewing window was compressed, but the reverse was not true. I had trouble getting a mid-sized asset to switch to the desktop equivalent when the view window is expanded to full screen. For this reason I opted to use media queries, however, this approach is quite repetitive and I will do more experimenting to find the html solution.