Loading...

How I built My First Website (and How You Can Do it Too)

Craig
in
Web Design Basics

It all started when I met this woman who was an exotic dancer (O la la). She had heard from a friend that I was doing a degree in computing and wanted me to build a...image based website for her. Little did she know I had not even begun to learn any kind coding at my school, much less web development. It was my first year ok! I took the job anyway. But I knew I would be starting from point zero.

Starting From Point Zero

One of the first things I discovered was that building a website has two main parts:

  • Website Design - Mainly concerned with the look and feel of the website. The design plays a big role in the navigation and readability of the finished website.
  • Website Development - This is the coding process that allows your website to be visible on the internet and be functional.

I was thrilled! I was a Graphic Designer and felt I had the necessary skills to design a website. Boy was I wrong. Web design is a profession onto itself and some clients are going to expect you to be designer and developer. While I did manage to put something not odious together for the client, do your best to explain that design is best handled by someone with experience in that field. Below are some websites you can outsource the work too.

If you are truly intent on learning web design, I find the below link to be a good place to start.

http://webdesign.tutsplus.com/series/design-school-for-developers--webdesign-13793

The applications below will help you prepare the images you will need for the website as well.

  • Adobe Photoshop (Paid)
  • GIMP (Free)

Learning Web Development

I got my design approved by the client was ready to turn it into an actual website. The first thing I realized was the sheer amount of tutorials that exist for web development. I am going to save you the hours it took me make sense of all this information and break it down for you step by step.

Step 1: Coding Applications

When I was starting out, notepad was my coding application of choice. Us old timers had it hard back then. Now I recommend the below code editors to help make the learning process easier.

  • Notepad++ (PC)
  • TextWrangler (Mac)

Step 2: Recommended HTMLCSS Tutorials

The basic foundations of a website are built on two programming languages:

  • HTML - The markup language of the internet. Without it, no website would exist. It's what separates text from images, what separates a heading from a bolded word.
  • CSS - This is responsible for the look and feel of the website. Font colors, positioning, backgrounds and more.

The tutorials below went a long way in not only teaching me how to write HTML and CSS but also in understanding what I was doing, and that can often mean the difference between a professional and an amateur.

  • http://ryanstutorials.net/html-tutorial/ - A good beginners resource, this tutorial seeks to give you background information about HTMLCSS and handy tips that all Web Developers could benefit from. Start here for an easy to follow experience.
  • http://www.htmldog.com/ - This is an excellent resource to start learning the basics of web development. Their tutorials are broken up into Beginner, Intermediate and Advanced for both HTML and CSS.
  • https://www.youtube.com/user/tutor4u - If you prefer to learn through visual media, Tutor4u has great video tutorials for both HTML and CSS.
  • http://www.codecademy.com/ - Code Academy is a good place to put your new skills to practical use. I would not recommend starting here though, while it is user-friendly, you will gain a better understanding of the languages using the above tutorials first.

    • Forums are a great way to learn from others and get help for when you might get stuck while learning HTML/CSS (And you will get stuck).

  • http://www.webdeveloper.com/ - Lots of seasoned coders here.
  • http://www.webdesignerforum.co.uk/ - Don't mind the web design in the URL, they have a section for web development as well!

Step 3: Putting it all together

Would you believe this is all you need to start building your first basic website? With this information I was able to turn my design into something clickable for the client, and you can do it too. Try to re-create the example resume webpage I have given below. It will put what you just learnt to the test and you will begin to learn the nuances of web development bit by bit.

resume example

SOURCE FILES HERE

Step 4: JavaScript

My client wanted a picture gallery. This was a website about pictures after all so I had to build one. The J-query framework which runs atop JavaScript is what I had to use.

Don't start out coding a picture gallery as a beginner. The tutorials below will get you familiar with the basics of JavaScript.

Step 5: Add Some JavaScript to Your Website

Start Simple. For example: create a button that changes a line of text in your document. Then you can create a form on another page of your website that checks password and user name length.

javescript example

SOURCE FILE HERE

Overall this is a very powerful language; decide how deep you want to go after dipping your feet in some other languages.

Step 6: PHP

I had to create a system in which users could login and store their information. Functionality such as this is beyond the current capabilities of HTML and CSS. Enter the Object Oriented Programming Language PHP.

Now some experienced web developers might say this language is on its way out, but the truth is, it is still pretty much everywhere, especially with Content Management Systems that utilize a database (more on that later).

You don't have to become a master but taking a week to learn the basics will go a long way on your path to web development. I used PHP to communicate with the website's MySQL database, storing their confidential information and retrieving it as necessary.

Step 7: MySQL

This is one of the most popular databases of choice for many websites and Content Management Systems. This is where user data is stored for retrieval upon request by the website. Web Hosting websites often have MySQL and PHP installed on their servers because they work so well together. It's a pretty straight forward language that is easy to learn and highly beneficial.

Step 8: Add PHP & MySQL to your website

I know I have spoiled you on source files but you will have to take the plunge on your own with this one because it requires some pre-setup before you can get it to work. I have provided links that will help you in that aspect and tell you the basics of course. For functionality, try retrieving data from your MySQL database and displaying it on your website.

What's Next?

At this point my website was complete. It was hard but definitely a good learning experience. You might be wondering where to go from here. Well it was about this time I discovered Content Management Systems (CMS). Content Management System (CMS) - these are blogging platforms which websites can be built upon and are becoming quite popular for getting beautiful websites up and running quickly. WordPress, Drupal & Joomla are a few examples of well used CMS's. Plugins can be downloaded and installed onto a CMS to give it new functionality such as an online store or forms to capture user information.

You can check them all out when ready but I would recommend starting with WordPress. I saved CMS's for last because they utilize all the languages above and now you will be better equipped to understand and modify websites built using these platforms.

How Do I Know When I'm Ready To Start Taking On Clients?

Well it depends. If someone has caught on to your recent web learning exploits, they may want a simple website to display information about their new business. Should you take the job? Of course!

So you can begin scouting work as long as it falls within the capabilities of your current skillset. As your skillset and experience grow so will the contracts you acquire and the rates you charge, which could go from $200 to $2000 easily.

Good places to look for contracts are outsourcing websites such as:

Also don't be afraid to do some shameless promotion on whatever social media sites you may be on, you never know who knows someone who's looking for someone to build a website for them. A little warning about these outsourcing websites though, there are a great deal of people willing to work for lower rates than you might find acceptable so I would approach these outlets with the specific intention of growing your portfolio of websites.

But What If I Want A Career At A Fancy Company?

It is highly unlikely that a company will hire you before you have actually built something substantial, even if you have a degree. What I would recommend, is to go to career sites and look for web development jobs. Make a note of what they are looking for from a candidate, you will most likely find a wide variety of skillsets. Skills required could be Asp.net, Python or Ruby/Rails.

These are complex languages which one should only venture into once they are ready to specialize. Pick one. Research it. Learn it. And remember! Practice. Practice. Practice.

About the author

Craig Johnson

Craig is a professional web developer with over 5 years of experience in the field of IT. He runs a website dedicated to people with zero coding experience and gives them the best tools to easily learn web development.

Copyright © . All Rights Reserved