It is known that HTML, CSS and JavaScript make up the foundation of a website. Of course you can always have other frameworks or libraries on top of these such as Angular, React.js, ASP.NET, etc., but these only simplify the process for the developer. And you may need to use additional technologies if you want to store data and interact with a database, but at the core you will still be using this trio. I will introduce these technologies in this post.
HTML
HTML stands for Hyper Text Markup Language and deals with the structure of a web page. It is made up of elements that give meaning to the content of your page. You can bold or italicize text, embed links into text or images, add video, forms and more.
Let’s take a look at a snippet of a page from Wikipedia:
If we wanted to recreate this snippet with HTML code, it would look something like:
Here is a portion of the code, I did not include the full HTML for simplicity. If this is your first time being exposed to HTML, this may seem a bit intimidating but hopefully it won’t be after I break it down.
Our first element here is an <h1>. It is a general rule in web development that you only use one of these per page, and it would represent your title or heading. Also, there are <h2>, <h3>, <h4>, <h5>, and <h6> heading elements (<h1> being the biggest font-size and <h6> being the smallest) as well; <h2> would be your subtitles and then you could use <h3>, <h4>, etc., depending on the requirements of your page.
Next, we have our paragraph element <p>. There are a few being used in this example and you could potentially have many being used on a web page. These help distinguish our bodies of text and having more than one can give us more options when we’re styling the page so that different pieces can have their own style rather than all of text being grouped into one paragraph element and receiving the same styling.
The <strong> element is usually used to bold a piece of text and the <em> element is usually used to italicize a piece of text. Additionally, the <a> element (anchor element) can be used to link to another page within the website, or to link to an external website address.
Last but not least, the id attribute is used to uniquely identify an HTML element. The rule when using id is that no other element will share the same id value as another. Similarly, we can use the class attribute to group a number of HTML elements together that we would like to apply the same CSS style to. For example, while creating this blog post I created a “codeText” class to apply to all the HTML elements and attributes in this post to give them a nice green font and black background.
CSS
CSS stands for Cascading Style Sheets and handles the design of a webpage from the colors to the fonts and layout; it is a language that defines how pages are arranged and styled. Almost all CSS will be in the following format:
The World Wide Web Consortium (W3C) invented CSS in 1996 to solve the issue of inline styling, which was all there was before CSS. Inline styling was a nightmare for web developers, it was messy and difficult to maintain. Prior to CSS, you would’ve had some HTML that looked like this:
Alternatively, we could replace the style attribute of each one of these elements with a class attribute and set its value to “greenText”. Then, in our external CSS file we could create a corresponding selector:
It may not seem like a big deal in a simple example, but in large-scale applications there are potentially many CSS styles being applied to each element and having them isolated to an external file (you may even have a separate CSS file for each one of your web pages) makes the application much easier to maintain and ensures adherence to the single-responsibility principle (SRP).
A common thing we use CSS for is to change the margin or padding of a particular element. I would get these two properties confused (and still do at times) when I was new to web development.
Padding is the space between your content and your border (if you have one defined). Margin is the space between your border and the surrounding elements. Said differently, padding creates space inside of an element and margin creates space outside of an element.
JavaScript
With only HTML and CSS, your web pages would just be presentational. JavaScript provides functionality and behavior to your website.
JavaScript was created in 1995, in 10 days, originally designed to create pop-ups and alert boxes in the browser. It has evolved into something much more since. With JavaScript, we can create anything from games to web applications such as Google Maps, YouTube, Netflix, and shopping cart sites.
JavaScript allows the Document Object Model (DOM) to be manipulated. Let’s say we had a button marked up in our HTML:
If we wanted to change the buttons text upon clicking the button through DOM manipulation, we could create a JavaScript function:
And if for some reason we wanted to change the buttons color to green, we could do:
The examples I just gave would be considered client-side JavaScript, which usually operates in the browser. There is also server-side JavaScript which allows access to databases, file systems, and servers.
Technologies such as Node.js and Express.js have allowed developers to create full stack applications all using the same programming language, JavaScript. This allows applications to be created and maintained much more efficiently since the developer only needs to be proficient in one language.
JavaScript is currently the most popular programming language and is constantly evolving. You can’t go wrong learning it if you’re an aspiring developer.
Conclusion
This is just the basics and modern websites can be complex, but hopefully this post helped you better understand these technologies and how you could use them to start building your own website.