
Webdev tutorial for beginners by devslopes code#
VS Code is a more lightweight version of Visual Studio, Microsoft’s main IDE. There are quite a few good options out there, but currently the most popular code editor is VS Code. This tool allows you to write the markup and code that will make up the website. When you build a website, the most essential tool that you will use is your code editor or IDE (Integrated Development Environment). There’s a lot of things behind the scenes that the customers won’t see, but they will experience (and hopefully enjoy) the end product– a delicious meal!įun illustrations aside, both front and back end web development serve different but very important functions. It’s where deliveries and inventory are managed, and the process to create the food all happens. On the other hand, back-end web development is like the “back of house” part of the restaurant. It’s the section where customers come to see and experience the restaurant– the interior decor, seating, and of course, eating the food. One way you can think about this is that front-end web development is like the “front of house” part of a restaurant. Conversely, the “back end” is the part of the website that you can’t really see, but it handles a lot of the logic and functionality that is necessary for everything to work.

It’s called the “front end” because it’s what you can see in the browser. “Front end” means that you’re dealing mainly with the client side. The terms “front end,” “back end,” and “full stack” web developer describe what part of the client/server relationship you’re working with. What’s the difference between front-end and back-end? Some examples are small business websites and blogs on the simpler side, all the way up to very complex web apps like AirBnb, Facebook and Twitter. So, every time that you’re on the internet, you (the client) are getting and loading data (like cat pics) from the server, as well as submitting data back to the server ( load moar cat pics!) This back and forth between the client and the server is the basis of the internet.Īnything that you can access in your browser is something that a web developer built. Your browser is also called the client in this situation. You can then load that website through a browser (like Chrome, Firefox, or Safari) on your computer or your phone. This server is connected to the internet. How do websites work?Īll websites, at their most basic, are just a bunch of files that are stored on a computer called a server. You can also check out the updated version of this article on my blog! 1: What is web development?īefore we get into actual coding, let’s first take a look at some general information on what web development is: how websites work, the difference between front and back-end, and using a code editor. At the very least, knowing the basics of both will help you figure out if you like front-end or back-end better ? Prefer videos? Check out the video version on my YouTube channel, Coder Coder! I personally think it’s good idea for front-end web developers to know at least a bit of back-end, and vice versa. Then, depending on whether you want to focus on more front-end or back-end, you can do steps 4a or 4b in any order. In this roadmap, I recommend doing Steps 1, 2, and 3 in order.

(You’ll cross that bridge when you come to it, believe me!)īy the end of this guide, you’ll have an understanding of the basics of web development, what skills you need to know, and where to find them!ġ: What is web development: How websites work, front-end vs back-end, code editorĢ: Basic front-end: HTML, CSS, and JavaScriptģ: Tools: Package managers, build tools, version controlĤa: Additional front-end: Sass, responsive design, JavaScript frameworksĤb: Basic back-end: Server and database management, programming language You really don’t need to know every single technology, tool, or language in existence right from the get-go. The fact is, if you’re just starting out, all you need to know right now are the basics. And we’ll also include links to resources where you can learn these skills.

We’re going to go through each step–from figuring out what code editor to use, to what JavaScript framework or back-end language you can pick up. This beginner's roadmap lays out all the basics for web development.
