eglazkova / itp_nyu_student_work_web_dev_css

CSS practise: my interpretation of the 'swiss poster' grid

This is my second assignment for the class 'Dynamic Web Development' at ITP, NUY. The purpose of the assignment is to practice CSS styling, html structuring, interaction with JavaScript, and to create generally responsive web page.

Research & inspiration (aka Sketching, Wireframes, and Design specifications)

First things first, this assignment intriduced me to the 'swiss poster formula':

There are a lot great examples over the Internet. However, I was interested in the posters that deal more with text than with visuals, since I am trying to take steps toward building my portfolio or CV (and I deal with text a lot). This requirement narrowed my search a litte bit.

Below are some of my favourite examples.

And two more — one doesn't deal with text that much but I love it anyway, and the pink one is just SO WEIRD that it's nice to showcase it:

There is also a website with animated swiss posters and the one with plenty of cool examples.

I found the poster pattern that had more text than any of the examples, and looked really challenging for me as for CSS-beginner. The goal was to imitate the grid as accurate as I can, and adjust it to my personal needs (say, create a personal page, or CV, or example of work, essay, etc). I decided to stick to the style of this poster in general but use the font 'Cinzel' which I tend to use for portfolio after Visual language class.

Below is the pattern itself and my process of deconstructing its structure to plan the html layout.

Development

Unfortunately, I was a little bit overwhelmed with understading CSS basics and nuances, getting to understand flexbox, etc, that I did the documentation in the most typical ITP style (process screenshots) but a very amateur developer style (not by adding and commiting gits). I know it's really bad. However, I added earlier versions of my index.files into this repository. This time I would create new html's for a few times just to start all from scratch. The whole process of me trying to get where I wanted to land is represented in a long series of screenshots (in chronological order) below:

Deployment

This project is deployed on Glitch.

Issues

1. Since most of my efforts this week were targeted at creating 'semantic and structured HTML' and 'elegant CSS' I totally ran of time and ability to make the page interactive and truly responsive. So, these are 2 aspects for the further development of this project.

2. There is sort of the 'typo' in code that I noticed just now. I never use type 'Nunito' on the page, I wrote it while trying to understand how to work with external Google fonts.

And still, I learned a lot.

Built with

• VS Code
• Github
• Glitch