1. Get into the habit of using a CSS Reset
How many times over and over have you coded your css and testing the code on Firefox and Chrome it looks fantastic and to your surprise IE looks like crap. Something that definitely comes in handy is the CSS Reset.
It just resets all margins, paddings, sizes etc. and it simplifies knowing that you are working from a clean slate.
You never edit the Reset.css because it must always be the same.
Some important factors when including the Reset css to your html.
-Always load the reset css before your original site css.
-Never edit the reset css, if you edit it, then it has no use of being a reset css.
<link rel=”stylesheet” href=”site.css” />
2. Adding comments to your code is very helpful
Have you ever come across a piece of code and had absolutely no idea what it does or for what it is.
Well if the coder didn’t add comments then that’s just unlucky.
When coding, make it a habit to add comments, so when you are someone else works on the code, they’ll have a fair idea of what the code is for.
.box {
background: #000;
color: #999;
}
3. Keeping your code clean
Having clean code is not only a art, but it also makes your code look good.
When you have a class that only requires property, then keep everything on one line.
If you have a class that contains more than one property, split it up onto multiple lines.
It’ll look cleaner and faster to read.
.class2 {
background: #000;
color: #999;
width: 600px;
}
Part 2 Coming Soon…
Coming Soon…
1. Get into the habit of using a CSS Reset
How many times over and over have you coded your css and testing the code on Firefox and Chrome it looks fantastic and to your surprise IE looks like crap. Something that definitely comes in handy is the CSS Reset.
It just resets all margins, paddings, sizes etc. and it simplifies knowing that you are working from a clean slate.
You never edit the Reset.css because it must always be the same.
Some important factors when including the Reset css to your html.
-Always load the reset css before your original site css.
-Never edit the reset css, if you edit it, then it has no use of being a reset css.
<link rel=”stylesheet” href=”site.css” />
2. Adding comments to your code is very helpful
Have you ever come across a piece of code and had absolutely no idea what it does or for what it is.
Well if the coder didn’t add comments then that’s just unlucky.
When coding, make it a habit to add comments, so when you are someone else works on the code, they’ll have a fair idea of what the code is for.
.box {
background: #000;
color: #999;
}
3. Keeping your code clean
Having clean code is not only a art, but it also makes your code look good.
When you have a class that only requires property, then keep everything on one line.
If you have a class that contains more than one property, split it up onto multiple lines.
It’ll look cleaner and faster to read.
.class2 {
background: #000;
color: #999;
width: 600px;
}
What a shock to me coming to find that Steve Jobs the Apple Genius is dead.
My favourite comparison chart between Web Designers & Web Developers.
I like to think that I am a good combination of the two.
Have you checked out Google Gravity yet?
http://mrdoob.com/92/Google_Gravity
This guy is a very talented front end developer!
It’s not the most detailed look, but Tom’s Hardware noticed a cameo of the newest StartMenu in a Windows 8 video demo. It looks… pretty bare. Stark white-on-black text, very few buttons, and, importantly, where are the programs?
Whereas Windows 7′s Start Menu offers a multitude of ways to get at your software—favorites, search, a giant list of applications—this Windows Phone 7-inspired Start Menu has none of that. Just a search box. Unless we’re missing something from this screenshot, which is entirely possible, this looks like a pickle. Are we meant to search for whatever we want to use, as we might via OS X’s Spotlight? Are there context-specific buttons that spring up? With Microsoft revealing more and more about their next titanic OS, we’llprobably find out soon.
h3.post-title.entry-title {font-size: 25px;}.widget.PopularPosts, .widget.Poll { display: none;}
One of the common requests I hear from webmasters is “Why doesn’t Google show me most or all of my backlinks?” Well, as of today, Google’s webmaster console will now let you see your site’s backlinks.
Major props to the webmaster console team for this new feature. A few things to know:
- The backlink tool doesn’t show 100% of the backlinks from Google yet, but I expect the number of links that are available to grow.
– In particular, for my site I was easily able to see more than 10x more links in this new tool than the link: command gave me. The link: command has always returned a small fraction of the backlinks that Google knows about, mainly for historical reasons (e.g. limited disk space on the machines that served up “link:” data).
– You can download the backlinks in a really nice CSV format, suitable for slicing and dicing and other analysis. I believe you can export up to a million backlinks if your site has that many backlinks.
– Do not assume just because you see a backlink that it’s carrying weight. I’m going to say that again: Do not assume just because you see a backlink that it’s carrying weight. Sometime in the next year, someone will say “But I saw an insert-link-fad-here backlink show up in Google’s backlink tool, so it must count. Right?” And then I’ll point them back here, where I say do not assume just because you see a backlink that it’s carrying weight.
I’m sure that there was more that I wanted to say, but why don’t people start playing with it and give feedback or post backlink tool-related questions? I know that the webmaster team reads to get feedback over here too; congrats again to that entire team for providing this. If you want to start browsing your site’s backlinks, sign up for Google’s webmaster console now.
————————————————————————
Thanks to Matt Cutts for this Article.
h3.post-title.entry-title {font-size: 25px;}.widget.PopularPosts, .widget.Poll { display: none;}
How is this possible, how can this be done?
There are a few steps that can be taken into consideration to achieve this basic, yet very helpful technique.
For starters.
1. Create the class that will be used to center divs. This is done in your CSS.
width: 1000px;
margin: 0 auto;
background: #ccc;
}
2. The class MUST always have a width in order for the CSS to know how to Center the object. If a width is not given, the CSS has no idea how wide the div is in order to center it.
3. You can however, have a class that does not have a fixed width, but still center itself in your browser window, by using, min-width and max-width. These two will play a huge role when someone is using a 10″ monitor or a 32″ monitor.
4. Now that you’ve created the CSS for your centered div, you must now create the div in your html.
Content that needs centering goes in here, div, spans, a whole site!
</div>
I hope you’ve enjoyed this short introduction to centering divs in a browser window.
h3.post-title.entry-title {font-size: 25px;}.widget.PopularPosts, .widget.Poll { display: none;}If only border-radius and box-shadow could work on IE6 to IE 8….
Here’s what you need to do!
- Download this package and copy it to your sites directory. For example js, images or css.
- Add this line to all classes or ids that will be using CSS3.
- behavior: url(path/to/PIE.htc); This activates the magic.
Here’s a example.
border-radius: 10px;
box-shadow: 0 0 10px #000;
behavior: url(path/to/PIE.htc);
}
Source : webdesigntutorialsandtips[dot]wordpress[dot]com
0 comments:
Post a Comment