All posts tagged “Tutorials”

How To Use Grunt To Automate Your Workflow [Tutorials]

I’m a huge advocate of automation because it makes life that much simpler. Why spend time on menial, monotonous tasks that suck your life-force right out when you have a computer to do things for you? This is especially true for web development.

automate workflow with grunt

Many development tasks can be a chore. While developing you may want to compile code, when pushing a development version you might concatenate and minify files, remove development only resources, and so on. Even relatively uncomplicated ones like deleting a bunch of files, or renaming folders can take up a large chunk of our time.

In this article I’ll show you how you can make your life easier by leveraging the excellent functionality offered by Grunt, a Javascript task runner. I’ll guide you through the whole process so no worries even if you’re not a Javascript wizard!

More on Hongkiat.com:

Installing Grunt

Installing Grunt is pretty easy because it uses the node package manager. This means that you may also have to install Node itself. Open a terminal or a command prompt (I’ll be calling this terminal from now on) and enter nmp -v.

If you see a version number you have npm installed, if you see a "command not found" error, you’ll have to install it by going to the node downloads page and selecting the version you need.

Once Node is installed, getting Grunt is a matter of a single command issued in the terminal:

npm install -g grunt-cli

Basic Usage

You will be using Grunt on a project-to-project basis since each project will have different requirements. Let’s start a project now by creating a folder and navigating to it via our terminal as well.

Two files make up the heart of Grunt: package.json and Gruntfile.js. The package file defines all the third-party dependencies your automation will use, the Gruntfile lets you control how exactly these are used. Let’s create a bare-bones package file now with the following content:

{ "name": "test-project", "version": "1.0", "devDependencies": { "grunt": "~0.4.5", } }

The name and version is up to you, the dependencies must contain all packages you are using. We’re not doing anything at the moment so we’ll just make sure Grunt itself is added as a dependency.

You may be asking yourself what that squiggly line (~) called a tilde is doing there.

Versions can be required using the rules from the semantic versioner for npm. In a nutshell:

  • You specify an exact version like 4.5.2
  • You can use greater than/less than to indicate minimum or maximum version such as >4.0.3
  • Using the tilde specifies a version block. Using ~1.2 is considered to be 1.2.x, any version above 1.2.0 but below 1.3

A lot more ways of specifying versions is available but this is enough for most needs. The next step is to create a Gruntfile which will perform our automations.

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); grunt.registerTask('default', [] ); }; 

This is basically the skeleton for a Gruntfile; there are two places of interest. One location is inside the initConfig() function. This is where all your project configuration goes. This will include things like handling LESS/SASS compiling, minifying scripts and so on.

The second location is below that function where you specify tasks. You can see one task specified named “default”. It is empty at the moment so it does nothing, but we’ll expand on that later. Tasks essentially queue up bits and pieces from our project configuration and execute them.

For example, a task named “scripts” may concatenate all our scripts, then minify the resulting file and then move it to its final location. These three actions are all defined in the project configuration but are “pulled together” by the task. If this isn’t clear just yet don’t worry, I’ll be showing you how this is done.

Our First Task

Let’s create a task which minifies a single javascript file for us.

There are four things we need to do any time we want to add a new task:

  • Install a plugin if necessary
  • Require it in the Gruntfile
  • Write a task
  • Add it to a task group if needed

(1) Find And Install Plugin

The easiest way to find the plugin you need is to type something like this into Google: “minify javascript grunt plugin”. The first result should lead you to the grunt-contrib-uglify plugin which is just what we need.

The Github page tells you all you need to know. Installation is a single line in the terminal, here’s what you need to use:

 npm install grunt-contrib-uglify --save-dev 

You may need to run this with admin priviledges. If you get something like npm ERR! Please try running this command again as root/Administrator. along the way just type sudo before the command and enter your password when prompted:

 sudo npm install grunt-contrib-uglify --save-dev 

This command actually parses your package.json file and adds it as a dependancy there, you will not need to do that manually.

(2) Require In Gruntfile

The next step is to add in your Gruntfile as a requirement. I like to add plugins at the top of the file, here’s my complete Gruntfile after adding grunt.loadNpmTasks('grunt-contrib-uglify');.

 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); grunt.registerTask('default', [] ); }; 

(3) Create a task for minifying scripts

As we discussed, this should be done within the initConfig() function. The Github page for the plugin (and most other plugins) gives you plenty of information and examples. Here’s what I used in my test project.

 uglify: { build: { src: 'js/scripts.js', dest: 'js/scripts.min.js' } } 

This is pretty straightforward, I specified the scripts.js file in my project’s js directory and the destination for the minified file. There are many ways to specify source files, we’ll take a look at that later.

For now, let’s take a look at the complete Gruntfile after this has been added, to make sure you know how things fit together.

 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { src: 'scripts.js', dest: 'scripts.min.js' } } }); grunt.registerTask('default', [] ); }; 

(4) Add this configuration to a task group

Right now you could go to your terminal and type grunt uglify but we’ll need task groups to run multiple tasks later on. We have the default task empty, just waiting for something to be added so let’s modify it to the following:

 grunt.registerTask('default', ['uglify'] ); 

At this stage your should be able to go to the terminal, type grunt and see the minification take place. Don’t forget to create a scripts.js file of course!

That didn’t take a lot of time to set up did it? Even if you’re new to all this and it took you some time to work through the steps, the time it saves will surpass time spent on it within a few uses.

Concatenating Files

Let’s look at concatenating files and learn how to specify multiple files as a target along the way.

Concatenation is the process of combining the contents of multiple files into a single file. We’ll need the grunt-contrib-concat plugin. Let’s work through the steps:

To install the plugin use npm install grunt-contrib-concat --save-dev in the terminal. Once done, make sure to add it to your Gruntfile just like before using grunt.loadNpmTasks('grunt-contrib-concat');.

Next up is the configuration. Let’s combine three specific files, the syntax will be familiar.

 concat: { dist: { src: ['dev/js/header.js', 'dev/js/myplugin.js', 'dev/js/footer.js'], dest: 'js/scripts.js', }, }, 

The code above takes the three files given as the source and combines them into the file given as the destination.

This is already pretty powerful but what if a new file is added? Do we need to come back here all the time? Of course not, we can specify a whole folder of files to concatenate.

 concat: { dist: { src: 'dev/js/*.js''], dest: 'js/scripts.js', }, }, 

Now, any javascript file within the dev/js folder will be merged into one big file: js/scripts.js, much better!

Now it’s time to create a task so we can actually concatenate some files.

 grunt.registerTask('mergejs', ['concat'] ); 

This is not the default task anymore so we’ll need to type its name in the terminal when we issue the grunt command.

 grunt mergejs 

Automating Our Automation

We’ve already made a lot of progress but there’s more! For now, when you want to concatenate or minify you need to go to the terminal and type the appropriate command. It’s high time we take a look at the watch command which will do this for us. We’ll also learn how to execute mulitple tasks at once, along the way.

To get going we’ll need to grab grunt-contrib-watch. I’m sure that you can install it and add it to the Gruntfile on yuor own by now, so I’ll start by showing you what I use in my test project.

 watch: { scripts: { files: ['dev/js/*.js'], tasks: ['concat', 'uglify'], }, } 

I named a set of files to watch “scripts”, just so I know what it does. Within this object I have specified files to watch and tasks to run. In the previous concatenation example we pulled together all the files in the dev/js directory.

In the minification example we minified this file. It makes sense to watch the dev/js folder for changes and run these tasks whenever there are any.

As you can see, multiple tasks can be called easily by separating them with commas. They will be performed in sequence, first the concatenation, then the minification in this case. This can also be done with task groups, which is kind of why they exist.

We can now modify our default task:

 grunt.registerTask('default', ['concat', 'uglify'] ); 

Now we have two choices. Whenever you want to concatenate and minify your scripts you can switch to the terminal and type grunt. You can also use the watch command to initiate the watching of your files: grunt watch.

It will sit there, waiting for you to modify these files. Once you do, it will perform all tasks assigned to it, go ahead, give it a try.

That’s much better, no input needed from us. You can now work away with your files and everything will be nicely done for you.

Overview

With that rudimentary knowledge of how plugins can be installed and used and how the watch command works, you are all set to become an automation addict yourself. There is a lot more to Grunt than what we discussed but nothing you couldn’t handle on your own.

Using commands for compiling SASS, optimizing images, autoprefixing, and more is just a matter of following the steps we discussed and reading the syntax the plugin requires.

If you know of some particularly great uses for Grunt please let us know in the comments, we’re always interested to hear how you use tools like Grunt!





hongkiat.com

36 Photoshop Tutorials For iPhone App UI Design

Are you looking for some easy to follow and step by step tutorials on iPhone app UI design? If yes, then here you go. In this compilation, we have put together 36 Adobe Photoshop tutorials for iPhone app UI designs for you. Today, mobile apps and mobile app designing are the hottest topics. Everyone seems obsessed with the mobile app UI designing.

So, take a look at this collection and grab some amazing techniques to make your iPhone app UI designing easier for you. Scroll through our wonderful collection and be inspired to create your own artworks, as well. Do let us know what you think about this compilation. Feel free to share your opinions and comments with us via comment section below. Enjoy!

Create a Mobile Downloader App Interface in Photoshop

In this tutorial, I will show you how to create a downloader app design for an iPhone, in Photoshop. Once completed, you will have a good understanding of how to create modern interface elements, as well as, charts and graphs in Photoshop. Let’s get started!

Create a Realistic iPhone 5 Mockup in Photoshop

In this tutorial, I’ll show you how to create a realistic iPhone 5 mockup in Photoshop. We’ll use various shape tools, filters, and different layer styling techniques to achieve the final result. Hopefully you will learn some useful tips along the way. So, let’s get started.

How to Design an iOS 7 Email App in Photoshop

In this tutorial, I will show you how to create a flat and modern, Gmail-inspired, iOS7 email app in Photoshop. We will begin by showing you how to sketch out your ideas, then we will see how to create your design in Photoshop, and finally, how to incorporate your design into an iPhone mockup. Let’s get started!

Create a Clean iPad Interface in Photoshop

In this tutorial, we will demonstrate how to create a clean iPad interface using Photoshop’s powerful toolbox. Let’s get started!

How to Design an iPhone Music Player App Interface With Photoshop CS6

In this tutorial, we will show you how to use these new features to create an iPhone music player app interface in both the original iPhone resolution, as well as retina without having to repeat the same process for both designs. Let’s get started!

How to Design an iPhone App in Photoshop

In this tutorial, we will use Adobe Photoshop, to design a simple 3-page directory listing app for iPhone. This article will guide you through the steps, and cover all of the basic principles of designing iPhone apps using Photoshop.

iPhone 5 Photoshop tutorial

In this tutorial we will learn how to create an iPhone 5 in Photoshop.

Create an Animated Interface GIF in Adobe Photoshop

In this tutorial, we will design a simple news iPhone app, and then animate it for client presentation and export it as a GIF file. You’ll learn everything you need to go from idea to animated demo, all inside any recent version of Photoshop.

Create a Mobile Shopping App Design in Photoshop

In this tutorial, I will show you the techniques used to create a modern and flat user interface (UI) design for an iPad app.

Create a Photo Realistic iPhone in Photoshop

This tutorial will show you how to create a photo realistic image of Apple’s released iPhone4. Hopefully, by the end of it you will have something extremely close to the real thing.

Create iPhone from Scratch in Photoshop

Create a Mobile Checkers Game Interface in Photoshop

In this tutorial, I will show you how to create an interface for a mobile checkers game in Photoshop. I will begin by showing you how to set up a simple grid. Then, I will explain how to create the main components of the interface using vector shapes and Photoshop’s snap to grid functionality.

How to Design an iOS 7 inspired iPhone App Screen

In this tutorial we will be walking through the steps involved to create a thin and flat, iOS 7 inspired design concept for a user profile app screen. By using these simple techniques you too can create stunning, minimal app interfaces.

Create a Mobile Task Manager App in Photoshop

In this tutorial we will show you how to design a Mobile Task Manager App with Photoshop. Let’s get started!

How to Design an iPhone Music Player App Interface With Photoshop CS6

In this tutorial, we will show you how to use these new features to create an iPhone music player app interface in both the original iPhone resolution, as well as retina without having to repeat the same process for both designs. Let’s get started!

Create a Mobile Phone Music Player Interface

In the following tutorial you will learn how to create a mobile phone music player interface. We’ll build the interface using pixel perfect alignment, quality vector shape building techniques, as well as gradient and lighting control.

Create a Mobile Calendar App in Photoshop

In this tutorial we will show you how to design a Mobile Calendar App in Photoshop. Let’s get started!

Design & Build a 1980s iOS Phone App: Design the Contacts Screen

In today’s lesson, we’re going to be covering the main structure of the user interface, so the title and navigation bars, buttons and background. We’ll also be doing the favorites screen and making a start on the settings screen.

Design an iPad app UI in Photoshop

In this walkthrough we’ll create two basic user interfaces for an iPad app and develop them to a prototyping level. Using Apposing’s best-selling Pretty Green iPhone app for singer Liam Gallagher’s fashion label, we’ll explore how to layout and structure an iPad version of the app.

Create a Mobile App Icon in Photoshop

This tutorial is part of a three-part series explaining how to design UI elements for mobile applications in Photoshop. In this part, we will explain how to design an icon for your mobile device’s home screen. Let’s get started!

How to Create a Dynamic iOS 7 Style Background Blur in Photoshop

In this Photoshop tutorial I will demonstrate how to quickly and easily create a live background blur effect, like the one that is used in iOS 7. It only takes a few steps and once you know how to do it, you can use it any of your designs!

Create a Custom iOS 7 Style Blur Background in Photoshop

In this Photoshop Tutorial, learn how to create a iOS 7 Style Blur Background from a photo or image using a few basic steps to upgrade and add a nice blurry feel on all your devices backgrounds.

How To Set Up Photoshop For UI Design

If you’re new to Photoshop and you’re designing UI or exporting assets there are some important settings you should use to get the best results. This guide uses iPhone apps as the example settings, but the basic principles apply to all design work in Photoshop. Let’s get to it.

Create A Flat IOS 7 App Icon In Photoshop

I am back again with a wonderful Photoshop tutorial where you’ll learn to create tasty flat, pixel-perfect iOS 7 icon. This tutorial will also help you learn some useful techniques with a step-by-step process to create the pixel perfect 256x256px mobile icon.

IOS7 INTERFACE – PHOTOSHOP CS6 TUTORIAL

I am using an iPhone 5 template for this tutorial. You can run a Google search or grab the iPhone 5 that I am using by [[downloading it here]] http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup I’m working just above the “Screen” layer.

Flat Mobile App Design in Photoshop CC – Weather App

Create a Mobile Weather App Interface in Photoshop

In this tutorial, we will show you how to design a mobile app design interface using many of the tools in Adobe Photoshop.

How to Redesign the Spendometer iPhone App

You will learn many of the unique considerations and design patterns used when creating stand-out app interfaces. This tutorial is presented in two parts in collaboration with Mobiletuts+, where you will be able to find an increasing amount of mobile design related tutorials in the future.

Design an iPhone Bank App

In this tutorial, we’re going to be designing the user interface of a financial based iPhone application in Photoshop. We will be using a truck-load of modern techniques to really make this design pop!

How to design a chatroom iPhone UI

In this tutorial we’re going to be designing an iPhone user interface for a forum and chat based mobile application.

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

In this tutorial I am going to show you how to create a simple countdown timer, iOS 7 inspired!

Create a Realistic Telephone Keypad Using Layer Styles

In this tutorial, you’ll learn how to achieve acutely life-like telephone dial buttons in Photoshop using shape layers and layer styles!

Create an Instagram Widget in Adobe Photoshop

In this tutorial we will be creating a beautiful Instagram widget. We will actually imitate one of the popular “play-off” trends on Dribbble, which is creating a fictional widget for the very popular mobile photo sharing service, Instagram.

Design a photorealistic app icon in Photoshop

In this tutorial, I’ll explain how to use light and shadow to make realistic artwork – in this case, a record player app icon. Using Photoshop’s powerful layer styles, I’ll show you how to produce impressive results in a short amount of time.

Create a Clean Twitter App Interface in Photoshop

In this tutorial we will create a clean Twitter app interface in Photoshop using layer styles and basic vector shapes. Let’s get started!

Create a Mobile Calendar App in Photoshop

In this tutorial we will show you how to design a Mobile Calendar App in Photoshop. Let’s get started!


SmashingApps.com

A Collection Of Exciting Tutorials To Help You Mastering The Adobe Photoshop

All designers want to use Adobe Photoshop like pros and create perfectly perfect images. Photoshop is a most powerful tool to creating powerful works of art by Adobe; and it is the most commonly used and easily accessible software by all the professional designers out there. Mastering the tools of Photoshop is not entirely easy but it has definitely become easier through all the tutorials that are available online. Every tutorial has something new to offer and to be learned from. Some very princely designers have eased the task of creating surreal images for the rest of the designers who are not as well versed in Photoshop by releasing very educating tutorials that guide through in every step of the way.

We have brought you just such amazing tutorials that will guide you in creating wonderful pieces of art. With the help of these tutorials you can let your imagination run wild and give your ideas a tangible form with the help of Adobe Photoshop.

Luggage Design in Photoshop

You will learn how to use some Photoshop tools like Rectangle Tool, Rounded Rectangle Tool, Ellipse Tool etc. and also how to work in Photoshop by using some of its basic commands like Layer Styles, Inner Shadow, Inner Glow, Drop Shadow, Satin, Gradient Overlay, Contract Command etc.. So not a difficult tutorial but an interesting one. Lets Start.

Sparkling Glass-Textured Text Effect

Photoshop’s Filters can be used to create nice textures easily and quickly. This tutorial will show you how to create a simple glass texture, then use it with a couple of Layer Styles to create a sparkling shiny text effect.

Using the Path Blur and Spin Blur in Photoshop CC 2014

One of the more powerful features that came with the new Photoshop CC is the addition of the Path and Spin Blur filters. This quick tip will explain how to use those filters in order to achieve interesting effects quickly and easily.

Minimal Long Exposure Photo Manipulation with Photoshop CC/CS6

In this tutorial we will be creating a minimalist fine art photo manipulation using just two images and a couple of brushes in Photoshop CC / Photoshop 2014.

Using Navigator Panel in Photoshop Cs6

In this Photoshop tutorial, we are going to describe the various ways in which the Navigator Panel can be used to zoom in and zoom out of an image. The Navigator Panel is like a second monitor that you keep side by side when working on any project in Photoshop.

How to Colorize a Black and White Photo

In this tutorial, we are going to explore three different ways to colorize black and white photographs. We are going to learn how to work with the Color Replacement Tool, the Color Blend Mode, and Hue/Saturation Adjustment Layer. Let’s get started!

Create an Address Book Icon in Photoshop

In this tutorial, I will show you how to create an address book icon using Adobe Photoshop. I will begin by explaining how to set up a simple grid, and how to take full advantage of the Snap to Grid feature.

Illustrate a Traffic Cone Icon in Photoshop

Today we’ll be drawing a traffic cone, another handy icon for “under construction” elements. Our cone icon is inspired by one I saw on the VLC Player site recently.

How to Use Focus Area Selection in Adobe Photoshop

In this tutorial you will learn how to use focus area selection in adobe photoshop.

Create a Seamless Argyle Pattern With a Fabric Texture

In this tutorial, I will show you how to create a realistic-looking, seamless, argyle pattern in Photoshop with a fabric texture. Let’s get started!

Create a Mobile Downloader App Interface in Photoshop

In this tutorial, I will show you how to create a downloader app design for an iPhone, in Photoshop. Once completed, you will have a good understanding of how to create modern interface elements, as well as, charts and graphs in Photoshop. Let’s get started!

Create a Mobile Checkers Game Interface in Photoshop

In this tutorial,We will show you how to create an interface for a mobile checkers game in Photoshop.

The Ultimate Guide to Adjustment Layers – Exposure Adjustments

In this tutorial, I will take a close look at some of Photoshop’s tonal adjustment layers. We will start off with the Exposure, and Brightness/Contrast adjustment layers, then, we will compare them to the Shadows/Highlights, and HDR Toning adjustments, and learn how to use them all non-destructively. Let’s get started!

Create a Kaleidoscope Effect in Photoshop

In this tutorial, I would like to show you how to take one of the lesser quality photos in your collection and quickly turn it in to something that you can use for a project.

The Ultimate Guide to Adjustment Layers – Color Balance and Selective Color

In this tutorial, we are going to have a look at the Color Balance and Selective Color adjustment layers in Photoshop.

Create a Vivid Arabian Night Composite

Learn how to create a beautiful Arabian night photo manipulation with Photoshop. You will learn several blending tricks and composting tips that will help you create a vivid vector-like landscape.

Making of ‘Victory!’

In this tutorial We will explain how I created a futuristic cyborg character with weapons and accessories, finished off with a plinth for the character to help tell a story.

How To Create a Washed Out Vintage Matte Photo Effect

Follow this step by step tutorial to process and transform your shots in Photoshop to create a warm washed out vintage matte effect using non-destructive editing.

Strawberry Fruit Pie Text Effect Photoshop Tutorial

In this tutorial we are going to create a fruit pie typography in Photoshop.

Create a Simple Pencil Icon in Adobe Photoshop

In the following tutorial you will learn how to create a simple pencil icon in Adobe Photoshop.

Inflated Text Using 3D in Photoshop CC

In this exercise, we’ll create some inflated text using the 3D features in Photoshop. With the enhanced surface properties, you can create a reflective metallic look in a matter of minutes.

Create “Fury Unleashed” Digital Art In Photoshop

In this tutorial, I will show you how to create this “Fury Unleashed” digital art in Photoshop.

Flip Fonts Effect

Extracting Transparent Elements

In today’s tutorial, we’ll make quick work of extracting a busy, transparent water splash element from a white background using channels.

Grungy Marble Text Effect

This tutorial will show you how to create cutout text from a shape, then style it to give it a grungy, marble-like look using layer styles and a couple of textures.

Chrome Type Effect in Photoshop CC

Metallic Rivets on Denim Text Effect

This tutorial will show you how to use Photoshop’s Layer Styles and a simple Brush to create a metallic rivets – inspired text on a denim background.

Elegant Glossy Text Effect

This tutorial will show you how to use Photoshop’s Layer Styles and some simple Brush settings to create an elegant, slick text effect.

Simulated Motion on 3D Objects in Photoshop CC

Using a texture layer created in After Effects, Stephen Burns uses the texture as both background and luminance map to create a movement simulation on a 3D object.

Impressionistic Multiple-Exposure Effect

In today’s tutorial, we’ll reproduce this in-camera impressionistic look while also softening the effect and adding drama to the scene.


SmashingApps.com

Free 72-hour access to top design tutorials

Read more about Free 72-hour access to top design tutorials at CreativeBloq.com


If you fancy teaching yourself some new creative skills for free, act quickly. Pluralsight has thrown opened its entire online library of lessons and made them free to access for 72 hours.  In all, there are 4,000 course to enroll on. The huge menu of topics includes VFX, CAD, HTML, Photoshop, Maya, Nuke and V-Ray. There’s also a huge selection of interactive sessions exploring programming languages.




Creative Bloq

10 Best Tutorials To Learn AngularJS

AngularJS is an awesome Javascript framework that can be used to create powerful and dynamic web apps. It also covers the building of complex client-side applications. Since its release in 2009, AngularJS has been widely used by many developers for its convenient extending of custom HTML tags and attributes, known as ‘directives’.

For some people, learning Angular through its official documentation is not enough. They prefer a video-based tutorial instead, or a more sophisticated learning site with specific discussions, a demo, the try it yourself feature and the like. So in this post, we’re listing 10 AngularJS tutorial and screencasts that will kickstart your Angular learning.

1. Year Of Moo

This well-written tutorial by Year of Moo is going to teach you the very basics of how AngularJS works and what it can be used for. It covers all the primary parts of Angular: Modules, Dependency Injection, Routes, Services, Directives and more. It also give you a brief explanation of Angular usage with MooTools and jQuery. You probably want to read their second article for more Angular tips and tricks.

2. AngularJs On Codeacademy

If you like to learn by coding then this AngularJS tutorial by Marcin Wosinek is what you’re looking for. In this tutorial, you’ll learn about Angular basics, controllers, services, filters and directives. In each topic, you’ll be given explanations and instructions on some challenges which can be solved within the editor. If you get stuck, just open a hint.

3. AngularJS Tutorial on Tutorialspoint

Tutorialspoint accommodates you with a well-structured AngularJS tutorial. It divides each Angular component into specific sections. You’ll also get an appropriate example and editable live demo in each section. Here you’ll learn the basics of Angular from Setting Up the Environment until Internalization. There is also a Quick Guide that summarizes all you should know about Angular.

4. Thinkster.io

Thinkster offers you a unique method of learning AngularJS. They split up all of the Angular topics into 12 parts. In each part, you’ll see a brief topical explanation followed by tick-able useful readings. The reading materials are mixed up, coming from other sites and Angular official doc. Also checkout this course companion that guides you in building modern web apps.

5. AngularJS Tutorial by Todd Motto

Todd Motto, a Google Developer Expert, wrote a 10,000-word Angular tutorial on AirPair. This is a great tutorial that teaches you the very basics in AngularJS concepts. There are about 14 topics included here like engineering concept, form validation, templating with Angular and more. At the end of each topic, you’ll find related useful resources for further reading.


Image source: AngularJS Tutorial

6. AngularJS From Beginner To Expert

In Ng Newsletter, there are tons of materials about Angular, plus a 7-step guide to help turn beginners into experts. Ng Newsletter also has three ebooks on Angular (also available in print on Amazon) and snippets from the 600pp book are featured on the site, spread across 25 days.

7. AngularJS in 60 Minutes

This video tutorial may be a good starting point for learning the fundamentals of AngularJS. Dan Wahlin gives you a rundown of what you need to know about Angular: the concept, the basics, resources and a demo. There are also specific section links you can jump to. If you have learned the basics, you may want to advance your learning with his Learning Angular by Example or other related posts.

8. Egghead

Egghead is probably one of the best AngularJS learning centers. It provides 190+ free AngularJS videos for learning Angular in a straight and easy way. All videos range from 2 – 10 minutes only. The code, discussion and summary are available below the video. There are also PRO subscriptions to advance your learning starting at $ 14.99/month.

9. Intro To Angular

If you want to learn AngularJS by example, tutorials from Curran Kelleher may fit you. It has about 50 examples which cover single-page-app concepts, related libraries and Angular features. Video tutorials are available on Youtube and split into two parts: Part I and Part II. You can get all source code examples on GitHub.

10. Shaping Up With Angular

Shaping Up With Angular is a complete free interactive Angular course bundle from Code School. It teaches basic Angular, directives, services and forms via video tutorials, challenges and downloadable text tutorials. It’s broken down into 5 levels which has about 12 videos and 27 challenges. There are 6 earnable badges if you complete all of the levels.





hongkiat.com

17 CSS3 Transition Plugins & Tutorials To Create A Single Page Website

Here is another collection of some CSS3 tutorials and this time, we are focusing on creating transition effect for creating a single page website. In the recent times, we have seen that single page websites have greatly increased the user experience by reducing the unnecessary loading time of duplicated page contents.
So, without any further ado, here we are presenting the complete list of CSS3 transition tutorials to create a single page website for you. We hope that you will like this collection. Do let us know what you think about this compilation. Your comments are more than welcome. Enjoy!

Page Transitions with CSS3

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.

Medium Style page Transition

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

Coding a CSS3 & HTML5 One-Page Website Template

Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder – this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of years.

CSS-only Responsive Layout with Smooth Transition

A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect.

Creating a Single Page CSS Website Without Images

Single page layouts are all the rage now, especially for portfolios. In this tutorial we’re going to be making something quite attractive that’ll work on a variety of platforms using no images, just CSS and Javascript. We’ll be making some awesome backgrounds too, using just Javascript. Let’s get started!

Fullscreen Pageflip Layout

A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.

Code a Single-Page Sliding Website Layout With Fixed Navigation

In this tutorial we want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time.

Typography Effects with CSS3 and Jquery

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.

Interactive Infographic with SVG and CSS Animations

Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.

Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.

A Collection of Page Transitions

A showcase collection of various page transition effects using CSS animations.

3D Flipping Circle with CSS3 and jQuery

In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

Putting CSS Clip to Work: Expanding Overlay Effect

A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.

Page Preloading Effect

A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

How to Create a Tiled Background Slideshow

A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.

Timeline Portfolio

Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests.

Fullscreen Slit slider with jQuery and CSS3

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.


SmashingApps.com

20 Photoshop Elements tutorials to try today

Read more about 20 Photoshop Elements tutorials to try today at CreativeBloq.com


Adobe’s Photoshop Elements is a program containing many of the features of the professional version of Photoshop but sold at a fraction of the cost. Here we’ve rounded up a selection of top Photoshop Elements tutorials, for use in version 7 and up, from around the web. Getting started




Creative Bloq

Best Adobe Photoshop Tutorials 2015

2015 have started 8 days ago, but there are already number of some really nice Adobe Photoshop video tutorials. Get into the blog post to check them out.
MonsterPost

Develop your digital skills with half price tutorials

Read more about Develop your digital skills with half price tutorials at CreativeBloq.com


If you’re a digital artist riding the self-motivational tide of the new year, this glut of discounted eBook tutorials may keep you going. 3dtotal has around 140 eBooks with 50% off to choose from, covering ZBrush, 3ds Max, Photoshop, Maya and more.




Creative Bloq

11 Creative SVG Animation Tutorials

The best and the most amazing thing about SVG is that it is independent of resolution, hence you don’t have to worry about how many pixels your device can offer, the final result will always be scaled and revamped by the browser to look considerable. Other than that, SVG is not only a tool for the creation of static graphics, but also a handy tool for animation. In this post, ten tutorials are collected that will surely help you learn how a SVG animation can be best for you website

Making a SVG HTML Burger Button

Exporting SVG for the web with Adobe Illustrator CC

A Look Into Scalable Vector Graphics

How to Add Scalable Vector Graphics to Your Web Page

Polygon feature design: SVG animations for fun and profit

From Illustrator to the Web

Export from Photoshop to SVG

Using SVG

Animating Vectors with SVG

Using SVG stroke Attributes

Animating SVG with Clipping


SmashingApps.com