Three Pillars of Web Development

When diving into web development, it can be a bit overwhelming looking over everything that goes into building a competent interactive website.

Git & GitHub, libraries and frameworks, APIs & Postman, and UI & UX, all cover a lot of information. It can be intimidating staring down all of these new and unfamiliar technologies all at once.

While the field of web development includes many concepts and technologies you should be familiar with, the three main pillars you should begin with are HTML, CSS, and JavaScript. Start strong with these fundamentals and everything else will become much easier to understand.

This article will discuss the main components of each of these pillars as well as additional resources to help you on your web development journey.

HTML

HTML stands for hypertext markup language. This markup language is the basic foundation and structure of a webpage. Without HTML, CSS has nothing to style, and JavaScript has nothing to interact with.

Hypertext illustrates how the web is interconnected through hypertext links. Your ability to click this hyperlink and connect to a different webpage is a large part of what makes the web so successful.

Markup illustrates the syntax that we use for HTML in order for the browser to understand how to correctly display the content of the HTML file to the user.

When building a website, HTML is the starting point. Your webpage is essentially an HTML file. If you are building a multipage website, then you will need multiple HTML files, with each file representing its own webpage.

It is common practice among developers to name the main page “index.html”, and to include all the HTML files together in one directory.

Your HTML files display the content of your webpage, such as the text, headings, images, buttons, etc. You can add these pieces of content by including elements in your file. An HTML element includes a start tag, the content you want to display, and an end tag.

Note that not all HTML elements require an end tag. For example, the image tag does not require an end tag.

<img src="assets/images/labradors.jpg" alt="Picture of Labradors">

Important HTML Tags you should be familiar with:

There are several HTML tags available for use, but don’t think that you need to memorize all of them. Just become familiar with the major ones and you’ll pick up any others that you need along the way.

CSS

CSS stands for Cascading Style Sheet. It is a popular styling language that gives each website flavor and you guessed it, style!

Before CSS came along, most websites on the internet looked the same. This is because developers were severely limited by what they could design using just HTML.

Today, with a plethora of design options in CSS we can change the color, font, sizing, and more of our websites.

The cascading part of the name illustrates the method or algorithm CSS uses to determine which styles it will apply. There are three ways of styling HTML elements using CSS, inline, internal, and external. Each of these methods has a priority level of importance.

Inline

As the name suggests, this method involves applying CSS directly in the same line as the HTML element. CSS is applied as an attribute to the element using the keyword style.

<h1 style="color:red">This is my heading</h1>

-You apply the CSS style inside the opening tag of the element.

This method is simple and easy to add, but it’s not recommended for styling the entire website but instead for targeting a single element.

Internal

This method involves placing all of the CSS styling rules inside the header section of the HTML file.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

Using this method, you can target multiple elements and apply different styling rules to each. Internal is great when you only need to style a single html file, however, it’s not recommended for targeting multi-page websites. This is because the CSS styling located in the head section of the file only applies to the single html file, and not the entire website.

External

This method involves creating an external style sheet, placing CSS styling inside the sheet, and then linking all html files to this sheet. By convention, most developers name this sheet “styles.css”. You can name the file whatever you like as long as the extension ends in CSS.

To link your HTML files to the style sheet, use the link element with the rel and href attribute. This command tells the file where to pull CSS styling rules from.

<link rel="stylesheet" href="style.css">

-rel represents the relationship and href represents the location of the style sheet.

This method is recommended in general, but especially when you are working with a multi-page website. Otherwise, you will need to style each page individually and this could lead to unnecessary complexity and inconsistency in your website.

After you have learned the basics of CSS, I would recommend looking at CSS frameworks such as Bootstrap.

Bootstrap comes in handy when designing websites because it contains pre-made CSS styles that you can use in your website. It helps save you time when you’re on a tight deadline. However, it doesn’t offer as much customization as if you were to design the website yourself using just vanilla CSS.

It’s important that you understand the syntax and requirements of CSS before utilizing any frameworks. Having a strong foundational knowledge of CSS will enable you to have more control and flexibility when building websites.

JavaScript

Finally, we arrive at JavaScript, also known as the scripting language that powers the web. HTML and CSS allow us to build beautiful websites filled with content. However, these websites are static, meaning the user can’t interact with the content on the page.

This is where JavaScript comes into play. This language gives us functionality and action. JavaScript allows for events to occur when you click a button or submit a form.

JavaScript is such a big part of web development that every major web browser uses this scripting language.

JavaScript follows a standard set of rules known as ECMAScript. This standard determines how JavaScript should work in the browser and what updates will be applied annually to the language.

Primitive Data Types

There are several data types you should be familiar with when working with JavaScript. They are strings, numbers, Boolean, null, undefined, and objects.

• Strings are simply a string of text characters, enclosed in quotation marks.
• Numbers are integers, decimals, positive, negative, and NaN values.
• Boolean are true/false statements.
• Null is an intentional empty value.
• Undefined is a variable, array, or object that has not been defined.
• Object is a container of key/value pairs.

Variables

Variables are a container for storing data. It’s a method of storing information on a computer that you can later recall or refer to in your code.

Think of a mason jar that is currently filled with blueberries. The blueberries inside are the data, and the mason jar itself is the variable that is storing the data.
There are two ways of declaring a variable in JavaScript, let & const.

Use the const method when you have a piece of data that will never change, such as your name. The variable cannot be reassigned.

const myName = "Sara";

Use the let method when you have a piece of data that could possibly change in the future such as the pricing or the weather.

 let price = 1.99;

Guidelines when naming Variables

Variable names cannot begin with a number. They can contain a number in the name, but they just can’t start with a number.

Variables are case-sensitive, so pay special attention when creating variables and deciding what letters will be lowercase or uppercase.

Most developers follow the Camel Casing method, where the first word is lowercase and each additional word afterward is capitalized.

 let foodStickerPrice = 3.99;

Logic

A big difference between JavaScript and HTML & CSS is that JavaScript requires the use of logic when building a website. In conditional statements, loops, functions, Boolean values, and comparison operators, you have to implement a certain amount of logic when coding.

In order to create an interactive website, you have to think about what you want your website to do for the user, and what should cause these actions, or events to occur.

This involves planning for everything that your user could possibly do and ensuring that you have a plan of action set up to handle user input.

This is part of what makes JavaScript so much harder to learn and implement in your website. However, with practice comes mastery. Keep trying new things and just see what happens.

It is far better if you experience the horror of infinite loops and callback hell now, rather than later when you’re working on production code.

As the old saying goes,

“Fall down a hundred times and pick up a hundred lessons.”

Further Resources

There are plenty of resources available online for learning web development. Don’t feel like you have to rely on just one source to answer all of your questions.

Most developers have several resources they turn to when dealing with an issue or a difficult concept they don’t understand. Start now and build up a collection of resources that you can turn to when faced with these issues.

Below is a list of common sites that many developers use and contribute to daily.

• W3 Schools
• MDN
• Stack Overflow
• Dev Community
• Udemy
• Google