Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 27 2013

13:00

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

Some people may find flat web design boring while others totally love it. I find flat design interesting and more user friendly. It puts more emphasis on the content and it’s very flexible, which is really ideal for responsive web design. If you, like me, love flat design, make sure to check out 40+ Flat Web Design Inspiration. I’m pretty sure you will get goosebumps after seeing several flat designs.

Feeling inspired seeing those designs? Good! Today I will teach you how to design a portfolio landing page. Almost an hour long free video tutorial!

PSD Download

It doesn’t matter if you just started using Photoshop. I will guide you throughout the video, step by step using the basic Tools and Techniques like using Text Tool(T), Shape Tool(U) and quick tips to align elements and masking and manipulating an image.

Resources to complete this Tutorial:

Make sure you download all the resources! Are you ready? Let’s get started!

Flat Web Design Portfolio Landing Page Tutorial

That’s all guys, we’ve just finished our awesome portfolio. We hope you learned something from this tutorial. If you have questions feel free to drop them below. Don’t forget to share this article. Thanks!

June 24 2013

13:00

Free and Premium Photoshop Tutorials for Graphic and Web Designers

Premium membership websites have become popular in recent years, by following the tutorials these sites offer you can teach yourself graphic and web design. However, if you’re having a hard time learning by yourself another option is to subscribe to premium courses. Sounds good right? You will become a graphic/web designer without having to spend the money on a degree from school, and many people are doing that.

School is not an option regarding this matter. Read Learn Web Design The Right Way: Quit College And Start Sucking Blood to learn more about this. Our Freelance Sergeant James Richman will explain everything about why you need to start sucking blood from now on and become a freelance web designer.

Okay, continue reading to check out both free and premium video courses for graphic and web design!

Tuts+Premium

Tuts+ is a fantastic network of educational websites. They offer tons of high quality and in-depth written and video tutorials. Tuts+ is composed of amazing sites where you can learn different kind of skills like web design and development, graphic design, motion graphic, photography and many more.

Price

  • Monthly: $19
  • Yearly: $180

Ledet

Ledet is a place that focuses on tools such as the Adobe Creative Suites and Auto Cad. Members have access to classes that cover Photoshop, Illustrator, Dreamweaver, and the rest of the gang.

Price

  • One time membership: $1,595

Lynda

Lynda is a place where you can learn everything about the web, they offer tons of high quality instructional video training for creatives. The instructors are professionals and some of the best in the web design industry such as Chris Coyer, owner of CSSTricks.

Price

  • Monthly: $19
  • Yearly: $180

Train Simple

Train Simple is a good place to learn Photoshop CS6 Fundamentals, tackling the power of Photoshop CS6 and learning how to create superior images and artwork. Learn how to perform key image editing tasks, including retouching, sharpening, and color correction. In the course you’ll see how to effectively work with layers, blend modes, masks and so much more.

Price:

  • Monthly: $9.99
  • Annual Membership: $99.99

Barryhuggins

A professional training course by Barry Huggins tackling Photoshop for web designers. Courses cover topics like defining colour settings for Web design work, designing buttons, saving images the right format and much much more.

Price

  • Monthly: £9.96
  • Annual Membership: £99.58

Photoshoptopsecret

Photoshop Top Secret might just be the most advanced course ever put on DVD, but now you can watch online! Your personal trainers Mark Monciardini and Melanie Stimmell will push you past your limits. Over 20 hours of jam packed training with surreal graphics and Hollywood special effects!

Price

  • Annual Membership: $179

Photoshopuser

If you’re tired of boring, basic training Photoshop User is the best place to learn in-depth Photoshop techniques. Once you feel comfortable with Photoshop, these courses will help you get up to speed on the areas you want to learn more about. Like, Path and shapes, layer styles, blending modes, types and much more.

Price

  • Yearly: $99

Adobe Creative

Adobe Creative Cloud is the place to go if you’re really looking for a more professional approach to teaching. Their premium membership will get you access to all the latest web-standard tools as soon as they release them. Learn new skills with their exclusive library of free tutorials. And never worry about being equipped for the future. You already are.

Price

  • Yearly: $49.99

NAPP

Photographers, designers and enthusiasts of all skill levels look to NAPP for the best Photoshop tutorials on the planet. Their 71,000+ members know how to take an ordinary image and turn it into something extraordinary. You can too.

Price

  • Yearly: $99.99

Kelbytraining

Kelbytraining offers tons of video Photoshop tutorials that are really high quality and in depth video training that you can learn from. Check out their video sample on their website and find out yourself.

Price

  • Monthly: 24.95
  • Yearly: $199

Totaltraining

Total Training’s Adobe CS6 course will help you know the key new features in this version and teach you about the tools, palettes, and menu bars, as well as the major features like layers, selections, image editing, compositing, using Adobe Bridge, type design, drawing and painting, and creating a web photo gallery.

Price

  • Monthly: $24.99
  • Yearly: $239.88

Before & After Magazine

Before & After Magazine is really good for learning design theory, ideas, tips, quick fixes to turn your project from blah into bravo. You can apply this to both print and web which is really helpful especially in doing layouts and placing elements.

Price:

  • Print Course: $49.00

Free Video Tutorials

Here is a list of helpful free premium-like videos tutorials that can help you learn how to design everything from UI elements and layout to effects, backgrounds and more.

Background and Effects

Here you will learn how to create Pattern and lighting techniques that can be applied to the background for a website or other graphic elements needed for banners or ads.

Beautiful Lady with Flowing Light Effects

Textures and Patterns

You definitely must know how to create patterns. In this Photoshop tutorial you will learn how to create texture patterns. This saves your website loading time by just repeating the original pattern using CSS.

Create Custom Shadows

Creating shadows is great, especially if you want to make an element to capture your viewers attention. In this tutorial you will learn how to create different shadows.

Fancy Dimple Background

Linen Texture

Wood Texture

Logos and Icons

Here you can learn various techniques on how to create logos and icons. I also included a time lapse video to show you a quick overview process on how the spotlight icon was created from scratch.

Cloud Icon

If you’re making a 3D icon this tutorial will help you turn you 2d logo into a superb sexy with light effects icon.

Hand-Stitched Social Media Icons

Stiched is designed buttons or icons is very nice to look specially when you crafted it pixel perfect that will turn you simple social icon into a WOW!

Vibrant Color Ring

Most of corporate agencies logo have this type of logo that has 3-4 different colors but it still blends well. So in this tutorial you will learn what is the process of creating those.

How to design a logo fast

Having trouble in designing a logo? Here is a great tip on how to design logo fast in 3 different ways.

Spotlight Icon

Getting bored in long detailed tutorial? In this time lapse video you will see the process on how he created a stunning spotlight icon from scratch.

UI Elements

I’m pretty sure this video ui tutorials will really help you boost up your creativity in creating some UI elements like buttons, navigation, search bar, login box and much more, which is very useful in designing a website.

Glazed arched Menu

This tutorial will help you understand how to play with blend modes to turn a simple navigation menu into a superb glazed areched menu.

Shiny Glassy Buttonv

What you have learn in above tutorial can still be applied here in creating Glassy Button effect.

Login Box

A great tutorial guide on how to create a 3d looking login form with the help of shadow and that curved lock icon on top right side.

Creating a Knob in Photoshop

Volume Control

A great way to learn how to create a volume control & knob to apply it in your music instrument app.

Coming Soon Timer

This tutorial will guide you on how to create a countdown timer. You can apply this if your portfolio is on progress and the launch date will be on that designated time.

Loading Circle Animation

A great Photoshop tutorial on how to design a pre-loader and animate it.

Create Slick Web Tags

Turn your ordinary tags into a trendy looking one.

Sleek Calendar Photoshop Tutorial

If you have an old looking or default calendar in your sidebar it’s time to turn it into a eye catching gorgeous calendar.

Minimal Loading Bar

A cute way to turn you loading/progress bar into a nice looking striped bar.

Search Bar

This will give you an idea how to create a great search form.

Chat Bubbles

You will learn how to create cute and glossy chat bubble that can be used also in Testimonials section.

Mp3 Player

Love of Music? Here is a great tutorial on how to create a simple Mp3 player yet very catchy with that shiny cover.

Countdown Timer

Here is another Countdown Timer gorgeous dark with shiny string holding the fold.

3D Button

This effect is great for Call to action buttons.

Facebook and Twitter Buttons

A well designed social media buttons to trigger the viewers to click that social media buttons to gain more followers.

Web Layout

Here you will learn to create website layout and structure it in a proper way like were to place header, banner, sidebar, content and footer.

Website Layout Tutorial

Here is a simple tutorial on how to create a dark toned website you will learn how to apply patterns, highlights, shadows and more.

Web Design Tutorial Part 1

Web Design Tutorial Part 2

Another great tutorial on how to create a fresh looking website from scratch to finish.

Basic Photoshop: Designing a website

Lifehacker shows how to create a website from scratch, gathering what are the important elements and placing it into Photoshop and giving it a try and try until it came up with a great outcome.

I have another option for you. Are you one of those individuals who really want to learn but you can’t afford the monthly membership? well that is not the problem 1stwebdesigner is here to help you. It’s your chance to learn and become a web designer for free.

Basic Web Design Video Course

In this course I will walk you through the very basic steps on what to do and what to learn before, and during, building a website.

You’ll learn all the steps I use including:

  • Planning
  • Wireframing
  • Using basic tools and panels in Photoshop
  • Designing Simple Blog Page
  • HTML
  • CSS

The Course:

Part 1

  • Planning and Wireframng – 13:19
  • Phothsop Basic Tools and Panels – 12:51
  • Designing In Photoshop – 36:36

Part 2

  • Preparation – 09:15
  • HTML Basic Tags and Structure – 20:38
  • Basic CSS Properties – 18:54

Part 3

  • Complete HTML Markup – 23:17
  • Applying CSS Styles Part 1 – 23:05
  • Applying CSS Styles Part 2 – 25:28

That’s it! I hope the course will help you out specially for those individuals who are just started. As we know we individuals are different some can’t learn from their own and some can learn by them self. But I think the best way is to push hard and learn one step at a time and by that I’m sure that you will become the career you’re dreaming about. Cheers!

April 25 2013

13:00

Build a Custom WordPress Home Page with Custom Widget Areas

In this video tutorial I will teach you how to build a WordPress website with custom widget areas the easy way. Even if you haven’t touched a single line of code before, this tutorial is simple enough to walk you through every code.

This tutorial goes hand in hand with Christian’s video tutorial on how to create a website from scratch using HTML5 and CSS3. The goal is to help you understand how easy it is to create the same layout (from Christian’s tutorial) in WordPress using custom widget areas. Although you will need to put the pieces together a little, it’s a fun and learning experience nonetheless!

Resources for this tutorial:

  • Canvas - (important) it’s a paid WordPress theme from WooThemes but the video tutorial below can still be applied using other themes.
  • Responsive Theme – a free alternative, really great theme with millions of downloads monthly.

Video Tutorial: Custom WordPress HomePage with Custom Widget Areas

Visit us at 1WD.tv for more learning materials that can get you started with freelancing as a web designer, inside you will get: an eBook, tons of video guides, source codes, child theme, forum support, and most of all the knowledge of how you can start earning $300 in just 3 Days!

presentation-2

April 15 2013

13:00

Creating a CSS3 Dropdown Menu – Video Tutorial

We have talked a lot about about HTML5 and CSS3 in the past couple of months and today we continue the series of video tutorials with a new addition: creating a CSS3 dropdown menu from scratch. It is extremely easy to do, so don’t be scared.

The video is a bit longer, around 40 minutes, this is because I have gone into great detail explaining the process. Once you are able to do it on your own, 10-15 minutes should be enough for you to go through the necessary coding and create this dropdown menu.

We used to have to create dropdown menus with JavaScript, but today we only need to use CSS3. CSS3 loads faster than JavaScript, which is one of the many benefits of using CSS3 menus. However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.

As promised, you can check out my previous video tutorial about how to create a responsive website using HTML5 and CSS3.

April 08 2013

13:00

Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

A few weeks ago we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it.

In this tutorial I will teach you how to create a responsive website using HTML5/CSS3 from scratch. So rather than talking about, let’s get straight to it. I hope you will leave me feedback in as I would like to get hear some of your opinions very, very much!

Create a Responsive Website – Video Tutorial

March 22 2013

13:00

Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]

Sup folks, it’s Mike here again, your design guru and this is the third part of our Basic Web Design Video Course. This time we are going to completely markup the HTML using the tags that we have learned in the previous videos. After that we are going to style it using CSS. Also, we are going to cover CSS reset, Clearfix Hack and new CSS3 properties to solve the most common issues encountered when you are starting to learn web design.

Buckle up and let’s get started.


Part 1: Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing
Part 2: Basic Web Design Video Course – Basic HTML Tags, Structure & CSS Properties
Part 3: Basic Web Design Video Course – Complete HTML Markup & CSS Styles

PSD Template Download - HTML/CSS File DownloadDemo


Final Product

1wd-basic-web-design-video-course

Complete HTML Markup

Applying CSS Styles Part 1

Applying CSS Styles Part 2

Finally, we’ve completed the markup and styled our very first layout. Always remember to reset your CSS before styling the whole layout and apply CSS3 box-sizing to all the elements. Also, if you encounter some issues with things like the wrapper and posts just apply the Clearfix Hack.

So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestions regarding the videos and for the next part to be covered feel free to mention it below. Thank you!

January 21 2010

19:18

ASP.NET from Scratch: Lesson 3

Picking up where Lesson two left off, this new installment of ASP.NET From Scratch covers more C# programming fundamentals – namely class inheritance and interfaces. In this lesson, you’ll learn how to use inheritance to save time and code. You’ll also learn about the concept of interfaces, and how they can make your applications and components flexible and maintainable. You’ll also be introduced to the Object Browser, a feature of Visual Studio that organizes all classes within the Framework Class Library and your project in a browsable format.

Tutorial Details

  • Length : 42 minutes
  • Difficulty: Beginner

The Complete Series

Screencast

Other Viewing Options


January 15 2010

23:18

Terminal, Git, and GitHub for the Rest of Us: Screencast

So you’ve read the tutorials, and still can’t manage to figure out this stuff? What is Git – and why do we even need it? If you fall into this category, much like I did at one point, I’ve recorded a video tutorial that hopes to teach you exactly how to get started. Rather than feeling your eyes blur over as you attempt to comprehend code snippets like “git push origin master,” relax, and let me explain it to you as best as I possibly can!

Video Exporting. Please watch video here.

Other Viewing Options

Further Reading

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial


January 08 2010

02:12

How to Build a Newspaper Website with a Grid: New Plus Tutorial

In this week’s Plus video tutorial, you’ll learn how to utilize a grid to create a simple newspaper-like website. Along the way, you’ll learn helpful techniques, such as easy ways to target IE7 and IE6 with only a single character, using the 960 grid system, and even using CSS3 to create columns! It’s an hour long; ready to dig in? Join Plus!

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial


December 30 2009

10:30

JavaScript from Null: Chapter 4

JavaScript University continues today as we learn about methods of the Array object, how to return values from functions, scope, and even your first animation.

Remember – though each new chapter builds upon the previous ones, you can still follow along perfectly well if you haven’t watched the other entries in the series!

Catch Up

In this Screencast, you’ll Learn:

  • Methods of the Array object: push, pop, unshift, shift
  • Pull values outside of functions
  • Reducing your “global footprint” by creating an object
  • SetInterval
  • Create your first animation
  • Methods of the String object.

Chapter 4: Arrays, Functions, and your First Animation

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

CodeCanyon



December 19 2009

01:34

JavaScript from Null: Chapter 3

Continuing on with our JavaScript training, in this week’s screencast, we’ll review if, for, and while statements. Secondly, you’ll be introduced to the ternary operator, as well as a handful of the most useful methods of the String object.

Catch Up

In this Screencast, you’ll Learn:

  • If statements – long, and short-hand forms.
  • For statements
  • While statements
  • Working with arrays, and loop through them.
  • Ternary operator
  • Methods of the String object.

Chapter 3: Conditional Statements

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

CodeCanyon



December 11 2009

21:27

JavaScript from Null: Chapter 2

Continuing on from chapter one, we’ll now take things a step further as we learn about primitive datatypes, operators, if statements, and naming conventions.

Catch Up

In this Screencast, you’ll Learn:

  • camelCase naming
  • Primitive data types: String, Number, Boolean
  • Difference between = and ===, and != and !==
  • How a string can have methods available to it, like toUpperCase() and length.
  • If statements.
  • JavaScript native functions: parseFloat, and encodeURIComponent
  • Basic Math operations
  • Incrementing numbers

Chapter 2: Data Types

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

CodeCanyon



December 04 2009

21:34

JavaScript from Null: Video Series

Thanks to the wide adoption of libraries like jQuery and Mootools, JavaScript’s popularity has skyrocketed in the last few years. However, in the process, an interesting thing occurred: many newer developers are learning these libraries without taking the time to actually learn about raw JavaScript techniques. What percentage of jQuery users don’t know how to fade out an element with only raw JS? My guess is that it’s much higher than many would think.

If you want to truly understand the library you’re working with, and improve your skill-set, it’s vital that you learn the fundamentals of raw JavaScript.

This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.

Chapter 1: Hello, World



November 26 2009

10:30

You Don’t Know Anything About Regular Expressions: A Complete Guide

Regular expressions can be scary…really scary. Fortunately, once you memorize what each symbol represents, the fear quickly subsides. If you fit the title of this article, there’s much to learn! Let’s get started.

Section 1: Learning the Basics

The key to learning how to effectively use regular expressions is to just take a day and memorize all of the symbols. This is the best advice I can possibly offer. Sit down, create some flash cards, and just memorize them! Here are the most common:

  • . – Matches any character, except for line breaks if dotall is false.
  • * – Matches 0 or more of the preceding character.
  • + – Matches 1 or more of the preceding character.
  • ? – Preceding character is optional. Matches 0 or 1 occurrence.
  • \d – Matches any single digit
  • \w – Matches any word character (alphanumeric & underscore).
  • [XYZ] – Matches any single character from the character class.
  • [XYZ]+ – Matches one or more of any of the characters in the set.
  • $ – Matches the end of the string.
  • ^ – Matches the beginning of a string.
  • [^a-z] – When inside of a character class, the the ^ means NOT; in this case, match anything that is NOT a lowercase letter.

Yep – it’s not fun, but just memorize them. You’ll be thankful if you do!

Tools

You can be certain that you’ll want to rip your hair out at one point or another when an expression doesn’t work, no matter how much it should – or you think it should! Downloading the RegExr Desktop app is essential, and is really quite fun to fool around with. In addition to real-time checking, it also offers a sidebar which details the definition and usage of every symbol. Download it!.

Section 2: Regular Expressions for Dummies: Screencast Series

The next step is to learn how to actually use these symbols! If video is your preference, you’re in luck! Watch the five lesson video series, “Regular Expressions for Dummies.”

Section 3: Regular Expressions and JavaScript

In this final section, we’ll review a handful of the most important JavaScript methods for working with regular expressions.

1. Test()

This one accepts a single string parameter and returns a boolean indicating whether or not a match has been found. If you don’t necessarily need to perform an operation with the a specific matched result – for instance, when validating a username – “test” will do the job just fine.

Example

var username = 'JohnSmith';
alert(/[A-Za-z_-]+/.test(username)); // returns true

Above, we begin by declaring a regular expression which only allows upper and lower case letters, an underscore, and a dash. We wrap these accepted characters within brackets, which designates a character class. The “+” symbol, which proceeds it, signifies that we’re looking for one or more of any of the preceding characters. We then test that pattern against our variable, “JohnSmith.” Because there was a match, the browser will display an alert box with the value, “true.”

2. Split()

You’re most likely already familiar with the split method. It accepts a single regular expression which represents where the “split” should occur. Please note that we can also use a string if we’d prefer.

var str = 'this is my string';
alert(str.split(/\s/)); // alerts "this, is, my, string"

By passing “\s” – representing a single space – we’ve now split our string into an array. If you need to access one particular value, just append the desired index.

var str = 'this is my this string';
alert(str.split(/\s/)[3]); // alerts "string"

3. Replace()

As you might expect, the “replace” method allows you to replace a certain block of text, represented by a string or regular expression, with a different string.

Example

If we wanted to change the string “Hello, World” to “Hello, Universe,” we could do the following:

var someString = 'Hello, World';
someString = someString.replace(/World/, 'Universe');
alert(someString); // alerts "Hello, Universe"

It should be noted that, for this simple example, we could have simply used .replace(’World’, ‘Universe’). Also, using the replace method does not automatically overwrite the value the variable, we must reassign the returned value back to the variable, someString.

Example 2

For another example, let’s imagine that we wish to perform some elementary security precautions when a user signs up for our fictional site. Perhaps we want to take their username and remove any symbols, quotation marks, semi-colons, etc. Performing such a task is trivial with JavaScript and regular expressions.

var username = 'J;ohnSmith;@%';
username = username.replace(/[^A-Za-z\d_-]+/, '');
alert(username); // JohnSmith;@%

Given the produced alert value, one might assume that there was an error in our code (which we’ll review shortly). However, this is not the case. If you’ll notice, the semi-colon immediately after the “J” was removed as expected. To tell the engine to continue searching the string for more matches, we add a “g” directly after our closing forward-slash; this modifier, or flag, stands for “global.” Our revised code should now look like so:

var username = 'J;ohnSmith;@%';
username = username.replace(/[^A-Za-z\d_-]+/g, '');
alert(username); // alerts JohnSmith

Now, the regular expression searches the ENTIRE string and replaces all necessary characters. To review the actual expression – .replace(/[^A-Za-z\d_-]+/g, ”); – it’s important to notice the carot symbol inside of the brackets. When placed within a character class, this means “find anything that IS NOT…” Now, if we re-read, it says, find anything that is NOT a letter, number (represented by \d), an underscore, or a dash; if you find a match, replace it with nothing, or, in effect, delete the character entirely.

4. Match()

Unlike the “test” method, “match()” will return an array containing each match found.

Example

var name = 'JeffreyWay';
alert(name.match(/e/)); // alerts "e"

The code above will alert a single “e.” However, notice that there are actually two e’s in the string “JeffreyWay.” We, once again, must use the “g” modifier to declare a “global search.

var name = 'JeffreyWay';
alert(name.match(/e/g)); // alerts "e,e"

If we then want to alert one of those specific values with the array, we can reference the desired index after the parentheses.

var name = 'JeffreyWay';
alert(name.match(/e/g)[1]); // alerts "e"

Example 2

Let’s review another example to ensure that we understand it correctly.

var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
alert(string.match(/[a-z]+/gi)); // alerts "This,is,just,a,string,with,some,and,some,mixed,in"

Within the regular expression, we created a pattern which matches one or more upper or lowercase letters – thanks to the “i” modifier. We also are appending the “g” to declare a global search. The code above will alert “This,is,just,a,string,with,some,and,some,mixed,in.” If we then wanted to trap one of these values within the array inside of a variable, we just reference the correct index.

var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
var matches = string.match(/[a-z]+/gi);
alert(matches[2]); // alerts "just"

Splitting an Email Address

Just for practice, let’s try to split an email address – nettuts@tutsplus.com – into its respective username and domain name: “nettuts,” and “tutsplus.”

var email = 'nettuts@tutsplus.com';
alert(email.replace(/([a-z\d_-]+)@([a-z\d_-]+)\.[a-z]{2,4}/ig, '$1, $2')); // alerts "nettuts, tutsplus"

If you’re brand new to regular expressions, the code above might look a bit daunting. Don’t worry, it did for all of us when we first started. Once you break it down into subsets though, it’s really quite simple. Let’s take it piece by piece.

.replace(/([a-z\d_-]+)

Starting from the middle, we search for any letter, number, underscore, or dash, and match one ore more of them (+). We’d like to access the value of whatever is matched here, so we wrap it within parentheses. That way, we can reference this matched set later!

@([a-z\d_-]+)

Immediately following the preceding match, find the @ symbol, and then another set of one or more letters, numbers, underscore, and dashes. Once again, we wrap that set within parentheses in order to access it later.

\.[a-z]{2,4}/ig,

Continuing on, we find a single period (we must escape it with “\” due to the fact that, in regular expressions, it matches any character (sometimes excluding a line break). The last part is to find the “.com.” We know that the majority, if not all, domains will have a suffix range of two – four characters (com, edu, net, name, etc.). If we’re aware of that specific range, we can forego using a more generic symbol like * or +, and instead wrap the two numbers within curly braces, representing the minimum and maximum, respectively.

 '$1, $2')

This last part represents the second parameter of the replace method, or what we’d like to replace the matched sets with. Here, we’re using $1 and $2 to refer to what was stored within the first and second sets of parentheses, respectively. In this particular instances, $1 refers to “nettuts,” and $2 refers to “tutsplus.”

Creating our Own Location Object

For our final project, we’ll replicate the location object. For those unfamiliar, the location object provides you with information about the current page: the href, host, port, protocol, etc. Please note that this is purely for practice’s sake. In a real world site, just use the preexisting location object!

We first begin by creating our location function, which accepts a single parameter representing the url that we wish to “decode;” we’ll call it “loc.”

function loc(url) { }

Now, we can call it like so, and pass in a gibberish url :

var l = loc('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere');

Next, we need to return an object which contains a handful of methods.

function loc(url) {
	return {

	}
}

Search

Though we won’t create all of them, we’ll mimic a handful or so. The first one will be “search.” Using regular expressions, we’ll need to search the url and return everything within the querystring.

return {
	search : function() {
		return url.match(/\?(.+)/i)[1];
               // returns "somekey=somevalue&anotherkey=anothervalue#theHashGoesHere"
	}
}

Above, we take the passed in url, and try to match our regular expressions against it. This expression searches through the string for the question mark, representing the beginning of our querystring. At this point, we need to trap the remaining characters, which is why the (.+) is wrapped within parentheses. Finally, we need to return only that block of characters, so we use [1] to target it.

Hash

Now we’ll create another method which returns the hash of the url, or anything after the pound sign.

hash : function() {
	return url.match(/#(.+)/i)[1]; // returns "theHashGoesHere"
},

This time, we search for the pound sign, and, once again, trap the following characters within parentheses so that we can refer to only that specific subset – with [1].

Protocol

The protocol method should return, as you would guess, the protocol used by the page – which is generally “http” or “https.”

protocol : function() {
	return url.match(/(ht|f)tps?:/i)[0]; // returns 'http:'
},

This one is slightly more tricky, only because there are a few choices to compensate for: http, https, and ftp. Though we could do something like – (http|https|ftp) – it would be cleaner to do: (ht|f)tps?
This designates that we should first find either an “ht” or the “f” character. Next, we match the “tp” characters. The final “s” should be optional, so we append a question mark, which signifies that there may be zero or one instance of the preceding character. Much nicer.

Href

For the sake of brevity, this will be our last one. It will simply return the url of the page.

href : function() {
	return url.match(/(.+\.[a-z]{2,4})/ig); // returns "http://www.somesite.com"
}

Here we’re matching all characters up to the point where we find a period followed by two-four characters (representing com, au, edu, name, etc.). It’s important to realize that we can make these expressions as complicated or as simple as we’d like. It all depends on how strict we must be.

Our Final Simple Function:

function loc(url) {
	return {
		search : function() {
			return url.match(/\?(.+)/i)[1];
		},

		hash : function() {
			return url.match(/#(.+)/i)[1];
		},

		protocol : function() {
			return url.match(/(ht|f)tps?:/)[0];
		},

		href : function() {
			return url.match(/(.+\.[a-z]{2,4})/ig);
		}
	}
}

With that function created, we can easily alert each subsection by doing:

var l = loc('http://www.net.tutsplus.edu?key=value#hash');

alert(l.href()); // http://www.net.tutsplus.com
alert(l.protocol()); // http:

...etc.

Conclusion

Thanks for reading! I’m Jeffrey Way…signing off.



November 18 2009

23:00

How to Build a Custom jQuery Tabs Plugin: New Plus Tutorial

In this week’s 45 minute Plus video tutorial, I’ll personally teach you how to build a flexible jQuery tabs plugin. This plugin will automatically create the individual tabs, allow for auto-switching, fading, and plenty more – without being bloated. Why create a tabs plugin when there are plenty of them already available? Because too much abstraction is never a good thing. Become a Plus member.

Unstyled
Final Product

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

  • Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.



November 06 2009

18:28

Learn how to AJAXify Comment Forms

In this week’s video tutorial, I’ll teach you how to take a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.

In addition, we’ll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we’ll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.

Screencast

Conclusion

Example

This screencast demonstrated just one way to animate your contact forms. Truthfully, it’s probably a bit too much for a regular site! :) But we’re here to have fun with it. If you decide to implement something like this into your own site, perhaps a more toned down version, please do leave a comment with a link to the page for our review!



Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl