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.
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.
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:
This project is deployed on Glitch.
-
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.
-
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.