HTML - Development Enviorment

name: portada
layout: true
class: portada-slide, middle, right
---
# HTML - Development Enviorment
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# Tools
- __GitHub__: Create an account using the school email in [GitHub](https://github.com)
- __Git__: Install [Git](https://git-scm.com/)
- __Google Chrome Browser__
  - Already comes with Chromer Developer Tools
- __Visual Studio Code__
  - Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension.

---
# Git setup

- Create an account using the school email in [GitHub](https://github.com/)
  - Add you username to this [Spreadsheet](https://docs.google.com/spreadsheets/d/1Ry44S7Tjp3jJ_W-l0oh5O8P0Vyt-hurMxSphlyPGteg/edit?usp=sharing)
- Request student pack to get PRO at [GitHub student benefits](https://education.github.com/discount_requests/student_application)
  - How do you plan to use GitHub?
      - Learn git and deploy a small static website for the HTML course at school using GitHub pages from a private repository.
- Wait until I invite you to the [IES SERPIS Markup Languages Organization](https://github.com/iesserpis-markup-languages)
- Create a new repository named SurnameName-llmq (eg. PuigcerverJoan-llmq) inside the organization.
  - Visibility: __private__
  - Don't add README, .gitignore nor license.

---
# Create repository
.img-75[![Create repo](img/create_repository.png)]

---
# Empty reposiory
.img-75[![empty repo](img/empty_repo.png)]

---
# Install .b[Git]
- __Git__: Install [Git](https://git-scm.com/)
- Set up your name and email in git using the following commands from the command line:

```bash
git config --global user.name "Your Name"
git config --global user.email "your@email.org"
```

---
# Open repository from VSCODE
- Open your repository with __Clone Git repository...__
  - Select __Clone from GitHub__
- Install GitHub plugin and follow the steps to authorize it.
- Select your folder and clone it.

.img[![vscode](img/vscode.png)]

---
# Git: initial commit
- Add a __README.md__ file with the following contents:

```markdown
# Name Surname Markup Languages repository
This repository contains all exercises realized in the ASIX Markup Language Course
```
- Add a __index.html__ file with the following contents:

```html
<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <title>Name Surname</title>
    </head>
    <body>
      <h1>Name Surname Markup Languages solutions</h1>
    </body>
</html>
```

---
# Git: initial commit
- In __Source Control__ tab.
  - Commit all changes with commit message "Initial commit".
  - Push your commit in  __... > Push__

.columns[
.column[
![vscode](img/initial_commit.png)
]
.column[
.img-50[![vscode](img/push.png)]
]
]

---
# Git: initial commit
Your repository should have updated.

![initial_repo](img/initial_repo.png)

---
# Git repository settings
- Under __Settings__ tab:
  - __Pages__:
      - Select root folder and master branch.

![pages](img/pages.png)

---
# LiveServer
In order to preview a HTML, you can open it with your web browser.

A easier way, is to launch a live server, that reloads automatically the file when it changes.

![pages](img/liveserver.gif)