This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.

NEW DEVELOPMENT RESOURCES AND TOOLS

Analyze Your Website Speed and Performance – Sitespeed.io

Sitespeed.io is an open source tool that helps you analyze your website speed and performance based on performance best practices and metrics. It collects data from multiple pages on your website, analyze the pages using the rules and output the result as HTML or JUnit XML.

Browser Automated Testing – Nightwatch.js

Nightwatch.js is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites.

Browser automated testing done easy. Write efficient and straightforward Javascript End-to-End tests in Node.js which run against a Selenium server.

13 Wonderful JavaScript Audio Libraries for Developers

Image Lightbox, Responsive and Touch-friendly

ImageLightbox.js is a minimlistic, responsive and touch-friendly image lightbox implementation.

Make Absolutely Positioned Elements – Tether

Tether is a javascript library for efficiently making an absolutely positioned element stay next to another element on the page. For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.

Tether includes the ability to constrain the element within the viewport, it’s scroll parent, any other element on the page, or a fixed bounding box. When it exceedes those constraints it can be pinned to the edge, flip to the other side of it’s target, or hide itself.

Peer-to-Peer Free Video Conversations – Appear.in

Appear.in aims to make it super-easy to start talking over video. Therefore, it does not require you to register an account or download anything. The link to your room is all you need to connect to those you want to talk to. All you need is yourself, someone to talk to and a supported browser.

Appear.in uses peer-to-peer communication, meaning that the video streams are sent directly between you and the people you are talking to. Nothing is stored on our server and all the communication is encrypted over SSL.

20+ Sites/Resources to Learn Web Design & Development (For Free)

The web design & development education industry has exploded from a small niche to a powerful, continually expanding force. Countless people around the globe are interested in learning about how to design and develop websites, and tons of companies are cropping up promising the ultimate solution. The competition in this field is a great thing for customers. You have more options than ever for learning just about anything you want to know about web technologies.

For those, who wants to learn web design and development, we are sharing following high quality sites and resources. Start learning web design and development today!

Responsive jQuery DateTime Picker Plugin – DateTime Picker

DateTime Picker is a responsive flat design jQuery based datetime picker for web & mobile. Users can change values using +/- buttons or type values directly into the textbox by selecting each value fields.

For web, picker can be binded relative to reference element, were it will appear at the bottom of the element. For mobile, the picker can appear as a dialog box covering entire window.

Zoom In any Element When Resizing and Scrolling – Zoomerang.js

Zoomerang.js is a drop-in library that allows your users to zoom in on almost any element on your existing page. No setup, arbitrary styling. This is largely inspired by Medium’s avatar zoom in effect, with improvements (you can resize / scroll the page when it’s zoomed in and it still works).

Open Source jQuery PHP Ajax Contact Form Templates With Captcha: Formify

Formify is a contribution to lessen the pain of creating contact forms. The collection contains six different forms that are commonly used. These open source contact forms can be customized as well to suit the need for your website/application.

Adoring Typefamily Designed for Large Sizes – Margot

Margot is an adoring type family designed and optimized for the use in large sizes. Capable of bringing a very human feel to a great variety of typographical purposes.

Show Content at the Bottom of Page After Scrolling – Promo Slide

Promo Slide is a jQuery plugin to show content on your site. After scrolling to the bottom of the page, a slide-out panel appears with more content.

The container HTML can be customized. Template placeholders can be used, and then passed in dynamically at the time the plugin is initialized in the DOM.

Animated Goal Progress Bar jQuery Plugin

This plugin allows you to create an animated progress bar using jQuery. Just fill in the required input and the plugin calculates the progress of your goal and animates the bar.

jQuery Floating Social Share Plugin: floatShare

It is a free jQuery plugin that allows your website visitors to share your web content on popular social media platforms with a single- click giving you good coverage and audience on multiple social media platforms. floatShare also gauges popularity of your web content by giving you a summary of total ‘shares’ and ‘likes’.

floatShare is easy to integrate and customize. It comes with three different sizes and styles of social buttons. Built on jQuery, floatShare is compatible with all major web browsers and work with mobile devices as well. The social buttons of floarShare have floating behavior – they float with content as visitors scroll up or down the page. floatShare can be customized with different start and end points.

Social Media Cheat Sheet

Free UX Crash Course – 31 UX Fundamentals

This course isn’t everything you can learn in UX. It’s a quick overview, so you can go from zero-to-hero as quickly as possible. You will get a practical taste of all the big parts of UX, and a sense of where you need to learn more. The order of the free lessons follows a real-life UX process (more or less) so you can apply these ideas as-you-go.

jQuery Sliding Content Bar Plugin: PushUp Content Bar

It is a smart and quick content bar that you can integrate easily in any website or web application. It is integrated seamlessly in your website and can be popped up whenever required. PushUp Content Bar is easy to customize and strong enough to rely upon. You can add your contact details, location map via Google Maps, and a simple contact form that visitors can use to make contact with you.

Try it and tell us how are you going to use PushUp Content Bar is your websites and web applications.

Tutorial: AngularJS Form Validation

This tutorial discusses the ways that Angular helps us do form validations. The author focuses on client side validation and using the built in Angular form properties.

How to Follow the Google Webmaster Guidelines

Free Chrome Exteiosn for Designers – Font Playground

Preview your site with Google web fonts and get the css code.

Free Customer Support, Ticketing Systems, Live Chat & Help Desk Plugins For WordPress

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards and usability. WordPress is one of the most powerful content management system (CMS) system today.

Plugins are tools to extend the functionality of WordPress. The core of WordPress is designed to be lean, to maximize flexibility and minimize code bloat. Plugins offer custom functions and features so that each user can tailor their site to their specific needs.

Do you provide customer support with live chat or ticketing system? Not everyone feels that a customer support plugin is important or even necessary, but its actually benefits your site/blog.

This post has some amazing WordPress plugins for customer support, ticketing systems, live chat and help desk operations.

FREE TEMPLATES AND THEMES

Free & Open Source One Page Template – Juntos

Juntos, Free & Open Source One Page Template for Charities and Association of every nation, size and color.

Juntos is an answer for charities of any size who need clean an elegant and modern design for their website for free.

Roran – Free One Page PSD Website Template

Roran is a clean, flat and professional One Page PSD Template for agencies and creative studios. It can be customized easily to suit your wishes. It is based on a 960px grid system. The PSD is well organized with named layers and groups.

Free HTML jQuery Portfolio Template: Mini HTML vCard

Mni HTML vCard is a free HTML jQuery vCard portfolio template. It is a jQuery powered single-page, mini website that can be used to display personal porfolio for user and show case products for startups.

Spot – Bootstrap 3 Free Template

Spot is flat & handsome template. Designed for freelancers or small agencies, Spot looks awesome in your browser or mobile device. It comes with cool stuff like charts, pricing tables, font awesome 4.0 and more.

Variety – Free PSD Website Template

Variety is a PSD website template suitable for personal web pages. As the name suggests, the theme is aimed to be modifiable.

Free Premium HTML5 Facebook Template: Facebuk

With the emergence of social media the world of marketing is changing rapidly and to keep up business need social media presence. In fact Facebook is the next big marketing space for most companies marketing and you can take your facebook campaign to the next level by using a custom template for your Facebook pages.

With a custom facebook template you can also integrate other social media like twitter etc. Custom templates having compelling reasons to adopt, here we are releasing a professional looking HTML5 facebook template for free and we call it Facebuk.

Jelo Mail App [Free PSD]

DESIGN FREEBIES

Freebie: The Bitcoin Icon Set (100 Icons, SVG & JPG)

A huge Bitcoin icon set for you. The pack contains 100 icons in many varied styles, comes in SVG and JPG formats, and can be freely used in both your personal or commercial projects.

Download Free Background Patterns – The Pattern Library

The Pattern Library is an on going project compiles patterns shared by the most talented designers out there for you to use freely in your designs. I really like the design of the site, which is user-friendly and responsive. You can pick your favorite pattern easily to download as you wish.

UUUU Icon Set

There are 30+ icons in this set, and you are free to use them as you wish, with attribution being the only requirement.

Free Mobile Device Mockups (AI, EPS)

A free collection of popular phones and tablets for product mockups.

Free Font – Asfalto

Free Font – Korneuburg Slab

Free Font for Logos- Blenda Script

Blenda Script is a free experimental font inspired by lobster font, a bold vintage script. can be used for various purposes. Such as news, posters, logos, badges etc.