By Group 3

Let us introduce ourselves!

Hi my name is Sayra Foust! Hello my name is

Tara Trefren!Hi I’m Eva Williams!

We’re Group 3 and Rate it or Hate it is our site, let us show you all the steps we took to create it.

It starts with an idea...

Concept statementClient: Movie house that shows movies

Problem: Would like to give showcase top three movies and hear customers feedback

Solution: Create a website that features the top three movies, is easy to navigate and allows customers to provide reviews of movies

Basic design

Drawing inspiration We brainstormed ideas and things we wanted to

incorporate into our site. We decided to stick to a comedy

theme.

We decided what movies we wanted to

do.

We agreed on movies posters

as the images for our movies and that we’d write

our own reviews.

Style Guide

FontsFilson Pro Black

Calibri

Colors

We needed to pick out colors

and fonts.

We decided to use Adobe Kuler

to pick colors out.

We went with complementary

colors that fit our theme.

Mapping it out

Wireframes

Siteflow

Coding begins

The code

The results

I started coding the elements that every html page has and then continued by adding the section, paragraphs, images,

and videos element tags according to the wireframe

where I thought they needed to be. It was hard since there is

no content you can’t really know if everything is going to

show up right.

Adding the info Results

Even after adding the info, images and video code it still

didn’t look like much of a webpage.

Tables and Forms Results

The table was really plain and the form inputs didn’t really sit right. I started making the css

style sheet and focused on getting the table colors right

and the borders. I then added the styles comments for the

rest of the main elements like the section, body, and nav.

Style sheet

Setting it up Results

I took over after and started putting in the colors, fonts styles, and spacing everything

out as best as I could. The margins were extremely important during the css styling,

making sure the white space was well managed wasn’t easy.

Moving alongMore CSS and a few bumps along the way

Getting things to line up and the inherited attributes not to influence other things became

kind of an issue. I ended up resolving this by giving a lot of

the elements id names.

Finishing touches

Image map, header images and contact details

Throwing it on the server

We all worked together to decorate our site by making flat images to use for the header, image map, and Eva drew the

picture on the main page.

Using the site

Hope you enjoyed exploring our

website with us!

Webliography

"Horrible Bosses." IMDb. IMDb.com, 8 July 2011. Web. 06 June 2015. <http://www.imdb.com/title/tt1499658/?ref_=fn_al_tt_2>

"Horrible Bosses Official Trailer #1 - (2011) HD." YouTube. YouTube, 11 May 2011. Web. 12 June 2015. <https://www.youtube.com/watch?v=bU0STezaOyk>.

Rotten Tomatoes. Rottentomatoes, 13 May 2013. Web. 12 June 2015. <http%3A%2F%2Fwww.rottentomatoes.com%2Fm%2Fhorrible_bosses%2F%3Fsearch%3Dhorrible%2520bo>

Let's Be Cops. Digital image. Google. Google, Aug. 2014. Web. 07 June 2015. <http://www.google.com/imgres?imgurl=http://uthmag.com/wp‐content/uploads/201 4/08/lets‐be‐cops.jpg&imgrefurl=http://uthmag.com/lets‐cops‐uthmag‐ review/&h=478&w=680&tbnid=qHKU3xF643DPpM:&zoom=1&docid=xF‐ YQZymkgJTuM&ei=cRtyVYLONszJogTK65GYCA&tbm=isch&client=firefox‐a&ved=0CHQQMygzMDM>.

"Let's Be Cops." IMDb. IMDb.com, 13 May 14. Web. 7 June 2015. <http://www.imdb.com/title/tt1924435/>.

"Let's Be Cops | Official Movie Site." Let's Be Cops | Official Movie Site. 20th Century fox film corperation, 2015. Web. 12 June 2015. <http://www.letsbecops.com/>.

“The Grand Budapest Hotel.”IMDb.IMDb.com, 28 March 2014. Web. 7 June 2015. <http://www.imdb.com/title/tt2278388/>

“THE GRAND BUDAPEST HOTEL - Official International Trailer HD.”Youtube.Youtube, Oct 17, 2013. Web. 12 June 2015. < https://www.youtube.com/watch?v=1Fg5iWmQjwk>