Diary for website

Aim – Start to create website Learnt – I started creating the website.

Date – 13/03/18
Evidence – Below

1. I went to File and

New and I looked at
some start templates.
I went to Bootstap
Templates and I then
chose Bootstrap –
eCommerce.

2. I went to File and

New and I looked at
some start templates.
I went to Bootstrap
Templates and I then
chose Bootstrap –
eCommerce.

3. I replaced sample images with

pictures of Xbox video Games. I
also changed the text near the
images.
 4. I went to the web
banner and I added
three images to it.

Aim – Continue with website. Date – 16/03/18

Evidence – Below Learnt – I learnt how to add the logo and a carousel.

5. I went to one of the

Buttons and I replaced
it with an image file. I
went to the top right
hand-side of the page
and went to Insert
and Image.

6. I was given three options and I went with

Nest. I selected my logo and it came up in the
location I selected it to be in except it was
very big.
7. I went to the code and changed the image’s size so
that it would be much smaller.

8. I got rid of the word “Brand” by

going to the code and deleting it
but not the element.

Aim – Continue with website. Date – 20/03/18

Evidence – Below Learnt – I learnt how to add some pictures and text.

9. I went to Window,
Properties and I then
went to DOM, where
I clicked on body. I
then clicked on Page
Properties.
 10. This Box came up and
where it said Background
image, I clicked on
Browse. I then selected
the image I wanted and
pressed OK.

11. I then changed some

of the text up at the
top of the page.

12. I got rid of the arrows underneath the XBOX

GAMES section.

13. I deleted some of the options on the drop-down menu at the top of the page.
 14. I deleted some sections of the page that I
didn’t need.

Aim – Continue with website. Date –23/03/18

Evidence – Below Learnt – I learnt how to add icons.

15. I edited some of the

text.
 17. I changed the colour of the text
that read “XBOX GAMES” from
black to light yellow. I did this by
going to Properties.

16. I replaced the logo with another

version of the logo with a dark
red background.

18. I deleted some sections down on the lower

19. I then changed the size to be much smaller. navigation menu.

20. I clicked on one of the Boxes and I

then went to Insert and Image. I clicked
on Nest and I inserted an image.
 21. The Facebook logo was very big so I
made it ten times smaller.

22. I inserted the Instagram and Twitter logo.

Aim – Continue with website. Date – 26/03/18

Evidence – Below 23. I changed the font of
the game text by going
Learnt – I learnt how to add more icons. to Properties.
 24. I changed the colour of the text and I made the price
text bigger.

25. I changed the font and colour

of the text “XBOX GAMES”

26. I inserted a
header box
on the last
navigation
bar.
27. I changed the text and I gave it a different font and colour. Unfortunately,
the font and colour change for the text I changed didn’t work after I went
back on Dreamweaver.

28. I added a new

row below.

29. I added the help icon and I made it smaller by going to the code to
size it.

30. I added the contact icon and I made it smaller.

 31. I copied the code
for the help icon
next to the
contact icon.

32. I added the

about icon and
I deleted the
copied icon.

33. I copied the code

for the text
“SOCIAL MEDIA
LINKS” onto the
second row and I
changed the text.
I then moved it to
a similar position
to the “SOCIAL
MEDIA LINKS”
text.

34. I added two new rows below.

35. I copied the text that was below the navigation bar and pasted it
into the last row.
 36. I pasted the text into the last row, placed it in the middle and edited the text.

37. I went to Files and

I then duplicated
the webpage. I
then went onto
the duplicated
webpage.

38. I deleted a lot of things on the page and I only kept some
elements to let me insert text.

39. I went Insert and then Header and dragged it onto one of the Boxes. I chose the option Nest.
 40. I typed in the
contacts by
going to the
code and
creating
different
types of
headers.

41. I got rid of the white

background behind the
logo.

Aim – Continue with website. Date – 17/04/18

Evidence – Below Learnt – I learnt how to embed media onto both my pages.

42. I typed in some metadata

that included some
keywords for the search
engine.

43. I went onto Google Maps

and chose somewhere to
embed on my website. I then
clicked on the Menu.
44. I clicked on “Share or embed
map” and then it came up with
the image on the right.

45. I went on “Embed a map” and I

chose a large size. I then copied
the embedded code.

46. I added a new

row on my
second page.

47. I went to Insert

and then I
dragged the
option
Responsive
Video Embed
to the column I
just inserted.
48. I chose the option Nest.
 49. The embedded media appeared but it had a
default link. I tried pasting my link into where the
default link was but it didn’t work.

50. I realised that the code said “iframe” more than

it needed to be so I tried pasting the embedded
code for the map and it worked.

51. I made the column larger

and the map enlarged as
well.

52. I embedded a YouTube

video onto the first page by
doing the exact same thing I
did to add the map.
Aim – Continue with website. Date – 20/04/18
Evidence – Below Learnt – I learnt how to change the font colour and font for some text.

53. I changed the colour of one of the text “2018 Copyright

© Ice Fire Gaming All rights reserved”.

54. I also changed the font by going to

Properties and then I selected one
of the options.

55. I copied the code for the font colour and font from the text “2018
Copyright © Ice Fire Gaming All rights reserved” and I copied it over to
the text “HELP, CONTACT,ABOUT”.
 56. I deleted a section and the box for the “SOCIAL MEDIA LINKS” text
became aligned with the “HELP, CONTACT, ABOUT” text.

57. I clicked on the image for Contacts and I clicked on the three white lines. I then went on link and I chose
the link for the second webpage.
Aim – Continue with website. Date – 24/04/18
Evidence – Below Learnt – I learnt how to change header elements into div elements.

58. I deleted an
unnecessary
section.

59. I selected the text “PLAYSTATION” and I went to Properties, Page Properties and I changed the font
colour. However, this only changed the colour of the text that said, “XBOX GAMES”.

60. I changed the font

size of the text
“SOCIAL MEDIA
LINKS” in the code.
61. I changed the header element to divs.

62. I went to Properties and I changed the font size for the text
“CONTACTS”. The code changed so that it said what the font
size was. I did the same for the rest of the text.

63. I added
another div by
copying and
pasting a div
with dashes in
it.
Aim – Continue with website. Date – 27/04/18
Evidence – Below Learnt – T

64. I went to Properties and I changed the font and colour of the text
“CONTACTS”. I did the same for the rest of the text and the code
changed.

65. I changed the text from the “XBOX GAMES” section into divs. I also deleted an unnecessary div and
paragraph.

66. I added new divs underneath the

prices.

67. I changed the font, colour

and size of the text in the
“XBOX GAMES” section.
68. I linked the second page back to the
first page.

70. I linked the social media logos to the social media

websites.

69. I tested the website and it works.

By Annie Magner.