Screen Shot 2016-05-03 at 12.57.10.png Screen Shot 2016-05-03 at 12.56.04.png

Using Brackets I lerened how to add basic images and aI added a gif fill anded some text. I also aded a link to a youtube link in my webpage.

Screen Shot 2016-05-03 at 17.48.38

I added five pages with some experimenting with text size. and I added a image to the background as wheel as a colour backdrop in Brackets.

I looked at te video on how to formate layout for my html  webpage using dives and containers inside of css.

Screen Shot 2016-05-10 at 15.32.53.png

I coped and made sense of it. I got this result with the layout. but I didn’t like the bottom containeer because it didn’t fix it self to the webpage size no mater how big or small the browers tab maybe.

Screen Shot 2016-05-10 at 15.32.12.png

Html page.

Screen Shot 2016-05-10 at 15.32.33.png

I then using the preset pout document in the next challenge. I changed some e things like cooler and adda image. I also got ride of the borders and differentiated some text form others.

Screen Shot 2016-05-10 at 17.17.22.png

 Code academy

I finished the HTML and CSS learning  tutorials on Code academy by getting a 100%.


Screen Shot 2016-05-23 at 13.00.58.png


Apple wesite

Screen Shot 2016-05-22 at 22.15.28.png

Apple’s website has a lot of features that are need in this unit. It has a adaptive navigation bar that chages in a way so the text it don not take up the page inside it become a scrolldown button.

Screen Shot 2016-05-22 at 22.15.38.png

And this isn’t required from this brief but I would like the feature of traditions of maybe test reacting or pictures being parelel to the usersuseresscrolling.


Screen Shot 2016-05-24 at 13.31.14.png

This website [placement is ideal for how a potfolo would be placed. This some thing I would like to incorporate into my website

And this to is adaptbal so its changes to fit to the screen size.

Screen Shot 2016-05-24 at 13.33.02.png

This website also has a very uniqu feature such as when your mouse is hovering on top of the navigation bar’s background changes to black and then the mouse is hovering on one of the links a bigger backdrop is seen.

Screen Shot 2016-05-24 at 13.34.25.png

Further slide down.

Screen Shot 2016-05-24 at 13.34.35.png



This a profile based website that allows people to showcase there work online.

Screen Shot 2016-05-24 at 14.27.55.png

The websiutes is optimised for visaulaty of work and so the images are big and can be clearly seen the information along with othere need to know information like what the person’s job and how to contact them.

Screen Shot 2016-05-24 at 14.27.55.png

And  this website is also adaptive. Along with image and text resizing to mach the viewers view.

Screen Shot 2016-05-24 at 14.28.05.png


The showcase website has a lot of elements, the website has a lot of visuals and text along with icons for movie classifications. I was thinking maybe have a slider for catograsing work like that in this website.

Screen Shot 2016-05-24 at 14.48.07.png

I found a very good and possibly useful feature that could be a good idea.

Screen Shot 2016-05-24 at 14.55.07.png

on this website on  left hand side corner a somewah what navigation bar is placed witch is traded by the scroller and can bee seen has go up and down,

Screen Shot 2016-05-24 at 14.55.17.png

I what my best to look simplistic tepee style like that of this website no WIXs.

Screen Shot 2016-05-24 at 15.16.19.png


Screen Shot 2016-05-25 at 13.09.25.png

Youtube has category type placemnet in rose to be easily see and find the related video the the user ids trying to find. I’m, not sure if this what I would like it to be like on my  website. But it is a thought on catagorising my content.


Screen Shot 2016-05-25 at 14.06.33.png

This website has very good visuals and and a animating text in the top left side of the webpage.

Screen Shot 2016-05-25 at 14.06.52.png

And like other website it dose a good job of creating a layout of images that are stacked and placed coding to their size and simple to read text, but some to get mixed with in the backdrop of lighter colourings.Which some thing I have to keep an eye on when creating my website.


Screen Shot 2016-05-25 at 14.15.35.png

This website has a very easy and simple styling type format. It has what is imported in colour and the thinks that are not kneaded or just can be seen without a bunch of extar content is simply point to pone side or jut in a cornner, which can still be seen but the user might not be interest in. Screen Shot 2016-05-25 at 14.15.41.png

This is  like slip view style and could be a good feature to think about.




Section 1 

Working title:

My portfolio

What you will work towards producing: (Detailed description of your proposal)

I will be working toward creating a website baste portfolio that will hold my creative work that people and possible clients can see. I will be using HITMLE and CSS along with any other programing language that I might com across to build my website such as “Java”.

Section 2

Influences, starting points and contextual references:

I’m influenced by the websites, such as Bose or Apple. By there use of simplicity and functionality, they have both have adaptive visuals and text, which are exactly what I need inn my very own website. I will start by finding and learning from tutorial based videos, for building a website using HTML and CSS.

Early ideas research and sources:   (What are your sources for contextual and personal research?)

My early ideas will be generated for already existing website, portfolios and webpages that might include features or mechanics that give their websites a unique interactivity for the user. I also gain ideas for tutorials that might show me or help me achieve a certain features(s) or mechanic(s).

Section 3

Intended techniques, non digital and digital processes:

I intent on using HTML and CSS techniques to build my portfolio website. Such as the styling features that can be achieved within a CSS document or making the website adaptive. I will also go throw the process of paper prototyping and wireframing to get a better grasp on building a website.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)11/05/16 – 30/05/16

Start and finish research into alertly existing websites. Learn methods and techniques from tutorials with in videos or on webpages.

31/05/16 – 06/06/16

Start coming up with ideas for the website’s style, placement of content and features to make the website more user-friendly. Also draw sketch’s and simple illustrations on the layout of my website that may or may not change.

07/06/16 – 18/06/16

Start and finish creating the website’s pages, deciding form the ideas I had on building the website’s visuals in the way I rather decided or changed during some point. Start and finish all the necessary coding for the HTML and CSS sides and achieve a adaptive website.

19/006/16 – 21/06/16

Start and finish unit 44 evolution

Section 4

Proposed methods of evaluation: (How will you evaluate your project?)

I will use my own work for the evaluation, starting form the research to the final outcome that will be on my blog. I will also use some students as a way for feedback and along with the results from the paper prototype(s) and wirerframe(s). Alongside this my own input on the work will also go into the evaluating stage.

Ideas Generation

Ideas Development

Idea for webpage layout.

I was thinking have this type of layout. this only the website few but she the website will be viewed on a phone divise, there wount be much of a change. I was thinking to have a logo on the top tight side of the page or my name. a image of me or what ever I what on the middle so people can identife me with that image. and may be a  on the left  a comment what this website is. then some where in the midle some tabs to derect the user of my work. links to  images, videos, contacts and maybe homepage. then between the top half which might have a background image while bottom will hold the selected tab’s content.

I found this websit on tips on how to care a good website.

7 Rules To Creating A Professional Portfolio Site

I there peso she did this prototype liked the idea and thought it was simple, easy to understand and use.


I did a scone test of my paper prototype. I got feed back on my way of laying  out my art and media work. I was suggested that if I keep all my work in one place at once it will take a long time to load, so I should add sublinks to pages and add slide shows for those links. So I will keep that in mode when eddying or changing the website layout.



I didd my wireframe and got good feed bak the it was a good idea to age a home button to go back, the person also likesd the simple layout of the phone view of my website.


I thought of have a main page that as a slide show of my work or a different image would be shown every time. Then have three different type of image links to different pages. I’m still planning so it might change.


I stated building my website on brackets. I first created the main d=features of the website, the dicription of the webpage and the links to other pages to acsses my artwork. i crete tables that hold the content.

Screen Shot 2016-06-11 at 20.42.13.png

I know need to find a way to centre the linking table and move the dicription table towords the right.

After looking back at code acadomy I found that using divs ids a lot better then tables.

Screen Shot 2016-06-11 at 22.10.13.png


I found this webpage going in depth of how to use div more. I’m tying to use this to make my text move to the place I need it to be.


After trying to figure out how to move the div to the right liking up online and trying deferent things. I finally figured out tat using the float tag to move the div was the way.

I restated creating my website from scratch Because I thought of a way to formatting ever thing a lot better  then I was paling to do. Using the youtube link in the layout page within Moodle.


using the video I fret this set up of the main page.

I managed to move the text the right side of the page and fix the responsive side of my objects by changing the px to vw , help i got from some in the classroom.

Screen Shot 2016-06-13 at 16.30.23.png

But The text that I managed to fit into box is not in line with the bottom (dashed div) wen it gets small enough the text goes over. I was told to add makings to =try and fix it by trial and erro but it still goes over it slightly so I thought of adding padding to se what happens.

Screen Shot 2016-06-13 at 16.27.05.png

I works slightly but not perfectly. I though many if I get rid of the makings and keep only the padding than I might get some better resposive text.

I Add a icon image to the top left, this just there for s while until I can get the visuals done.

I create a custom icon for this website and replaced the image of the icon. I also gave the icon a link to the Home page of my website to make it more like a acute website and because e this is a good feature to have when or if people are using your websiye.

I stared retained the content blue box to hold an image, I also gave it a like but it dosnt yet go any where because I Havant crete the image page yet. I had we a little bit of trouble tying to get the same demotions of the text align with the  green box and after a while and some help I got the code working the way I whetted by adding a single line of text ing on to the CSS document.

Screen Shot 2016-06-14 at 14.24.11.png

I aso had to mess around with the width to get the right size on the screen.

Screen Shot 2016-06-14 at 21.44.40.png

Using thsi video blow I created a nave bar under neth my blue line above the box.

Screen Shot 2016-06-14 at 21.44.26.png

I thought back to some website I researched about, I saw that the Apple website when it got smaller the mani  content of the head banner holding the nag bar and log don change size but moves to the earthier left or right. Is probly a good way to build a website so wen the person is on the webpage it automaticaly format without the hasle of coding and trinning to fix the issues of screen sizes of phones. but I think I want to have two different type of formats. one for site and then when it gets smaller the webpage formats to the phone sizes.

To move my content with out is change size but rather moves t the left or right I use em instead of vw.

I then adapted to the reset of the  code and stared fiishing the nag bar.

SO I stared from scratch and I used another youtube video to create a  second drop down menu but some thing happens I don’t like the drop down menu and  I can’t seem to fix it so I found another video which is a lot better at explaining the content along with having a drop down menu with animation. I deeded my cod e and stated writing up the cod form thsi video.

I use the vdeo above to make my nag bar but when I created ed the drop down menu the menu axe brine my image. sate truing to fix it I though of re startting again and combing the video above with this video  this video to create my own new nag bar.

After watching both vies I handle a good handle on how to use the CSS to lay things out suing padding and matins along with the  text alignment.

Screen Shot 2016-06-17 at 03.09.58.png

I crete the nave bar with two drop don menus with slight effect.

Screen Shot 2016-06-17 at 03.09.40

To get my padding, font size and mating aligmment for both the mani text and the drop down text. I added borders to see the obegest sapping and hight so I can better align and size the nave and drop down menu.

Screen Shot 2016-06-17 at 16.55.05

I created the drop down menu but it seem to be having some glitches where if you hover over the white space it shows the drop down boxes but I don’t what I only what the boxes to be shown after you hover over over the main nave bar but that docent happen. I don’t have time to fix it, however I found this video to fix that problem.

I found that having a drop down is a bit useless so I drooped and kept the man bar.

I moved on by creating a slide show of some of  my work. I found this simple video on creating a slide show, by going through the steps.

Screen Shot 2016-06-19 at 23.21.00

Screen Shot 2016-06-19 at 23.17.41

I stared creating my images page. I first goy=t my images and placed them into my page there flies size was too late  and made the webpage too slow. condensed them using photoshop and but I had o do that a couple of of times to get it rift because there all different size and using the actions on photoshop did really give me a good result. plus wen the images are alighted horizontally not vertically thy dint mach up to the equal sizes, which is something i dint what.

Screen Shot 2016-06-21 at 03.25.17.png

Screen Shot 2016-06-21 at 03.25.45.png

So using a software called iDraw I created smalere and equally sized thumbnails so that the web page down’ t take so long to load.

 I placed  them the images in a div with  there own separate divs. One to hold the are that the dv can be place and the others to place each dive images alighted and placed in the right format.

Screen Shot 2016-06-21 at 14.39.36.png

i spent some time getting the alignment of the images just right. And with some help from a student in the classroom, I managed tom add some transtioning .

Screen Shot 2016-06-21 at 14.38.27.png

I then found this video to add light boxes to images, which something I really liked. So following the video I went online to d=find the link but found a bterter type of light box. I used the instructions on the website, I downloaded the example foloder with the scripts, which I used to =to build my light box and know I got some light boxs for my images.

Produce Outcome

Final Evaluation