Welcome to our website!
1stwebdesigners is a miniature site focused on building nice web-based applications. It is currently run by two human in his spare time, the Bilal Ahmed and Janitor Jesse.
If you are interested in learning programming, you can watch Video Tutorials to learn. You can also download Open Source files to help you on your way.
These are a few mistakes I often make when rushing through JQuery code. I don't know why I keep repeating the same mistakes! After making a video maybe I'll stop messing up so much. I hope this helps you when you find yourself in a pickle!
In this JQuery UI Tutorial we look at the UI Progress Bar. I show you how to use it and make a password checker to extend the bar depending on the password strength.
This tutorial is about JQuery UI Dialog. It's very easy to use and I'll show you some tricks on making your site feel richer just by using this little feature alone!
This an introduction of a JQuery UI Tutorial. We start off by learning to use the sliders and make them change something in the DOM. It's really great and JQuery UI is awesome!
This is a quick JQuery Game Tutorial. We aren't going crazy, but we'll use HTML, CSS and JavaScript to make a little character move with the arrow keys. If you want to do further building, this could give you some idea as to handle Key Strokes in JavaScript.
In this JQuery tutorial I'll show you the Chrome JavaScript Console which can come in handy. Also a few tricks on selecting a numeric listing with a CSS3 selector.
JQuery Arrays are the same as Javascript Arrays, and the functions are just like PHP, Python, Java, etc. So this is a great principal to understand, and I'll play around with them and I hope it helps you see how they work.
Raphael JS can be used to create SVG graphics on your website. It's an amazing JavaScript plugin that is well worth learning if you plan to draw graphs or grids, or anything really.
- Raphael JS @ http://www.raphaeljs.com
Prototype JS is a JavaScript framework a lot like JQuery, but a bit more advanced it appears (in my opinion). Here I'll show you how to do an AJAX Get with JSON data since it took me a little while to figure out how to parse the JSON correctly. Prototype JSON Get
These are for organizing data in sets. I use a pretty lame example but you should start with something simple. A use for an array might be a bunch of user emails assigned to a username. This is basic language stuff you have to know if you wanna get good, practice practice! JavaScript Array Videos
It's starting to get a little trickier with functions, so make sure you understand arguments inside a function. I made a few examples to follow. I would highly recommend using framework like JQuery over using getElementById, and body onload="init()", but this is for learning because when you understand the core of JS the rest comes easy. JavaScript Function Video
Here we do some loops in javascript. This is in every programming language so you shouldn't have any reason not to understand it :) JavaScript Loop Video
Here we jump into JavaScript- It's already built into your web browser, so let's get started and do aLearn JavaScript Video.
Here we talk about the java functions and what Static means. Then we learn how to create a regular function inside another class. It might appear confusing at first, but if you type as I type you will start to understand!
The first thing is to install the Java SDK (Software Development Kit). Then we plug Java into the command console on Windows (We may use this time to time). I show you NetBeans if you choose to use that, I like it. If you install this on Linux it will automatically be available in the Terminal.
In Java, Arrays are like pockets of data (and every other language). Imagine having a coat, and that coat had 25 pockets, the coat would be an array, and the pockets are the slots that can hold different values. This makes collecting and managing data a lot easier than having hundreds of separate variables.
Here we will explore some Java built in methods. These are easy to use and you attach them with the period, eg: instance.method(); We'll do a little bit of String manipulation and replacing for practice.
In this Java tutorial I'll explain how to assign variables. It's different than other languages like Python, PHP and JavaScript, because you have to declare what type of variable it is.
Java is scary to start with, yes very scary. It's has no mercy to begin with. Everything in Java is an Object, and Java is a compiled language. So we write a simple program, compile it, then run it. It feels like a lot of text to simply write 'Hello World'. If you come from another OOP language, this will be somewhat easy to pickup - but I'm going to assume you are not and I'll go slow.
Which PHP Framework do I use? Zend Framework, Symfony, Yii, Code Igniter, CakePHP? How about CMS's? WolfCMS, Drupal, WordPress, ModX, Joomla, the list goes on! I think you should ask yourself, what skill level am I at, and where can I be productive and learn at the same time?
We'll mess with a few settings and get a general idea of what you can do with .htaccess. These are some very simple tips. Being a Web Server Administrator is a lot of work, configuring Apache is not an easy task (Or whatever service you use) so don't get too confident too quick! We are only applying permissions/settings to a directory.
We are going to make a Page Handler to route every page request to an index.php file. I'll show you some basics and how to grab the URL inside PHP as well. This is fun, but be careful it's easy to mess stuff up!
This is a simple explanation and use of Tortoise SVN on Windows. It's a really good utility and if you use SVN then this is probably the best one for Windows. On Linux RabbitVCS is the best I know of with a GUI.
Here I'll teach you how to get started with a Facebook PHP SDK Tutorial. It is extremely easy if you are familiar with PHP. This is a basic introduction to getting facebook data and posting data with your own custom application!
Drupal Blocks kind of make up your application. It's where you position different sections of your sites anywhere you want on your layout, you can even limit what appears on which page. Once you understand how this works you'll really appreciate Drupal! I did this in Drupal 7. Thanks for watching my Drupal Tutorial.
Seems scary, but I hope Drupal Content Types aren't hard to follow after this tutorial. I did this in Drupal 7. Thanks for watching my Drupal 7 Content Types Tutorial.
We make a Blog area using the Drupal Views. I'm using Drupal 7 in this tutorial. These are tricky to use unless you monkey with them a lot. Drupal 7 Views are difficult at first but once you understand what's going on Drupal Views aren't all that scary :)
These are the Drupal 7 Modules you should get as soon as you install to help you get started and make your life easier. I will run through my favorite Drupal Modules in this tutorial to try and get you started fast!
Here is how to get started with Drupal 7 Theming. Making a theme at first is confusing so I hope this clear it up, Cheers. Creating a Drupal theme is hard to do unless you know how to do it, so here's a tutorial to theme drupal. Drupal Theme Tutorial.You can download Drupal atDrupal.org
These are tricky to figure out at first, and there are more than what I demonstrated. But learn these, practice them, you will also use them in JQuery and Prototype in the future!
A quick run through of Microsoft Expression Web 4 SuperPreview - Whew, Long title!
This was requested so here is how you make a workable button hover with HTML and CSS. It's very easy and makes your site a LOT better.
I'll quickly show you how a grid layout works in CSS. This is pretty cool and if you put more than 5 minutes of effort into it like I did in this video you could get some fast and easy layouts out of it. It's very easy to figure out so have fun and see which way you like laying out a site the most! CSS 960 Grid Tutorial
We'll build a site layout and a small folder structure in 25 minutes. This is a slower tutorial and a hand-holding walk through to put your HTML and CSS together. Website from scratch tutorial
In 3 minutes we will create a CSS Liquid Layout that stretches with your browser as you resize it. Thanks for watching this CSS Liquid Layout Tutorial
In only 5 minutes we can create a Fixed Layout for an entire website. Easy Peezy. Fixed means that the area stays the same size when someone resizes the page. CSS Fixed Layout Tutorial
Now we will try out some CSS Floats with Relative, Absolute, and a little bit of Fixed. This is pretty easy to follow, hope you have fun! CSS Position Tutorial
Since we understand the Box Model from the previous lesson lets move on to floats. These are great for all types of layouts, static or fixed. CSS Float Tutorial
This is one of the most IMPORTANT lessons for CSS, because if you do not know this you might drive yourself bonkers trying to fix layouts! CSS Box Model Tutorial
Formatting Fonts and Text with CSS. This is very basic and not much description is needed :) Hey Hey! CSS Fonts Tutorial
Working with CSS Backgrounds and Links. A gentle introduction into Pseudo classes, but only for the links. You'll learn how to use short-hand CSS and save a lot of time typing! CSS Background Tutorial.
Lets increase productivity by briefly learning about the CSS Heirarchy (Inheritence, or DOM Document Object Model), as well as Grouping CSS elements together and overriding groups. CSS Heirarchy Tutorial
Before we get too busy, lets keep organized. This time we learn how to use a CSS Reset file for browser consistency, and we also learn about Inline, External, and Embedded stylesheets. The rule of thumb is: Always use External stylesheets. CSS External Stylesheet Tutorial
Here we learn how ID's and Classes work in CSS. They are very simple and you will be happy you know now! CSS ID and Class Tutorial.
In this tutorial I introduce you to CSS and give you a quick rundown. It isn't necessary to try and explain too much at once, we will jump right into writing some CSS. CSS Fundamentals.
Here is a really quickstart to Adobe Illustrator CS5. How to setup your layout and save it, and we make a heart for the fun of it. I'm just using the Trial Version until I get more money to actually buy it, they give you 30 days trial sweet.
In this tutorial for Adobe Illustrator CS5 we mess with shapes and adjusting them. Gotta know these to do the basics or else you will be very sad :(
This tutorial covers the Pen Tool in AI CS5. It's really frustrating and scary at first but once you figure out how it works with all the little handles/anchor points you'll feel like it is a breeze.
Gradients in adobe illustrator
This tutorial is a simple on in AI CS5 about making a box. I think rather than explain every tool if we start making some things you'll see how things can be done!
We make a cute little leaf in vector graphics :) Just simple shapes, path finder, and gradients -- and one little Effect - Warp, and Bam! Easy Peasy!
Me use Adobe Illustrator CS5 to create some Anime Eyes, it's pretty easy and we make it in 5 minutes, looks nice! You could make an entire vector mascot out of this if you find the time.
I show you how to use a regular font, break it apart so you can manipulate it and make it into a logo. This end result of this is lame because to make a good connecting logo you have to think about it. But you could do a lot more than what Im just showing you here.
In this tutorial I show how to work a little bit with shapes and stroke to create the Star of David on the Israel flag. I rushed through this sorry, but I think you get the idea!
I draw sonic the hedhog pretty fast to show you how you can do it. Sorry I rushed through it so he doesnt look that great but you get the idea :P
Here is a quick run through of drawing tails from sonic the hedgehog. He actually looks pretty good at the end when you add the borders.
Here is a quick run through of drawing tails from sonic the hedgehog. He actually looks pretty good at the end when you add the borders.
Quick example of the blend tool
Quick example of Clipping Masks
This is a cool new shape builder tool
This is an awesome new feature called Draw Inside for Adobe Illustrator CS5!
Here we will draw a cartoon like book in Adobe Illustrator CS5.
In this tutorial for Adobe Illustrator CS5 we are going to make a pretty piece of cake! With a cherry on top so that we can feel happy inside after eating all that chocolate.
Here are some very basic things you can do to create a diagram or flowchart in Adobe Illustrator CS5. Easy Peezy, Japan-eezy.
We'll make a vector graphic bicycle tire in adobe illustrator cs5 now. We use the CTRL+D (Transform Again) quite a bit, so get comfortable with it, it's very handy!
A quick introduction into tracing images into Vector **WITHOUT live trace**. So if you drew something on paper you could LOCK the OBJECT (CTRL+2) and UNLOCK IT (CTRL+ALT+2) and work on it that way.
Time to use some 3D effects and make a lightning bolt. This is actually very simple and we get a pretty cool graphic!
Get comfortable with the Warp tools because they can save you a lot of time. We'll make a logo just like Microsofts, it won't be exact, but it'll help you see how building shapes works -- which is the most important thing in illustrator.
We'll draw Hello Kitty in about 5 minutes, easy peezy, really simple cartoon.
Making a rainbow in illustrator is kind of tricky to figure out. I hope this quick tutorial helps you, if you ever need to make one, or anything else with a curve.
Here we will draw a neck tie in Adobe Illustrator CS5. Very basic tutorial, this helps you get the feel of the program!
In this Illustrator Tutorial we will make a Candy Cane! We'll use the line tool with a fat border, then we expand it. BAM! Then we draw inside it to give it some stripes, all so easy!
We make a simple Christmas Tree. The point of the tutorial is to show you the "Transform Each" tool and a quick way to get results faster than doing everything by hand. Since the tree is pretty plain I left it out of the downloads area, have fun!
This was a request to draw hair on a G4 My Little Pony in Adobe Illustrator. I hope it helps! I tried to go at a slower pace and explain things better in this video, I hope that helps also.
In this Illustrator tutorial Ill show you a handy way to make use of the Appearances and Graphic styles, cheers!
Here we play with a Layer Masks to accomplish the strange shape inside the Google Chrome Logo. I am using Adobe Illustrator CS5, but you can accomplish this in CS (or version 11).
A guy requested this on how to go about making some inverted text. This was one way you can do it, cheers.
In this tutorial we create some cool Glossy and Shiny Orbs in Illustrator!
We create some cool orbs in Illustrator!
Graphs and Grids in Adobe Illustrator don't seem to get much buzz. In my opinion the options for them could be a lot better, but we can't change that so let's work with what we've got. I'll show you how to pop your design on your columns, and how to scale a special area if you need to.
We use a few tricks with Illustrator to accomplish a 3D pac man and ghost.
Some people requested a slower tutorial. Here is a tutorial of a vector sword. It's good practice to get used to thinking in shapes, mirroring things, and quickly manipulating them. Once you get good practice in shaping; You can worry about the fine detail. I have left the illustrator sword 1/2 way detailed. Add more details as you see fit.
I hope you feel good and smile while you draw the sword, because Illustrator is fun and it makes me happy sometimes.
We'll use adobe illustrator cs5 to make a mario star, lol.
We take a break from all the features and exercise our Pen Tool skills in Illustrator. Let's make the batman logo, very simple and easy, and we'll use a real image as a reference to trace it!
Photoshop has a Red Eye tool, easy peezy. Except this example the red-eye is so bad it would need some more maintenance. However, in most cases this tool takes the turkey home and fixes the problem pretty well! Adobe Photoshop CS5 Remove Red Eye Tutorial