###### tags: `Lesson Notes` `ACC` `CSS` `HTML`
# Project Week
Even though this project is an assignment most if not all the steps can be used when creating a personal website. Having steps and a plan helps in making sure that everything goes a little smoother.
## Use UPER for every project
U - Understand
P - Plan
E - Execute
R - Review
Sometimes the Understand and Plan parts are combined as to plan you need to understand
## Starting a Project
### Understand and Plan
#### Step 1 - Answer these questions
1. What do you want to create?
* Do you want to create a multi page site?
* Single page, but have navigation links that lead you further down the page?
* Have images on your page?
2. What do you need in order to create it?
* What folders will you need? css, js, images?
* Will you use JS?
* Will you use links for your images instead of saving them to a folder?
3. How much time do you have to complete the project?
* Knowing how much time gives you a better idea of how to plan your time.
* How long do you give yourself in each step?
* How long will it honestly take you to create each document needed?
#### Step 2 - Breakout the whiteboard
* Now that you have those answers or maybe the beginnings of those answers it's time to get the whiteboard out.
* What I mean by this is it's time to get a blueprint going.
* Sometimes this step is included with step 1. But get those ideas written down
* What to include?
* Basic wireframe or outline of what you want your site to look like.
* Maybe what colors you think you might use
* Here is an example of what you might have it look like
* 
* You can always add to it or take a way from it as you build but it gives you a starting point
:::info
Notice Until now we haven't even opened our editor or greated a repo. No code has been written yet
:::
### Execute
Now that we have an understanding of our project and a rough plan it's time to put it into motion. Really put pen to paper or in our case fingers to the keyboard
#### Step 3 - Set up
:::warning
Make sure you know where you are going to save this. DO NOT be in another repository folder.
:::
1. Create your project folder and any of it's child folders
2. Here is a rough idea of a folder for a project
* myProject
* js
* scripts.js
* css
* styles.css
* images
* img.png
* index.html
3. Some important notes about this layout.
1. Your main html document must ALWAYS be called index.html.
* This becomes more important as we begin to deploy our applications as they WILL NOT work if you don't have a index.html
2. All the projects files and images are located inside the myProject folder. This also becomes more important as we beging to deploy
4. Create a git repository both locally and on github (or content management system of preferance)
* git init locally
* On git hub be sure to start it with an empty repository if starting locally first (at least until you are comfortable with merging content)
* When ever you create a new repo on github you should see this screen) if it was an empty repo no licence, readme, or gitignore file)
* 
* If you have already done git init locally then skip the 1st section and complete the second. Be sure to git add and commit before you add these lines to make things a little easier.
#### Step 4 - Coding
Now the fun begins. Now we have to actually start creating our project
1. HTML 1^st^ - Don't worry about styling so much yet just get some of the basics done first. Here is a simple beginner outline
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='./css/styles.css'>
<title>Document</title>
</head>
<body>
<header>
<h1></h1>
<nav>
<a></a>
</nav>
</header>
<div class='main'>
</div>
<footer>
<p>Made by</p>
</footer>
<script src='./js/scripts.js'></script>
</body>
</html>
```
2. This layout is far from correct but it does give you a good general outline. At least do this before you start to add styling.
3. Add your flex properties or your bootstrap css link, add any other js links you might need as well.
4. Once you have this you can go back to your white board and start filling in those blanks.
#### Step 5 - Commit your code
1. Commit often - You don't have to push your code up to github every commit but at least create those save points.
* Every major change commit the code
* Every time you step away from the computer commit your code (now would also be a good time to go ahead and push it to github too)
* Done for the evening/day? Commit your code and push to github
2. Why? Eventually you are gonig to come across a time when you will need a peice of code that you took out, but because you are getting into the habit now of commiting often you will have a better chance of finding this peice of code and ability to add it back in.
3. When working on group projects you NEVER want to push a whole slew of changes up to github always small features.
#### Step 6 - Testing
1. Now this part is typically going on through out the coding step but it is important to test your site, make sure it is working as expected.
2. Try it on different browsers if you have that capability
* At least on Firefox and Chrome if no other browsers as those are the most popular
3. Test the reposnsiveness on those browsers too.
### Review
#### Step 7 - Looking over the code
Although this is done through out now is the time to take a good look at your code
1. Is it indented correctly?
2. Are there any errors in your code or showing in the console?
3. Is everything where it should be, images in the img folder and so on?
4. Have you removed extra images that aren't being used?
#### Step 8 - Final push and deploy
Here is where you make sure that the final draft (or as final as it is for now if you plan to add to it in the future) is pushed up to github
Why?
1. For safe keeping. Keeping your code saved on github or other services like github keeps it save. You can have it private or set in such a way like on amazons services so that only those you give permision to can view.
2. For employeers. Having a good history of work you have and will do on services like github is smart. It gives future employeers a way to to see what work you have done, how often you commit your work, how often you create something new.
3. Ability to deploy your webiste using free integrated services
##### Deploy my site you say? Possible is this you ask?
Why yes it is. Depending on the type of project you are working on there are 4 free ways to get your site up and running to show off to the world
* None of these ways require a domain - or credit card
* You will have a link that you can easily share
* All of these ways you can simply connect your github account and have the ability to auto re-deploy everytime you push new changes
1. Github pages - right there in github, may not work for databases or sites that require a build step (react) or packages to be installed
2. [Netlify](https://www.netlify.com/) - Great for html based sites. Doesn't always play well with react based sites. No databases. 1 login multiple sites
3. [Vercel](https://vercel.com/) - Good for most frontend websites. No databases. 1 login multiple sites
4. [Heroku](https://www.heroku.com/) - Good for databases. Can be used to host frontend sites with a few extra steps. 1 login multiple sites
Sign in with Wallet
Connect another wallet