# HTML/CSS Basics workshop
Rules for this workshop: build and design a web page only with a semantic HTML structure (no class, no id in CSS).
{: .alert-warning }
## Initialisation
- In a new folder, create an *index.html* file.
- Open the file with your favorite IDE and add the HTML5 basic tags (DOCTYPE, html, head, body).
- Create a *style.css* file.
- In the ``, first add some mandatory tags as `` or ``:
```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Workshop
```
- Then add a `` tag with the link to *style.css*.
- In *index.html*, in the ``, add a `
` tag with the text `Hello world !!!`.
- In *style.css*, add the code:
```css
h1 {
color: #a306b6;
}
```
- Open *index.html* in your browser, and check that you can read the message: 'Hello world !!!' in WCS purple.
Good job !
## Layout of your website
You will have to create a basic home page following the layout below (**do not try** to be pixel perfect, this image is just a guide, pink color is now replaced by purple).
Open in new tab
Browsers have default size for each HTML elements (margin, font-size, etc.). It is useful but sometimes you will prefer to reset some default behaviour. In this workshop, it could be interesting to remove margin on ``. Furthermore, use `box-sizing: border-box` on each element will help you to deal element sizing (more info about [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)).
{: .alert-info }
```css
* {
box-sizing: border-box;
}
body {
margin:0;
}
```
### Navbar
- Try to reproduce the navbar. Start to create a `