Hello! Here you'll be able to find HTML and CSS tutorials written by me. No, no Javascript, PHP, or any
of those advanced stuff. If you came here to look for those, sorry to disappoint you. I'm not covering those
because I don't know anything other than HTML and CSS (although if I had the time and resources to I really
want to learn PHP). :/
Click here to go back to my blog.
I can put up specific Photoshop tutorials in the future if people actually start asking for them. But
before you ask, please try to look for the tutorial you want with a search engine first. It is so much easier to
find a Photoshop tutorial than a HTML tutorial. (That's why I'm teaching HTML and not Photoshop) By the way,
as a reward for reading so much of my crap in the last two paragraphs, I'll let you know in advance that I put up
in
Exits & Credits a small list of websites that I go to for my web-design
needs. (:
Warning to those evil people who plan to steal my tutorials and claim them as their own:
You have no idea how
awfully long it takes to write a single tutorial. I put in a lot of time and effort into
these. Therefore, don't plagiarize or else you'll have a pimple outbreak every month, every time you get caught
in the rain you will come down with a high fever, you'll step on dog poo every time you walk on grass and your
sibling/best friend will "accidentally" lose your most prized possesion/favourite/precious item(s).
Umm... to those of you out there, who
may get stuck to your screen after discovering lots of new
things like tutorials, brushes, textures, and whatever you may find,
DO NOT KEEP LATE NIGHTS BECAUSE
OF THIS. (When I mean late, I mean your standard of late. I know everyone has different opinions on 'What
exactly is a "late" bedtime'. If you tell me that "late" bedtime doesn't exist for you, do something about it and
make it exist.)
When I say this kind of thing, I sound like a parent nagging at her kid, but I'm serious about this. Don't
be un-disciplined like I was. I let that happen during a period of time in my life and my life changed drastically
after that. It was terrible, horrible, especially when my class ostracized me because my studies began to drop.
You don't want that to happen. Especially if you have 'O' levels coming in a few years or 'A' levels. Whatever.
Major exams come more quickly than you think.
In summary, just make sure you don't get carried away reading tutorial after tutorial, downloading
brush set after brush set and trying out one new technique after another. Even if you're not going to do your
revision, at least get enough sleep. Really.
Hello! Here you'll be able to find HTML and CSS tutorials written by me. No, no Javascript, PHP, or any
of those advanced stuff. If you came here to look for those, sorry to disappoint you. I'm not covering those
because I don't know anything other than HTML and CSS (although if I had the time and resources to I really
want to learn PHP). :/
Click here to go back to my blog.
I can put up specific Photoshop tutorials in the future if people actually start asking for them. But
before you ask, please try to look for the tutorial you want with a search engine first. It is so much easier to
find a Photoshop tutorial than a HTML tutorial. (That's why I'm teaching HTML and not Photoshop) By the way,
as a reward for reading so much of my crap in the last two paragraphs, I'll let you know in advance that I put up
in
Exits & Credits a small list of websites that I go to for my web-design
needs. (:
Warning to those evil people who plan to steal my tutorials and claim them as their own:
You have no idea how
awfully long it takes to write a single tutorial. I put in a lot of time and effort into
these. Therefore, don't plagiarize or else you'll have a pimple outbreak every month, every time you get caught
in the rain you will come down with a high fever, you'll step on dog poo every time you walk on grass and your
sibling/best friend will "accidentally" lose your most prized possesion/favourite/precious item(s).
Umm... to those of you out there, who
may get stuck to your screen after discovering lots of new
things like tutorials, brushes, textures, and whatever you may find,
DO NOT KEEP LATE NIGHTS BECAUSE
OF THIS. (When I mean late, I mean your standard of late. I know everyone has different opinions on 'What
exactly is a "late" bedtime'. If you tell me that "late" bedtime doesn't exist for you, do something about it and
make it exist.)
When I say this kind of thing, I sound like a parent nagging at her kid, but I'm serious about this. Don't
be un-disciplined like I was. I let that happen during a period of time in my life and my life changed drastically
after that. It was terrible, horrible, especially when my class ostracized me because my studies began to drop.
You don't want that to happen. Especially if you have 'O' levels coming in a few years or 'A' levels. Whatever.
Major exams come more quickly than you think.
In summary, just make sure you don't get carried away reading tutorial after tutorial, downloading
brush set after brush set and trying out one new technique after another. Even if you're not going to do your
revision, at least get enough sleep. Really.
two new tutorials
1:07 PM, Saturday, June 28, 2008
Hey people!
Added two new tutorials:
- CSS Tutorial: Classes
- HTML Tutorial: Making a link open in a new window
Actually I've added the HTML one ages ago, just that I didn't update, because I think a lot of people already know how to make a link open in a new window.
I've temporarily run out of ideas of what to teach. Any suggestions? :D
Tutorials are up at last!
10:25 PM, Friday, June 6, 2008
I can use the plural form because I did up two simple tutorials. Just two ^^;
I did only two because tutorials take
forever to write, and I have to THINK about what you might need to learn. It helps if you tell me what you want to know via the tagboard on your right. *points* However, I won't teach anything's that's already up on
Neopets and
Lissa Explains it ALL because there's no way I can teach better than them. ^-^
By the way, initially, I did not intend to create a whole new tutorial website, but if I squeezed all these tutorials into my current blog, my blog will lagggggggg like crazy. That's not good for you nor for me. And that's how you ended up here. (:
I hope the tutorials are clear. If there are any questions about the tutorials, just tag.
PS. If you know me in real life, I can help you with the HTML via MSN, SMS, etc. But anyone in Choir IT Committee gets first priority for HTML help. :D (Sorry to the non-IT-com members - I'm just doing my job.)
Welcome to the wonderfully time-consuming world of HTML and web-design. (: Personally I find it really
enjoyable, although in the beginning, there was
so much to memorize and it was always
so
annoying when the whole page screwed up when I just missed out one teensy little thing. And because the
error was so teensy and tiny, I could have experimented with 10 different ways to solve the problem before
actually getting it right.
WARNING: RANT COMING YOUR WAY - Optional to read
Learning how to code my own tables layouts was the WORST. I tried once, then gave up. I tried half a year
later and I gave up again. I tried a few months later and I gave up again. Finally, on my "fourth" try, I finally got
it to look the way I wanted! I was so unbelievably proud of myself back then, for FINALLY solving the stupid
problem. Now, when I look back at those layouts (I still have all my old files from my totally noob days), I go
"..., that is horribly ugly."
End of Rant. Approaching safe territory.
But don't get frightened away from what I'm saying. Yes, it's a lot of memory work. But one thing about HTML
and coding - it's so awfully repetitive. You'll keep using it so many times that before you know it, you
have all the common terms memorized. As long as you don't grow reliant on the "Copy and Paste" function, you'll
be fine. Just keep refering to the tutorial/guide, type the HTML out letter by letter, and persevere - you'll
definitely get it faster than the people who just copy and paste chunks of the tutorial into their coding.
It's okay to copy and paste in the beginning, because it makes things easier. After all, when you're a beginner,
no need to make things difficult for yourself. Just don't grow reliant on it. One day, when the website you keep
copying from decides to close down (you never know), you'll lose everything.
What I absolutely LOVE about this whole learn-HTML-by-yourself thing is that there's NO homework,
NO teachers looking at your work (you can just type absolutely anything you want - if you want, you
can choose to type out your revision notes whilst experimenting with HTML - 2-in-1!), NO stress, and
you can learn everything at your own pace.
Of course, it gets EXTREMELY ANNOYING when there's no one there to help you. That's the only
downside about this whole self-study thing. But when you finally solve the problem, you feel EXTREMELY
HAPPY. It feels unbelievable. The more annoying the problem is, the happier you'll feel when the problem is
solved.
Solving my own problems in coding, has somehow, taught me how to apply it to real life. Somehow, I can spot
my careless mistakes more quickly in Maths now. No, I'm still bad at Maths. But at least I still can grab a passing
mark. In the past, I NEVER passed a single Maths test. :/ It also teaches me to assess myself and be
resourceful. You pick all of this up when you have absolutely no one to turn to. :P So PERSEVERE! DON'T
GIVE UP! (On the other hand, it's healthy for your stress levels to give up once in a while. There's no
teacher chasing after you. Chill.)
PS. Having absolutely no one to turn to is a little extreme. If you get desperate, you can ask me. Just
tag me on the tagboard. NO SPAM. And I won't answer the query if I think that the problem's easy
enough to solve.
The following's just a guide. You can modify it to suit your needs and preferences.
(You probably know most of the following already, though)
Did you remember to save your file and refresh the page?
This is most common error: Scrutinize for ANY missing word, letter,
symbol, etc. Spelling errors? Did you spell CSS as CCS? (Believe me, I did that once.)
One way to identify the source of the problem.
Copy the code 100% from the tutorial, and try not to change anything
unless absolutely necessary. If they provided examples, use their examples. Save your file and refresh your
page.
Does it work? If yes, skip to Step 4. If it doesn't, try a few more times,
and imitate the tutorial as closely as possible.
LAST RESORT: If it still doesn't work, maybe it doesn't work in your
internet browser (Download new browsers* and upgrade** while you're at it.).
If it works, try editing your stuff slowly, bit by bit, portion by portion.
When something suddenly goes wrong, there - you've identified the source of the problem.
Know your keyboard shortcuts. Especially ctrl+f. When
your HTML file becomes terribly long and confusing, this comes in real handy.
Did you see something on another website? An effect that
looked fabulous, that you would love to have on your page? Hehe. Here's the trick (involves hard work and time
though).
Right-click on the page (Suggestion by Elaine: ***Alternatively, you
can also press the "Alt" key, go to View > Source) and click on 'View Source'. Ta da! The page's HTML is there
for you to see.
Then, look for what you've been looking for. Ctrl+f may come in handy.
Found it? Copy and paste the whole chunk somewhere.
Check to see if what you have links to the CSS or some JavaScript file.
For example, if it links to the CSS stylesheet, copy and paste the stylesheet somewhere too.
On the other hand, if what you've copied looks alien to you -
something you've never seen before, it might be a little more advanced than what you're doing, or it might be
far more advanced than you think. Probably more advanced than what I do too. It's up to you to continue or
quit. Usually I quit. Usually I suddenly realize it's too late into the night and I have to get up for school
tomorrow. :P What do you expect? This is Singapore. :/
*The common browsers used are Internet Explorer, Firefox and Opera.
**If you can open things in a new tab in Internet Explorer, you're using IE7, and what you're doing is supposed
to work.
***I'm not sure if this works in other browsers, but it works in IE7 and IE8. If you know more about this, please
let me know so I can spread the word. (: Thank you!
To understand my tutorials, you need to know the basics of HTML. If you haven't mastered the basics yet, click
here and start learning (:
|
Classes |
Type: | CSS |
| Level: | Intermediate |
| Notes: | Classes aren't as complicated as they seem. Hopefully, this tutorial simplifies it for
you.
|
Making a link open in a new window
|
Type: | HTML |
| Level: | Easy |
| Notes: | Make a link open in a new window when someone clicks on it.
|
Image Alignment
|
Type: | HTML |
| Level: | Easy |
| Notes: | This simple tutorial will teach you how to align your images.
|
|
"Scrollable" box |
Type: | CSS |
| Level: | Easy |
| Notes: | You've seen how blogskinners make a part of the page scroll (eg. this skin). Now you can make your own
bit of the page scroll too.
|
HTML Tutorials
Don't laugh! (but I agree the button looks silly) They have
excellent (though very basic) HTML
tutorials. Perfect for the absolute, complete beginner. Even if you're not a newbie, you can go there and learn
how to code
tables, something
basic that's been lost in Singapore.
Whilst mastering your basics with Neopets' tutorials, drop by Lissa's and start learning a little more
than the basic HTML that Neopets offers. After that, move on to Lissa's CSS tutorials. She covers almost
everything about CSS. I don't think there's a more complete (not to mention straightforward and easy to
understand) CSS guide than hers on the internet.
Photoshop Tutorials
I learnt Photoshop mainly by trial and error and trying to copy other people's design styles (not easy -
this takes
forever) because all the websites I used to go have all closed down. ): The sites I've listed
below contain PS tutorials (I don't go there for their PS tutorials - I go for their resources). You can give them a
shot if you want (:
I was just looking around Aethereality when suddenly I realised she has tutorials. Out of curiosity, I
looked at them and found myself remembering that I actually learnt a few techniques here! I got carried away
and read a number of them and I found that they're rather clear and the techniques covered are pretty useful.
Go check it out (:
Her Photoshop tutorials aren't exactly relevant if you're using her techniques to design blogskins, but
there's no exact tutorial that teaches you how to design your own blogskin step by step in the first place. Her
tutorials are more or less techniques that allow you to familiarize yourself with Photoshop.
She has a few tutorials but I can't remember what they covered, and now that her site is down, I
can't check. However, I usually go there for her brushes, textures and patterns (see below).
Resources
She has a few tutorials but I can't remember what they covered, and now that her site is down, I
can't check. However, I usually go there for her brushes, textures and patterns (see below).
She has a wide variety of brushes. I haven't been there in a while - but I'm sure she has new brushes
now. I know she has textures too, but I haven't tried them out. Go take a look (:
She's been around since forever. Love her PNGs. Again, she has brushes and textures too but I haven't
tried them out either. ^^; But I heard that her textures are good. (:
Her brushes are wow. Do some brushwork, a few layers of it, play with the Blending Modes and poof!
There you have it. A stunning layout that looks complicated and awesome.
Image designed in
Adobe Photoshop CS2 by Charmaine, with
the flowers
(from left to right: violet, lily, lavender) from
Adobe Stock Photos. Skin coded in
Notepad and tested with Internet Explorer 7. Oh and if you're wondering, the font in the
image is Arriere Garde. (No, I didn't get it from dafont. I think the site where I got it from has closed down.)
JavaScript Includes Script:
EarthWeb
