A Break Down of Full-Stack Web Development

If you asked me to sum up Full-Stack Web Development in one picture, it would be this:

Full-Stack Development is someone who works with both the front end and back end of a web application. The front end is used for look and feel of the website while the back end is responsible for logic and infrastructure of the website.

This role is usually split between Front-End Developer and Back-End Developer. What are these things you ask?

A Front-End Developer is someone who:

• Works on the look and feel of the application they're working on
• Making sure requests are properly being sent to the backend

A Back-End Developer is someone who:

• Creates and manages the database
• Create responses that will be used for the front-end

As a Full-Stack developer, we will need to do a mix of both of these tasks whether to make sure the application we're working on is functional.

Here's an example of how an application we build would be handled:

• Users visit our applications front-end, and will do some form of action, for example, try to log in or create an account.
• When they hit submit to sign up, a POST request containing data from our sign up form on the front-end is sent from our front-end to our API endpoint in the back-end server that is running.
• The back-end will receive the POST request at it's specific endpoint, and execute the action to create a new user in the database with the passed in data.
• If everything goes well, then the user interacting with the front-end will be redirected to the login page to log in with their newly created account.

Some skills you would need to create a full-stack application

Of course these are not all the skills/languages you need but knowing some or at least one part of the full-stack would be awesome!

Front-End

• HTML/CSS/JavaScript
  • HTML serves as the structure of our site, CSS is used to control the presentation and JavaScript is used to control the behavior of the different elements of our website
• How to make HTTP requests to our back-end
  • This is how front-end devs interact with our back-end to display our data
• Learn a Framework
  • JavaScript frameworks like React, Angular or Next.js will take our web dev skills to the next level allowing us to easily build our applications to scale
  • It is required that you have a solid grasp on JavaScript first before trying these frameworks out.
• Wire-framing
  • This basically means drawing your website out before even starting to code
  • There are tools like Figma that we use to achieve this but using pen and paper as a start is perfectly fine too

Back-End

• Learn a back-end language Ruby on Rails, Python or JavaScript with the Express.js framework
  • This how we would write the back-end logic
• Learn SQL
  • This is how we would create/manage our database
  • Any SQL is fine but I recommend starting with SQLite since I think its beginner-friendly compared to PostgreSQL but the latter is more common in the workplace
• Data Structures and Algorithms
  • Knowing how to efficiently manage, search and sort through our data is key to becoming a great back-end dev
• Learn the MVC
  • Knowing MVC (Model View Controller) patterns comes in handy when creating the logic in our back end that responds to HTTP requests, and dictates what logic should be executed upon receiving a request
• Learn OOP
  • OOP (Object Oriented Programming) is useful for us define our database models and allows for abstractions with concepts like Classes and Inheritance
  • OOP can also be applied in JavaScript/the front-end

Going down the full-stack path is a lot of work since even understanding either end of development is difficult with their own rabbit-holes but not impossible. And even if you do not go down that path, a good Front-End developer has a decent understanding of the Back-End and vice versa and naturally a Full-Stack Dev will gravitate to one end over the other. Good luck and you got this!

Sources
FreeCodeCamp