Superheroes Website

My idea was to design a Superheroes website. I have chosen 5 superheroes, Spiderman, Superman, Batman, Hulk and Ironman. I would have each page with character details, film, history and comics.


Screen Shot 2015-01-09 at 17.18.21

This code is the Navigation in html and I have added 5 pages of navigation, Home, Characters, History, Comics and Film.

Screen Shot 2015-01-09 at 17.18.51 Screen Shot 2015-01-09 at 17.19.06

This is the navigation and I have also used a dropbox to show the different pages you can click to.



This is the Wireframe of Homepage for Superheroes website. I have added in homepage with images, images with text and image link so you can go to different websites.

Screen Shot 2014-12-30 at 15.41.08


This is code of homepage site in Html on Coda.

Screen Shot 2014-12-30 at 15.33.31 Screen Shot 2014-12-30 at 15.33.56 Screen Shot 2014-12-30 at 15.34.01


This is the homepage that I have made and you can see the images of the 5 superheroes that I have chosen, Spiderman, Superman,  Batman, Hulk and Ironman. At the bottom of the site you can click this image and it will take you to other websites for example, Marvel website and DC Comics website which are linked to superheroes.


Character pages

This is wireframe of Superheroes’s Character about Spiderman, Superman, Hulk, Batman and Ironman. My idea would be images and text about superheroes.

Spiderman pages in character site

Screen Shot 2014-12-29 at 18.18.05

I have added images of Spiderman’s logo

Screen Shot 2014-12-29 at 18.32.29


and Image of Spiderman.

Screen Shot 2014-12-29 at 19.18.59

This is the code that shows how I have added images into coda. Screen Shot 2014-12-29 at 19.18.47

This code shows how I added the text into the spiderman site.

Screen Shot 2014-12-29 at 18.18.39

Code for two columns about spiderman.

Screen Shot 2014-12-29 at 19.19.10

This is coda of Spiderman’s images shadow.

Screen Shot 2014-12-29 at 18.45.02Screen Shot 2014-12-29 at 18.34.57

These are images of spiderman so when you click small image it will show shadow images.

I have made other superhero character pages like the Spiderman page, Superman, Hulk, Batman and Ironman.

Other Superheroes Character pages.

Screen Shot 2014-12-29 at 19.29.52 Screen Shot 2014-12-29 at 19.29.59 Screen Shot 2014-12-29 at 19.30.15 Screen Shot 2014-12-29 at 19.30.18 Screen Shot 2014-12-29 at 19.30.30 Screen Shot 2014-12-29 at 19.30.36 Screen Shot 2014-12-29 at 19.30.43 Screen Shot 2014-12-29 at 19.30.46




This is wireframe of facts site.

Screen Shot 2015-01-09 at 17.47.06


This is coda for fact site to make table.

Screen Shot 2015-01-09 at 17.43.05


This is fact web page and table is in this fact site.



This is History of Superheroes wireframe in past and present.

Screen Shot 2015-01-02 at 19.10.17

This is History of Superheroes site in past and present.

Screen Shot 2014-12-29 at 19.51.51

This is code of Superheroes History site.

Screen Shot 2014-12-29 at 19.40.23

This page shows the characters past and present.



This page shows different comics of the character wireframe of spiderman, superman, hulk, batman and ironman.

Screen Shot 2014-12-30 at 14.17.21


This is code of Spiderman’s Comic with added text and images in html.

Screen Shot 2014-12-30 at 14.14.38 Screen Shot 2014-12-30 at 14.14.46 Screen Shot 2014-12-30 at 14.14.53

This is the website of Spiderman’s comics that I have made and it gives you information about spiderman’s comics.

I have made other superhero character pages like Spiderman, therefore Superman, Hulk, Batman and Ironman.

Other Character’s Comics website

Screen Shot 2014-12-30 at 15.11.22 Screen Shot 2014-12-30 at 15.11.36 Screen Shot 2014-12-30 at 15.11.51 Screen Shot 2014-12-30 at 15.12.01



This is Wireframe of Superheroes Film site and my idea is to have images of superheroes poster, information about film and video clips of trailers.


Screen Shot 2015-01-02 at 19.01.43

This is code of how to put video into HTML in Coda.

Screen Shot 2015-01-02 at 19.02.10

This is how video look like in HTML.

Screen Shot 2015-01-02 at 19.01.04

This is code for how to make Spiderman’s Film site.

Screen Shot 2014-12-30 at 14.56.42 Screen Shot 2014-12-30 at 14.56.52 Screen Shot 2014-12-30 at 14.57.04 Screen Shot 2014-12-30 at 14.57.19 Screen Shot 2014-12-30 at 14.57.23

This is Spiderman’s Film site that I have made so you can see the different Spiderman films in poster, information and video clips.

I have made other superhero’s film is Superman, Hulk, Ironman and Batman

Other Superhero’s film website

Screen Shot 2015-01-02 at 19.07.10


Screen Shot 2015-01-09 at 17.51.14 Screen Shot 2015-01-09 at 17.53.43 1 Screen Shot 2015-01-09 at 17.55.07

I am happy and pleased with my superheroes website. I have learned everything and know how to use and understand Coda. This shows me that I am very confident to use Coda and can now design websites.

Here is my Superheroes Website link:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s