Best Free Online Tools for Web
Design & Development
Created By Cygnis Media :
http://www.cygnismedia.com/
Web Design & Development
Tools
 FONT SQUIRREL
 CSSMATIC
 KULER
 LAYER STYLES
 RESIZEMYBROWSER
 Sencha Touch 2
 Adob...
FONTSQUIRREL
 Webfonts are great, but getting them to work with different
browsers can be quite an undertaking. Thankfull...
CSSMATIC
 This is a really cool tool to help you do four effects with
CSS: gradients, border radius, drop shadow, and noi...
KULER
 If you’re anything like me, creating color schemes is
something you’ve struggled with. Thankfully, there’s a
numbe...
LAYER STYLES
 Looking for something that works like Photoshop? Check
out Layer Styles, which lets you style a box, and th...
RESIZEMYBROWSER
 If you’re working with a responsive or liquid layout, testing
is absolutely essential. While resizeMyBro...
Sencha Touch 2
 There's no denying that the mobile/touch device has
changed web development for good. It's a broader, mor...
Adobe Edge Inspect
 A great little app for mobile developers, formerly known as
Adobe Shadow, which cuts a huge amount of...
Microsoft WebMatrix 2
 At one time or another just about everyone who works on
the web will have cursed Microsoft. Let's ...
PhoneGap 2.0
 Everyone seems to agree that mobile is the new black. And
since that's the case it's a major pain in the pr...
Thank You
Data Collect : redstarwebdevelopment.com
Data Collect : creativebloq.com
Created By Cygnis Media :
http://www.cy...
Upcoming SlideShare
Loading in …5
×

Best Free Online Tools For Web Design & Development

457
-1

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
457
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Best Free Online Tools For Web Design & Development

  1. 1. Best Free Online Tools for Web Design & Development Created By Cygnis Media : http://www.cygnismedia.com/
  2. 2. Web Design & Development Tools  FONT SQUIRREL  CSSMATIC  KULER  LAYER STYLES  RESIZEMYBROWSER  Sencha Touch 2  Adobe Edge Inspect  Microsoft WebMatrix 2  PhoneGap 2.0
  3. 3. FONTSQUIRREL  Webfonts are great, but getting them to work with different browsers can be quite an undertaking. Thankfully, there are tools like Font Squirrel, which does all the hard work for you. Font Squirrel has two fantastic features: a gallery of fonts you can use, and a tool for you to create your own webfont kit. If you’re interested in breaking out of the handful of “web safe” fonts, Font Squirrel should be your first resource.
  4. 4. CSSMATIC  This is a really cool tool to help you do four effects with CSS: gradients, border radius, drop shadow, and noise texture. CSSmatic gives you a nice, easy tool to work with, then outputs all the code including all those pesky browser prefixes so you can just copy and paste.
  5. 5. KULER  If you’re anything like me, creating color schemes is something you’ve struggled with. Thankfully, there’s a number of great resources out there to get you inspired and building awesome color schemes, and Adobe’s Kuler is one of the bet. Not only will it help you build a theme, you can also browse through other people’s work, and even export your final selections into Adobe Creative Suite.
  6. 6. LAYER STYLES  Looking for something that works like Photoshop? Check out Layer Styles, which lets you style a box, and then outputs the CSS for you to copy directly into your stylesheet. It handles drop shadow, inner shadow, background (gradient/opacity), border, and border radius. It’s an extremely intuitive and nicely styled tool for anyone who works in Photoshop on a regular basis.
  7. 7. RESIZEMYBROWSER  If you’re working with a responsive or liquid layout, testing is absolutely essential. While resizeMyBrowser can’t replicate smart phones and tablets, it can get you on the right path by taking one of your most valuable tools – your browser – and sizing it to the most common resolutions you’ll be working with. And if the resolution you need isn’t on the list, you can create your own preset. This is a very simple, and very useful tool.
  8. 8. Sencha Touch 2  There's no denying that the mobile/touch device has changed web development for good. It's a broader, more heterogenous world out there and everyone wants a piece of the action. Sencha Touch 2 aims to put that dream within reach of HTML5 developers.
  9. 9. Adobe Edge Inspect  A great little app for mobile developers, formerly known as Adobe Shadow, which cuts a huge amount of hassle from the design process. Just pair your devices (Android and iOS) with your main machine. Then the sites you browse to are echoed direct to every connected device.
  10. 10. Microsoft WebMatrix 2  At one time or another just about everyone who works on the web will have cursed Microsoft. Let's just say they have a few black marks against their name. WebMatrix 2 shows that it doesn't have to be that way. Far from it.  WebMatrix 2 is a great IDE to work with, regardless of the language you prefer or the framework you operate within. It's clean to look at, fast to use, helpful yet unobtrusive. And if you happen to be a .NET devotee, then it's going to make your life a lot easier.
  11. 11. PhoneGap 2.0  Everyone seems to agree that mobile is the new black. And since that's the case it's a major pain in the proverbial that this 'new' platform managed to recreate so many of the problems faced by the desktop: different APIs, languages, browsers, file formats… Thankfully, PhoneGap has gone a long way towards smoothing out those difficulties.
  12. 12. Thank You Data Collect : redstarwebdevelopment.com Data Collect : creativebloq.com Created By Cygnis Media : http://www.cygnismedia.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×