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/

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/

Images and Animated Gifs

Leave a reply

Animated 

I have created animated gifs using Photoshop. I chose this ball from a google image and made it bounce using the timeline and tween tools and added 10 frames.

This is my bouncy ball!

champions-league-ballBall-Animated-forever

Ball uploaded into the Photoshop.

 

 

Screen Shot 2014-10-27 at 12.42.54

When I added the ball in Photoshop I clicked  the timeline button to animate the ball. I had to make the ball smaller and put the ball in position from start to end while the ball  bounced up and down.

 

Screen Shot 2014-10-27 at 13.07.51 Screen Shot 2014-10-27 at 13.10.01

I clicked the tween and add 10 frames and the ball bounced up and down.

 

Screen Shot 2014-10-27 at 12.42.59   Screen Shot 2014-10-27 at 12.44.10

This is timeline that I created to bounce the ball.

 

Screen Shot 2014-10-27 at 12.43.31 Screen Shot 2014-10-27 at 12.43.38

After that, I clicked the  Save for Web in the file button and clicked to save in GIF.  Also clicked the looping options to show the ball bouncing forever.

Taa-daa, here is the Animated Ball that I have made:

Ball-Animated-forever

I found it easy to understand how to animate in Photoshop. I always thought photoshop was used only for still images but got quite a surprise to find I could create moving objects. Loved doing this!

Upload into Website 

I decided to put the animated  ball into a website I created using Coda because I wanted to experiment with how much I have learnt already.

Images

I have added images of the ball and animation of the ball into this website. The code that I used was:

Screen Shot 2014-10-27 at 16.10.51

Screen Shot 2014-10-27 at 16.07.08

 

I knew how to put the ball on a website using this code  <img src=””> via images in the web folder.

Ball website 

I have made the website of  the ball and added heading, images, animated, background, colour and text.

 

Screen Shot 2014-10-27 at 16.06.21

This is how the website looks.

 

 

Screen Shot 2014-10-27 at 15.56.28Screen Shot 2014-10-27 at 15.56.14

 

 

 

Screen Shot 2014-10-27 at 15.56.31Screen Shot 2014-10-27 at 15.56.42

 

I have added the code on Coda for heading, images, animated, background, colour and text and also know about CSS and how to add colour, size and text-align of heading.

I understand now how to add images using Coda and create animated gifs.

Here is my website link:

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

 

 

 

 

 

 

‘Interesting Digital Artists’ website

Leave a reply

Told I could create a website of interesting digital artists. Decided to go ahead so I could practice and understand more about using Coda 2. Called the website ‘Interesting Digital Artists’ and picked 3 artists whose work I admire and find inspiring.

  • Susan Kare

  • Marius Watz

  • Joshua Davis

I used responsive grid to make the website. Did this quite quickly without any hiccups!

Screen Shot 2014-10-26 at 15.50.54 Screen Shot 2014-10-26 at 15.59.32

Heading ”Interesting Digital Artists’  code isScreen Shot 2014-10-26 at 15.54.32

and I have sub-headed ‘5 Interesting Digital Artists that I like, the code is Screen Shot 2014-10-26 at 16.12.46to show you which 5 I have picked.

 

3 Digital Artists 

The first artist I have chosen is Susan Kare. She is an artist and graphic designer who created many of the interface elements for the Apple Macintosh and what I like about her is that she is a pioneering and influential computer iconographer and has made creative images such as logos, cartoons, people images.

 

 

Screen Shot 2014-10-26 at 15.50.09

 

I have added Susan Kare into my website and showed images of her work in Shadow Images. The code of Shadow Images is Screen Shot 2014-10-26 at 16.36.28Screen Shot 2014-10-26 at 15.50.18

Image shadow looks like this:

Screen Shot 2014-10-26 at 16.40.35 Screen Shot 2014-10-26 at 16.40.41

 

Screen Shot 2014-10-26 at 17.20.49 Screen Shot 2014-10-26 at 17.17.57

I have changed the code of images shadow so you can see images of Susan Kate visuals. You click and shadow images appear and I have also changed the images into vertical side rather than horizontal side by using code to remove <li> </li> code because it will be easier and quicker to look at.

Also I have added the link of Susan Kate website. The code is Screen Shot 2014-10-26 at 18.30.52and you can see the link Screen Shot 2014-10-26 at 18.32.03  next to images and can find more information about Susan Kare.

Screen Shot 2014-10-26 at 17.24.29Screen Shot 2014-10-26 at 17.23.52

This is how it looks.

I added two further artists.

I chose Marius Watz.

Screen Shot 2014-10-26 at 19.38.10

Screen Shot 2014-10-26 at 20.07.07

Third choice that I have chosen is Joshua Davis

 

Screen Shot 2014-10-26 at 20.38.34 Screen Shot 2014-10-26 at 20.38.41

 

 

Screen Shot 2014-10-26 at 20.50.07 Screen Shot 2014-10-26 at 20.50.30Screen Shot 2014-10-26 at 20.49.39

 

This shows how I added background colour into the website and the code I used.

I have learnt how to create the website by using code with heading <H1></H1>, sub-heading, paragraph <P></P>,Images Img Scr, link <href> and Images Shadow.  I have also learnt how to add background colour on ‘Interesting Digital Artist  with with CSS. I think I did a good job creating this website and pleased with the result especially as this is all still quite new to me.

I would have liked to create a navigation bar which would let you go from page to page but need to learn how to do this.

Here is my website link:

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

My Own Website

Leave a reply

I have created my own website and added background, heading, images,  links and  fonts  to show what I have learnt.

Screen Shot 2014-10-09 at 12.08.55 Screen Shot 2014-10-09 at 12.09.18Screen Shot 2014-10-09 at 12.09.42

The first part of the website I added code on HTML and  CSS background, heading and  font.

Screen Shot 2014-10-09 at 12.14.32 Screen Shot 2014-10-09 at 12.15.51

 

In the second part  I  changed the colours to light blue by using CSS with a background-color  because I wanted my website to look bright yet simple.  Screen Shot 2014-10-09 at 12.18.29Screen Shot 2014-10-09 at 12.19.11

 

In the third part I have moved the heading right, left or centre of this website by using  margin and padding.

 

Screen Shot 2014-10-09 at 18.42.23Screen Shot 2014-10-09 at 18.41.05

I have changed the background to make it look more fresh and exciting because my previous background was to simple and I wanted the feel more cutting edge and effective.

 

Screen Shot 2014-10-09 at 18.48.04Screen Shot 2014-10-09 at 18.47.14Screen Shot 2014-10-09 at 20.57.40Screen Shot 2014-10-09 at 20.56.44

I did some experimenting with different types of background but I feel that they were  boring or too busy.

Screen Shot 2014-10-09 at 21.04.48 Screen Shot 2014-10-09 at 21.03.42

 

In the end I chose this background.

 

Screen Shot 2014-10-09 at 21.17.43Screen Shot 2014-10-09 at 21.18.04 Screen Shot 2014-10-09 at 21.17.55

I have added colour of heading.

.Screen Shot 2014-10-09 at 21.22.56 Screen Shot 2014-10-09 at 21.23.04

 

Changed the font bigger and font-family in monospace.

 

Images

Screen Shot 2014-10-26 at 21.36.58 Screen Shot 2014-10-26 at 21.37.30

I have added images in my website by using this code. I put images in folder and images code in html. I did size image to fit in website.

Also I have put images of Airbus A380 on top of the border, just because I love this plane and had to have it in a prominent place on my website.The code that I used was:

Screen Shot 2014-10-27 at 17.23.53

Screen Shot 2014-10-26 at 21.47.32 Screen Shot 2014-10-26 at 21.46.12

I  know now how you can put images in any order in the whole body of a website in html.

 

Screen Shot 2014-10-26 at 21.47.01Screen Shot 2014-10-26 at 21.47.41

Link

Screen Shot 2014-10-29 at 17.52.57Screen Shot 2014-10-29 at 17.52.24

This is the link to connect to the Liverpool FC website.

Screen Shot 2014-10-12 at 16.20.36

 

I have created my website and I have been practicing in my own time. This shows me that I am confident and know how to start making a website by using software called coda 2. The next step is to make my website look professional.

Here is my website link:

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