HTML5 and CSS3 are bringing new features to us and in this article you'll be able to find some great tools, cheat sheets and much more you could need to master these new features.

Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer!

1. CSS3 Selectors Test

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.

2. CSS3 Please!

CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

3. CSS3 Generator

Allows you to create and costumize multiple CSS3 effects.

4. CSS3 Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms  (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

5. CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

6. Border Radius

Allows you to create rounded edge rectangles.

7. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

8. CSS3 Generator

This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.

9. CSS3 Previews

Many new CSS3 feature previews and demos.

10. CSS Template Layout Module

Learn about popular CSS3 modules and opportunities CSS3 offers.

11. 5 Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

12. Web Browser CSS Support

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

13. Font Drag

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.

14. CSS3 Cheat Sheet

Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

15. Sizzle

A pure-JavaScript CSS selector engine
designed to be easily dropped in to a host library.

16. Web Designers’ Browser Support Checklist

Displays web browser support on HTML5 and CSS3.

17. CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

18. HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Woork. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

19. HTML5 Demos And Previews

You can watch HTML5 demos, new features and check out browser support.

20. The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

21. HTML5 Cheat Sheet

HTML5 features and useful info at one place.

22. HTML5 Gallery

A showcase of sites using HTML5 markup

You always wanted to create your own online store but didn't had the knowledge how to start or what shopping-cart solution to use?

No Problem! In this article I will introduce you the key-features of PrestaShop, one of the most used open-source e-Commerce shopping-cart solutions out there, which is free to use and with a big community.

E-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Check their site to get the cheap SSL certificates.

What Exactly is PrestaShop?

PrestaShop is a professional e-Commerce shopping cart content management system, which you can download and use for free.

Currently it has more than 50.000 community members and more than 33.000 online stores are using it as their shopping-cart solution.

Most people use it because of its scalability and modular structure and very light-weight and fast installation. If you already have PHP knowledge, you will be able to create your own themes in no-time!

If you can't wait, you can give it a try right know. They are hosting a front-office access and also a backoffice access on their own servers. Click here to get to the demonstration page.

The Key-Features of PrestaShop

PrestaShop has a lot of great features. Not only for the front-end but also for the back-office.

I will list you only a few of them to give you a small insight, why so many people are using it as their favorite shopping-cart solution.

Front-Office Features:

• Featured products (Top sellers, New items,..) on the homepage
• Build-in product-image zoom
• Customer subscription and user accounts
• Unlimited payment methods
• Google Checkout module ready to be activated
• RSS feeds

Back-Office Features:

• Full-featured WYSIWYG text editor
• Unlimited categories and subcategories
• Different currency settings and tax settings
• SMS/Text-message module
• Customizable delivery status notification
• Friendly URLs and Permalinks
• SSL encryption
• Smarty Templating-engine

This is just a small selection of the features. You can take a look at their complete feature-list here.

Sites Using PrestaShop

I prepared a list with some different looking online shops, which are using PrestaShop. You will see how much possibilities and freedom you have, while creating your own themes.

1. La Biohème

2. Contentin Café

3. Chic Art

4. Kapsys

5. I got Style

6. Nocturno 9

7. Diver Inside

8. Camisetas Geek

9. Onze Mètres Carrés

10. Design and Furniture

As you see, every PrestaShop theme can look different and can be designed as you wish. If you want to see more sites and get even more inspiration, just click here to take a look at their showcase here.

Behind the Scenes: Requirements and Installation

If you got inspired and want to try PrestaShop right now – go ahead and download it!

The current stable version is v.1.2.5. They also released a beta version a few days ago (v.1.3 beta 1) but it is recommended only for testing.

System Requirements:

But before you start downloading, make sure your server meets following system requirements so you don't step into troubles during the installation.

• Linux, Unix or Windows OS
• at least Apache 1.3 or IIS 6
• PHP 5.0* or later
• MySQL 5** or later

* Some PHP 5 versions are bugged and prevent PrestaShop from working correctly. You can take a look at the supported versions at their full list of system requirements here.

** PrestaShop works also from MySQL versions 4.1.14 to 5.0, but some features are not working correctly or have strange behaviors.

Installation Process:

Now you know what system requirements you need. You can go ahead and start with the installation of PrestaShop.

After you have managed to upload the installation package to your desired directory on the sever, you can go ahead and start with the installation itself.

Step 1:

The first thing you have to do is to access the directory where you have uploaded the PrestaShop installation package.

In case you uploaded it to the root folder of your server (e.g.: http://yourdomain.com), go ahead and type in this address into your browser.

If you have done everything correctly, you will see the automatic installer of PrestaShop which will guide you through the installation. On the first step you can choose your default language which you want to use in your online shop.

Step 2:

On the next page (picture above), the application will perform a system check. If everything is alright, green check-marks will appear and you can continue the installation.

If you run into a problem and need help, don't hesitate and go to their wiki or the forum to request help. I'm sure one of the 50.000+ members will be able to resolve you problem! :)

Step 3:

On step 3 of the installation you have to enter your MySQL connection details for the database you have to create.

If you are new to PrestaShop, choose the "Full mode" for your installation. This will install all basic modules, sample products and the default theme so you can take a look how everything works.

Step 4:

The installation is now almost complete. All you have to do now, is to enter your login information for the back-office. Optionally you can also upload a logo image for your shop.

Once you have done that, go ahead and click "Next".

Step 5:

Your PrestaShop is now installed and ready to get used!

On the last page you will see all your details you entered again. Also you will get the links to your front-office and the back-office (you should bookmark them – just in case..).

Also don't forget do delete the "install" folder from you server and rename the "admin" folder, so everything is secure!

Congratulations! You should now be able to see the default theme of PrestaShop, once you entered the URL in your browser:

Installing New Modules

The installation of new modules to your PrestaShop is a very easy process. Those are the steps you have to do:

1. Unzip the module you have downloaded and upload it to your server with your favorite FTP browser.You have to place the module folder into the /modules folder of your installation.
2. Login to your back-office and go to the "Modules"-tab.
3. Search for the new module in the list.
4. Finally click on "Install".
5. If necessary you can now click on "Configure" (the gearwheel-icon) to finalize the installation of the new module.

Once you have finished configuring the module, be sure to test it so you can confirm that it is working as it should.

Installing New Themes

To install a new PrestaShop theme, you have to do following steps.

1. Download and extract it locally.
2. Upload the entire theme-folder to the /themes directory on your server.
3. Login to your back-office and go to Preferences > Appearance.
4. Select your new themes from there and apply the changes by clicking on the "Save" button.

Congratulations! You have installed your new theme and to check it out, go to the front-end of your online shop and take a look at it!

Conclusion and Last Words

I hope you enjoyed this short introduction to PrestaShop.

As you see, it is very easy to use, has a lot of very useful features and can be easily extended with new modules. Also it is a professional shopping cart solution for your online shop, used by a lot of people.

Another big advantage is that it is open source and has a very big community where you can ask for help, once you need it.

Now go ahead and start designing your own themes or browse the web for finished themes. There are also a few free themes you can download and install on your server.

Good luck with your online shop!

E-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Besides standard SSL certificates, wildcard and EV certificates are offered with discounts too. Check their site to get the cheap SSL certificates.