Developing a Website

When you decide to build a website, if pre-built tools like all-in-one website-makersvisual website-creation software and content management systems don’t provide you with the control you desire over your website, developing it from scratch (the old-fashioned way) will be best for you.

Although some people may talk about developing a website using a content management system - or some other pre-built software, developing typically means coding the website in various web programming languages.

Because you're be making the website manually, you're going to be doing all of the design and development yourself.

How it’s done

Usually, people who use this method of making websites start by designing the website in a program (they set out the layout, the colours, the fonts, the images, etc.), and then they develop the website using web programming languages such as HTML, CSS, and scripting languages. If you're new to developing a website, however, you will most likely be making your website the other way around.

You should begin by learning and creating the HTML. HTML is the language that you structure the webpages – in the same way that a large building is structured with a foundation, walls, etc. You need to do this first, because you can't decide what the website should look like unless you understand how to structure it.

Next, you should learn CSS (Cascading Style Sheets) and apply it to your webpages, because this allows you to design the layout and appearance of the websites. In addition, there are several modern ways of writing CSS that allow you to create it faster and with fewer mistakes, such as SASS.

Additionally, you should learn the basics of a client-side scripting language such as Javascript. This will provide you with powerful ways to manipulate the webpages, improving the user’s experience on your website.

When you’d like JavaScript to be more intuitive and faster and easier to write, you should learn a JavaScript ‘library’ called JQuery. Eventually, when you’d like to update data on a webpage without causing unnecessary inconvenience to the viewer (such as ‘loading’ new content when a visitor reaches the bottom of a webpage), you should learn a group of technologies called Ajax.

When you’ve mastered the basics above, you should learn a server-side programming language to make your website truly dynamic. The most popular of these in 2013 by far is PHP. Other popular ones include Perl, ASP.NET, Java, Ruby on Rails, and server-side VBScript.

A web database is very often used in addition to the server-side languages above. You should learn how to use a web database if your website is required to handle lots of data. Some of the most popular database systems in 2013 are MySQL, PostgreSQL, SQLight and MS SQL Server.

Setting up Your Development Environment

If you’re only developing static websites (often called front-end development), then all you’ll need to write your code is a text editor or code editor – a text editor with tools to help coding, such as syntax-highlighting, code-hinting, etc.

If you’re developing dynamic websites or using server-side development languages, or even building more complex static websites, you’ll probably want to use software that provides additional features: integrated development environments (IDEs). IDEs often provide tools to compile, run, and debug your code, as well as preview your web pages. Traditional IDESs need to be downloaded (or bought) and installed on a computer. More recently, new IDEs have been developed that run entirely online, and are thus cloud-based.

For an excellent overview of the popular software available, you should visit Tutorialzine’s Best Code Editor article.

Some popular code editors include Notepad++ (windows), Brackets (Windows & Mac), Coda (Mac), Sublime Text (Windows, Mac, & Linux), and TextMate (Mac).

Some popular traditional IDEs include Dreamweaver (Windows & Mac), Eclipse (Windows, Mac, & Linux), Visual Studio (Windows), Komodo (Windows, Mac, & Linux), Aptana Studio (Windows, Mac, & Linux), Netbeans (Windows, Mac, Linux, & Solaris).

Some popular cloud-based IDEs include Cloud9 IDE, Codenvy Developer, CodeRun Studio.

Other Popular Tools that Compliment Editors or IDEs…

Places to learn Web Development

Web Top Ten provides a solid list of 10 Websites to Learn Website Development. Be aware that these websites from which you can learn website development vary in many ways; some cost quite a bit of money while some are free; some provide long, detailed articles you’d need to read, others provide short training ‘lessons’, others offer videos, while some even provide interactive writing and testing!

If you’re not willing to pay to learn, you should visit the excellent article Online Courses has created called 50 Places You Can Learn to Code (for Free) Online (Aug 2012).

Tools to Improve Web Development: Frameworks

Building a website from scratch using the scripting languages above can be an unnecessarily long process (but is great if you’re still new to website-building). Unnecessary because most of the code you’ll write has been written countless times before, by expert web builders. Frameworks provide you with a better way to start-off making a website. If you’re comfortable with the basics of website development, you should definitely take the time to learn about frameworks and find one that’s right for your website.

No developer wants to be spinning their wheels, or operating on mundane tasks when they could instead be creating rich and compelling experiences.

Smart developers work with smart tools, effective workflows, and wise strategies for development.

- Paul Irish

Helpful Websites for Web Developers

The W3C (The World-Wide Web Consortium) is an international organisation that sets the standards for internet modules or specifications such as HTML and CSS. Besides an incredible amount of information on web standards that the W3C website provides, it provides tools to validate websites according to the standards; professionally-built websites are expected to use these validators to prove that they’re W3C-compliant. (WPD) (launched in Oct 2012 – expected to be in beta in 2014) is a wiki for web developers that anyone may contribute to. Its purposes are to help developers learn, and to be a “comprehensive and authoritative” source for web developer documentation. Its content was donated by Microsoft, Mozilla, Opera, the W3C, and Google, and it covers topics such as a web developer beginner’s course, HTML and XML, CSS, JavaScript, and website accessibility. It also promotes itself as a community in which the contributors are encouraged to communicate with each other through its blog and IRC channel.

The Mozilla Developer Network (MDN) is also a wiki for web developers that anyone may contribute to. It has articles covering HTML and XML, CSS, JavaScript, web graphics, and Mozilla’s own software.

W3Schools aims to be a place to easily learn about website development. W3Schools covers the same topics as WPD and MDN, as well as other scripting languages like PHP, SQL, and others. Although W3Schools has become the most well-known website of its kind, it has been criticised by professionals for its information not being highly accurate, and being highly advert-laden.

Sitepoint aims to provide news and information relevant to website-building professionals. Rather than be a place to learn or refer to in times of need, Sitepoint provides articles on topics that are relevant at that time (like a blog). It’s topics cover front-end and back-end website development, and some web design too.

What Should be Done Next

When you feel like your website is ready for launch, you’ll make it available on the internet.

Then, for any effective website, you should optimise and improve it.

Lastly, if you're making it for someone else, you can then charge for it.

Average: 8 (1 vote)
How complete is the information on this page?

Add new comment