Get started with Web Development for Freshers
Welcome to all the freshers to the programming club of IIT Mandi. So you have all heard about websites and the need to be able to make them as an engineer but how to get started? This article is for you to point to some resources for getting started with web development and how. Web development is about building websites and web applications ranging from one-page portfolio sites to fully-fledged web applications (like Facebook, YoutTube, etc).
This blog will take you through how to get started without any prior development or coding knowledge, and help you understand the different aspects of web development. Towards the end, there is a collection of useful resources for learning.
Web Development can be divided into two broad categories: Frontend and Backend. I personally recommend to learn both initially, though later you may phase out to have your own preference.
Frontend Development
Everything that is displayed on the browser and with which the user interacts on a website is the frontend. Building user interface, making it adaptable to different screens sizes (responsive) and adding animations, are all part of the frontend.
You should start out by learning HTML, CSS and Javascript. You should get the basic knowledge of these technologies before moving onto anything other in web development (including backend).
HTML and CSS
HTML (HyperText Markup Language) is the basic building block of any website. It is what defines the structure and content in a site.
CSS ( Cascading Style Sheet) is used to enhance the appearance of the content defined by HTML and make it more user-friendly and attractive.
This tutorial is a good getting started video and you should try to watch it completely. It works on building a beginner project that will answer many of your questions and help you understand HTMl and CSS.
JavaScript
I personally believe that if you are involved in web-development, it is impossible to keep your hands away from JS! Javascript is used for adding functionality to your websites. It is essentially what makes a website interactive and dynamic in nature. JS can also be used to fetch data from APIs.
You can look at this tutorial is a for getting started as it is for beginners who have never touched javascript. It should clear all the basic concepts.
The best way to get acquainted with JS is to build a good starting project. So, you should try building some beginner javascript projects. A couple of ideas could be -
- Shopping Cart
- Rock Paper Scissors Game Example Project
- Simple Calculator
UI Frameworks
Javascript UI frameworks are tools which allow you to make your websites dynamic and allows you to effectively build user interfaces for websites and apps. Once you get decent at javascript, you could try to learn one UI framework. It helps speed up development, but it is not a necessary learning. React.js, Vue.js and Angular are some of the frameworks out there and are all good options. All are equally good to learn, though I feel React.js is currently more popular and Vue.js soon will get more popular.
Some ideas for projects that you can build with these frameworks -
- Recipes App
- To-do List
- Multi-Step Form
Backend Development
Backend development handle the ‘behind-the-scenes’ functionality of web applications. It’s code that connects the web to a databases, manages sessions, and powers the web application. Backend development works in tandem with the front end to deliver the final product to the user.
In order to make the server, application, and database communicate with each other, back-end developers use server-side languages like PHP, Node.js, Python and Ruby to build an application, and tools like MySQL, MongoDB, PostgreSQL to find, save, or change data and serve it back to the user in front-end code.
Some videos to help you understand the fundamentals of these languages -
Get better and resources
In order to get better, you will have to work on actual projects. After you have learnt the basics of HTML, CSS and JS and picked a backend language by using the resources we have provided, you should start trying to make applications and websites; just learning a language theoritically or syntaxes is not very effective.
You can find a number of tutorials you can follow on online for various web projects and languages.
Codecademy, w3schools and Mozilla tutorials are decent places for beginners to learn web development.
Some YouTube channels that you can refer to as well - Dev Ed, Programming with Mosh, freeCodeCamp.org
Some CSS resources are also available on our Zulip #Resources -> CSS
When any problems related to your code arise, Stack Overflow is the best platform for developers to discuss their issues and help each other out.
If you have any questions, feel free to comment below or get in touch with a PC member!
All the best, Happy Coding :)