# HTML & CSS starter + Basic git flow setup

## Goal: Learn basic web developer workflow

## Preparation:

### 1 - Download the starter project

- Create a folder called `Code` inside`C:/Users/{YourUsername}` folder.
In the end it should look like this: `C:/Users/{YourUsername}/Code/`
- This will be the place where you will keep your coding projects.
- Go to: https://github.com/humblecoder00/html-css-starter
- Click to `"Code"` -> `Download ZIP`
- Download or copy paste it to `C:/Users/{YourUsername}/Code/`
- Rename the folder to *html-css-starter*
- Now your project folder should be looking like this: `C:/Users/{YourUsername}/Code/html-css-starter`

### 2 - Install a Visual Studio Code extension

- Open Visual Studio Code, click on `Extensions` icon at the left side and search `"Live Server"` & install it.

### 3 - Open the project

- There is 2 ways you can open the project:
- Either go to `C:/Users/{YourUsername}/Code/` -> right click to `html-css-starter` -> open with Visual Studio Code.
- Or inside Visual Studio Code -> File -> Open Folder -> Then find `C:/Users/{YourUsername}/Code/` via file explorer and select `html-css-starter`
- Click "Go Live" at the right bottom corner, it will open your default browser.
- With the `"Live Server"` extension, your browser will be automatically refreshed whenever you make a each change in the code.
- Resize Visual Studio Code and Browser side by side for comfortable workflow, like this:


### 4 - Initialize your project with git and Github

**NOTE: Initialization is done only at first time for each project.**

- Open `GitBash` terminal.

#### Part 1 - Navigate to project folder:
Apply following commands (write & press enter):

1 - `cd ..` -> Navigates to root in C:/Users
2 - `cd YourUsername/Code/html-css-starter` -> Navigates to your project folder C:/Users/{YourUsername}/Code/html-css-starter
3 - `ls` -> see inside of current folder. At this point you should be able to see `index.html` and `style.css` files.

#### Part 2 - Initialize & setup your git:

Apply following commands (write & press enter):

1 - `git init` -> initializes the folder as a git repository.
2 - `git status` -> shows the current changes
3 - `git add .` -> stages the all current changes
4 - `git commit -m "initial commit"` -> make a commit with `initial commit` as description.
5 - If you get a text like `*** Please tell me who you are.` , you need to setup your local git account:

Simply apply these commands one by one:

- `git config --global user.email "youremailhere"` -> set your e-mail
- `git config --global user.name "yournamehere"` -> set your name

6 - Now try to commit again by running this command:

`git commit -m "initial commit"`

7 - Run `git status`. If you see something like this in terminal, it means you successfully initialized your project locally:

On branch master
nothing to commit, working tree clean

8 - Keep your GitBash terminal open.

#### Part 3 - Do the basic workflow locally:

- Back to Visual Studio Code, change Hello World text to Hello inside `index.html` and save the changes.
- Go to your GitBash terminal, write `git status` to see the changes.
- To add your changes, simply follow this commands:

`git add .`
`git commit -m "made my first change"`

- Run `git status` again and check if you see working tree clean message - that means you have made a successful commit.

#### Part 4 - Setup your project on Github:

- Go to github.com -> open your profile
- Click on Repositories -> New
- Give your repository `"html-css-starter"` name.
- Don't initialize it with README file, because you have already initialized your project locally.
- Follow the this part of Github's auto suggestion:

*…or push an existing repository from the command line
..............*

- Which means you will apply these commands one after another inside your `GitBash` terminal:

Add your remote repository url:
`git remote add origin https://github.com/yourusername/html-css-starter.git`

Push your code to remote repository
`git push -u origin master`

- At this point terminal can ask your github username and password, enter them.

- As the last thing, check your github profile / repositories. If you have a repository called `html-css-starter` - you are done with initialization setup, now you can work with regular flow.

#### Part 5 - Make a simple local change and push changes to Github:

- Go to Visual studio, inside `index.html` file change `Hello` text to `Hello Space`

1 - Check the status: `git status`
2 - Stage your changes: `git add .`
3 - Commit your changes: `git commit -m "write something descriptive"`

At this point your changes are only in local. To have the changes in Github, all you have to do is apply this command:

4 - Pushes your changes to origin (remote) master repository: `git push origin master`