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.
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.
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.
- Shopping Cart
- Rock Paper Scissors Game Example Project
- Simple Calculator
Some ideas for projects that you can build with these frameworks -
- Recipes App
- To-do List
- Multi-Step Form
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 :)