Friday, October 31, 2014

Free SVG Icons - Six Revisions

Free SVG Icons - Six Revisions


Free SVG Icons

Posted: 31 Oct 2014 03:00 AM PDT

Free SVG icons thumbnail preview

This set of SVG icons has 70 different icons geared towards Web user interfaces.

What is great about using SVG icons is they are lightweight in file size and they can scale without losing resolution-quality. In this context, SVG is great for responsive designs, web apps, websites, blogs, interactive infographics, and other web-based digital products.

Another advantage of SVG icons is they are open source. Simply open the SVG file in a text editor and you can see the code used for generating the graphic. You can even place this code directly into your HTML, which can help improve your Web performance because you reduce the number of external resources you need to load to render the web page.

SVG Icons Preview

Full preview of free SVG icons

Terms of Use

  1. You can use the SVG icons as part of your commercial or personal projects. Examples: Web designs, blogs, mobile apps, infographics, and so forth.
  2. Attribution is not required. But if you want to provide attribution, you can use this HTML:
    <a href="http://sixrevisions.com/freebies/free-svg-icons/">Free SVG Icons</a>
  3. You cannot distribute or sell the source files in this freebie.

Download Free SVG Icons

Related Content

About the Author

Photo of author: Aamir JiwaAamir Jiwa works at Print Express where he manages the design and marketing team on creative projects. He enjoys writing about design trends and displaying this on the company design blog.

The post Free SVG Icons appeared first on Six Revisions.

Wednesday, October 29, 2014

30 Beautiful Ecommerce Product Page Designs - Six Revisions

30 Beautiful Ecommerce Product Page Designs - Six Revisions


30 Beautiful Ecommerce Product Page Designs

Posted: 29 Oct 2014 03:00 AM PDT

For an online store, the design of product pages is important to get right. The product page is the place where a purchase is likely to happen, and so its form and function can dictate the success of an ecommerce site.

For inspiration and ideas, check out these excellent product page designs from a variety of ecommerce sites.

Greats

Product page design: Greats

Jays

Product page design: Jays

United Pixelworkers

Product page design: United Pixelworkers

Master and Dynamic

Product page design: Master and Dynamic

Skinny Ties

Product page design: Skinny Ties

V76

Product page design: V76

Ugmonk

Product page design: Ugmonk

Nixon

Product page design: Nixon

Mammoth & Co.

Product page design: Mammoth & Co.

REBEL8

Product page design: REBEL8

Hommard

Product page design: Hommard

Joined + Jointed

Product page design: Joined + Jointed

Grovemade

Product page design: Grovemade

yurbuds

Product page design: yurbuds

El Recibidor

Product page design: El Recibidor

Kershaw Knives

Product page design: Kershaw Knives

Hard Graft

Product page design: Hard Graft

Locals Apparel

Product page design: Locals Apparel

Best Made Company

Product page design: Best Made Company

Cocones

Product page design: Cocones

Wootten

Product page design: Wootten

Ab Aeterno

Product page design: Ab Aeterno

Functionals

Product page design: Functionals

Boards of Freedom

Product page design: Boards of Freedom

Stall & Dean

Product page design: Stall & Dean

Bagigia

Product page design: Bagigia

Diesel

Product page design: Diesel

van Wright

Product page design: van Wright

Indochino

Product page design: Indochino

Oak Street Bootmakers

Product page design: Oak Street Bootmakers

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He is also a front-end web developer. Follow him on Twitter @sixrevisions.

The post 30 Beautiful Ecommerce Product Page Designs appeared first on Six Revisions.

Monday, October 27, 2014

Google Chrome DevTools Tutorials - Six Revisions

Google Chrome DevTools Tutorials - Six Revisions


Google Chrome DevTools Tutorials

Posted: 27 Oct 2014 03:00 AM PDT

Chrome Developer Tools (also known as DevTools) is an essential component of any front-end developer’s toolkit. Mastering this useful in-browser tool will substantially enhance your coding workflow.

DevTools has a great deal of features, and to take advantage of them, it’s wise to invest some time learning the ins-and-outs of the tool in order to unlock its true potential.

Fortunately, there are many free tutorials, guides, and resources on DevTools.

Whether you’re completely new to DevTools or are already an intermediate user, these tutorials and resources will give you a wealth of insights on this amazingly powerful development tool.

Discover DevTools

Discover DevTools online course

Discover DevTools is a free web-based course at Code School that will introduce you to Chrome Developer Tools. There are seven chapters and 17 videos in this online tutorial/course.

DevTools Tips

DevTools Tips website

This site is a collection of useful Chrome Developer Tools tutorials, tips, and tricks curated by full-stack web developer Jeferson Koslowski.

Official Chrome DevTools Docs

Official Chrome DevTools Docs

For those who haven’t heard of DevTools before, or for developers who want to completely master the fundamentals, the official documentation at the Google Chrome Developer site is an excellent place to start.

Chrome DevTools Cheatsheet

Chrome DevTools Cheatsheet

The Chrome DevTools Cheatsheet is an information-packed one-page resource that’s extremely handy to have around as a reference.

Google Chrome Developer Tools Video Series

This 5-part video playlist from the Google Chrome YouTube channel is a set of short introductory video tutorials about DevTools. The videos were published in 2009-2010 — many aspects of DevTools have changed since then — but they will still provide you with good information about the tool.

Google Chrome Developer Tools: Getting started

Google Chrome Developer Tools: Profiling and optimizing

Google Chrome Developer Tools: Debugging JavaScript

Google Chrome Developer Tools: Inspecting elements and resources

Google Chrome Developer Tools: The timeline panel

Secrets of the Chrome Developer Tools

This 40-minute video tutorial by Patrick Dubroy reveals some lesser-known DevTools features.

Wait, Chrome DevTools Could Do THAT?

This 33-minute video by Google Web performance engineer Ilya Grigorik will give you tips on how to effectively use Chrome Developer Tools to analyze network performance, find memory leaks in your scripts, and much more.

More DevTools Tutorials and Resources

Here’s a list of other DevTools tutorials for accomplishing specific web development tasks:

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s also a front-end web developer. Follow him on Twitter: @sixrevisions.

The post Google Chrome DevTools Tutorials appeared first on Six Revisions.