This series of blog posts is going to teach you how to create a fully interactive website. We'll start with the basics of HTML, then add some CSS. After introducing you to CSS, we'll then go back over both HTML and CSS in a bit more detail, so that you can make more professional looking static websites. For this introductory post though, we're just going to explain some basic things that will put you in good stead moving forward. Once we are used to HTML and CSS, we'll introduce Javascript, and make our websites interactive!
What is the internet?
The internet is a huge collection of clients (your laptop/mobile/desktop you're using to view this article) and servers (servers are machines that provide users with data when requested). The obvious example for this would be Publish0X. When you want to view a page/article, your machine is requesting that page/data from their web server. Their web server then provides it to you, and the page/article is displayed in your browser. Nice and simple!
What is front end and back end development?
This is usually missed from most tutorials at this stage, as most explanations are a bit more in depth. For this introduction though, we'll keep it nice and simple. I find this a good thing to mention now though, as it helps break down learning into manageable portions.
- Front end developers basically create the website's look, and interactions. This is basically everything on the website. The links, images, colours, videos, sounds, buttons, clicks, games, and everything else. Basically, if it can be seen or interacted with, it's front end.
- Back end developers communicate between the website and the server. This can be done in a vast amount of ways, but we'll focus on one prime example. By taking user input through forms on a webpage, and storing it in a database, to be verified at a later date (login and password). This is an extremely basic example, but bombarding you with different ones right now would confuse you, so we'll stick to this one easy example for now.
What is "separation of concerns"?
Separation of concerns refers to the modern way that web developers organize their code. It just basically means that you keep everything separately, in regards to languages. A prime example of this is with HTML and CSS. CSS can either be inline, internal, or external.
Inline CSS is done while actually writing html. For example: <h1 style="color: red;"> . That line of code would make the h1 element (we'll talk about this later) red. The reason why this is bad is due to efficiency. If you wanted to change the colour for all h1 tags, you would need to manually go through all of them, and change it one by one.
Internal CSS is where the CSS code is still written in the HTML file, but done so within it's own style tags for all of the CSS, and then applied to HTML elements (again, don't worry about this now, more on it later). This is much more efficient, as you can change it once, and it will change everywhere. Below is an example, which will make all h1 elements red:
<style>
h1 {
Color: red;
}
</style>
External CSS is where all of the CSS is written in it's own file, and you link this file to the HTML document through the use of the link tag <link rel="stylesheet" href="css/styles.css">. All that the "href" is doing is linking the stylesheet to the external document, which in this example is saved in another folder called css. This is the most efficient method for writing CSS, as it keeps everything separate, and nice and easy to find.
This is why you should always keep the separation of concerns in mind when building websites, or any other projects for that matter. It keeps everything organised, and allows easy quick changes to be done for everything required, instead of trawling through code trying to find where your styles, or scripts are. Always remember this: HTML, CSS, AND JAVASCRIPT SHOULD ALWAYS BE IN THEIR OWN FILES, UNLESS YOU HAVE A SPECIFIC REASON!
Final point
I think this is a good point to leave the introduction at. The points that we have talked over are crucial for becoming a web developer, as without them, finding a job would be very difficult. Regardless of how nice a website you've developed looks, if the code isn't concise, documented, and separated properly, you won't stand a chance. I always think of it as though I'm writing code for my future self to improve on, so I want to give my future self the most readable code possible! In the next post, we'll start with an explanation of HTML, CSS, and Javascript, before writing our first lines of code.
