Learn how to build websites from home 100% free

Learn to make websitesLearning how to build websites can be daunting at first. but with the amount of information on the web, it’s very easy to gradiently approach the subject and become a good website builder. I started a couple of years ago and I can now put together websites with ease. If you want to learn to build websites then this is for you.

This article is not for you if you only want to learn to build websites using visual based website builders and/or content management systems. I will be doing a separate tutorial on how to build websites that way. Realize that both ways can be used correctly and have their rightful uses depending on the goal for your website.

I will not be telling you how to build websites by myself — instead I will be telling you where I learned to build websites. I will give you links to the right places to learn, and all free.

The first and best place to start learning about websites is W3 Schools. W3 Schools has all free tutorials on all of the subjects you need to learn to be able to start building your’e own website. What you need to do is do the tutorials on W3 Schools in the order listed below. Make sure you play around with each concept after you read it. If you have any questions, post a comment here and I will answer it.

Learning Website Building Basics

Read this first. This article gives you the whole picture before you start learning. I suggest you read it.

Learn HTML.   HTML(Hyper Text Markup language) is what every website is made out of. It is the first thing you will need to learn, to be on your way to building websites. Make sure you take the time to really get this because it is the most basic and essential piece of websites.

Learn CSS.  CSS(Cascading Style Sheets) is what most websites use to efficiently style their HTML. With CSS you can make your website have an overall consistent design or feel. It also enables you to make design changes that reflect on numerous HTML pages by only changing the design change in one place.

Learn Basic Website Hosting. Web hosting means having a place for your website to reside. Learning this will allow you to set up your own website. For example, this website is “www.techassistnow.com”. If anyone goes to that web address, they see this website. When you understand how to host your own website you can then have your own domain name and website content. This will allow you to put together a full basic website that can be seen publicly on the web.

Once you get a feel for this, practice using HTML and CSS until you are pretty comfortable with it. It is wise to know these subjects well before going onto the next step, which can be difficult at first. By Learning HTML and CSS you have the basic knowledge to build a website. If you want to learn how to make interactive, more modern websites, continue down this list.

Learning Advanced Techniques

Learn Javascript. Javascript allows you to build interactivity into your web pages. With javascript you can make your page come to life and be more inviting to the people visiting your website. Learning Javascript can be troublesome at first, so take it easy and mess around with the examples as much as you can. Javascript has nothing to do with JAVA. JAVA is an advanced programming language and shares no similarity to javascript.

Learn PHP. PHP is a programming language that allows you to be able to deliver more dynamic web site content. This kind of programming is called server side scripting. There are numerous different types of server side scripting. I recommend using PHP because it is the simplest to learn and is used broadly on the internet. Do not expect to learn this all at once. As you learn some, use it and build something with it.

Once you have gotten pretty good at PHP, you have come a long way. Learning the really advanced features of website building will become easier as well as learning other server-side scripting languages.

Learning More about the Advanced Techniques

Becoming really good at building websites can involve numerous other subjects. I list them below so you can be directed to the right place. Other than that you can google any questions you have and find very good free articles and tutorials on these subjects. As a tip, if you see something that you like on a website you can right click in the browser window and click “View Source”. Looking through the HTML should give you an idea of how it was done.

Learn Ajax Here. Ajax is a type of javascript programming that can make webpages even more dynamic and load faster. When you go to a website like Google Docs you can see ajax in effect. A lot of new websites are using this programming technique.

Learn XML Here. XML stands for (EXtensible Markup Language). XML is used to store data.

Learn Other Server-Side Scripting. Learn programming languages that are similar to PHP. Click on the one you are interested in.

Learning Web Design

Learning web design is a whole subject in its self. Learning web design normally requires learning graphic design to a degree. If you are already a designer or if you just want to jump into learning web design, read on.

Learn the web design/Planning process. This is the first step in designing a website. It is essential to a good website to plan it correctly.

Learn Photoshop. Photoshop is the main program used today to design web sites. Many sites are planned using a graphics program before any HTML or web coding is done. Websites done like this can have a huge edge on aesthetics and design. Photoshop is a huge program and can be a lot to learn by yourself. I suggest getting a book on this. The book I used was the Photoshop Bible, they come out with new ones for each new Photoshop version. Google “Photoshop Bible” or go to Amazon and get it.

Learn Web Design and Web 2.0. These are some very good tutorials from Scratch Media. I love this website and would suggest anyone read the information on there.

Learn Web App design and put AJAX to use. This is also a site from scratch media. Very useful and informative.

Changing specific color regions in an image

 

Level: Intermediate (can be useful for advanced users)

Description:

This is a tutorial on changing specific colors in an image using the color range tool in Photoshop.

You can use this tutorial to easily change regions of color in an image to different colors. This can be very useful if you want to make a part of an image fit into the color scheme of the background or even just changing the color of someones dress or a clothing item.

Photoshop Version: CS2 (Can apply to Earlier versions up to Photoshop 7)

Tutorial:

The first step here is to go to the menu [Select->Color Range].

Then click on the area of color in the image that you want to change. Here we are clicking on a red part of the women’s dress.

The end goal for this tutorial is to change the color of her dress.

You can use the plus and minus eyedropper buttons to add more regions of color to the selection. Here we are just using one sampling of red. Adjust the fuzziness. (The amount of similar colors to the one you clicked to add to the range. If you go higher it will select any kind of red, if you go lower, it will only select a ceartain amount of reds similar the the area of her dress that you clicked)

Click ok to see the selected area of the image. As you can see here, we selected her dress but her lips are close to the same color so they were selected as well. The next step shows you how to remove those areas that you want to leave alone.

Click on the “Edit in quick mask mode button on the toolbox. This will bring you into the “Quick Mask” mode which will allow you to edit the selection by using the brush tool.

All of the areas that are pink are the areas that are not selected. Select the brush tool and make sure your foreground color is black. Paint out the area around her lips and head. This will remove the selection from those areas.

Once you have done this, click the “edit in standard mode” in the toolbox. This will return you to standard mode where you can see the dancing ants around what is selected. You will notice that the area that you painted out is no longer selected.

Now you can do whatever you want with her dress because you now have it selected. Here I show you how to change her dress color from red to purple. Go to the Menu [Image->Adjustments->Hue/Saturation] and set the settings shown here. You can also experiment with the sliders to see what colors you can get.

Here is the finished dress showing the color has been changed.

Making an image feel cooler

     

Make an image cooler, meaning make the overall cast of an image, a bluish color. This can be used to make images look more cutting edge, or even making them look more cold.

Level: Intermediate

Photoshop Version: CS2

Tutorial:

First you would open the image you would like to adjust. Here we open an image of a Lexus car.

Next, go to [Image -> Adjustments -> Photo Filter]. This will open the Photo Filter window.

Set the settings as shown here, you can test with different shades of blue or cyan. Here we used a cyanish blue. The density here is set pretty high. Density determines how much the color is applied. If you keep “preview” checked you will be able to see the outcome of the image. Notice the image has a cooler look.

The photo filter can be used in many ways and is a great image adjuster. I use it a lot to give photos the right feeling. You can use any color you want, it depends on what feel you want the photo to have. For example, if you are doing a design that is orangish and you put a photo into it, but the photo sticks out too much, you can apply an orangish photo filter to bring it into better color harmony.

The good thing about the photo filter is that it keeps the rest of the photo details in tact and keeps the rest of the colors there. Before they had this adjustment I would try to use Hue/Saturation, which would ruin the image details and it wouldn’t give a general cast, it would just apply a color over the whole image. The photo filter is good, because it only changes the colors for certain parts of the photo, but keeps the general color composition the same for the rest of the photo.