# Full Stack Web Development: The Big Picture

## DID YOU KNOW?

In Stack Overflow’s 2018 survey, 48.2 percent of developers identified as full-stack developers, compared to 57.9 percent for backend and 37.8 percent for front-end.

In this article, I will tell you more about full-stack web development, what makes a developer full-stack and I hope you will enjoy it 😊

### What is Full-stack Development?

This refers to the development of both front end(client-side) and back end(server-side) portions of web applications including DevOps.

### Who is a Full-stack web developer?

A Full-stack web developer is a developer or an engineer who works with both the frontend and backend of a software application i.e they can tackle projects that involve databases, building user-facing websites, or even work with clients during the planning phase of projects confidently.

![Let's get down to bussiness](https://media2.giphy.com/media/du31vXxCt7IEkFV691/giphy.gif)

I mentioned frontend(client-side) and backend(server-side) earlier, well you need to know what that entails. 👇👇👇👇👇👇

### What is a Frontend Development(client-side)?

This skill set involves the actual presentation of your website and how the information on your website is laid out in browsers and mobile devices. 

A front-end developer must have experience working with HTML and CSS as well as the scripting language, JavaScript on the client-side. 

The goal of a frontend developer is to provide an interactive platform where visitors can interact seamlessly, a platform that provides and receive information. Additional skillsets of a front-end developer could include user experience design and user interface design, skills that help a team evaluate the best methods of displaying and collecting information.

#### Client Software(FrontEnd)
HTML, CSS, Bootstrap, JavaScript, ES5, HTML DOM, JSON, XML, jQuery, Angular, React, Vue, Backbone.js, Ember.js, Redux, Storybook, GraphQL, Meteor.js, Grunt, Gulp etc.

![Alt text of image](https://d33wubrfki0l68.cloudfront.net/0c1f2b3a7db2b90f7c24915eb8b1223bbd80d3e5/d5c2a/static/b87971fa3d35839c9b909d9dffc76dc9/frontend.png)[*image credit*](https://yashints.dev/blog/2019/05/09/keeping-up-with-frontend)

### What is a Backend Development(server-side)?

![What is Backend](https://thumbs.gfycat.com/SecondNegativeArcticseal-small.gif)

It refers to the server-side development of a web application with a primary focus on how the website works. It is responsible for the Creation, edit/update, and recollection of data and some of the processes that are most often associated with back-end development.

A typical software application mainly consists of three parts front end, back end, and database.

#### Server Side Software(BackEnd)
PHP, ASP, C++, C#, Java, Python, Node.js, Express.js, Ruby, REST, GO, SQL, MongoDB, Firebase, Sass, Less, PaaS (AWS, GCP, Azure, and Heroku), etc.

![Backend image](https://content.techgig.com/thumb/msid-67337479,width-860,resizemode-4/Top-5-programming-languages-for-backend-web-development.jpg?94297)
[*Image credit*](https://content.techgig.com/top-5-programming-languages-for-backend-web-development/articleshow/67337449.cms)


## FrontEnd vs BackEnd vs Fullstack

![Backend image](https://glints.com/sg/hired/wp-content/uploads/2018/08/2_developer-infographic-01.jpg)

I hope you now understand what full-stack development entails 😉

Now the picture 👇👇👇

# FULL STACK: THE BIG PICTURE

![Full stack image](https://usercontent.one/wp/daraoladapo.com/wp-content/uploads/2020/09/full-snack-dev.jpg)
[*Image credit*](https://daraoladapo.com/full-stack-net-development-guide/)

### Popular Stacks:

MEAN Stack: MongoDB, Express, AngularJS, and Node.js.
MERN Stack: MongoDB, Express, ReactJS, and Node.js
Django Stack: Django, Python, and MySQL as Database.
Rails or Ruby on Rails: Uses Ruby, PHP, and MySQL.
LAMP Stack: Linux, Apache, MySQL, and PHP.


#### How would you feel if internet explorer do this to you as a developer? Kindly let me know in the comment section 😊😊

![Alt text of image](https://gal.patheticcockroach.com/upload/2016/11/09/20161109162445-340ae28e.gif)

#### Finally: I hope you find this useful! Don't forget to give a thumbs up.

you can also reach out to me on [Twitter](https://twitter.com/olanetsoft).

Thank you 🎉