And I am a simple text paragraph. The color of this text is styled with CSS. Click the button below to remove me through the power JavaScript.
``` #### CSS snippet (`main.css`) ``` body { font-family: sans-serif; text-align: center; padding: 3rem; font-size: 1.125rem; line-height: 1.5; transition: all 725ms ease-in-out; } h1 { font-size: 2rem; font-weight: bolder; margin-bottom: 1rem; } p { margin-bottom: 1rem; color: green; } button { cursor: pointer; appearance: none; border-radius: 6px; font-size: 1rem; padding: 0.75rem 1rem; border: 1px solid navy; background-color: blue; color: white; } ``` #### JAVASCRIPT snippet (`main.js`) ``` $('button').on('click', function() { $('p').css('opacity', 0); }); ``` %[https://codepen.io/olanetsoft/pen/VwpjVMp] #### 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. [*image credit*](https://yashints.dev/blog/2019/05/09/keeping-up-with-frontend) ### What is Backend Development? It refers to the server-side development of a web application, focusing on how the website works. It is responsible for the Creation, editing/update, and recollection of data and some of the processes most often associated with backend development. The backend (sometimes known as "server-side") is the part of a website you don't see. It's in charge of storing and organizing data and ensuring that everything on the client-side functions appropriately. The backend interacts with the frontend, sending and receiving data that is presented as a web page. Below is a snippet of how a simple NodeJS Backend code includes a rate limiter implementation and socket.io integration. ``` const express = require("express"); const path = require("path"); const http = require("http"); const socketio = require("socket.io"); const apiRoutes = require("./src/routes"); const rateLimit = require("express-rate-limit"); const { PORT } = process.env; const app = express(); const server = http.createServer(app); const io = socketio(server, { cors: { origin: "*", methods: ["GET", "POST"], }, }); // Limit request from same IP const limiter = rateLimit({ max: 100, windowMs: 60 * 60 * 100, message: "Too many requests from this IP, please try again in an hour!", }); app.use("/api", limiter, start(io), apiRoutes); app.use(express.static(path.join(__dirname, "public"))); io.on("connection", () => { console.log("Socket Connection Established..."); }); server.listen(PORT, () => { console.log( `::: server listening on port ${PORT}. Open via http://localhost:${PORT}/` ); databaseConfig(); }); server.on("error", (error) => { console.log(`::> an error occurred in our server: \n ${error}`); }); ``` A typical software application comprises three components: the front end, the back end, and the database. #### Server Side Technologies(Back-end) PHP, ASP, C++, C#, Java, Python, Node.js, Express.js, Ruby, REST, GO, SQL, MongoDB, Firebase, PaaS (AWS, GCP, Azure, and Heroku), and more programming languages.  [*Image credit*](https://content.techgig.com/top-5-programming-languages-for-backend-web-development/articleshow/67337449.cms) ## FrontEnd vs BackEnd vs Fullstack  I hope you now have a better understanding of full-stack development.😉 # The FULL STACK system in a single picture  [*Image credit*](https://daraoladapo.com/full-stack-net-development-guide/) ## Popular Stacks: #### MongoDB, Express, AngularJS, and Node.js make up the MEAN Stack. The MEAN stack is a JavaScript-based full-stack framework for building online applications. - MongoDB - document database - Express(.js) - Node.js web framework - Angular(.js) - a client-side JavaScript framework - Node(.js) - the premier JavaScript web server #### Django Stack: Django, Python, and MySQL as Database. The Django stack is a Python-based full-stack framework for building online applications. After the three primary technologies that make up the different layers of the pile. - Django - a high-level Python framework - Python - a programming language - MySQL - relation database #### MERN Stack: MongoDB, Express, ReactJS, and Node.js The MERN stack is a JavaScript-based full-stack framework for building online applications. After the four major technologies that make up the different layers of the stack. - MongoDB - document database - Express(.js) - Node.js web framework - React(.js) - a client-side JavaScript framework - Node(.js) - the premier JavaScript web server #### MEVN Stack: MongoDB, Express, VueJS, and Node.js The MEVN stack is a JavaScript-based full-stack framework for building online applications. - MongoDB - document database - Express(.js) - Node.js web framework - Vue(.js) - a client-side JavaScript framework - Node(.js) - the premier JavaScript web server #### MERGN Stack: MongoDB, Express, ReactJS, GraphQl, and Node.js The MERGN stack is a JavaScript-based full-stack framework for building online applications after the five major technologies that make up the layers of the system. - MongoDB - document database - Express(.js) - Node.js web framework - React(.js) - a client-side JavaScript framework - GraphQl(.js) - a query language for your API - Node(.js) - the premier JavaScript web server #### LAMP Stack: Linux, Apache, MySQL, and PHP. The LAMP stack is a PHP-based full-stack framework for building online applications after the four major. These major technologies make up the layers of the system. - Linux - server for modern operating systems - Apache - a programming language - MySQL - relation database - PHP - a powerful server-side programming language #### Conclusion I hope you find this helpful! Don't forget to share with others. You can also get in touch with me on [Twitter](https://twitter.com/olanetsoft). Thank you 🎉