Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Everyone's First Steps in Web Development

DZone 's Guide to

Everyone's First Steps in Web Development

If you want to get in to the web development game, learn HTML, CSS, JS — they are the tools of the past, present, and future.

· Web Dev Zone ·
Free Resource

Web development is a big thing nowadays and will remain so for quite some time. Web development is the field of writing applications that can be run and accessed via the web browser. The web development field had gone (and is going every day!) through tremendous changes. From the very first days of the internet and to our present days, web technology advances in huge steps, making state of the art technologies obsolete, creating new technologies almost on a monthly basis, and attracting more and more developers, companies, and industries to web development.

What Is Web Development Really?

In web development, we build web applications. A web application is an application that is rendered on the browser and accessed by the user through the browser. Simply put, when you order tickets to a movie in your hometown theater, when you check your bank account balance, when you write a post on Facebook, or update your resume on LinkedIn, all of these and more are examples of web applications. You open a web browser, go to a specific URL, and get a full working application. Today you can even find sophisticated applications on the web, like sound and video editing applications, drawing, recording, gaming, word processing, you name it. They're all on the web, and all are accessed via the browser.

So, how do I build one?

Like any other field, web development has its own jargon and tools. Since the technology becomes more capable and strong, new platforms, languages, and tools arise every day. But over the years that passed and probably for the years to come, there are three essentials tools and skills that stand in the base of every web application: HTML, CSS, and JavaScript. I call them The Triad.

What Is HTML?

HTML (stands for HyperText Markup Language) was invented by Tim Berners-Lee in the late 1980s. It's a standard that contains data to be rendered on the browser, and directions on how to render it. The browser reads HTML documents that tell it what to show and how to show it. For example, we can tell the browser to show the sentence "Hello World," and if we want the browser to make it bold, we'll add HTML directions (called "markups") that would direct the browser on how to render the text. In this manner, HTML contains the data (what to be shown) and the meta-data (how it would be shown).

What Is CSS?

HTML comes with a very narrow set of abilities to style the page. For real styling, we use CSS (stands for Cascading Style Sheets). CSS contains rules that control the page styling, and actually can do quite a lot — we can change font family, size, decoration, background colors, images, shadows, gradients. Every type of styling is possible with CSS, and more features are added all the time.

What Is Javascript?

Javascript (abbreviated to JS) is a programming language that was invented in the mid-1990s and its main goal was to enable simple functionality via HTML. For example, if we built an HTML form in which the user should fill in his/her name, we could use JS code to validate the input. Over the years, and really in the last decade, JS has gone from a modest, inefficient, and kind of "toy" language, to a monstrous creature that controls every last aspect of the web. Everything in the web development world is done with JS, and its popularity increases by every known matrix.

People Really Build Web Apps Using Those Three Tools?

The answer is yes and no. HTML is too complicated, CSS is a mess, and JS code tends to become unmaintainable very quickly; so you can't really write a web app that is more than trivial and keep your sanity.

Over the last decade, tons of tools were invented to overcome those disadvantages, and modern web applications are written in variety of modern, new, and shiny tools. You probably heard some buzzwords like Angular, React, Vue, Meteor, Bootstrap, Node, and so on. To be a web developer you will probably have to learn one (and usually much more than one) of those tools.

But here is the trick: every platform, every modern tool, with no exceptions, works on the same basic tools, HTML, CSS, and JS. No Exceptions, and I mean it. That means that you just can't start learning how to develop web applications without them. If you try to start learning Angular, for example, without any knowledge of the three basic tools, you'll get nowhere. So the conclusion is that you have to learn the basic tools and to use them as a jumpstart to other newer tools.

Another Advantage of Learning the Basic Triad

Even if you somehow manage to learn enough about one platform without the triad, you are not safe! As mentioned earlier, the web development world is crazy and moving fast. I mean very fast. New platforms, new libraries, and new tools are invented on a day-to-day basis. AngularJS started in 2010, but now it is version 7 and the Angular paradigm had changed drastically during this time. Vue.js came out in 2017, and as I'm writing these lines, there is some trend to migrate to Vue.js from other platforms. And this is not the end. One just can't keep track of all the new ideas and innovations with this influx of ideas. What I'm saying is that if you don't know the basics, you'll be irrelevant the minute a new technology appears. If you knew only AngularJS, what would you do when version 3 comes along and it's different from the one you know? But since The Triad — HTML, CSS, and JS — stands at the basis of every platform, when you know it you can migrate to any other new and shiny platform.

The bottom line: learn HTML, CSS, and JS if you want to be a web developer. They are not going anywhere anytime soon.

Topics:
web dev ,html ,css ,javascript ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}