We’ve put together a list of over 100 resources to help make your life as a developer easier; where to find snippets of code, sites that automate processes, cheat sheets, lessons, useful tools and a couple of silly videos to give your brain a break if you make it through to the end.
Check this out!
Sometimes they can be funny, sometimes thought provoking, other times they just mess with your mind. They
’re always take your breath away though and make you wonder at the skills of the people that created them.
Sometimes it can be difficult to learn how to do something on your own by reading and following a tutorial that someone has written but not quite fully explained what and why they were doing things. Certain issues are can forgotten to someone who already knows how to do what the tutorial they’re writing is about, and many times there are a number of problems that can arise and you won’t know what to do. A lot of tutorials I’ve seen don’t give you the answers for what and when any of the little things go wrong, and more information could be useful, and help you better understand what you are doing.
For example, trying to learn PHP can be a nightmare with no one helping you one on one. Just reading something that tells you how to write something doesn’t take into consideration how your php.ini settings might be or whatever the billion errors PHP has might be telling you. There have been a ton of times I can think of that I had no clue what to do, or what I was even doing in the first place, or what the hell to do to fix what I did, which I have many times given up, and just started from scratch, or just said fuck it, and deleted what I had done, and never tried it again.
If there were someone talking to me, and showing me at the same time on their own computer, and explaining what they are doing and why they’re doing it a certain way, or what is wrong or not a good idea by doing it another way, or why and how it works by doing it like them instead of how I would think to do it, well then things would just be a lot better and far more
understandable. Not to mention faster learning and less stressful, and clueless about what your doing until something clicks, but not really completely, like myself. I have found that watching podcasts or videos that teach how to do things that I couldn’t otherwise understand if I followed a written tutorial, are really helpful period. I can understand the tutorial, of course given it is something I wouldn’t easily understand, I’m not a complete idiot, a lot better why I should do something a certain way.
I am far more right-brained than I am left-brained. Creative side is your right brain for those who are like me, and wouldn’t know that necessarily. I hate math, and problem solving, if I have to visualize it in some logical way and not visually senseful.. . Ok now I’m talking none-senseful, or starting to. Ok, I have to go to my niece’s 6th birthday party so, here is a list of Video Tutorial Sites and Other Great Tutorial Sites for all things related to computers, programming, design, and more. This list will also be posted on my Resources page too. I hope you will find these sites as useful as I have.
Enjoy!
Video Tutorials
Other Great Tutorial SitesIn this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? L
I decided to draw my Ipod with Photoshop, and figured I would make it a tutorial as well. I have a 3rd generartion silver Nano. Here’s the final result of this tutorial, and pretty close to what my Ipod looks like.
So start by making a new default size canvas in Photoshop. Then using the rounded rectangle tool, draw out a rectangle that looks something like the image below. I used these settings:
- radius: 18
- width: 192px
- height: 250px
Then make another rectangle that is a little smaller than the width of that, and about half the height, it should look like what I have below. Here’s the settings I used for this one:
- radius: 5
- width: 175px
- height: 122px
Press control + J twice to duplicate this layer, and select both new layers in the layers pallet, and right click on them and select merge layers. Then use the rectangular marquee tool, and drag out a rectangle inside the newly merged layer, and press delete. Now it should look something like this,
I changed the color of the original rectangle to white, and made the new one that you deleted the middle of black so you could see what it should look like. This is to make the black border around the Ipod’s screen.
We’ll be changing the color and style of things later, but for now we’ll just make the basic shapes for the layout of things.
If you want. use guides to divide the rectangle up evenly, so that everything is lined up right, and looks like its balanced ok. This will make it a little easier to make the circles for the buttons and stuff.
Next, use the eliptical marquee tool and hold the shift key down to drag out an even circle in the center of the bottom half. It should be a little bigger than the size of a quarter. You can use the guides to make it line up and sized right. Just start by dragging the circle out by placing the crosshairs on a corner and drag it diagonally to the other corner. It should work out right if you divided the guides evenly.
Press Ctrl + Shift + N to create a new layer, and then Ctrl + Backspace to fill the circle in with white.
Then make another circle with the marquee tool, centered on the last one, and about half the size, or about the size of a dime.
Make a new layer and and fill that one in with a gray color,
like: #777777.
Make sure all these things are lined up correctly and look ok, and then we can start to add a little style to this thing.
Now for the first, big rectangle we made, double click on the layer in the layers pallet, or click the little f button for adding layer styles. This layer will have the styles: inner shadow, bevel, and a gradient. The images below show the settings I set for each of these:
Gradient settings
This is the gradient I made for this. This image has the color codes for it.
Settings of the gradient overlay.
Bevel settings
Inner Shadow settings
For the screen layer style, select the second rectangle we made, the original one the we had duplicated, and add a gradient layer style for it. The settings for this one are shown in the image below.
The gradient I made is just a black to dark gray or:
#000000 - #45494d
The screen gradient overlay settings:
Now add the text for the Menu button on the white circle.
I made the font of the text with Arial, and an 8 pt font size with the color #7d7d7d, same gray as the base color.
Select the Faux Bold and All Caps buttons, and change the anti-aliasing method to Smooth.
Use the pen tool to draw an arrow (triangle) pointing either left or right, and resize it to be the size of the font.
Hold the Alt key down, and press the arrow key once to duplicate the arrow move it over so it’s next to the first one. The draw a 1 pixel line the lenght of the arrow’s width, and move it next to the arrows.
Then select the 2 arrow layers and the line layer, and duplicate them, and press Ctrl +T and right click on the canvas, and select Flip Horizontally, and move them to the other side of the circle.
Duplicate one of the right arrows once, and the line twice, and move those to the bottom of the circle for the Play/Pause button.
By now it should look something like this:
The last part, is the center circle layer style. Open up the styles for that layer, and add a gradient to it. Use the Foreground to Background or Two Color gradients, and change the gradient overlay settings to match this image:
That’s it!! You should now have an Ipod Nano.
Of course you can always add a reflection to it, or drop shadow, or whatever you want but I’m not going to go into that.
I hope you liked this tutorial. Let me know if you have any questions about it, or comments for me.
Also, you can download the original psd of my design too if you like,
Making an iPod Shuffle
Create an iPod Touch
Making an iPhone
Recent Comments