Today, we will be discussing on how to learn web development or the steps to follow to get started with your web development career. But first of all, let’s understand a few basics.
Web development is the process of developing a website consists of single or multiple webpages. It can be static or dynamic. People involved in developing web are called web developers.
You can visit our detailed article on what is web development.
When I was starting out as a web developer, I struggled a lot finding the right path to follow, what courses to take, and so on.
Today, I will share with you my experience on how I started my journey as a web developer and also how you can become one.
Now, to begin in this industry, you must know some of the basics which everyone expects you to know, whether you start as an intern or a full -time employee. So, Let’s have a look at what people ask –
1. HTML (Hypertext markup language)
It is the basic markup language you must have knowledge of. It is pretty easy so, don’t worry.
Everything we see around the web (the websites), is made up of different webpages. Each of this webpage is coded in HTML. Consider HTML as a basic structure or skeleton of your webpage. It has a header, navigation bar, footer, main body, and so on.
Let’s look at an example:
In the above example, you can see different parts of a page. These are all coded in the form of HTML tags.
Just like the human body, the HTML page also has a head and body. The Head defines the title and other meta tags. The body contains the main content of the page. To demonstrate this, I have embedded a code snippet below.
index.html
Html document is saved with .html extension. The latest version of HTML is HTML5 .
Noticed something between <!– –> ?? These are comments.
Comments are used to describe a developer’s intent to code in a certain way. We write comments to make other team members understand what has coded so that if the person who has coded previously leaves the project, it becomes easier to understand and manage the code by others. Comments do not execute in the browser.
NOTE: Html is not a programming language. It is a markup language that consists of pre-defined markup tags.
2. CSS (Cascading style sheet)
So, after the skeleton, we want skin and some beautification to the body, CSS will take care of that.
In other words, CSS is responsible for the styling or presentation of a webpage. We can define color, font, size, position, and various other things to your webpage. Again, CSS is not a programming language.
The latest version of CSS is CSS3.
CSS has a concept of key-value pairs. We can grab Html elements or Tags and define our styling properties in the form of key-values. Let’s have a look.
Take an example from the above Html page. Let’s try to give some styling to our <p> tag.
Here we have defined 3 properties to our <p> tag. We have set heading color to red, font-size to 20px, and aligned text to center.
CSS can be inline, internal, and external. More on that later. External CSS files are saved with .css extension.
So, to get started in web development you must know CSS as well. Generally, when you appear for an interview in a web development profile, the interviewer will check your basic knowledge first and HTML and CSS are the most basic technologies one should know or start with.
3. Javascript
Also known as ECMAScript (ES) is a widely-used programming language. It is used to give interactivity and makes your website dynamic. By interactivity, we mean a website user can interact with, perform actions to it. Dynamic simply means the content that changes.
Javascript is everywhere, be it front-end or back-end development. We have a number of front-end and back-end technologies using JS these days like React, Vue, Angular, Node, and so on. JS uses DOM (Document Object Model) for manipulating HTML elements.
Visit DOM for more info.
JS is used along with Html. We can capture any HTML element and can perform some action through JS. Sounds, Interesting?? Let’s have a look.
Let’s say we have a paragraph <p> on our webpage. We want to write some text inside it. Here is how we can achieve this.
Explanation: document is a parent object of the entire HTML document. It contains a method “getElementById” which we are accessing through dot (.) notation. Further, it is assigning some text written on the right side to the paragraph tag we have captured.
JS can be internal or external. It is saved with a .js extension.
Not only the above, but we can also do much more with JS like performing some action on users’ button click or entering data into a form, prompting the user to provide some information before proceeding, and so on.
I hope this makes you clear that why JS is important.
4. PHP and MySQL
PHP (PHP hypertext preprocessor) is an open-source server-side programming language used to manage the data behind the scenes. It is used to design the back-end or business logic of the website.
MySql is a relational database system that uses structured query language (SQL) to interact with the database.
Now, both these technologies are meant for back-end development. I have listed PHP here because it is the easiest technology to start from. You have other options as well like Python, NodeJS, etc. Choose what you like.
In my opinion, you must practice PHP initially so that you get to know how things work in the back-end. After that, you can explore other technologies.
Check out our article on Learn web development for free for more info.
Conclusion: If you are planning to become a front-end developer, you can start with HTML, CSS, JS. PHP is optional for you. But if you want to become a back-end or full-stack one (One who develops front-end, back-end both), HTML, CSS and JS are a must.
For Back-end technology, you can try PHP or can explore other technologies available in the market.
This is not an ultimate list of what to learn and whatnot. These are just web development basics. As and when you start learning these things, you will find several other technologies along the way.
So Try, Explore, and implement. Good luck!!
