###### tags: `Intro`

# Web Fundamentals - Intro

## Links
- [Repository](https://github.com/WF-InstructorMelissa/week1session1)(Change the Branch to your cohort start Month)

## Full Stack / Front End / Back End
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.

### Street Address
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

### Front End
#### HTML
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.

#### CSS
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.

#### JS
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.

### Back 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.

### Full Stack
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.

## The Terminal
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.

## The Tools
What tools should we use and how do we use them?

### VS Code:
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:
1. Bracket Pair Colorizer - This color codes your ()[]and {} so that you know that you have a opening and closing. Ever read a book or article where someone had ( but never put the one at the end? This extention can help with that
2. Code Spell Checker - If you are anything like me and a terible speller, this extension can save you some time. Much like word it gives you those red squiggly lines when it see's a mispelled word.
3. Live Server - This is a good one to have while working with HTML docs. If you wanted to you can simply click on an html document and it will open up in a browser, if you are editing it and hit save though it won't automatically update in the browser you will have to refresh it. Thats what this extension takes care of it automatically updates your browser to the the content by running a local server to "host" the page.