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.
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.
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.
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.
I finished the HTML and CSS learning tutorials on Code academy by getting a 100%.
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.
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.
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.
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.
Further slide down.
This a profile based website that allows people to showcase there work online.
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.
And this website is also adaptive. Along with image and text resizing to mach the viewers view.
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.
I found a very good and possibly useful feature that could be a good idea.
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,
I what my best to look simplistic tepee style like that of this website no WIXs.
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.
This website has very good visuals and and a animating text in the top left side of the webpage.
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.
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.
This is like slip view style and could be a good feature to think about.
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”.
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).
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
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.
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.
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.
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.
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.
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.
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.
I aso had to mess around with the width to get the right size on the screen.
Using thsi video blow I created a nave bar under neth my blue line above the box.
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.
I crete the nave bar with two drop don menus with slight effect.
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.
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.
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.
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.
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 .
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.