Guide to Web Development
Expert/Advanced
Well you're doing well with XHTML and CSS but you're having a little
trouble with all the positions, nesting div tags, getting the site
to look the same on various Operating Systems/Browsers, and you're
ready to learn the hacks to fix the bugs. Time to become a master
of this XHTML/CSS world and start making the sites like the experts
do.
Keep in mind that making that "expert" site takes more than just
the code... it takes the imagination as well as the know-how to make
the overall site work. That I don't think can be taught to a person.
They need to know the right balance of good content and the look of
the page. You don't want a page that looks good but has no
information to provide. And of course a site with great info can
get by in the web world, but it never hurts to spice it up.
Then of course there's all the neat little perks for web
sites... scripts, ASP/PHP/etc., flash presentations, and so on.
Of course that's beyond the scope of this "article" so I'll
leave that for others to cover and help you with. But the site
itself is needed before the rest can be done, so we need to make
a stable site first.
There are problems with XHTML/CSS - mainly the CSS that will cause
headaches. For example float a div to the left of another div and
make the div on the right hold a lot of text. After the text goes
past the bottom of the left floating div you may notice (on Internet
Explorer) that the text on slowly creeps left. It can be fixed,
and should be.
Or make an image that's 400 pixels wide and place a div that's
400 pixels wide under it (make the background of the div a color
like red). Give the div a border of 10 pixels (black) and then
look at the page in both Netscape and IE. On one the border and the
div are just as wide as the image... the 400 pixels. On the other
the div and the border are wider than the image. Another problem
that can and should be fixed.... Especially if you're creating a
site that's using absolute positioning in the CSS.
These are only two of the bugs that you need to be aware of with
CSS and the various browsers. So what can we do about it? First
we can be aware of the bugs and apply the hacks to fix them. While
that's nice it can be a pain. Or what we can do it try to make out
XHTML/CSS sites so that we don't need to worry about the bugs/hacks
we'll need. Of course this still means we need to know what to avoid.
For this we're going to let a few experts on this subject help us out.
The following links are good to see what bugs/hacks are out there.
Then when we know about them we can start to either avoid them, or
apply the hacks to make sure they work.
http://www.positioniseverything.net/index.php
http://nemesis1.f2o.org/bugs
http://centricle.com/ref/css/filters/
- chart of a few hacks - the text to the left of each hack are links to help
understand them.
http://tantek.com/CSS/Examples/boxmodelhack.html
- the original "box model hack"
Those should be a good start for this and I'm sure that you'll get
a good enough idea so that you can look into this more on your own.
What you should know from all of this
Really you should know how to do all the HTML and XHTML that your mind
can hold. Don't be afraid to reference something when you're lost but
don't come to rely on having to look things up too often. For example
if you can't remember the info you need for a radio tag look it up. If
you find yourself using them a lot, you'll start to remember. Don't
always look it up, look it up and try to learn it if you forgot.
As far as CSS goes... that's where the trouble comes in. You're
going to have a hard time committing everything (bugs, hacks,
properties) to memory. Work on knowing the properties for the tags
you use all the time. Most properties are the same for some tags
so that's not too bad. Know some of the bugs that you're going to
need to watch out for and if it helps write them down on a piece
of paper and keep them near your computer. Then you're at least
aware of them. With time as you have to use the hacks on bugs more
and more, you'll start to understand them, remember them and you'll
work around them or avoid them.
Some of the position properties with CSS can be tricky. Know the
differences between absolute, fixed, relative, static, ... all
the positions.
Learn CSS classes, pseudo-elements, selectors, and media types.
Start working on making the websites you've been designing to work
well on all browsers as well as so that people with disabilities
can view your sites. You can probably ignore these last two parts
if you're not designing sites that you want a ton of people to view.
Of course if that's the case then you could have stopped at just
learning HTML and come CSS.
Start to learn about the units you can use for elements in CSS and
how some are better than others - like using em instead of px for
font size.
Code, code, code. Nothing will help you more with learning this
stuff if you don't try it. Create a site that makes you have to
work around browser bugs and makes you use the hacks. At some point
in time you're going to need them so it's better to learn them now
than needing to learn them later.
Lastly read, read, read. All the information that you can gather at
websites will be helpful and will help you to learn.
Here are a few links that will hopefully be of some use for
expert/advanced people:
http://www.alistapart.com/ - A List Apart
http://www.webstandards.org/
- Web Standards project
http://www.brainjar.com/ - Brain Jar
http://www.meyerweb.com
- Meyerweb - look at the topics "CSS Info" and the "css edge" in the menu
http://nemesis1.f2o.org/
That should be a good start and the links that you've probably found
by now as you've learned all the above will help you. Plus the sites
above should have some good links on them as well.
Web development is like everything else, you only get better with
practice and a continuing education - be that education on your own
or going to school for it. The more you use it and the more you do
it the better you'll get at it. Don't be afraid to ask for help from
others even if you think you're an expert at this whole web thing. I
know for me personally I think that I can hold my own with development,
but there are situations where I rely on others for help. Why? I haven't
covered everything or tried everything out there that there is to try.
If I'm stuck, why not ask someone who's encountered the problem/situation
before to make it easier on myself and to learn? It's a great help.