Intro
Just what is the difference?
Every part of the website is important and has its purpose. I am going to use a home to explain some differences.
When you type into the address bar you are essentially entering the address to a websites location. As we discussed in class the computer reads the address you type and puts it to an ip address, and locates the files that live there in return a visual representation of what is there. So lets break down what is going on a bit
This is the bone of the house. The basic outline and shape of the house. 2 floors 6 rooms so on and so forth. You can't build a house without a frame first. That is what the HTML essentially is. There is some hidden information (the head tag) the content of the site (inside the body tag) Now we are talking about not just general shape but the furnature too. So inside our house (body) we have a 1st floor (1 div tag for example) with some paragraphs or images so on and so forth.
This is where we add some paint, we line those pictures up on the walls just in the right order or place. Not to high not too low.
This is that light switch on the wall. Sure you can put a light switch on the wall in just the right place and color and what not but until. you apply JS to it, that switch is just a thing. Add that JS and now it does something. Turns on a light.
Can you make a webiste with just these 3 components? Sure you can. Thats the cool part about Front End.
Now we are talking about like the locks on the door. You can't get into the house unless you have the right key. As long as you have that key you have access. We can also say that the furnature and pictures on the wall are also part of the back end in some cases. These items might be added through a form on the website. In a Front End only webiste these items are hard coded into the site and can't really be changed. With a backend maybe we want to edit the pictures on the wall to do that with out rewriting the code we would interact with a back end.
This is where you have a website where the Back End and Front End are created together. Or maybe by the same company. I can create a Front End website that interacts with someone elses Back End, but to be considered a Full Stack site, I would need to be interacting with a Back End that was part of my own code for example.
What is this thing and why do we use it?
Can we create files and folders using the old fasioned right click add new folder? Sure you can, but thats not cool. No in all reality its not as efficiant as using the terminal. With Great Power comes Great Responsibility. Becoming a Web Developer of any kind means you get to unlock powerful commands on your computer that you may have never known were there. We navigate our computers using that command line. Moving in and out of folders using cd (change directory).
Some of the things we use the terminal for is to start or stop some servers. Adding information to a a backend database will require you run a local server on your computer to test things.
We use git a lot in the Developer world. Git, simply put is version control. Back in the day we were told when working on a word document to save often, and the one time you forgot to save is usually when the computer or word would crash and all that work was now lost.
Git is basically our save button but a whole lot better. We can see who saved information to a file last, when they save and what was changed. So when we stupidly erase a function that we find out 3 saves later that we really needed we can go back to previous "save points" and add it back in.
What tools should we use and how do we use them?
One of the many tools we as developers use is whats called an IDE, or Integrated Development Environment. Basically a program used to create these different types of documents. So instead of having Word, Excel, and Power point we have IDE's that can read and write to all 3. But VS Code is so much more than that when you start looking at things you can install…the extensions.
As promised here is a list of some good extensions to install on VS Code: