So You Want to be a Web Developer: Part 2 (Fundamental Web Technologies)

If you’ve been following along in this series, we covered some basic concepts about web development. We discussed things like what web development is, why you should learn it, the benefits of knowing how to develop websites, and the tools of the trade that you need to get started to be a web developer. If you were unlucky enough to miss out on our part 1 in the series titled “So You Want to Be a Web Developer”, you can check that out now.

In part 2 we’re going to take a look at three of the most important technologies that every web developer should know if they want to get started building websites. That’s right, I’m talking about HTML, CSS and Javascript. While Javascript isn’t required to get a basic static web page up, it’s good to mention it lightly here just so you can get an idea of why it’s useful and why you’ll want to learn it. So without further ado, let’s get started!

What is HTML

If you’re scratching your head right now wondering what the heck HTML is, don’t worry, it’s just a scary looking acronym that stands for Hypertext Markup Language. At this point, you’re probably wishing you hadn’t asked, because those words look scarier than their abbreviation. Not to fret, we’re going to break this down for you in a very easy to understand and digestible way.

Hypertext is text on a page that contains links to other text. It’s as simple as that. At the start of this article, we dropped a link to part 1 of this series that we did last week. That link was a text link or a “hypertext” link. It’s the text that we wrote, that when clicked, links you to another web page.

So now that we know what Hypertext is, let’s take a look at what a “markup language” is. In a nutshell, a markup language is simply a language written in order to help give meaning to the text. HTML is all about semantics. Its job is to describe information or text.

A markup language basically annotates text for processing. In the case of HTML, it does this using something called HTML tags. These tags wrap around text to give them special meaning for your browser to process. For example:

So You Want to be a Web Developer: Part 2

There are two tags in this example. There is an opening tag labelled and a closing tag labelled. The difference in the above tags is simply the “/”. This simply means that this is the “closing” tag. For every opening tag, there should always be a closing tag to accompany it (although there are some HTML tags that don’t require a closing tag). In HTML, an opening tag along with a closing tag with the text in the middle is known as an HTML element.

This title tag is responsible for letting the web browser know what the title of the web page will be. In this case, the title of our web page is “So You Want to be a Web Developer: Part 2”. You can make the title tag whatever you want, but whatever you choose is what users will see at the top of their browser window. For now, just know that HTML and its tags are all about applying meaning to text for processing in your browser.

What is CSS?

The acronym CSS stands for Cascading Style Sheets. The style sheets are responsible for the look and feel of a website. A CSS stylesheet allows front-end web developers to spice up that bland HTML and give the website the look that they want it to have.

Often times when building websites professionally, the web designer will come up with a great design, and then the front-end web developer will take the design and write all the necessary markup and styles to get the webpage to match the design perfectly. This is often referred to as a PSD to HTML Conversion, where the developer “slices” a design to get image assets for implementation in webpages. PSD to HTML conversions is being used less and less nowadays because of the growth of responsive web design and of the fact that the desktop isn’t the main medium for browsing websites anymore.

Stylesheets are an important part of a website. Without them, your site will look pretty ugly and basic. The great thing about stylesheets is that you can use HTML to write the markup of your web page, but depending on the style sheet, the site can look totally different. You can actually have infinite variations and looks for your website all using the same markup. A great example of this is the CSS Zen Garden. This website is basically a showcase of different stylesheets people have written for one HTML page. The results are pretty amazing. I’ll stop geeking about this long enough to tell you about Javascript though because it’s pretty cool too.

What is Javascript?

Where HTML is all about semantics and giving meaning to text and CSS is all about applying styles to the HTML to make the page look the way you want it to, Javascript is all about adding functionality to your web pages. What do I mean by functionality? You probably already know what I mean but don’t realise it yet.

When you use Google.com to search for something, and you find that Google is giving you suggestions as you type, that’s added functionality provided by Javascript. Have you ever used a website that has an infinite scrolling feature, where new items or post-load as you keep scrolling and never stops? That’s Javascript. Ever wonder how websites are able to make use of Google Analytics to find out how much traffic their website gets? Well, they use little pieces of Javascript to do that as well.

Javascript is a very remarkable and capable programming language. If you run extensions in your browser, those are actually written in this language. You of course don’t need to use Javascript to make a website but you’ll soon find that it really comes in handy and is a tool you’ll definitely want in your arsenal.

Conclusion

While these certainly aren’t all the technologies that you’ll come across in your web development journey, these are three of the most important that you’ll encounter and definitely need to know if you want to build a website or plan to ever call yourself a web developer.

In part 3 of the series, we’re going to share with you some really great resources that you can and should use to help learn the ins and outs of these technologies and get you started with actually building your first web pages. We hope you’ve found this introduction useful. Let us know in the comments below!