# HTML BASICS
## What You First Need
* An editor e.g. VSCode, sublime, atom, or any editor of your choice.
* Browser e.g. Chrome, mozilla firefox are best due to good interactivity in the developer tools
## How to start Up
* Create a folder for your projects, `Coding101`
* create a new file `first-file.html`
* Learn below, you can copy and paste codes below to make work easier, but make you understand.
* To execute/view results,
* right click on your editor(e.g. **VSCode**), and copy path. Paste the url on the browser search bar
* On **Sublime**, right click on the file and click open in browser
* Note, at the bottom, all this have been summarised in a single file `index.html`
To understand more, always keep referring to [W3schools](https://www.w3schools.com/html/default.asp) or any other learning resource for in-depth explanation.
I like W3Schools because it explains the very basics in a simple language. A thumbs up, they have an online editor.
## What you must know at the end of this
* [ ] **HTML Elements**( structure)
{% code title="first-file.html" %}
```
first app
Hello World
```
{% endcode %}
* [ ] **HTML Headings** - This are like titles. There are of different sizes right from h1 to h6
```
My First Heading
My first paragraph.
```
* [ ] **HTML Paragraphs**
```
This is a paragraph on starting to code with hmtl5
```
* [ ] **HTML Comments -** Used to explain what has been implemented
```
```
```
```
* [ ] **HTML Images**
{% code title="image.html" %}
```
```
{% endcode %}
* [ ] **HTML Lists** - Items can be numbered(ordered list) or be displayed in bullet form(unordered list)
{% code title="ul-list.html" %}
```
- Spiderman Homecoming
- End game
- Game of Thrones
```
{% endcode %}
* [ ] **HTML Tables**
{% code title="table.html" %}
```
| Firstname |
Lastname |
Age |
| Jill |
Smith |
50 |
| Eve |
Jackson |
94 |
```
{% endcode %}
* [ ] **HTML Forms** - Input fields can be text, password, email, number, dates, etc. More [here](https://www.w3schools.com/html/html_form_input_types.asp). Forms are used to submit or get data. An example as below:
{% code title="form.html" %}
```
```
{% endcode %}
**\
** - Break to the next line
**\
-** Horizontal line
## So How does this come up all together
First create a new file on your editor, `index.html`. Paste or combine the above codes in the **body** tags
{% code title="index.html" %}
```
first app
My First Heading
My first paragraph.
- Spiderman Homecoming
- End game
- Game of Thrones
| Firstname |
Lastname |
Age |
| Jill |
Smith |
50 |
| Eve |
Jackson |
94 |
```
{% endcode %}
To execute this file, right click on your editor(e.g. **VSCode**), and copy path. Paste the url on the browser search bar
On **Sublime**, right click on the file and click open in browser.
## Note
The list above is a list of the very important things you must know before proceeding. They are the building blocks of the web document. There are a lot to this. Read more on [W3Schools](https://www.w3schools.com/html/html_elements.asp) to understand in-depth of all HTML contents
## So What Next?
If you have gone through the above basic HTML codes and comfortable, you can start up styling using CSS(Cascading Style Sheets). This what makes pages lively by adding some life and color to web content.
```
hasta entonces(espanol) - See you Then
```
### Heads Up
I found out a sweet tutorial on HTML and CSS on freecodecamp. Feel free to spare some few hours [on this link.](https://www.youtube.com/watch?v=mU6anWqZJcc)