Web development was what started me on my journey to become a programmer. It all started when I wanted to create my own website and I progressed from there to become a full-time Software Engineer. A lot who wanted to learn web development or simply found it fascinated have asked me on how to progress to become one. What do you learn first?
Know your goal
The first thing to know before starting anything is to know what you want to build. That will be your key to keep yourself motivated. Truth be told, you won't be learning it quick or easy though it depends on the degree of complexity of what you want to build. You can start building static web pages in a week but anything more complex than that would take much longer. Therefore, it is important to have a source of motivation whether it is to build a project or simply just to learn out of curiosity.
Front-end
Front-end is a term that you might have heard before as it is commonly used but is not usually clear and often confusing. Simply put, it is the component that runs on the user's side whether it is design or user side processing, as opposed to back-end which does processing on the server. More will be explained on this later but for now there are three main components to front-end development that you should start within this order.
1. HTML
Stands for HyperText Markup Language, HTML is the most basic component of web pages. HTML is used to define the basic structure of a webpage such as headings, paragraphs text, form fields, and so on. It looks something like this:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML is the backbone of a webpage and is essential for any website. The place I recommend to get started learning this is on W3Schools. They have a great documentation of HTML markup as well as a "Try it out" editor that you can type HTML code and preview. Go through the documentation of the basic HTML5 components from headings, paragraphs, images, links, tables, and forms. This is relatively easy to pick up and wouldn't take you long to get a hang of it.
2. CSS
CSS is short for Cascading Style Sheets. It is the next essential component of a webpage. You might notice that plain HTML pages don't have much on aesthetics. That is where CSS comes in.
HTML is the essential structure that makes up the webpage while CSS makes it look good and presentable. It is the next thing that you should learn. A good tutorial to learn it is also from W3Schools. Go through the basics features as they are most commonly used. The advances stuff are not so essential and can be skipped.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
As the snippet above, it allows you to customize style information such as the basics of text colour, background colour, font sizes, and other features includes button colour, sizes, paddings, etc. CSS is not much more difficult than HTML and it also wouldn't take long to learn it.
3. JavaScript
JavaScript is the programming language that is for writing scripts to make your web page function. Examples of functions would be like to display popup boxes, perform calculations, show loading bars, etc.
The scope of what features JavaScript can perform tends to be often confusing to novices. It features are limited to what processing can be done on the user's side (front-end), meaning sensitive data handling such as user authentication or generating user profile is not performed on the user's side but rather on the server known as the back-end. How a user profile is displayed on the other hand is not exactly sensitive information and that is where front-end Javascript comes in.
var x = 5;
var y = 6;
var z = x + y;
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
Understanding Javascript might be a bit difficult at first if you don't have prior experience in programming but writing scripts in JavaScript would be a good introduction for you into programming.
As for where to get started learning JavaScript, I cannot recommend a specific place to learn as I find that it is best learnt by doing. It is still better to get a grasp of its basic features which are also found in W3Schools. However, feel free to look for other resources around.
Libraries
Note that JavaScript only provides you with a basic way of interacting with your website and programming logic but alone it is not very useful or intuitive to build functional web pages. Therefore, it is much better to work with JavaScript libraries that simplifies much of JavaScript programming. One of the most popular and easy to use is JQuery.
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
It provides features to help you handle and create interactions within your web page such as button clicks. You can learn the basics in the tutorial here. Once you have got down some of the basics I would recommend trying out for yourself as you will learn best by practice.
Back-end
The back-end (server) is where it all comes together. Once you have are able to develop front-end code, at least HTML and CSS (it's still possible to create functional websites without front-end Javascript), you can proceed to learn about back-end development. This is where it gets very interesting.
There are many flavours to back-end development as there are many programming languages, frameworks, and different server software that you can work with, unlike front-end development where you work with a limited set of languages and libraries. Some of the features of the back-end include:
- Determine how or what HTML code is generated so that the user can render accordingly.
- Process sensitive information such as user authentication.
- Complex algorithms as special features to your website.
What you can do is limitless, or limited to your abilities Check out my article 5 top to learn more about back-end programming languages to help you choose one for you to use to develop a back-end for your website.
Conclusion
By now, you would have a good idea of how to get into web development. You start off with front-end development with HTML, CSS, and preferable JavaScript too, where you can code how websites are structured, styled, and functioned on the user's side. These are essentials for any website you wish to create. Next on, which will be in another article, on how to get started with back-end where you get to piece together an actual website with much more functionality.
