Hi there! Today I will give you a quick and really simple explanation about the difference between Front-End, Back-End and Web Design. So, let's do it.
The X-Man Solutions
Imagine 3 friends. Rui (Front-End Developer), Tony (Back-End Developer), and Elon (Web Designer). They started a Start-Up. Let's call this Start-Up "X-Man Solutions". So, what they do? Well, let's say... They develop digital solutions for other business.
Ok, now you. You are a person with a great idea. You want to give to the people a Web App where people can go to make some reservations. Something like Airbnb. Obviously, you will talk to "The X-Man Solutions". So, and now?
Web Design
After everyone talk about your project and etc. Elon will start to create the design for pages in an image format. Probably he will use Adobe Photoshop or Sketch. After Elon finishes his job you have a "prototype" of the body. Something that will be your Web App. But you can not interact with them. This version is just an image for Rui follow.
Situation point
So, until now Elon chose the colors, the font to use. He did everything relative to the layout application. He did the design for your Web App.
Front-End
Now it's time for Rui to shine! He will code everything that Elon did. All the buttons, text fields, forms, animations, images, etc. Maybe he uses Angular or React to get the work done.
Situation point
Elon did the layout Application, in other words, an image and Rui converted to code.
Back-End
So the Web App is almost done! So, what we need more? Well, we need a place to save all the data for our clients. At this stage, the page has a form that can be submitted. Something like a signup page or a page where you can add your hose etc. But if a user tries to submit the signup or other, the data goes nowhere.
This is where Tony, the Back-End Developer, comes in. He writes some magical code that handles all the data that comes from the user when he submits the form. Tony's code validates the data for errors like invalid email, empty password field, etc.
Because the "X-Man Solutions" is a modern Start-Up Tony use NodeJs, Express, and MongoDB.
Situation point
Congratulations! Your brilliant idea has a "body" now. Now you can present your idea to the people. :)
Conclusion
Web Design -> do the design of everything in the project.
Front-End -> code everything that web design does.
Back-End -> do some magic and code everything stuff that anyone can't see. This stuff can do things like, block ads, shows us the last videos on Dtube, etc.
Like always. Any question, or curiosity, please ask in the comment section.