# Britlex

## Britlex Language School

### Landing Page

```

1. подключить Fonts

```

```

2. подключить Normalize

```

```

3. подключить CSS


```

```

4. подключить SASS

```

```

5. используем методологию BEM

```

```

6. картинки все сжать через https://squoosh.app/ или https://tinypng.com/


```

```

7. иконки все сжать через https://jakearchibald.github.io/svgomg/ после сжатия
   забросить все в спрайт через https://icomoon.io/


```

```


8. закинуть в проект файлик - .gitignore


```

```

9. закинуть в проект файлик - .prettierrc.json


```

```

10. макет -
    https://www.figma.com/file/jjKQXpWj3fdAHDUGhd4lFA/Britlex-Language-School-(Copy)?node-id=580%3A2&t=VQ3kgxlTI4S8v1bQ-1


```

```

11. на все внешние ссылки - rel="noopener noreferrer nofollow"

```

```

12. фонтс

- Free Fonts: https://nomail.com.ua/

- Google Fonts: https://fonts.google.com/

- Fonts converter: http://www.font2web.com/

- подключение в CSS или SCSS

@font-face { font-family: 'Proxima Nova'; src:
url('../fonts/FontsFree-Net-Proxima-Nova-Bold.eot'); src: local('в�є'),
url('../fonts/Proxima-Nova-Bold.woff') format('woff'),
url('../fonts/Proxima-Nova-Bold.ttf') format('truetype'),
url('../fonts/Proxima-Nova-Bold.svg') format('svg'); font-weight: 700;
font-style: normal; }

font-weight:

1. 100 - Thin
2. 200 - UltraLite
3. 300 - Lite
4. 400 - Normal
5. 500 - Medium
6. 600 - Semibold
7. 700 - Bold
8. 800 - Heavy
9. 900 - Black Footer

```

```

13. подключить JS


```

```

14. добавить анимацию


```

```

15. по JS `use strict`; строгий режим в js type="module" строгий режим в html


```

```

16. мануал по стилизации в CSS

- универсальный - \* тега - div (пример)

- id - #header-btn (только один раз можно использовать на странице)

- class - .header-btn (через точку)

- атрибут - [type], [type="button"]

- дочерний - .header-list > .header-link (первая вложеность через знак
  равенства)

- потомка - .header-list a (для всех потомков через пробел)

- утилитарные классы (например один класс для сброса ссылкам декораций и
  марджины с падингами)

```

```

17. Font Fascia

- плагин чтобы посмотреть в Figma сразу все стили шрифтов, которые используются
  в макете.

```
