This repository contains my first assignment for the Dynamic Web Development Class at ITP. The assignment contains a simple web page with experiments using only HTML, CSS, and media assets (images, videos, gifs, fonts, etc.).
This project consists on making a webpage with only HTML and CSS in order to get a good idea on how to code, track, sync and deploy a website.
- To open the webpage you can download the files included in the repository and run the index.html file in the root folder.
- An internet browser.
For this particular project, there are no specific installation requirements.
To develop this document, you can follow the steps provided below:
- Create a fork of this project on Github
- Ping the author of this repo via Github Issues to see if they are looking for contributions on the specific feature you're looking to add
- Open the file in VS Code and make updates
- Add and commit those changes in your forked github repo
- Make a pull request specifying what additions and changes were made
- Have a nice chat and communication with me about those changes.
- Celebrate the contribution!
- Joey Lee -- adjunct professor -- NYU ITP
- Cassie Tarakajian -- adjunct professor -- NYU ITP
- The Good Project Readme Project
My work primarily focused on experiments with gradients using CSS animations and grid layouts. I started playing around with gradient animations and color mixes around the whole background before deciding on a more "tiled" version.
I decided to use a grid layout since it seemed simple enough to create the effect I wanted. For the home page I decided to go for a minimal look, with two rectangular containers each with it's own gradient. The top-most container has a vertical movement pattern and is the first experiment. The second rectangle contains a dynamic horizontal gradient which leads towards the second experiment.
In the first experiment's page, made entirely with vertical gradients,I used different time setting to create an animation that would only synce every six seconds. In the second experiment's page I used both horizontal gradients and text.
At first I started with a gradient animation throughout the whole background. The gradient was between the vales of RGB: red, green, and blue.
Later on I started playing with movement. First by moving the whole container. The movement didn't really accomplish what I wanted.
After testing more I decided on animating the gradient background in each of the containers layed out with the grid. The grid gave it the perfect layout to generate an appealing visual effect.
I later made another page with several horizontal gradient animations and a text element in the middle. The text uses the "Impact" font.
By the end I settled on making the home page with two hyperlinked rectangles, each one with an animation similar to the page each of them linked to.
- I struggled with aligning objects to the center, managing their size and how much they would stretch or not according to the viewport.
- I takes me some time to realize how to mix absolute, fixed, relative and other positions in combination with the grid and flex-box layout.
- When I created a with
width : 100%, it worked perfectly. However when I introduced thevertical : 100%parameter thewould no appear. Why does this happen? - Which is a better way to handle the layout, through grids or through flex-box?
- When organizaing content in a webpage, what should be left to JS and what should be controlled with CSS?
- Felipe Pantone. Chromadynamica