I'm going to stop updating this blog now, basically because I just don't have the time to update it. I am however going to leave it up for those who may be able to learn from it. Who know in the future I might do another one. Bye for now.
Tuesday, 25 March 2014
Monday, 15 April 2013
How did I learn HTML/CSS?
One question that I get asked quite often is; How did I learn HTML/CSS?
Well I did it backwards which looking back was probably the hardest way to learn, none the less I wasn't interested in the stuff that I thought was boring.
What I would do is design a web page, then find a website that for example had the logo in the same place mine was, I would then look at the source code and play around with it until I could get my design to look the way I wanted it to. Which of course sounds reasonable, only after hacking a website together I had no idea what code was doing what and sometimes adding more code would break other parts of the website.
I say I learnt it backwards because I found myself having to learn the very basics to get a good understanding of what was going on.
My advice to anyone would be to start with the very basics, yes at times its can seem very boring and tedious, but it will enable you to understand and pick up the cool stuff much quicker and look at the source code of websites you like and see if you can replicate it by writing code yourself.
Hope that helps.
Well I did it backwards which looking back was probably the hardest way to learn, none the less I wasn't interested in the stuff that I thought was boring.
What I would do is design a web page, then find a website that for example had the logo in the same place mine was, I would then look at the source code and play around with it until I could get my design to look the way I wanted it to. Which of course sounds reasonable, only after hacking a website together I had no idea what code was doing what and sometimes adding more code would break other parts of the website.
I say I learnt it backwards because I found myself having to learn the very basics to get a good understanding of what was going on.
My advice to anyone would be to start with the very basics, yes at times its can seem very boring and tedious, but it will enable you to understand and pick up the cool stuff much quicker and look at the source code of websites you like and see if you can replicate it by writing code yourself.
Hope that helps.
Thursday, 14 March 2013
Upload and Capture Videos and Pics to web applications on iOS
As of iOS 6 you are now able to capture videos and pics through the browser especially handy for mobile web applications.
Just simply add:
Thats it.
Enjoy.
Just simply add:
<input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camera">
Thats it.
Enjoy.
Friday, 8 March 2013
Responsive Web Design - to be or not to be
I thought I would add something to this blog that is linked to rather than to do with HTML and CSS; responsive web design. I'll explain:
Whilst there are many different ways of designing a responsive website, there will be times where it just won't do.
I recently designed a website for a client where I suggested a completely different approach to their mobile site compared to their desktop equivalent, for two reasons:
1. It is a very text heavy website, so the same amount of information needed to be punchy and in bite size chunks.
2. We wanted the customer journey to lead straight to a "call to action".
(2a. after doing some research we found that people who where visiting websites on their mobile devices are more likely to "call to action" than people on the desktop because they are looking for something specific, at that moment, especially when out and about.)
So the desktop site is a regular responsive website which adapts to the different variations of screen sizes as does the mobile site, only it is better suited for mobile devices.
We decided the best approach would be to have the desktop site at the main root domain and the mobile site at a subdomain.
Now I tried a few different redirects but the one that seemed to work was the a javascript version.
That worked for some devices but not others, this was because some mobile devices (I'm looking at you Samsung) aren't recognised as mobile browsers.
The solution was to put this into .htaccess file
Where it mentions user agent you can add additional devices, like ipad, just separate them with a bar as shown above.
Note: with the iOS devices you can specify which devices to target with android you can't so even android tablets will end up with the mobile version. Which is not something we wanted, but have had to compromise on.
Whilst there are many different ways of designing a responsive website, there will be times where it just won't do.
I recently designed a website for a client where I suggested a completely different approach to their mobile site compared to their desktop equivalent, for two reasons:
1. It is a very text heavy website, so the same amount of information needed to be punchy and in bite size chunks.
2. We wanted the customer journey to lead straight to a "call to action".
(2a. after doing some research we found that people who where visiting websites on their mobile devices are more likely to "call to action" than people on the desktop because they are looking for something specific, at that moment, especially when out and about.)
So the desktop site is a regular responsive website which adapts to the different variations of screen sizes as does the mobile site, only it is better suited for mobile devices.
We decided the best approach would be to have the desktop site at the main root domain and the mobile site at a subdomain.
Now I tried a few different redirects but the one that seemed to work was the a javascript version.
That worked for some devices but not others, this was because some mobile devices (I'm looking at you Samsung) aren't recognised as mobile browsers.
The solution was to put this into .htaccess file
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC]
RewriteCond %{HTTP_HOST} !^m.yourwebsite.co.uk
RewriteRule ^(.*)$ http://m.yourwebsite.co.uk/ [L,R=302]
Where it mentions user agent you can add additional devices, like ipad, just separate them with a bar as shown above.
Note: with the iOS devices you can specify which devices to target with android you can't so even android tablets will end up with the mobile version. Which is not something we wanted, but have had to compromise on.
Tuesday, 5 February 2013
Types of CSS
I'll start with some basics.
There are three types of CSS. I'll also try and explain some to uses for each one.
1. Inline (styled within the tag)
2. Embedded (in between
3. External (styles on a separate page)
Inline example:
Ideal for one style on one page and emails, e-shots etc.
Embedded example:
This would be ideal where there is small amounts of CSS and the same style needs to be applied multiple times to the webpage and also where there is only one page which requires the styles. If you have multiple pages that share the same style you are better of using an external style sheet, otherwise you would have to add the styles to each page not a good idea as the more text you have on a page the longer it takes for it load.
External example:
This is similar to Embedded however the styles are located in a separate document all together with the following file extension
The
The external stylesheet is best used for most situation except for e-shots as email clients wont call in external CSS. Its ideal for websites where multiple pages have the same style, all you have to is make sure that each mage has the the stylesheet link in the
There are three types of CSS. I'll also try and explain some to uses for each one.
1. Inline (styled within the tag)
2. Embedded (in between
<head></head>)
3. External (styles on a separate page)
Inline example:
<p style="color:#000;margin-left:20px">This is a paragraph.</p>
Ideal for one style on one page and emails, e-shots etc.
Embedded example:
<head>
<style>
p {
color:#000;
margin-left:20px;
}
</style>
</head>
This would be ideal where there is small amounts of CSS and the same style needs to be applied multiple times to the webpage and also where there is only one page which requires the styles. If you have multiple pages that share the same style you are better of using an external style sheet, otherwise you would have to add the styles to each page not a good idea as the more text you have on a page the longer it takes for it load.
External example:
This is similar to Embedded however the styles are located in a separate document all together with the following file extension
.cssand then linked to the webpage by putting a link in the
<head>tag like so:
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>
The
href="styles.css"is the location of the CSS file. In this case its in the same place as the webpage, but is could just as easily be
href="assets/styes.css".
The external stylesheet is best used for most situation except for e-shots as email clients wont call in external CSS. Its ideal for websites where multiple pages have the same style, all you have to is make sure that each mage has the the stylesheet link in the
<head>section.
Monday, 21 January 2013
Be lazy with HTML5, but not really: the <head> tag
With HTML5 we can be a little lazy, perhaps sloppy too.
Lets start with the DOCTYPE, this is really easy:
The
Pretty painless right? You might be looking at this and thinking where are the quote marks to the attribute:
The best thing to do is pick a style and stick to it.
Also:
This will validate just fine, even though it has no <html> tag, no <head> tag and no <body> tag, this is because browsers assume them any way as you can see from the screen shot:
Lets start with the DOCTYPE, this is really easy:
<!doctype html>thats it.
The
<meta>tag is quick and easy too:
<meta charset=utf-8>thats it.
Pretty painless right? You might be looking at this and thinking where are the quote marks to the attribute:
charset="utf-8"
and its not self-closing:
<meta charset=utf-8 />? well thats just it, this isn't a XML language so you don't need any of those things, but this doesn't mean you can be sloppy, because you should always practice good mark up and keep it consistent.
The best thing to do is pick a style and stick to it.
Also:
<!doctype html> <meta charset="UTF-8"> <title>Chet Tailor's HTML5 blog</title> <p>Some really interesting stuff</p>
This will validate just fine, even though it has no <html> tag, no <head> tag and no <body> tag, this is because browsers assume them any way as you can see from the screen shot:
Monday, 14 January 2013
HTML5 Semantics
In HTML5 there are more semantics, personally I think this is a good thing. Instead of an endless amount of
<div>s we have more structural elements like
<header>,
<nav>,
<aside>,
<footer>etc I'll try and explain which I think are the main ones as best as I can, but in the mean time you may want to check out theses Cheat Sheets: HTML5 and HTML5-CSS3 the latter is a little dated but still excellent for guidance.
Friday, 11 January 2013
What software do I need for HTML and CSS?
Any software where you can save as a plain text document.
Such as TextEdit (may need configuring) or Notepad, but when saving the file you must save it as .html for HTML or .css for CSS.
However you may want to consider something like Dreamweaver or Sublime Text 2 there are others, but these are the two I use. These can predict what you are typing and make linking to other web assets easier. They can also help with file management and file upload (FTP). But more on that later.
If you'd like to add anything then feel free to do so below.
Such as TextEdit (may need configuring) or Notepad, but when saving the file you must save it as .html for HTML or .css for CSS.
However you may want to consider something like Dreamweaver or Sublime Text 2 there are others, but these are the two I use. These can predict what you are typing and make linking to other web assets easier. They can also help with file management and file upload (FTP). But more on that later.
If you'd like to add anything then feel free to do so below.
Thursday, 10 January 2013
What is HTML and CSS?
In short HTML is the content of the website and CSS is how that content is presented to the website user/viewer, well sort of.
HTML is a little more than just the content, it also tells us what the content is; ie it tells us which part of the content is the Title, which part is the Header, Paragraph and Footer etc.
Just like in a properly constructed document.
The CSS tells the web browser how they should look; ie what font and colour the Header should be. The line spacing in the Paragraph etc.
HTML is a little more than just the content, it also tells us what the content is; ie it tells us which part of the content is the Title, which part is the Header, Paragraph and Footer etc.
Just like in a properly constructed document.
The CSS tells the web browser how they should look; ie what font and colour the Header should be. The line spacing in the Paragraph etc.
Wednesday, 9 January 2013
What's this all about?
My name is Chet Tailor and I run a company called Red Kong Graphics.
I started off in print design and eventually found myself moving more and more into web and digital. So I had to learn HTML and CSS, what I think is interesting though is I've gone into web and digital at what I consider a important time in Internet history! I've entered in at a time where there are big changes occurring. I'm talking about HTML5 and CSS3.
No doubt there will be some of you who are completely lost and don't know where to start, don't worry, thats what I thought at the beginning too. So I'm going to try put together tips, tricks and advice on HTML5 and CSS3.
I'm by no means any sort of HTML or CSS expert, so if you think you know better then feel free to leave a comment.
Hope you enjoy the journey.
I started off in print design and eventually found myself moving more and more into web and digital. So I had to learn HTML and CSS, what I think is interesting though is I've gone into web and digital at what I consider a important time in Internet history! I've entered in at a time where there are big changes occurring. I'm talking about HTML5 and CSS3.
No doubt there will be some of you who are completely lost and don't know where to start, don't worry, thats what I thought at the beginning too. So I'm going to try put together tips, tricks and advice on HTML5 and CSS3.
I'm by no means any sort of HTML or CSS expert, so if you think you know better then feel free to leave a comment.
Hope you enjoy the journey.
Subscribe to:
Comments (Atom)