I have 5 main “ways and means” to learn HTML, PHP and CSS
Apart from reading tutorials by other clever people (self taught or otherwise), I like to learn things by trial and error.
Warning: This can take some time and if you are in hurry and don’t want or need to learn how to code, then find the code in a tutorial and copy and paste.If you want to try your hand at learning the hard way – but most rewarding – then you might like to equip yourself with some of the following tools.
1. Use the Firefox Browser
If you aren’t running on Firefox yet – you need to. Get Firefox now or read Thesis Hacker’s article on browser statistics (scroll down to below the image).
Firefox has at least 10 distinct advantages over Internet Explorer…
- Faster Tabbed Browsing
- Free add ons that give you access to Firebug [more on Firebug below]
- Integrated Search Engine
- Popup Blocker
- Security
- Download Manager
- Blocking Images
- Cleaner Interface
- Page Previewing
- Less Hard Drive Space
2. Firefox Add On JSView
This allows me to view a site’s CSS and JS code sheets. I have a look at other sites’ code from time to time to see how they do things. If you peek into the back of sites using Thesis Theme you will recognise the “custom.css” file.

3. Firebug
I also use Firebug to see what the html and css is for a selected area.
If you hover over an area in the html part of Firebug, it will highlight the area that the code relates to. For example in the image below, I hovered over the “content box” line of code and it highlighted where on the screen the code related to.
If you want to see the code for that part, click on the “+” button to drop it down. When lines of code are dropped down ["-"], you can copy and paste into a text editor to customize for your own purpose.

If you want to see the CSS (Style coding), you can click on the relevant html (e.g. “content” – and look to the right of Firebug, under the ‘Style‘ tab. Anything crossed out is code that is disabled at the moment but still remains in the CSS file.

I’m not the best person to teach you how to use Firebug. I highly recommend Kristerella’s video on using Firebug.
4. View Selection Source
By simply marking a section on the page with the left mouse button (hold, drag and release) I can then right click and select ‘View Selection Source‘. This will give you a mixture of all kinds of code, including CSS, HTML, javascript, etc. This is handy to understand what the final code looks like when it is run together.

For example, I went to Kingdom Geek (creator of Thesis OpenHook) and marked a selection on his page that was interesting to me, something I wanted to know how to do so I could do something similar on my own sites.

- Select the area you are interested in
I then selected ‘View Selection Source‘ to see what the code looked like.

- This is the code that relates to the area I selected
Findings
You can see from the screenshot above, that he uses a blockquote and a blockquote class to style his blockquotes. If I go to his stylesheet I can see the custom code he uses – if it is in the custom.css file. I can be pretty certain it is because I know the site uses Thesis Theme and I am familiar with the common paths to common files.
This isn’t always the case though. Sometimes people change their master style.css file.
- If you use Thesis OpenHook plugin you don’t have to open/edit any files directly on your server/ftp.
So, there you have it. Some of my dodgy self-taught hacking methods to learn how to code and customize my pages. Many of my tutorials are based on the above methods – my investigation of how people do something I think is groovy.
You could also just copy and paste from some of the great tutorials that are out there, but sometimes learning for yourself is more fun.





{ 17 comments… read them below or add one }
hahaha I thought I could learn how to hack into my friends wordpress blog.
but still thanks for the tips.
I use the Web Dev toolbar plugin, it’s great stuff and has a number of those functions too. It adds a number of shortcuts like Ctrl+Shift+C to see a CSS page. I believe it allows for the html highlighting, though I normally use Ctrl+U to look at the entire code. I think I’ll take your suggestion for looking at the one part–that would save a lot of time skimming the code. Just have to figure out which selection that is. :)
I also like Firebug.
Ms. C’s latest artistic creation..Tutorial: Adding Gravatars to Cutline Themes
These are great tips. I might start using these instead of relying on my partner to “find things out” for me.
Scott’s latest artistic creation..Lady Penelope’s day care disaster
soome good tips on how to get into wordpress
.-= ian´s last blog ..3 Top Twitter Tips! =-.
Actually, hacking is not really good because you are just making the site worse. Many people like to hack not because they know how to do it but they enjoy doing it.
what is fire bug?
Do a search for Firefox browser and firebug for the best explanation. It is an add on that lets you see, via another window at the bottom of the browser, the background code to a page. You can also edit it and see what changes would look like. You will see the changes but they won’t be visible to anyone else. Then refresh your browser to see the actual page again.
I have been looking for thesis customization video tutorials. If anyone knows anything please let me know where can I get this. Its because every time i want to do something, i have to research on google. it takes a lot of time. :) thanks for creating the site about thesis. should check again for sure.
You might want to search YouTube directly with the search term “thesis tutorial” or even just “thesis” and see what recently published videos are there for your viewing pleasure.
This article is kind of dumb, you don’t need any addons in any browser to see the source code of a site. All you need to do is find the “View Source” (or equivalent words) menu option and click it. You get a new tab will the source code of the site where you can see all the HTML, CSS, JS and external files.
If you want to slow down your machine with unnecessary downloads, I guess that’s your prerogative…
By the way, you can’t view PHP from the source code. That is a server-side scripting language. It’s interpreted by the server, not your browser (unlike JS, which is a client-side language).
I appreciate the time you have taken to comment. you sound like you know your way around code. just to clear up a few things…I didn’t suggest you can use these tools to see php, only js, HTML and CSS.
the beauty with the Firebug addon is that you can make changes to specific parts of anybody’s site like the colour, width of a column, background images, etc, without making permanent changes…and then see what it looks like. if you like the result you just copy that element of the code and paste it into your own code.
I thought I could learn “hacking into a wordpress blog” :P
Hi Somone, just a huge -thank you- for all the effort you are putting into helping newbies like myself. I have just started on a thesis based website (it’s my first, so please don’t laugh), and when looking for advice, I have ended up on thesis theme hq quite a few times. There is one thing which I find a little confusing: for example this title for one of your tuts “How to insert images side by side in Word Press” – does that mean it’s for wp only, does it also apply to thesis? I realise that thesis is a wp theme, but I am never quite sure, without reading through the whole tut first, whether it’s going to be useful to me. You know what I mean? I am also looking for more info on your thesis starter kit – I don’t worry about paying, it’s just that I print off everything, and I don’t really want to be responsible for a few more trees being chopped down :-))
Hope someone can update this because wordpress already update their security..thanks!
For your purposes I am using Web Developer plugin for Firefox, which I find great!
I highly recommend it!
Keep on coding!
Regards,
Korepetycje
i personally think google chrome is better as all these features are built in…
just right click and select ‘inspect element’
Good point. I didn’t mean any malice. I was going off Thesis Hacker’s take on how to chop up and re-do – the essence of your first definition.