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.
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:
https://alistapart.com/ – A List Apart
https://www.webstandards.org/ – Web Standards project
https://meyerweb.com/ – Meyerweb – look at the topics “CSS Info” and the “css edge” in the menu
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.