How to Develop a Website.
Tags: webdev, beginners, career, productivity
Published: 2022-07-12 08:34:35



## What is Web Devlopment?

Web development, generally referred to as website development, describes the activities involved in developing, constructing, and managing websites and web applications that are used to access info on the internet through a browser.  It might also include database management, website development, and web design. Web development and the task of creating the features and functionality of apps are closely related (web design). Development often refers to the process of actually building these things (that is to say, the programming of sites). HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript are the primary computer languages used. The creation of sites that would otherwise need to be built from beginning by writing code is made easier by a number of additional tools that are used to handle or ease the process.

## How to start?

<center>

<img src="https://c.tenor.com/1xSjgbQFVLUAAAAd/confused-meme.gif"/>

</center>

How do I begin studying web development ? Is it simple? And how can I stay current with new web design techniques?
These are the thoughts that cross the minds of all beginners. Although we'll discuss about web development, there is some misconception between web designing and web development.

It entirely depends on how passionately and seriously you are interested in it. If you really wanted to learn something, you could probably become an expert on it. Nothing is as difficult or as challenging as designing websites that are similar to those we use or that are found throughout our daily lives.

If we really think about it, Scaring is inevitable when we consider it as a collection of graphic elements, such as various colours, fonts, images, card views, tables, animations, etc. The most intriguing one is the term "responsive" websites, which are those websites that adjust their element alignments, spacing, etc. in accordance with the device being used to browse.
 
There are currently many different types of frameworks available for constructing websites, and the greatest part is that they are all freely available to use; you only need to learn When to use, how, etc. With the assistance of several ready-made libraries, you can now quickly construct a responsive website.
 
## What is Frontend?

Everything a person interacts with on a website or in a piece of software is considered the frontend. The user interface and the frontend are interchangeable from the user's perspective. From the perspective of a developer, the programming and interface design are what enable the interface to perform. On the other hand, the backend consists of operations and data processing that happen in the background.

The creation of a frictionless or fluid user experience is one of the main objectives of frontend development. In other words, a website's or an application's front end should be simple and easy to use. Although this seems like a straightforward objective, it can be surprisingly difficult to achieve because not all people or devices are the same.

Examples of frontend elements include:

1. Page or application layout
2. graphics
3. Audio and visual components
4. Text content 
4. Text content 
6. text fields, form fields, input fields (such as dialogue boxes), etc.
7. User flow 
8. user customizations, themes, and preferences.

## What is Backend?

The part of web development known as "backend development" is concerned with the inner workings of a website or web application. It is what takes place in the background, much like how a restaurant's chef and staff handle all orders without the patrons seated at their tables noticing. However, backend developers create the programmes that allow web browsers to interface with servers and databases rather than preparing meals.

A backend developer's main responsibility is to make sure that end users receive the data or services they requested promptly and without error. As a result, backend development calls for a broad range of programming expertise.

## Roadmap

<center>

<img src="https://c.tenor.com/5QobWJSvx-QAAAAM/roadmap-map.gif"/>

</center>

### Frontend Development

*HTML(Hypertext MarkUp Language)*
HTML is the first stage, which you have probably already heard of. I believe you have studied HTML throughout your academic career. Yes, that is exactly the same as what you were taught a long time ago, but technology is always evolving as time passes. As you have matured in the modern world, HTML has done likewise. HTML5 is a new standard that has been created.

source to learn :https://html.com/

*CSS(Cascading Style Sheetst)* 
A website can look more enticing than it would with just plain or uninteresting content by using the design language CSS. The visual structure, layout, and aesthetics are determined by CSS, whereas the text content is mostly determined by HTML.

source to learn: https://developer.mozilla.org/en-US/docs/Web/CSS

*JavaScript*
You've figured out how your website will look, and you've designed the aesthetic appeal of your page. Now it's time to design some helpful actions that your web page elements will take in response to certain actions on your web pages, such as button click events, mouseovers of any text, playing and pausing of some page-based animations, etc. It is simple to accomplish it using the aid of JAVASCRIPT. Javascript is one of the greatest scripting languages for enhancing the smoothness, adaptability, and platform independence of a web page. Although learning is difficult, whatever you master at a basic level will be sufficient to do all of your tasks.

source to learn : https://www.javascript.com/

### Backend Development

*Node.js* 
Due to its single-threaded nature, Node. js is typically used for non-blocking, event-driven servers. Although it was created with real-time, push-based architectures in mind, it is utilised for conventional web pages and back-end API services.

source to learn: https://www.w3schools.com/nodejs/

*Database(MySql/MongoDB)* 
When it comes to databases, we have a tonne of data at our disposal for web page presentation, but we simply can't store them there. A database management system is crucial because it effectively organises data and enables users to do several activities. Within a single software programme, a database management system organises, stores, and manages a lot of data.

souce to learn:
MySQL https://www.mysqltutorial.org/
MongoDB: https://mongoosejs.com/docs/

*API (Application programming interface)* 
An API. It was developed by the program's creator to make it possible for other developers to use part of the functionality of the application without having to share any code. Developers make "endpoints" available, which act as the application's inputs and outputs. With the use of API keys, access can be managed. The APIs developed by Facebook, Twitter, and Google for their web services are examples of good APIs.



Source to Learn : https://reactjs.org/docs/getting-started.html

### Other Tools and Technologies 

*Frameworks*
Frameworks are created to facilitate the creation of and interaction with programming languages. In most cases, frameworks take on all the tedious, challenging activities involved in putting up a new web application and either perform them for you or make them very simple for you to complete.

*Django* (for backend)
It is a Python-based full-stack framework.
Ruby On Rails: It is a complete framework created with ruby.
PhoneGap or Cordova:PhoneGap or Cordova is a mobile framework that makes the native JavaScript APIs of iOS and Android available for use.AngularJS AngularJS 

*AngularJS* 
AngularJS is a front-end framework for javascript.

*Reat.js*
An open-source JavaScript package called React.js is used to create user interfaces for single-page applications. It manages the view layer for both online and mobile applications. Additionally, React enables us to design reused UI components.




So, friends! Put your thoughts aside and act instead.

<center>
<img src="https://c.tenor.com/t-DTQ7NFXxcAAAAC/thats-how-we-roll-snoop-dogg.gif)"/>

</center>



# Thank You