A Web Development Guide For ABSOLUTE Beginners, Where To Start And How To Progress? (2019)
I started web development 3 years ago(With huge breaks in between) as of the time of writing this article and went through the world of writing ugly looking HTML webpages to full-blown backend supported ruby on rails and Django application till now.
I made many mistakes through the journey(and still making loads more!) and have been actively learning through them. I have met many people who have never trenched through the waters of web development and are confused about where to start and how to progress, And it’s not their fault! Web development is not as straightforward as other areas of development and there is a variety of languages(and frameworks!)which can be used to make apps for the web.
This guide is a basic introduction and roadmap for web development for students in colleges who have only dealt with programs which run on command line(as in C++ and Java) and is geared towards helping them to start developing their own web apps(‘web apps’ is the modern name of websites).
This guide does not contain any code as this is not a tutorial but rather a guide about the path to follow to get started with Web Development. Links to various good free tutorials and paid courses will be included for each language or framework mentioned in the guide.
Why should you develop Web Apps in the first place?
- Whether you are a person interested in sharing content, starting your own online business or showcasing your work to the outside world, A web app can be immensely helpful to you as people want something they can interact with and is user-friendly. You can have the greatest algorithm in the world but it cannot be helpful unless people can interact and use it(and NO! Command Line is not user-friendly!).
- Web Apps run on browsers which implies that they can run on smartphones, tablets, Laptops and even on Smart TVs. Hence you are able to access the whole market using a single app.
- There is a huge demand for web developers in today’s job market as every major company requires a resilient web app to serve its customers.
- Many developers work as freelancers and make web apps for clients and hence are self-employed and earn pretty well.
- You are reading this blog on a web app….That makes a pretty decent point :-).
The Fundamental And Important Stuff
Every Web App is divided into two parts:
- Front End- This is the portion of the app that the user can see and interact with. Whatever you can see in the browser window right now is known as front end of the app.
- Back End- This is the portion of the app that handles what happens behind the scenes when you access any web app. It handles how to deliver you the data that you want, How to log you into the website, What to show you in the recommendation, How to handle the payment of your order and just about anything that makes your web app valuable.
If you want to make a functional web app you have to write a front as well as back -end for your web app.
Front End Basics
At the core, there are three compulsory languages you need to know to get started in front-end:
HTML(Hyper Text Markup Language)
HTML is the fundamental language that defines the structure of your web app. Every webpage in the world has HTML as it defines how the content of your page is structured. Right click on the web page and click view page source, Whatever you are seeing is HTML. Make sure you learn HTML5.
One important point- HTML is not a programming language! It’s a markup language, You cannot write logic in HTML like if-else, loops, etc.
Some Free Resources:
CSS(Cascading Style Sheets)
CSS is what makes your webpage worthy of looking at- It makes your boring HTML page pretty and helps you add various styles, colors and design elements to your webpages. Make sure you learn CSS3.
Some Free Resources:
Javascript
Javascript is a programming language that makes your site interactive, It’s what makes your web app lively! Every complex animation and transition(movement) happening on the screen is somewhat using Javascript.
Javascript is often regarded as the language of the web and is extremely powerful and important as many of the modern front-end frameworks use Javascript. Some of them are:
- React JS
- Angular JS
- Vue JS
- Bootstrap
Javascript is so widely used that you can even write the back-end logic of your web app using Node JS which is a backend framework which uses Javascript!
Important- Make sure you learn the ES6 standard of Javascript alongside the basics(link given below).
Some Free Resources:
If you are really very serious about becoming proficient in front-end development and would like better structure and some hands-on projects then here are some Paid Courses:
Front End Practical Stuff
Web development has been going on for years and many standard frameworks and practices have evolved. These frameworks enable you to write a better front end UI in minimal time and can help you implement beautiful and functional front end interfaces in no time as you don’t have to reinvent the wheel. You can pick any one of them. The most popular ones are listed below.
Bootstrap
Bootstrap is a very powerful and widely used frontend framework which allows you to write beautiful web apps without getting into the nitty-gritty of paddings, margins, styles, etc. It has prebuilt pieces of front end components like buttons, navigation bar, cards, forms, etc which can be included in the website with a few lines of code.
Bootstrap is so easy to implement(for basic purposes) that you don’t need a lot of javascript knowledge to implement it. You just need to know how to write HTML and CSS and follow the extremely friendly documentation of bootstrap to write awesome web apps. I personally use bootstrap for most of my projects.
If you are a backend developer then a frontend framework like bootstrap is a great tool as it helps you to create a presentable UI with minimal effort and time and lets you focus on the backend portion of the app.
The following link contains examples of web apps which have been implemented using bootstrap.
Some free resources:
Paid Course:
React
React is a javascript library for building user interfaces. React is one of the most popular and in demand frontend library. It has become kind of a necessity to be proficient in React or Angular if you are interested in frontend development. It works on concepts of ‘States’ and ‘Components’ and helps you to make a much more interesting and interactive user interface.
Frontend frameworks, in general, follow a component structure where the entire UI of an application is broken down to several small pieces called components. They introduce new rendering techniques (Virtual DOM) to increase performance and allow for ease abstraction of UI/UX. They also introduce new techniques for managing state to make the entire UI logic systematic and controllable from every point.
Some Free Resources
Paid Course
Back End Basics
There are two things you need to learn in the backend to develop any web app.
- Server Side Framework
- SQL- Structured Query Language
Server Side Framework
A Server Side Framework is a set of code that allows you to build backend of web apps in a quick, easy and efficient manner. These frameworks help you to do tasks which are done repeatedly to build backends and serves building blocks and a set of rules that you just have to connect and customize to your liking to build your web app.
These frameworks serve as the backbone of your web app by connecting your front end to the data you want to provide to the users by specifying the logic of your web app. They control how the data flows through your web app, how users are registered and logged into your web app, how sending of emails is handled, how web pages are organized, how people reach them and much more.
There are many frameworks that are based on popular languages, but some of them have gained wide popularity and are being actively developed and maintained. The most popular frameworks are mentioned below, you can choose any one of them and get going with your wonderful web app!
Node.js
Node.js is a framework based on the javascript programming language. It is one of the most in-demand backend frameworks being used right now. Many global tech companies like Netflix, Paypal, Linkedin, eBay, Groupon, and NASA use Node.js as a component for their backend.
Even Medium uses Node.js!!!
To get started with Node.js, you need to be well versed with Javascript. Since javascript is used in the front end as well, it becomes an ideal choice for many web developers as it reduces the need to learn an additional language.
Some Free Resources
Paid Course
Django
Django is a framework based on the Python programming language. It is known for its MVT(Model View Template) architecture and security practices. It guides you to use a particular convention for writing your web app and does much of the tedious work for you. It has many awesome features like an admin panel, easy routing, authentication, pre-built forms with automatic validation and much much more.
Django is simple and very secure. It forces you to follow security practices which makes your app secure and uses python which is easy to learn and is very compact. It takes time to learn the way Django operates, but once you learn it, you can develop and deploy apps much faster.
Sites like Youtube, DropBox, Instagram, Spotify, Mozilla, Disqus use Django as one of the components of their application. If you are developing something using Machine Learning, Django is an ideal choice as most of the major ML libraries are written for Python.
Some Free Resources
Paid Course
- I have personally purchased and gone through this course. It includes a basic course of python and requires no starting knowledge.
Laravel
Laravel is a framework based on the PHP language which is a widely used language for the web. It was the defacto standard for web backend development but has been overtaken by Node and Django because of their better practices and functionality.
PHP serves one of the major portions of the web today and is widely in demand due to many companies using PHP as their backend such as Facebook, Yahoo, Wikipedia, Wordpress, etc. It is easier to find a job as a PHP developer as most of the legacy web is supported by PHP & MySQL.
It is highly recommended that you learn MySQL along with PHP as they go hand in hand.
Some Free Resources
Paid Course
SQL
Structured Query Language is ‘the’ language used for creating, manipulating and reading a database. It is the language for the ‘Data Of The Web’. It is a definite requirement that you should know at least the basics of SQL as it is the language you use with any Relational Database Management System(RDBMS).
The demand for SQL is evident from the fact that it is the fourth most popular language according to the Stack Overflow Developer Survey 2019. Some of the most popular RDBMS’s are MySQL, Oracle, PostgreSQL, Microsoft SQL Server.
Many modern frameworks automate the process of writing the SQL for you but you wouldn’t be able to work with them without knowing SQL. SQL is essential for querying data and gain useful insights from it. If you are looking for a career in web development or data science, SQL is a necessary requirement.
Some Free Resources
Paid Course
NoSQL Databases
SQL is evergreen, It was used earlier, It is used today and will be used for the foreseeable future. There is another kind of database known as a NoSQL database, these databases don’t use SQL and traditional relationships but rather use a concept of ‘Documents’. They have become quite popular as frameworks like Node.js are using them for data management. The two most popular and the ones you should really care about are:
MongoDB
MongoDB is a NoSQL database and uses ‘JSON-like’(JSON is a way of representing data) objects to store its data. It is the most popular NoSQL database as it works with frameworks like Node.js flawlessly. It is highly scalable(meaning as the size of your data grows, It can handle the increased requirement easily) and works efficiently.
Some Free Resources
Paid Course
Cloud Firestore(Firebase)
Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. It is a NoSQL cloud-based database which means that your database is stored on the cloud servers of Google. They take care of setting it up and maintaining it. It has become quite popular as it works well over different platforms and is quite easy to use as the developer doesn’t have to maintain the database.
What to do now?
Now you know the path to starting your web development career, But what to do now?
- Start by learning HTML, CSS, Javascript.
- Pick a frontend framework of your choice and learn and implement simple and beautiful static websites on it.
- Learn SQL(Even if your backend framework uses NoSQL, It is highly recommended that you learn SQL).
- Pick a server-side framework of your choice, Learn it and start building a full-blown web-app on it(There are tons of ideas out there!).
There is only one condition
Don’t stop at the ‘Learning’ phase, Make something out of what you have learned(and I don’t mean the website they helped you make in the tutorial or course). Try to make a web app out of your own idea, Build something that you ‘want to’, not something that someone else tells you. Design it, Conceptualize it and build it out using the tools you have learned.
The first site that I ever made out of my own desire gave me the true confidence for venturing further into web development and lead me to a point where I can write a medium story about it 😅.
