<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/carbonads/pen/Kqxxjw?limit=all&page=14&q=code+html" />
<style class="cp-pen-styles">.bsa-cpc #_default_ {
position: relative;
margin-bottom: 1em;
padding: .5em 1em;
background-color: #343434;
font-size: 14px;
line-height: 1.5;
}
.bsa-cpc .default-ad {
display: none;
}
.bsa-cpc ._default_ {
display: inline;
overflow: hidden;
line-height: 1.5;
}
.bsa-cpc ._default_ > * {
vertical-align: middle;
}
.bsa-cpc a {
border: 0 !important;
color: #fff !important;
text-decoration: none;
transition: color .15s ease-in-out;
}
.bsa-cpc a:hover {
color: inherit;
color: #16af59 !important;
}
.bsa-cpc .default-image {
display: none;
}
.bsa-cpc .default-title:after {
content: " — ";
}
.bsa-cpc .default-title,
.bsa-cpc .default-description {
display: inline;
}
.bsa-cpc .default-title {
position: relative;
margin-left: 8px;
}
.bsa-cpc .default-title:before {
position: relative;
top: -1px;
left: -8px;
padding: 1px 5px 0;
border: solid 1px #16af59;
border-radius: 3px;
color: #16af59;
content: "Sponsor";
text-transform: uppercase;
font-weight: 600;
font-size: 10px;
line-height: 1 !important;
}
</style></head><body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- X-CSRF token for authenticating api calls -->
<meta name="csrf-token" content="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<title>15 Essential Plugins for Visual Studio Code - Tutorialzine</title>
<link rel="alternate" type="application/rss+xml" title="Tutorialzine » Full Feed" href="https://tutorialzine.com/feed" />
<meta property="og:site_name" content="Tutorialzine" />
<meta property="fb:admins" content="1674521632" />
<meta property="fb:app_id" content="225496834623404" />
<link rel="image_src" href="https://tutorialzine.com/media/2017/06/vscode-plugins.png" />
<meta property="og:image" content="https://tutorialzine.com/media/2017/06/vscode-plugins.png" />
<meta name="description" content="A collection of some of the best VSCode extensions available, accompanied by helpful video previews." />
<meta property="og:description" content="A collection of some of the best VSCode extensions available, accompanied by helpful video previews." />
<meta property="og:title" content="15 Essential Plugins for Visual Studio Code" />
<meta property="og:url" content="https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tutorialzine" />
<meta name="twitter:url" content="https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code" />
<meta name="twitter:title" content="15 Essential Plugins for Visual Studio Code" />
<meta name="twitter:description" content="A collection of some of the best VSCode extensions available, accompanied by helpful video previews.">
<meta name="twitter:creator" content="@tutorialzine" />
<meta name="referrer" content="unsafe-url">
<link rel="apple-touch-icon" sizes="180x180" href="https://tutorialzine.com/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://tutorialzine.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://tutorialzine.com/favicon-16x16.png">
<link rel="manifest" href="https://tutorialzine.com/manifest.json">
<link rel="shortcut icon" href="https://tutorialzine.com/favicon.ico">
<link rel="mask-icon" href="https://tutorialzine.com/safari-pinned-tab.svg" color="#1da7da">
<meta name="apple-mobile-web-app-title" content="Tutorialzine">
<meta name="application-name" content="Tutorialzine">
<meta name="theme-color" content="#ffffff">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700,900" rel="stylesheet">
<!-- Styles -->
<link href="https://tutorialzine.com/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://tutorialzine.com/css/highlight.tomorrow.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> -->
<script type="text/javascript">
var the_id = 311;
var the_title = '15 Essential Plugins for Visual Studio Code';
var the_permalink = 'https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code';
</script>
<link href="https://cl.ly/lSsk/tutorialzinecom.css" rel="stylesheet">
</head>
<body>
<div class="page__wrapper page--article-show">
<header class="header--main animate-search no-background-xs">
<div class="container-fluid">
<nav class="nav--main">
<div class="nav__logo">
<a href="https://tutorialzine.com">
Tutorial<span>zine</span>
</a>
</div>
<ul class="nav__items nav__items--right">
<li class="nav__item">
<a href="#search" class="search-trigger icon-magnifier"></a>
</li>
<li id="login" class="nav__item">
<a href="https://tutorialzine.com/login">
Login
</a>
</li>
<li id="register" class="nav__item">
<a href="https://tutorialzine.com/register">
<span class="btn btn-success">Register</span>
</a>
</li>
</ul>
<ul class="nav__items nav__items--left">
<li class="nav__item nav__item--main">
<a href="https://tutorialzine.com/articles" class="articles active">
Articles
</a>
</li>
<li class="nav__item nav__item--main">
<a href="https://tutorialzine.com/forum" class="posts ">
Forum
</a>
</li>
</ul>
</nav>
<!-- .nav--main -->
</div>
<a href="#0" class="nav-trigger icon-menu"></a>
<div id="search" class="main-search">
<div class="container-fluid">
<form id="search-form-top" class="form__search" action="https://tutorialzine.com/search" method="GET">
<input type="search" name="query" placeholder="Search..." value="" autocomplete="off" required>
<!-- <select name="type" type="hidden">
<option value="all" selected>All</option>
</select> -->
</form>
<div class="search-suggestions">
</div>
<a href="#0" class="close text-replace">Close Form</a>
</div>
</div>
<!-- .main-search -->
</header>
<div class="cover-layer"></div>
<!-- cover main content when search form is open -->
<main class="main-content">
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-9 article-content">
<article class="article--big">
<div class="article__image" style="background-image: url(https://tutorialzine.com/media/2017/06/vscode-plugins.png)"></div>
<div class="article__content">
<h1 class="article__title">
15 Essential Plugins for Visual Studio Code
</h1>
<div class="article__header">
<div class="article__date">
<time>
June 27th 2017
</time>
</div>
<div class="divider-dot"></div>
<div class="tags">
<a href="https://tutorialzine.com/tag/resources" class="article-tag resources">
Resources
</a>
</div>
</div>
<div class="article__share">
<a id="share-fb" class="article__share-btns" href="https://www.facebook.com/sharer/sharer.php?u=https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code" data-provider="facebook" title="Share on facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="11.416" height="22" viewBox="0 0 11.416 22" style="width: 8px;">
<path d="M0,11.971V8.042L3.374,8.088V5.13A5.121,5.121,0,0,1,4.761,1.34,5.193,5.193,0,0,1,8.412,0q1.941,0.046,3,.139V3.651l-2.08-.046a2.13,2.13,0,0,0-1.525.508,2.205,2.205,0,0,0-.416,1.433V8.088l3.882-.046-0.508,3.929-3.374-.046V22l-4.021-.046V11.971L0,11.924v0.046Z" style="fill: white;">
</path>
</svg>
</a>
<a id="share-twitter" class="article__share-btns" href="https://twitter.com/share?text=15 Essential Plugins for Visual Studio Code&url=https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code&via=tutorialzine" data-provider="twitter" title="Share on twitter">
<svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg" style="width: 17px;">
<path d="
M 630, 425
A 195, 195 0 0 1 331, 600
A 142, 142 0 0 0 428, 570
A 70, 70 0 0 1 370, 523
A 70, 70 0 0 0 401, 521
A 70, 70 0 0 1 344, 455
A 70, 70 0 0 0 372, 460
A 70, 70 0 0 1 354, 370
A 195, 195 0 0 0 495, 442
A 67, 67 0 0 1 611, 380
A 117, 117 0 0 0 654, 363
A 65, 65 0 0 1 623, 401
A 117, 117 0 0 0 662, 390
A 65, 65 0 0 1 630, 425
Z" style="fill:#ffffff;"></path>
</svg>
</a>
</div>
<div class="article__body">
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('default', 'CVAIKKQM', 'placement:demo', {
target: '.bsa-cpc',
align: 'horizontal',
disable_css: 'true'
});
}
})();
</script>
<p>Visual Studio Code is a free, cross-platform text editor developed by Microsoft. It is quickly becoming a crowd favorite thanks to its excellent performance and the exuberant amount of features it offers.</p>
<p>Just like most IDEs, VSCode has an extension marketplace containing thousands of plugins with varying quality. To help you pick out the ones worth downloading, we made this collection of the extensions we found most useful and fun.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/open-in-browser.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser" target="_blank" rel="noreferrer noopener">Open-In-Browser</a></h2>
<p>VSCode doesn't offer any built-in interface for opening files directly in the browser. This extension adds a <em>Open With Default Browser</em> item to the contextual menu, as well as command palette options for opening in a client of your choice (Firefox, Chrome, IE). </p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/quokka.mp4"></video>
<h2><a href="https://quokkajs.com/" target="_blank" rel="noreferrer noopener">Quokka</a></h2>
<p>Quokka is a debugging tool that gives live feedback on the code you are writing. It shows you previews of the results of functions and calculated values for variables. The extension is easy to configure and works out of the box with JSX or TypeScript projects.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/faker.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker" target="_blank" rel="noreferrer noopener">Faker</a></h2>
<p>Quickly insert placeholder data using the popular <a href="https://github.com/marak/Faker.js/" target="_blank" rel="noreferrer noopener">Faker</a> JavaScript library. You can generate random names, addresses, images, phone numbers, or just paragraphs of classic Lorem Ipsum. Each category has various subcategories so you can make the data fit your needs.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/css-peek.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek" target="_blank" rel="noreferrer noopener">CSS Peek</a></h2>
<p>WIth this extension you can trace the definitions of CSS classes and ids in your stylesheets. When you right click on a selector in your HTML files, choosing the options <em>Go to Definition</em> and <em>Peek definition</em> will send you to the CSS code in which you've styled them.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/html-boilerplate.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate" target="_blank" rel="noreferrer noopener">HTML Boilerplate</a></h2>
<p>The HTML boilerplate extension will save you from having to manually write the <code>head</code> and <code>body</code> tags of a new HTML document. Just type <code>html</code> in an empty file, hit the Tab key, and a clean document structure will be generated. </p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/prettier.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noreferrer noopener">Prettier</a></h2>
<p><a href="https://github.com/prettier/prettier" target="_blank" rel="noreferrer noopener">Prettier</a> is the most popular code formatter in web dev right now. It allows your team's code look the same, no matter who wrote it. This extension makes it possible to automatically apply Prettier and quickly format whole JS and CSS documents. If you also want to throw ESLint in the mix, there is <a href="https://marketplace.visualstudio.com/items?itemName=RobinMalfait.prettier-eslint-vscode" target="_blank" rel="noreferrer noopener">Prettier - Eslint</a>.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/color-info.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=bierner.color-info" target="_blank" rel="noreferrer noopener">Color Info</a></h2>
<p>Small plugin that gives you various information about the colors you've used in your CSS. By hovering on a color you can see a larger preview of how it looks, as well as info about its translation to all formats (hex, rgb, hsl, and cmyk).</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/svgviewer.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer" target="_blank" rel="noreferrer noopener">SVG Viewer</a></h2>
<p>This extension adds a number of utilities for working with SVGs in Visual Studio Code. It makes it possible to render SVG files and see how they look like without having to leave the editor. There are also options for converting to PNG and generating data URI schemes.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/todo-highlight.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight" target="_blank" rel="noreferrer noopener">TODO Highlight</a></h2>
<p>This tool marks all TODO comments in your code, making it easier to track down any unfinished business before pushing to production. By default it looks for TODO and FIXME keywords but you can add your custom expressions as well.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/icon-fonts.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts" target="_blank" rel="noreferrer noopener">Icon Fonts</a></h2>
<p>Tiny snippets for including icon fonts in your project (from a CDN) and then adding the icons themselves. The extension supports over 20 popular icon sets, including Font Awesome, Ionicons, Glyphicons, and Material Design Icons. </p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/minify.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.minify" target="_blank" rel="noreferrer noopener">Minify</a></h2>
<p>Extension for minifying your code. It offers a ton of customization settings and the option to automatically minify on save and export to a .min file. Minify works with JavaScript, CSS, and HTML through <a href="http://lisperator.net/uglifyjs/" target="_blank" rel="noreferrer noopener">uglify-js</a>, <a href="https://github.com/jakubpawlowicz/clean-css" target="_blank" rel="noreferrer noopener">clean-css</a>, and <a href="https://kangax.github.io/html-minifier/" target="_blank" rel="noreferrer noopener">html-minifier</a> respectively.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/change-case.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case" target="_blank" rel="noreferrer noopener">Change Case</a></h2>
<p>VSCode has limited options for transforming text. Out of the box it can only do lowercase and uppercase transforms. This plugin adds a lot more commands for modifying strings, including camelCase, kebab-case, snake_case, CONST_CASE, and others.</p>
<hr>
<p></p>
<video loop="" autoplay="" controls src="https://tutorialzine.com/media/2017/06/regex-previewer.mp4"></video>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=chrmarti.regex" target="_blank" rel="noreferrer noopener">Regex Previewer</a></h2>
<p>Useful tool for live testing your regular expressions. It works by applying the regex pattern over any text file opened to the side, highlighting all the matches. Kinda like <a href="http://regexr.com/" target="_blank" rel="noreferrer noopener">RegExr</a> but right inside your editor!</p>
<hr>
<p>
<a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Languages&sortBy=Downloads" target="_blank" rel="noreferrer noopener"><img src="http://tutorialzine.com/media/2017/06/languages.jpg" alt="languages.jpg"></a>
</p>
<h2><a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Languages&sortBy=Downloads" target="_blank" rel="noreferrer noopener">Language and Framework Packs</a></h2>
<p>VSCode ships with support for a large number of languages. If for some reason your programming language of choice isn't included, you can download an extension pack which will add autocompletion, proper indentation, and other utilities. Some web dev frameworks like <a href="https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native" target="_blank" rel="noreferrer noopener">react native</a> and <a href="https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets" target="_blank" rel="noreferrer noopener">vue</a> also offer language packs.</p>
<hr>
<p>
<a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Downloads" target="_blank" rel="noreferrer noopener"><img src="http://tutorialzine.com/media/2017/06/themes.jpg" alt="themes.jpg"></a>
</p>
<h2><a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Downloads" target="_blank" rel="noreferrer noopener">Themes</a></h2>
<p>Of course, the most important of all extensions are the themes. You'll be looking at your VSCode editor every day, why not make it more beautiful? There are tons of customization plugins that change the color scheme and the icons in the sidebar. Here are some of our favorites:</p>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai" target="_blank" rel="noreferrer noopener">One Monokai</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=whtsky.agila-theme" target="_blank" rel="noreferrer noopener">Aglia</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=azemoh.theme-onedark" target="_blank" rel="noreferrer noopener">One Dark</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" target="_blank" rel="noreferrer noopener">Material Icon</a></li>
</ul>
<div class="webappstudio-animation">
<a href="https://bootstrapstudio.io/"></a>
<div class="limiter">
<h6>Presenting <strong><span>Bootstrap Studio</span></strong></h6>
<p>a revolutionary tool that developers and designers use to create
<br>beautiful interfaces using the Bootstrap Framework.</p>
<a href="#">Learn more</a>
<div class="animation active">
<img src="https://tutorialzine.com/images/webappstudio/animation/browser.svg" class="browser" alt="Web Browser Frame">
<img src="https://tutorialzine.com/images/webappstudio/animation/box.svg" class="box" alt="DevKit Box">
<span class="header-drop"></span>
<span class="body-drop"></span>
<span class="column-drop"></span>
<img src="https://tutorialzine.com/images/webappstudio/animation/cursor.svg" class="cursor" alt="Mouse Cursor" width="32" height="32">
<div class="box-top"></div>
</div>
</div>
</div>
</div>
<div class="article__footer">
<div class="article__share--bottom">
<div class="container-fluid">
<div class="article__share-btns">
<div class="text-center">
<a id="share-fb" href="https://www.facebook.com/sharer/sharer.php?u=https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code" data-provider="facebook" title="Share on facebook">
<i class="icon-social-facebook icon-primary icon-outlined"></i>
</a>
<a id="share-twitter" href="https://twitter.com/share?text=15 Essential Plugins for Visual Studio Code&url=https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code&via=tutorialzine" data-provider="twitter" title="Share on twitter">
<i class="icon-social-twitter icon-primary icon-outlined"></i>
</a>
<a id="share-google" href="https://plus.google.com/share?url=https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code" data-provider="google" title="Share on Google Plus">
<i class="icon-social-google icon-primary icon-outlined"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<div id="article__related-articles">
<h3>Related Articles</h3>
<div class="row no-margin">
<div class="col-sm-4">
<article class="related-article">
<a href="https://tutorialzine.com/2016/10/15-awesome-sublime-text-plugins-for-web-development">
<div class="article__image" style="background-image: url(/media/2016/10/15-awesome-sublime-text-plugins-776.png)">
</div>
<div class="article__content">
<div class="article__description">
<h3>15 Awesome Sublime Text Plugins For Web Development</h3>
</div>
</div>
</a>
<div class="article__footer">
<div class="tags">
<a href="https://tutorialzine.com/tag/resources" class="article-tag resources">
Resources
</a>
</div>
</div>
</article>
</div>
<div class="col-sm-4">
<article class="related-article">
<a href="https://tutorialzine.com/2016/03/15-interesting-frontend-libraries-and-plugins-for-march-2016">
<div class="article__image" style="background-image: url(/media/2016/03/15-interesting-libraries-tools-march-776.png)">
</div>
<div class="article__content">
<div class="article__description">
<h3>15 Interesting Frontend Libraries And Plugins For March 2016</h3>
</div>
</div>
</a>
<div class="article__footer">
<div class="tags">
<a href="https://tutorialzine.com/tag/resources" class="article-tag resources">
Resources
</a>
</div>
</div>
</article>
</div>
<div class="col-sm-4">
<article class="related-article">
<a href="https://tutorialzine.com/2016/06/15-interesting-javascript-and-css-libraries-for-june-2016">
<div class="article__image" style="background-image: url(/media/2016/06/15-interesting-libraries-june-2016-776.jpg)">
</div>
<div class="article__content">
<div class="article__description">
<h3>15 Interesting JavaScript and CSS Libraries for June 2016</h3>
</div>
</div>
</a>
<div class="article__footer">
<div class="tags">
<a href="https://tutorialzine.com/tag/resources" class="article-tag resources">
Resources
</a>
</div>
</div>
</article>
</div>
</div>
<div class="row secondRow no-margin">
<div class="col-sm-4">
<article class="related-article">
<a href="https://tutorialzine.com/2017/05/15-interesting-javascript-and-css-libraries-for-may-2017">
<div class="article__image" style="background-image: url(/media/2017/04/interesting-libraries-may-2017_-776.png)">
</div>
<div class="article__content">
<div class="article__description">
<h3>15 Interesting JavaScript and CSS Libraries for May 2017</h3>
</div>
</div>
</a>
<div class="article__footer">
<div class="tags">
<a href="https://tutorialzine.com/tag/resources" class="article-tag resources">
Resources
</a>
</div>
</div>
</article>
</div>
<div class="col-sm-4">
<article class="related-article">
<a href="https://tutorialzine.com/2015/06/35-handy-chrome-extensions-and-apps-for-developers">
<div class="article__image" style="background-image: url(/media/2015/06/Main-776.jpg)">
</div>
<div class="article__content">
<div class="article__description">
<h3>35 Handy Chrome Extensions And Apps For Developers</h3>
</div>
</div>
</a>
<div class="article__footer">
<div class="tags">
<a href="https://tutorialzine.com/tag/resources" class="article-tag resources">
Resources
</a>
</div>
</div>
</article>
</div>
<div class="col-sm-4">
<article class="related-article">
<a href="https://tutorialzine.com/2017/06/15-interesting-javascript-and-css-libraries-for-june-2017">
<div class="article__image" style="background-image: url(/media/2017/06/interesting-libraries-june-2017-1-776.png)">
</div>
<div class="article__content">
<div class="article__description">
<h3>15 Interesting JavaScript and CSS Libraries for June 2017</h3>
</div>
</div>
</a>
<div class="article__footer">
<div class="tags">
<a href="https://tutorialzine.com/tag/resources" class="article-tag resources">
Resources
</a>
</div>
</div>
</article>
</div>
</div>
</div>
<section id="comments">
<div class="comments__container">
<h3>Comments <span class="comment__count">5</span></h3>
<div class="dropdown dropdown--sort dropdown--sort-comments">
<button class="dropdown-toggle btn btn-link" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
Oldest
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="https://tutorialzine.com/forum/posts/62/comments?sort=oldest">Oldest</a>
</li>
<li>
<a href="https://tutorialzine.com/forum/posts/62/comments?sort=newest">Newest</a>
</li>
<li>
<a href="https://tutorialzine.com/forum/posts/62/comments?sort=best">Best</a>
</li>
</ul>
</div>
<div class="comment__add">
<div class="login-card">
<a href="https://tutorialzine.com/login" class="btn btn-primary btn-login"><span>Log in to comment</span></a>
</div>
</div>
<div class="comments__list-wrapper">
<div id="comment__preview" style="display: none"></div>
<ul class="comments__list">
<li class="comment__list-item">
<article id="comment-134" class="comment__container first">
<div class="comment__user collapse-comment">
<a href="https://tutorialzine.com/@KAKAN" class="image-wrapper">
<div class="comment__user-avatar" style="background-image: url('https://www.gravatar.com/avatar/e82d377df3fe257456d95b3940ec9d06?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')"></div>
</a>
<!-- <div class="comment__user-name"> -->
<div class="user-name--left">
<div class="comment__user-badge">
<a href="https://tutorialzine.com/@KAKAN" class="neon">
KAKAN
</a>
</div>
<time datetime="2017-06-27">
<a href="#comment-134" class="neon">
1 week ago </a>
</time>
</div>
<!-- </div> -->
</div>
<div class="collapsible">
<div class="comment__wrapper">
<div class="comment__right">
<div class="comment__text">
<p>HTML5 Boilerplate to the rescue. I loved all of this. Next time you do so, don't forget to add the Git plugin :)</p>
</div>
<form class="comment__edit hidden" action="https://tutorialzine.com/forum/comments/134" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="_method" value="PUT">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text" name="text">HTML5 Boilerplate to the rescue. I loved all of this. Next time you do so, don't forget to add the Git plugin :)</textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary" value="Update">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
<div class="comment__footer">
<span class="comment__links">
<span class="comment__link">
<a href="#" class="btn-reply">
Reply
</a>
</span>
<span class="divider-dot"></span>
<span class="comment__rating">
<span class="ratings__form ratings__form--votes">
<span class="votes-text">
0
</span>
<button class="votes--up " disabled data-id="134" data-type="comment">
<span class="caret caret-up"></span>
</button>
<button class="votes--down " disabled data-id="134" data-type="comment">
<span class="caret"></span>
</button>
</span>
<div class="has-error">
<div class="help-block" hidden></div>
</div>
</span>
</span>
</div>
<form class="comment__form hidden" action="https://tutorialzine.com/forum/posts/62/comments" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="parent_id" value="134">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text check-login" name="text" placehoder="Add comment" required></textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary add-comment" value="Add reply">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
</div>
</div>
<div class="comment__children">
</div>
</div>
</article>
</li>
<li class="comment__list-item">
<article id="comment-138" class="comment__container first">
<div class="comment__user collapse-comment">
<a href="https://tutorialzine.com/@van-gavin" class="image-wrapper">
<div class="comment__user-avatar" style="background-image: url('https://www.gravatar.com/avatar/fef88977644a32eec1ee41d8b5bd44b8?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')"></div>
</a>
<!-- <div class="comment__user-name"> -->
<div class="user-name--left">
<div class="comment__user-badge">
<a href="https://tutorialzine.com/@van-gavin" class="neon">
Van Gavin
</a>
</div>
<time datetime="2017-06-28">
<a href="#comment-138" class="neon">
1 week ago </a>
</time>
</div>
<!-- </div> -->
</div>
<div class="collapsible">
<div class="comment__wrapper">
<div class="comment__right">
<div class="comment__text">
<p>I highly recommend <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" rel="nofollow noreferrer noopener" target="_blank">this</a> extension for connecting the VSCode debugger with Chrome's devtools.</p>
</div>
<form class="comment__edit hidden" action="https://tutorialzine.com/forum/comments/138" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="_method" value="PUT">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text" name="text">I highly recommend [this](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension for connecting the VSCode debugger with Chrome's devtools.</textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary" value="Update">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
<div class="comment__footer">
<span class="comment__links">
<span class="comment__link">
<a href="#" class="btn-reply">
Reply
</a>
</span>
<span class="divider-dot"></span>
<span class="comment__rating">
<span class="ratings__form ratings__form--votes">
<span class="votes-text">
0
</span>
<button class="votes--up " disabled data-id="138" data-type="comment">
<span class="caret caret-up"></span>
</button>
<button class="votes--down " disabled data-id="138" data-type="comment">
<span class="caret"></span>
</button>
</span>
<div class="has-error">
<div class="help-block" hidden></div>
</div>
</span>
</span>
</div>
<form class="comment__form hidden" action="https://tutorialzine.com/forum/posts/62/comments" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="parent_id" value="138">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text check-login" name="text" placehoder="Add comment" required></textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary add-comment" value="Add reply">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
</div>
</div>
<div class="comment__children">
</div>
</div>
</article>
</li>
<li class="comment__list-item">
<article id="comment-147" class="comment__container first">
<div class="comment__user collapse-comment">
<a href="https://tutorialzine.com/@SanketSingh" class="image-wrapper">
<div class="comment__user-avatar" style="background-image: url('https://www.gravatar.com/avatar/b6315522d8a8d85091fbcd9f82ddbdd9?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')"></div>
</a>
<!-- <div class="comment__user-name"> -->
<div class="user-name--left">
<div class="comment__user-badge">
<a href="https://tutorialzine.com/@SanketSingh" class="neon">
sanket singh
</a>
</div>
<time datetime="2017-06-29">
<a href="#comment-147" class="neon">
1 week ago </a>
</time>
</div>
<!-- </div> -->
</div>
<div class="collapsible">
<div class="comment__wrapper">
<div class="comment__right">
<div class="comment__text">
<p>Sorry members but I feel webstorm can perform better that Visual Studio ...</p>
</div>
<form class="comment__edit hidden" action="https://tutorialzine.com/forum/comments/147" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="_method" value="PUT">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text" name="text">Sorry members but I feel webstorm can perform better that Visual Studio ...</textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary" value="Update">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
<div class="comment__footer">
<span class="comment__links">
<span class="comment__link">
<a href="#" class="btn-reply">
Reply
</a>
</span>
<span class="divider-dot"></span>
<span class="comment__rating">
<span class="ratings__form ratings__form--votes">
<span class="votes-text">
0
</span>
<button class="votes--up " disabled data-id="147" data-type="comment">
<span class="caret caret-up"></span>
</button>
<button class="votes--down " disabled data-id="147" data-type="comment">
<span class="caret"></span>
</button>
</span>
<div class="has-error">
<div class="help-block" hidden></div>
</div>
</span>
</span>
</div>
<form class="comment__form hidden" action="https://tutorialzine.com/forum/posts/62/comments" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="parent_id" value="147">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text check-login" name="text" placehoder="Add comment" required></textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary add-comment" value="Add reply">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
</div>
</div>
<div class="comment__children">
<li class="comment__list-item">
<article id="comment-152" class="comment__container ">
<div class="comment__user collapse-comment">
<a href="https://tutorialzine.com/@KAKAN" class="image-wrapper">
<div class="comment__user-avatar" style="background-image: url('https://www.gravatar.com/avatar/e82d377df3fe257456d95b3940ec9d06?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')"></div>
</a>
<!-- <div class="comment__user-name"> -->
<div class="user-name--left">
<div class="comment__user-badge">
<a href="https://tutorialzine.com/@KAKAN" class="neon">
KAKAN
</a>
</div>
<time datetime="2017-07-01">
<a href="#comment-152" class="neon">
6 days ago </a>
</time>
</div>
<!-- </div> -->
</div>
<div class="collapsible">
<div class="comment__wrapper">
<div class="comment__right">
<div class="comment__text">
<p>It isn't about that, though. It's for existing VS Code users.</p>
</div>
<form class="comment__edit hidden" action="https://tutorialzine.com/forum/comments/152" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="_method" value="PUT">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text" name="text">It isn't about that, though. It's for existing VS Code users.</textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary" value="Update">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
<div class="comment__footer">
<span class="comment__links">
<span class="comment__link">
<a href="#" class="btn-reply">
Reply
</a>
</span>
<span class="divider-dot"></span>
<span class="comment__rating">
<span class="ratings__form ratings__form--votes">
<span class="votes-text">
0
</span>
<button class="votes--up " disabled data-id="152" data-type="comment">
<span class="caret caret-up"></span>
</button>
<button class="votes--down " disabled data-id="152" data-type="comment">
<span class="caret"></span>
</button>
</span>
<div class="has-error">
<div class="help-block" hidden></div>
</div>
</span>
</span>
</div>
<form class="comment__form hidden" action="https://tutorialzine.com/forum/posts/62/comments" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="parent_id" value="152">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text check-login" name="text" placehoder="Add comment" required></textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary add-comment" value="Add reply">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
</div>
</div>
<div class="comment__children">
</div>
</div>
</article>
</li>
</div>
</div>
</article>
</li>
<li class="comment__list-item">
<article id="comment-178" class="comment__container first">
<div class="comment__user collapse-comment">
<a href="https://tutorialzine.com/@Gregor" class="image-wrapper">
<div class="comment__user-avatar" style="background-image: url('https://www.gravatar.com/avatar/f414a89e2a75fcf81035aa0c961d4cb2?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')"></div>
</a>
<!-- <div class="comment__user-name"> -->
<div class="user-name--left">
<div class="comment__user-badge">
<a href="https://tutorialzine.com/@Gregor" class="neon">
Gregor Biswanger
</a>
</div>
<time datetime="2017-07-06">
<a href="#comment-178" class="neon">
19 hours ago </a>
</time>
</div>
<!-- </div> -->
</div>
<div class="collapsible">
<div class="comment__wrapper">
<div class="comment__right">
<div class="comment__text">
<p>Try my VSCode Extension json2ts. It convert a JSON from clipboard to TypeScript interfaces:
<br><a href="https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts" rel="nofollow noreferrer noopener" target="_blank">https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts</a></p>
</div>
<form class="comment__edit hidden" action="https://tutorialzine.com/forum/comments/178" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="_method" value="PUT">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text" name="text">Try my VSCode Extension json2ts. It convert a JSON from clipboard to TypeScript interfaces: https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
</textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary" value="Update">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
<div class="comment__footer">
<span class="comment__links">
<span class="comment__link">
<a href="#" class="btn-reply">
Reply
</a>
</span>
<span class="divider-dot"></span>
<span class="comment__rating">
<span class="ratings__form ratings__form--votes">
<span class="votes-text">
0
</span>
<button class="votes--up " disabled data-id="178" data-type="comment">
<span class="caret caret-up"></span>
</button>
<button class="votes--down " disabled data-id="178" data-type="comment">
<span class="caret"></span>
</button>
</span>
<div class="has-error">
<div class="help-block" hidden></div>
</div>
</span>
</span>
</div>
<form class="comment__form hidden" action="https://tutorialzine.com/forum/posts/62/comments" method="POST">
<input type="hidden" name="_token" value="nRhMRi78My0xRi9QUMfoaD1ilbiavB7aYfBPJu7G">
<input type="hidden" name="parent_id" value="178">
<div class="form-group">
<textarea type="text" class="form-control simplemde-text check-login" name="text" placehoder="Add comment" required></textarea>
</div>
<div class="form-group inside">
<input type="submit" class="btn btn-primary add-comment" value="Add reply">
<button class="btn btn-default btn-cancel"><span>Cancel</span></button>
</div>
</form>
</div>
</div>
<div class="comment__children">
</div>
</div>
</article>
</li>
</ul>
</div>
<div class="comments--legacy">
</div>
</div>
</section>
</div>
<aside class="col-md-3 hidden-sm hidden-xs">
<div class="article__author">
<div class="user">
<div class="profile__user-avatar" style="background-image: url('https://www.gravatar.com/avatar/f1900da4c9d316bf2048634bb717ed38?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')"></div>
<div class="profile__info">
<div class="profile__name">
<a href="https://tutorialzine.com/@danny">
Danny Markov
</a>
</div>
<div class="badges">
<span class="badge admin-badge" data-type="admin"></span>
</div>
<!-- <div class="profile__karma" title="Karma: 62">62</div> -->
</div>
<div class="profile__description">
<p>Danny is Tutorialzine's Editor in Chief. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.</p>
</div>
<!--'data-hide=meta data-default=#default-links'-->
<ul class="profile__links" style="">
<li class="profile__link-item change-github" data-change="github" style="display: none;" data-modify=href>
<a href="#" target="_blank" rel="nofollow noreferrer noopener" title="Github URL">
<span class="link__icon link__icon--github"></span>
<div class="change-github" data-change="github">
</div>
</a>
</li>
<li class="profile__link-item change-twitter" data-change="twitter" style="display: none;" data-modify=href>
<a href="#" target="_blank" rel="nofollow noreferrer noopener" title="Twitter URL">
<span class="link__icon link__icon--twitter"></span>
<div class="change-twitter" data-change="twitter">
</div>
</a>
</li>
<li class="profile__link-item change-website" data-change="website" style="display: none;" data-modify=href>
<a href="#" target="_blank" rel="nofollow noreferrer noopener" title="Website URL">
<span class="link__icon link__icon--website"></span>
<div class="change-website" data-change="website">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="recruitment-card">
<p><b>Tutorialzine</b> is a community
<br>of talented developers who
<br>learn together.</p>
<a href="https://tutorialzine.com/register" class="btn btn-primary">Sign up for Free.</a>
</div>
<div class="adsbygoogle">
<div class="ad-container big-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Tutorialzine Intro Text Ad -->
<ins class="adsbygoogle" style="display:block;width:300px;height:250px;overflow:hidden;" data-ad-client="ca-pub-4243460155472587" data-ad-slot="9761819353"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="row">
<div class="section sticky-content">
<div class="tabs__container latest-articles">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#articles" aria-controls="articles" role="tab" data-toggle="tab">Articles</a>
</li>
<li role="presentation">
<a href="#freebies" aria-controls="freebies" role="tab" data-toggle="tab">Freebies</a>
</li>
<li role="presentation">
<a href="#challenges" aria-controls="challenges" role="tab" data-toggle="tab">Challenges</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="articles">
<ul class="list-group">
<li>
<a href="https://tutorialzine.com/2017/06/15-essential-plugins-for-visual-studio-code" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2017/06/vscode-plugins-200.png)">
</div>
<!-- <img src="/media/2017/06/vscode-plugins-200.png" alt="" /> -->
</div>
<div class="list__right">
<h4>15 Essential Plugins for Visual Studio Code</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2017/06/getting-started-with-web-assembly" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2017/06/getting-started-with-wasm-1-200.png)">
</div>
<!-- <img src="/media/2017/06/getting-started-with-wasm-1-200.png" alt="" /> -->
</div>
<div class="list__right">
<h4>Getting Started With WebAssembly</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2017/06/15-interesting-javascript-and-css-libraries-for-june-2017" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2017/06/interesting-libraries-june-2017-1-200.png)">
</div>
<!-- <img src="/media/2017/06/interesting-libraries-june-2017-1-200.png" alt="" /> -->
</div>
<div class="list__right">
<h4>15 Interesting JavaScript and CSS Libraries for June 2017</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2017/05/quick-tip-make-indexed-db-a-breeze-with-local-forage" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2017/05/quick-tip-localforage-1-200.png)">
</div>
<!-- <img src="/media/2017/05/quick-tip-localforage-1-200.png" alt="" /> -->
</div>
<div class="list__right">
<h4>Quick Tip: Make IndexedDB a Breeze With LocalForage</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2017/05/20-excellent-resources-for-learning-kotlin" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2017/05/20-kotlin-resources-200.png)">
</div>
<!-- <img src="/media/2017/05/20-kotlin-resources-200.png" alt="" /> -->
</div>
<div class="list__right">
<h4>20 Excellent Resources for Learning Kotlin</h4>
</div>
</a>
</li>
</ul>
<a href="https://tutorialzine.com/articles" class="btn btn-xs btn-primary btn-outline">
See all articles
</a>
</div>
<div role="tabpanel" class="tab-pane" id="freebies">
<ul class="list-group">
<li>
<a href="https://tutorialzine.com/2017/05/5-beautiful-image-effects-with-css" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2017/05/5-beautiful-image-effects-with-css-200.jpg)">
</div>
<!-- <img src="/media/2017/05/5-beautiful-image-effects-with-css-200.jpg" alt="" /> -->
</div>
<div class="list__right">
<h4>5 Beautiful Image Effects With CSS Shapes and Filters</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2017/02/freebie-4-bootstrap-galleries" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2017/02/freebie-4-bootstrap-gallery-templates-200.jpg)">
</div>
<!-- <img src="/media/2017/02/freebie-4-bootstrap-gallery-templates-200.jpg" alt="" /> -->
</div>
<div class="list__right">
<h4>Freebie: 4 Bootstrap Gallery Templates</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2016/11/freebie-3-elegant-bootstrap-forms" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2016/11/freebie-3-elegant-bootstrap-footers-200.jpg)">
</div>
<!-- <img src="/media/2016/11/freebie-3-elegant-bootstrap-footers-200.jpg" alt="" /> -->
</div>
<div class="list__right">
<h4>Freebie: 3 Elegant Bootstrap Forms</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2016/10/freebie-5-fantastic-bootstrap-footers" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2016/10/5-freebie-fantastic-footers-200.jpg)">
</div>
<!-- <img src="/media/2016/10/5-freebie-fantastic-footers-200.jpg" alt="" /> -->
</div>
<div class="list__right">
<h4>Freebie: 5 Fantastic Bootstrap Footers</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2016/09/freebie-5-beautiful-bootstrap-headers" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2016/09/5-freebie-beautiful-headers-200.jpg)">
</div>
<!-- <img src="/media/2016/09/5-freebie-beautiful-headers-200.jpg" alt="" /> -->
</div>
<div class="list__right">
<h4>Freebie: 5 Beautiful Bootstrap Headers</h4>
</div>
</a>
</li>
</ul>
<a href="https://tutorialzine.com/tag/freebie" class="btn btn-xs btn-primary btn-outline">
See all freebies
</a>
</div>
<div role="tabpanel" class="tab-pane" id="challenges">
<ul class="list-group">
<li>
<a href="https://tutorialzine.com/2015/11/think-you-know-es6-prove-it" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2015/11/ES6-quiz-200.png)">
</div>
<!-- <img src="/media/2015/11/ES6-quiz-200.png" alt="" /> -->
</div>
<div class="list__right">
<h4>Think You Know ES6? Prove it!</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2014/08/what-does-this-function-do" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2014/08/what-does-this-function-do-200.png)">
</div>
<!-- <img src="/media/2014/08/what-does-this-function-do-200.png" alt="" /> -->
</div>
<div class="list__right">
<h4>JavaScript Quiz: What does this function do?</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2014/06/guess-the-programming-language" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2014/06/guess-the-programming-language-200.jpg)">
</div>
<!-- <img src="/media/2014/06/guess-the-programming-language-200.jpg" alt="" /> -->
</div>
<div class="list__right">
<h4>Guess the Programming Language</h4>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/2014/05/javascript-challenge-make-me-blue" class="list-group-item">
<div class="list__left image-wrapper">
<div class="article__image" style="background-image: url(/media/2014/05/make-me-blue-200.jpg)">
</div>
<!-- <img src="/media/2014/05/make-me-blue-200.jpg" alt="" /> -->
</div>
<div class="list__right">
<h4>JavaScript Challenge: Make Me Blue!</h4>
</div>
</a>
</li>
</ul>
<a href="https://tutorialzine.com/tag/challenge" class="btn btn-xs btn-primary btn-outline">
See all challenges
</a>
</div>
</div>
</div>
<div class="top-posts">
<div class="section__title">
<h3>Top Discussions</h3>
</div>
<ul class="list-group posts">
<li>
<a href="https://tutorialzine.com/forum/51/javascript-wordpress-like-cms" class="list-group-item">
<div class="list__left">
<div class="post__author" style="background-image: url('https://www.gravatar.com/avatar/51284c791d8b723b120ce57e679edd21?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')">
</div>
</div>
<div class="list__right">
<div class="post__name">
<h4 style="display: inline">JavaScript WordPress-like CMS</h4>
</div>
<div class="post__footer">
<time class="article__date" datetime="2017-06-20">
2 weeks ago </time>
<i class="icon-bubbles" aria-hidden="true"></i>
<span>1</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/forum/44/anyone-know-of-a-good-react-starter-kit" class="list-group-item">
<div class="list__left">
<div class="post__author" style="background-image: url('https://www.gravatar.com/avatar/b8960c2765ee8480f03802a287786b74?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')">
</div>
</div>
<div class="list__right">
<div class="post__name">
<h4 style="display: inline">Anyone know of a good react starter kit?</h4>
</div>
<div class="post__footer">
<time class="article__date" datetime="2017-06-13">
3 weeks ago </time>
<i class="icon-bubbles" aria-hidden="true"></i>
<span>3</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/forum/32/introduce-yourself" class="list-group-item">
<div class="list__left">
<div class="post__author" style="background-image: url('https://www.gravatar.com/avatar/6ce343a96a0245f2fcbcd65dfcc22fb2?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')">
</div>
</div>
<div class="list__right">
<div class="post__name">
<h4 style="display: inline">Introduce Yourself</h4>
</div>
<div class="post__footer">
<time class="article__date" datetime="2017-06-05">
1 month ago </time>
<i class="icon-bubbles" aria-hidden="true"></i>
<span>136</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/forum/53/html-email-2-coulmn-layout" class="list-group-item">
<div class="list__left">
<div class="post__author" style="background-image: url('https://www.gravatar.com/avatar/fa8a1939806a5c7f45ec705e99d79191?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')">
</div>
</div>
<div class="list__right">
<div class="post__name">
<h4 style="display: inline">HTML email 2-coulmn layout</h4>
</div>
<div class="post__footer">
<time class="article__date" datetime="2017-06-20">
2 weeks ago </time>
<i class="icon-bubbles" aria-hidden="true"></i>
<span>3</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/forum/91/which-is-your-favorite-code-editor" class="list-group-item">
<div class="list__left">
<div class="post__author" style="background-image: url('https://www.gravatar.com/avatar/fa8a1939806a5c7f45ec705e99d79191?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')">
</div>
</div>
<div class="list__right">
<div class="post__name">
<h4 style="display: inline">Which is your favorite code editor?</h4>
</div>
<div class="post__footer">
<time class="article__date" datetime="2017-07-06">
1 day ago </time>
<i class="icon-bubbles" aria-hidden="true"></i>
<span>4</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://tutorialzine.com/forum/43/jquery-is-dead-what-do-you-use-for-simple-web-apps-these-days" class="list-group-item">
<div class="list__left">
<div class="post__author" style="background-image: url('https://www.gravatar.com/avatar/7b79b89dcd7f6a917e4118631f4c8fcb?s=200&d=https%3A%2F%2Ftutorialzine.com%2Fimages%2Fdefault-user-icon-profile.png')">
</div>
</div>
<div class="list__right">
<div class="post__name">
<h4 style="display: inline">jQuery is dead. What do you use for simple web apps these days?</h4>
</div>
<div class="post__footer">
<time class="article__date" datetime="2017-06-13">
3 weeks ago </time>
<i class="icon-bubbles" aria-hidden="true"></i>
<span>6</span>
</div>
</div>
</a>
</li>
</ul>
<a href="https://tutorialzine.com/forum" class="btn btn-xs btn-primary btn-outline">
See all discussions
</a>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</main>
<footer>
<h3>A community that learns together.</h3>
<ul class="list-inline">
<li><a href="https://tutorialzine.com/license" class="neon">Article License</a></li>
<li><a href="https://tutorialzine.com/privacy" class="neon">Privacy Policy</a></li>
<li><a href="https://tutorialzine.com/contact" class="neon">Contact Form</a></li>
<li><a href="https://tutorialzine.com/books/jquery-trickshots" class="neon">The Book</a></li>
</ul>
<p class="copyright">Copyright © 2017 <a href="http://zine.bg/" target="_blank">Zine EOOD</a>.
<span class="second-line">All Rights Reserved.</span>
</p>
<ul class="list-inline share-buttons">
<li>
<a href="https://www.facebook.com/Tutorialzine" data-provider="facebook" title="Tutorialzine on Facebook">
<i class="icon-social-facebook icon-primary icon-outlined"></i>
</a>
</li>
<li>
<a href="https://twitter.com/Tutorialzine" data-provider="twitter" title="Tutorialzine on Twitter">
<i class="icon-social-twitter icon-primary icon-outlined"></i>
</a>
</li>
<li>
<a href="https://plus.google.com/102299652175684141333" data-provider="google" title="Tutorialzine on Google Plus">
<i class="icon-social-google icon-primary icon-outlined"></i>
</a>
</li>
</ul>
</footer>
<div class="modal fade" id="unhandled-error" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h3>Oops! Something went wrong :( Try again...</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-centered" data-dismiss="modal"><span>OK</span></button>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://d.pr/f/EF5GdU+"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#share-twitter, #share-fb, #share-google').click(function(e) {
e.preventDefault();
var url = this.href;
var title = 'Share on ' + $(this).data('provider');
window.open(url, title, getOptions());
});
function getOptions() {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
return opts;
}
});
</script>
</body>
</html>
</body></html>
