Throughout my whole website I used my own font. I did this through a CSS rule, before CSS3 we could only use a certain amount of fonts, but CSS3 allowed us to use our own.
I used one called OratorStd.Otf, this is kind of typewriter font I felt like this represented myself quite well.
The colour scheme of my website, is more or less black and white with a few greys thrown in, I used black for text, and different colours for my header.
I used a fixed element on my nav bar, this is so it will follow you throughout the whole website, not matter where you scroll too.
Wednesday, 12 February 2014
My website
Taking what I've learnt from research I have compiled my own portfolio website.
With good use of JavaScript and jQuery I've managed to create a portfolio website that I am proud off.
This described what I have done, and this is the final result
With good use of JavaScript and jQuery I've managed to create a portfolio website that I am proud off.
When you first load up the website, it will show this page. This page tells you about who I am, and what I can do. I have put my skills within the same page, when you click the arrow, on 'Who Am I?' it will then scroll up and you will get my skill set, this tells you what I am able to do. I have used jQuery Slide toggle effect to achieve the effect of the page scrolling up.
On my Portfolio page, ive used a jQuery library called fancybox this allows me to display my own images within a Lightbox.
When you first get to my Portfolio you will be see some images which I have taken, these are attached to jQuery library called fancybox. Fancybox allows you import your own images into the library, add the code required to make Fancybox work, you need 2 files in your main website hub, one called Thumbnails and one called FullScreen, this allows you to organise what is a thumbnail and what you want fullscreened.
Using this screen you are able to look through my photography work.
I have created a web design section, and a audio visual section within the web design section I have used Fancybox again, just so i am able to show some work.
In my Audio Visual section I've included my work that I have done, with links from YouTube, however they aren't working, this is to do with YouTubes side rather than mine.
Within my contact page I have used HTML mail:to function so people are able to email me, I did first include my phone number, but then thought different due to spambots. I have included links to my FaceBook and Twitter.
Everything is clickable and links are working. The phone number has a slideToggle within it so you are able to click to show and hide.
Sunday, 9 February 2014
HTML5, CSS Validation
Before you put anything online you should validate your code to ensure that there isn't any mistakes.
To do this you go to http://validator.w3.org/
This is mainly for HTML, XHTML, XML and HTML5.
Once here you should upload your file onto the website and hit validate, once you have done this it will pick up any mistakes within your code.
You must always ensure you do this otherwise, you might be putting broken code on to the web.
You are able to validate your CSS using http://jigsaw.w3.org/css-validator/validator
The same applies for this one as the HTML validator, you upload your file, and it will check for errors.
To do this you go to http://validator.w3.org/
This is mainly for HTML, XHTML, XML and HTML5.
Once here you should upload your file onto the website and hit validate, once you have done this it will pick up any mistakes within your code.
You must always ensure you do this otherwise, you might be putting broken code on to the web.
You are able to validate your CSS using http://jigsaw.w3.org/css-validator/validator
The same applies for this one as the HTML validator, you upload your file, and it will check for errors.
jQuery Plugins
jQuery Plugins are used for all sorts of things,
They are used to make our websites more visually stunning, allowing us to use what someone else has created but change it to customise onto our own sites.
You can find a jQuery Plugin for more or less anything out there, some will be more easier to configure than others however I found if you are persistent you can get the majority of them to work.
Often enough they will come with instructions to set it up, although sometimes they aren't very clear. However you might find one which doesn't work for you but not to worry, there will be more out there which will do the same thing.
Some plugins are easier than others, the trick is to start easy, and work your ways towards the more complexed ones.
They are used to make our websites more visually stunning, allowing us to use what someone else has created but change it to customise onto our own sites.
You can find a jQuery Plugin for more or less anything out there, some will be more easier to configure than others however I found if you are persistent you can get the majority of them to work.
Often enough they will come with instructions to set it up, although sometimes they aren't very clear. However you might find one which doesn't work for you but not to worry, there will be more out there which will do the same thing.
Some plugins are easier than others, the trick is to start easy, and work your ways towards the more complexed ones.
Opacity and Font Rules!
CSS3 has now allowed us to use our own fonts on the web.
This means we now aren't limited to certain styles on the web, and we can set our own font family.
There is a whole range of fonts on www.dafont.com, just ensure you have a otf file for that font. Once the font has been downloaded be sure to put it within your root for your website.
Create a rule in CSS this is done by using a '@' after you have added this then continue to add 'font-face', proceed to add
font-family: (Add the name of your font here)
You then need to provide the source for this font this means you need to add
src: url(YourFont.Otf);
Using CSS we are able to change opacity of objects within our HTML, meaning the personalised text you have just created you are able to create a pseudo class to enable this change opacity when hovered, visited etc.
This is simple done by changing a opacity, which is done like;
opacity: 0.5;
This will set the opacity to .5 lower than the original colour if this is used well you can create very nice effects.
This means we now aren't limited to certain styles on the web, and we can set our own font family.
There is a whole range of fonts on www.dafont.com, just ensure you have a otf file for that font. Once the font has been downloaded be sure to put it within your root for your website.
Create a rule in CSS this is done by using a '@' after you have added this then continue to add 'font-face', proceed to add
font-family: (Add the name of your font here)
You then need to provide the source for this font this means you need to add
src: url(YourFont.Otf);
Using CSS we are able to change opacity of objects within our HTML, meaning the personalised text you have just created you are able to create a pseudo class to enable this change opacity when hovered, visited etc.
This is simple done by changing a opacity, which is done like;
opacity: 0.5;
This will set the opacity to .5 lower than the original colour if this is used well you can create very nice effects.
Subscribe to:
Posts (Atom)