Hi, welcome to the Walkthrough: Git and Github for beginners with the Open Source Club
cd (don’t forget the space)
3. In Finder, navigate to the folder and Drag and drop into the Terminal.
4. In Terminal, type: browser-sync start --server -f -w
5. Server should launch, and you should see the correct ip address to navigate to.
Something like this: localhost:3000
**Notes: There a other ways to open a localhost. This is just my prefered method, because it automatically refreshes the website.**
### Develop
To develop this project, you can:
1. Sketch and Design website
2. Develop code into your code editor
3. Follow progress in your localhost
**Note: Instead of a code editor, you can use [Glitch](https://glitch.com) to keep track of your code in real-time.
### Deployment
For a project in progress it is possible to host it on [Glitch](https://glitch.com)
## Built with
* [VS Code](https://code.visualstudio.com/)
* [Glitch](https://glitch.com)
* [Github](https://github.com)
## Authors
* [Themis Garcia](https://github.com/themiscadiz) -- NYU ITP student
# Notes & Process
For this assignment I decided to use one of the designs suggested in the assignment post.
The clear hierarchy and grid, helps me to understand layout organization better. For the redesign exercise, I started from creating a Style Guide of the swiss poster:
**Website about New York**
In the theme of New York, I decided to work with Loisaida. It was the way newyoricans called the Lower East Side. This neighborhood has a rich history of social activism for the newyorican community, specially in the 60's, 70's and 80's. This website remembers their participants and its contrubution.
**Style guide of Swiss Poster**
Although I tried to find the font used in this poster, I wasn't able to find a precise answer. The shape of the **G** didn't match with any swiss type style that I found. The closest fonts are Helvetiva and Univers. However this small dive into typograghy gives me an idea about swiss styles.
## Process & Documentation
**Sketching**
Sketch helps me to rapidly get the layout of the poster and how approach the redesign for a website.
**Wireframes**
This step helped me to start from the style guide of the poster to a make grid decision about the new redesign. For the wireframe and other design decisions I used Figma. Altough was the first time using this software, it was friendly to understand and follow.
**Design specifications**
For a more detailed design specification I made a style guide with new design.
**Html and css**
To have a fast feedback about the html and css development I used Glitch. To better understand the developers practice I started my code from last class' live code example. Although throughout the process I made a lot of modifications, this first approach gave me a guideline for html and css practices.
In this sequence of images you can see the process from the first html modification to the style of the layout. This part took me a lot of effort to be able to understand a little bit better how to work with grids and responsive layouts.
The main two columns on the website change into one column, one row design.
The navegation is 4 item list next to the title "Lower East Side". In the small responsive version this navegation goes below the title.
This flow is used on the other rows on the website.
**Animation on css**
This is my very first time that I tried to animate in css. Using a loop I move the title back and foward, changing the color of the title, and breaking the layout. I had some difficulties using this feature because the movement affected the clickability of the navigation.
At first, I moved the animation side to side. Although the title wasn't above the navigation, it affected the clickability. I changed the animation to vertical, and in this case affect the navigation when use a smaller screen width. I tried different option but I didn't figure it out how to debug it.
**Integration with javascript**
Understanding how to implement javascript was challenging for this assigment. Altough last semester I have used p5.js, I don't have any experience using js outside of p5.
However, I was able to use to js functions such as onload, and click in this website.
* When one of the image upload, open a window who welcome the user to the website.
* When user mouse clicked "Loisaida" in the navegation, open a window with a definition.
Although I am not sure what it is a better practice,I started the Githubissues.