by group 3. let us introduce ourselves! hi my name is sayra foust! hello my name is tara trefren! hi...
TRANSCRIPT
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>