Are you tired of pulling your hair when you test your new, amazing website in different browsers? Maybe the div’s is not where you want them to be, the font-size is different etc. There is hope!
The purpose of css reset / stylesheet reset is to neutralize the areas where the different browsers is inconsistent, e.g margin, line-height, padding and so on. When using a css reset, all the styles that are reset in the stylesheet is reset to “zero”, giving all the browsers the same starting point.
Applying the css reset is simple. Luckily there are many examples of reset stylesheets on the web. I like to use Yahoo’s stylesheet reset. All you have to do to apply the css reset from Yahoo, is to include the following line in your html file, before you link to your own stylesheet:
There are few shortcuts in life, except when it comes to creating a website. To skip all the knowledge and technical know-how required to manually set up a website, we bring you shortcut #1Free Web Hosting and shortcut #2 Free CSS Web Templates. Using these two components will save you a lot of time scratching your head, ultimately resulting in a website with a proper domain name and a proper web design.
Free Web Hosting
No joke. You can get free web hosting. If you need to get your site up now and have no money left to spend on your web projects, this may be a good option. The web host pays for the service by putting ads on your site. While this will get you up and running, it is disadvantageous in that in addition to having to advertise for the web host, you may have severe limitations with respect to bandwidth and disk space.
Almost Free Web Hosting
Almost free web hosting is a nice medium. You can get web hosting services for only a few dollars a month, without any ads from the host service on your site. There will still be some limitations on disk space and bandwidth, but an almost free web hosting arrangement is definitely enough to get you started until you are ready to upgrade. Also known as cheap web hosting or shared web hosting, this hosting type is indeed perfect for the beginner webmaster or hobbyist. You will hence share server disk space and bandwidth with other hosting clients but as long as your website isn’t heavy with loads of traffic and large files, there shouldn’t be a problem.
Free CSS Web Templates
Now in most hosting packages nowadays clients are offered in-house applications to install CMS, blogs, forums or other website-types so that the client won’t have to. Pre-installable Wordpress blogs are common as is Mambo, Joomla and PHP Nuke. However, these solutions still require knowledge in the scripting language PHP and some level of experience. If you are a first-timer you should keep to basic html and css.
One index.html-file, one image directory, one css stylesheet. Css web templates are built in basic html and css, though not limiting the web design in any way and are failry easy to manage and edit. Online you’ll find massive archives of free css web templates of just a couple of files that you can upload to your shared server. You’ll have to edit your website’s content directly in the html-files but that way you’ll also learn some basic programming. When you later feel ready to create a more dynamic website like a content management system, you will be more ready to take on the world of PHP programming and finding free CMS templates.
In many cases, you want to show pictures on your website. In some of these cases, you’ll want users to upload their own pictures. This could mean that you would have to build an upload system, with lot’s of security issues around it, and it also means that you’ll have to have a lot of webspace available at your webhost. Luckily, there is a really easy and neat solution to this.
Flickr has been the number 1 for storing pictures online for some years, and they are offering developers a nice API, which means that we can use many of their functions in our own solutions. In this case, we are going to use it to grab the latest pictures from a Flickr group. But how? With JSON (JavaScript Object Notation). Jquery is able to transfer data between domains, and this means that with a little code, we can use this to show our pictures from the rss feed from the Flickr group.
I’ve put together an example on how to do this (you can download this as a .zip file at the bottom of the article).
<script type="text/javascript">
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?",function(data){
$.each(data.items,function(i,item){
$("<img/>").attr("src",item.media.m).appendTo("#images")
.wrap("<a href='"+item.link+"'></a>");});
$("#title").html(data.title);
$("#description").html(data.description);
$("#link").html("<a href='"+data.link+"' target=\"_blank\">Click here to get to the Flickr group</a>");//Notice that the object here is "data" because that information sits outside of "items" in the JSON feed});</script>
You also need to put this into your body tag (where you want the images to show):
<p>Only the last 20 pictures added to the Flickr group will show. To check out all the pictures, go to the Flickr group here:</p><pid="link"></p><divid="images"></div>
One of the first things you should think of when starting the development of a new fresh website, is what colors you want to use. Many people don’t think of this as that important, but it is! According to studies, the right combination of colors is very important to grab your visitors interest. Luckily, Adobe has created a great tool for making this easier for us, it’s called Adobe Kuler.
With Adobe Kuler you have several ways to find the right colors for your website. You can simply log in to the Adobe Kuler website and browse your way to find a nice colorschema.
As you can see from the screenshot, there is many existing schemas that is free for you to download.
If you already have a picture that is going to be central on your website, you can upload the photo, and Adobe Kuler will extract central colors and make a color schema from it, pretty neat!
I recommend you to try Adobe Kuler. It’s a great tool for choosing colors for your website.
![[Facebook]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/google.png)
![[MySpace]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/myspace.png)
![[Reddit]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/reddit.png)
![[StumbleUpon]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/technorati.png)
![[Windows Live]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/windowslive.png)
![[Yahoo!]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/yahoo.png)
