Final Project:

WEBSITE: http://sites.bxmc.poly.edu/~tiffanyshu/Final/

GITHUB:https://github.com/teeheefunnay/WebDev-Homework/tree/master/Final

CODE: 

This is how I did my parallax. I learned from w3 schools how to do parallax scrolling. Made a class for it and then applied to each section of my code.

 

Then I did a carousel which I also learned from w3 schools! I had to play around with the image sizes because my images were too big.

Issues:

I couldn’t figure out how to do a video carousel. I tried many times but I just couldn’t figure it out, so then i decided to put my videos on separate pages.Which I ended up loving the look because it adds to the parallax scrolling effect and allows people to see each video individually.  I finally figured out how to put a youtube video into my website.

What I Learned:

I learned how to do parallax scrolling, put in a contact page, how to do a photo carousel, how to link youtube videos onto my website.

Next Steps:

It took me forever trying to figure out how to work a carousel and link videos, but add in more projects to my website. I wanted to make a  fluent gradient background where the background would change in gradient like how spotify has theirs but I didn’t have enough time to create the gradient background. It would be cool if my parallax scrolling had a cool effect where it transition  into the next page with maybe disappearing or something. Also, I forgot to add my resume to the page, but that is something I would like to add and link to my linked in and instagram.

Final Idea:

Concept:  

I want to make my portfolio website w/ parallax scrolling.

Inspiration:

http://www.boy-coy.com/#contact

https://www.cristaux.com/

https://www.unison.media/

Site Map:

Wireframe:

HOME: 

VIDEO: 

GRAPHIC DESIGN: 

3D MODELING: 

CONTACT: 

Concept I need to Learn:

I need to learn:

-Parallax scrolling

-put in videos

-make a contact page

-carrousel

Midterm:

Source Code:

This is the code for my main page. It is basically the original layout for my website. I put all my images into 4 different columns.

 

Then for each individual food page I made each photo into a polaroid. Where I made 4 divs to wrap around everything and then for each photo I made 2 divs to help control the placement of the text.

One issue I had was trying to figure out how to keep the text with in the polaroid. When I made the text absolute, all of the text would just bunch into one corner.

. 

 

However, when i made my text relative, they would fit perfectly in each box, but the polaroids images would shift down.

I ended up solving this by putting everything in a container and making the container relative and then making another div called thumb and making that relative and then putting each text in its own div called text making that relative and then lastly making all the text absolute. So every image was in its own container and div to allow it to be centered.

Next time, I want to add better graphics to my website, figure out how to center my texts even better, put in my own logo onto the website, maybe add some ratings to the website and link it to the instagram page.

Hosting Site: http://sites.bxmc.poly.edu/~tiffanylieu/Tiff_Midterm/

Github: https://github.com/teeheefunnay/WebDev-Homework/tree/master/Midterm_01

 

Midterm Proposal:

Concept: 

I want to create a website for my FoodieAdventureTime, FAT. This is a brand I started in college, where I designed a logo and an Instagram page for it. I go around to new food places and post pictures of what I ordered. On my website I want to be able to show all food places i’ve visited. It will have a home/overview, of all the food/drinks overview. Food page, which is a detail page of the price , location, nutrition information about the food, Drinks, which is a detail page of the price, location, nutrition information about the Drinks, Desserts, which is a detail page of the price, location , nutrition info about the desserts.

Inspiration:

http://www.ericryananderson.com ,http://www.evaan.ca/3204321/d-o-c-u-m-e-n-t-a-r-y, http://www.ravivora.com/projects/ , https://www.teeheefunnay.com

Sitemap:

Wireframe:

Concept I’ve Learned:

I know about divs and how to place images and do background images, creating boarders, nav bar, classes and playing with color and linking to other pages.

Concept I need to Learn:

 I want to learn how to link my Instagram to my website, so as I post on Instagram it will automatically update onto the homepage. And how to update so the home page when you click on a photo it will connect you to another site of the website where you can find the information on the food.

Week 2:

Site Map:

WireFrame for my Recipe:

Response to Five Important Considerations for Wireframing:

I thought reading this was really refreshing and informative. It defiantly thinks of everything one should be aware of when creating a wireframe and it takes a lot of precautions, such as getting feedback early to get to know if you are on the right path, before you continue what you are doing. They give a lot of good tips like places to make your wireframes and things to keep in mind when designing your wireframe.