Digital Magazine: HTML/CSS

The Assignment

For my Web Design and Production class at Cal Poly, we were tasked with coding a digital magazine website using a CSS Flexbox layout.

Key points of the project:

Use Flexbox to create a responsive website, compatible with ranging device/browser sizes
Design an intuitive layout that guides the user through the magazine content intentionally
Design a consistent and cohesive brand identity represented in the logo and topics. Describe this brand identity in a digital project proposal format.

Project Proposal

Before beginning the project, we needed to submit a digital proposal for approval of our magazine concept including links to visual references, color palettes, type families, etc.

View my proposal: https://ashleytuliau.github.io/grc339/digital-magazine-proposal/index.html

Required Pages

I was tasked with coding and designing 4 pages within the site to display my understanding of CSS as well as my understanding of consistent branding. This included:

A main landing page with a main featured story as well as multiple secondary and tertiary posts. This hierarchy should be made clear through intentional formatting and styling.
The main story should be an active clickable link with a full article complete with supporting images and captions.
A gallery page with multiple images and a thumbnail carousel for easy navigation.
A form page where visitors can subscribe to the magazine’s newsletter.