TL;DR: Build this awesome XD template made by @owltastic with HTML + CSS.
I thought this was an opportune project to learn more about CSS attributes/methodologies that I haven't incorporated into personal projects. It helped me understand new concepts and retain new discovery/learnings: namely, CSS variables and CSS Grids.
CSS Grids was particularly challenging and I used this complete guide to help me achieve some of the layout's challenges. I found the usage of grid-template-areas helpful and the ideal way to render the masonry-type layout gallery.
I wasn't exactly going for pixel perfect but a good-enough approximation of the layout build. I also timeboxed myself to complete this in 4-8 hours (on and off in the span of two days).
- Adobe XD adobe.com/products/xd
- Mainly used for reviewing the comp, inspecting design elements and exporting some of the design assets
- Icon Fonts icofont.com
- Feels overkill but I needed something quick to display the right arrow and social icons
- Images unsplash.com
I only took the Desktop viewport into account. It's responsive to a point. 😅
Perhaps if I have a mobile comp to reference, I could definitely iterate and build that next. Also, build the interior/sub pages.