Introduction

1

Whenever you want to create some complete software product, even a very simple one, you face such a problem: almost always you can't create it with one single technology. Instead, you'll need a bunch of different technologies dealing on different areas of different problems.

For example, you're going to create a very simple website. OK, you take pure HTML and do some layouting. However you don't want your website to look like your high school homepage. So you also take CSS to do some styling on your website. Also you want your website to be a bit more alive than your ex, so you take JavaScript and code some interactive behavior. Next, you need some data to be displayed on your website, and you need to keep that data somewhere. So you take MySQL. But wait a minute — to manipulate MySQL you need some backend programming langauge. So you take PHP. And this is a very basic setup. Oh, almost forgot! In case you rent a VPS or dedicated server for your website, you'll also have to know how to deal with Linux command line as well as install and configure several Linux services.

And all that just to create a simple website? Come on man, you must be kidding!

Well... No, I'm not.

To avoid all that and create a simple website you could use CMS like WordPress or kinda that. However it's not really a web development. After all, you won't call “web development” a process of customization of your Facebook page, right? CMS is a sort of that — a highly-detailed customization and data management of a completed website. However creating a website from scratch is something entirely different.

A website consists of frontend and backend. Simply put, backend is an area which you store and query your data on. Frontend is an area where you display that data. For example, assume you have a list of your classmates. Each entry of that list is just a name and birthdate. It's just a data without any signs of how it should be displayed. This is your backend. That data could be displayed in different ways. You could layout it as a simple single-page list. Or you could create a personal page for each of your classmates from that list. So, you consider how to display a data independently from the way you store it. This is your frontend.

The most complex and biggest websites keep their backand and frontend on separate physical servers. However usually you keep them within the same server. In fact, almost always you keep them within the same web application.

But why should you think of backend and frontend if everything is inside the same application? Well, it goes back to the common principles of software design. Internally a good software product is not just a mess of code. A good software is always a stack of narrow layers of responsibilities, and every layer solve its own narrow set of problems. That approach gives you much more control, makes debugging much easier, and you need to keep a minimal amount of information to understand how does everything work.

Also that approach makes your software extensible and ready-to-grow. Today you have 1000 unique users daily and it's OK to keep everything within a single web application. However tomorrow Justin Bieber could tweet a link to your website and all of his 100+ millions of subscribers will go to see what's going on there. So you may need to rent a separate server (or even several servers) for your frontend. You'll be able to do that much faster if you were keeping your system design according to best practices.

As I mentioned before, even creating a simple website from scratch requires a bunch of technologies you should use. However this is “Web development for beginners” tutorials, so I'll focus on the frontend part, at least at first. There is also “PHP for beginners” tutorials on my website which you can consider as “Backend for beginners” tutorials. Eventually we will reach MySQL usage and some other things you'll need to create a more complex website.

There are three basic frontend technologies you need to know for the web development: HTML, CSS and JavaScript. They're almost always going together, and therefore, should be learned together. It's very unlikely that you're good at CSS but have no idea what is HTML, or vice versa.

HTML is a web page markup language and it defines a content and structure of a web page.

CSS is a styles definition language and it defines an appearance of a web page.

JavaScript is a programming language that used to manipulate HTML and (or) CSS entities and it defines a behavior of a web page.

There are many very different libraries and frameworks for the frontend development, however all of them eventually are based on these three: HTML, CSS and JavaScript. And we're going to learn all three.

Lesson 2
Share this page:

Learning plan

1. Introduction
What you're going to deal with
HTML elements and the basic document structure
There are a couple of SEO tips you should learn about right away
Pure HTML is boring, so let's add some styles

Cross related lessons

Embedding PHP script into HTML — Lesson 2