Category Archives: Web Design Skills

Superheroes Website

Leave a reply

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.

Navigation 

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.

Homepage

Homepage

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 

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

Facts

facts

 

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.

History 

Save

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.

Comics

Comic

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

Film

Film

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:

http://www.minimise.org/student14/saadsuperheroes/

Advertisements

Web Design Skills: Week 7 – My CV website

Leave a reply

During the lesson we learned how to create a CV to upload into our own website via filezilla.

Screen Shot 2014-11-15 at 19.01.24

I found this CV website template on a website. I liked this style of CV Template because It is simple and easy to read.

Screen Shot 2014-11-15 at 18.58.40

The code I used for my CV website were table, images shadow, div, header, <li>, and class.

Screen Shot 2014-11-15 at 18.59.52 Screen Shot 2014-11-15 at 18.59.40

This is the code for my CV on my website using coda 2.

Here is link of my cv website:

http://www.minimise.org/student14/saadserver/saadrealcv/

 

Simple structured unstyled page uploaded via ftp

Leave a reply

 

 

Screen Shot 2014-10-30 at 15.48.04Screen Shot 2014-10-29 at 19.19.13Screen Shot 2014-10-30 at 15.50.54Screen Shot 2014-10-30 at 15.52.14Screen Shot 2014-10-30 at 15.52.20Screen Shot 2014-10-30 at 15.52.29

FILEZILLA uploads your work into the web using ftp.

To begin with downloaded filezilla on Tuesday and thought I would give it ago but big mistake….The log in details I had seemed to work and I could do everything accept get the files to open on the web. Persevered for ages and checked out the tutorials on kcdigitalnet but could only find ones using cyberduck and others. Even downloaded this but still no luck. Felt like throwing a brick at the computer….so frustrated!

Gave up and yesterday Mark was a superstar and downloaded a tutorial plus new log in details. Worked a treat, problem solved and uploaded in minutes. PHEW!

 

Here is all my website link from coda:

http://www.minimise.org/student14/saadserver/

http://www.minimise.org/student14/saadserver/Ball%20Amianted/

http://www.minimise.org/student14/saadserver/css/page2.html

http://www.minimise.org/student14/saadserver/demo%202/

http://www.minimise.org/student14/saadserver/div/div.html

http://www.minimise.org/student14/saadserver/myserver/my%20website.html

http://www.minimise.org/student14/saadserver/responsivegridsystem%20(4)/responsivegridsystem.html

http://www.minimise.org/student14/saadserver/saadserve2/

http://www.minimise.org/student14/saadserver/saadserve3/

Divs

Leave a reply

Screen Shot 2014-10-29 at 21.02.20 Screen Shot 2014-10-29 at 21.02.24 Screen Shot 2014-10-29 at 21.02.41

 

The <div> element lets you group together items in one block so your presentation is clearer and tidier. This is the website I created about football teams and my opinions about them.

I found this easy enough to understand and just had to decide what elements I wanted in each <div>. I used the <div> element to separate my paragraphs<p>.

Here is my website and my opinions!!!! :

http://www.minimise.org/student14/saadserver/div/div.html

 

Table

Leave a reply

Table in website

Screen Shot 2014-10-20 at 11.54.30    Screen Shot 2014-10-20 at 11.53.56Screen Shot 2014-10-20 at 11.54.17Screen Shot 2014-10-20 at 11.54.07

We learnt how to create tables in web design. Tables show information in a grid format e.g., sports results or TV schedules. Tables are brilliant to understand complicated information because of grid format and the visuals are easy to follow.

I looked at the code to create the table. This code  < table>  opens and closes the code for the table.

Here is my website:

http://www.minimise.org/student14/saadserver/saadserve2/

 

Week 5 – Images Shadow

Leave a reply

 

Images Shadow

Screen Shot 2014-10-28 at 22.16.02 Screen Shot 2014-10-28 at 22.15.50 Screen Shot 2014-10-28 at 22.15.44 Screen Shot 2014-10-28 at 22.15.35

These are some of my images from the shadow box gallery I created. The links are from the website I created and show some of the stuff that have been a part of my life. Some bigger than others!

I found creating the shadow box very easy but do like the effect you get from them. You can see a lot of images in a short space of time.

Here is my website link:

http://www.minimise.org/student14/saadserver/saadserve3/