https://github.com/simandrew/html-css-for-javascript
Html Css for Javascript
https://github.com/simandrew/html-css-for-javascript
Last synced: about 1 month ago
JSON representation
Html Css for Javascript
- Host: GitHub
- URL: https://github.com/simandrew/html-css-for-javascript
- Owner: SimAndrew
- Created: 2023-01-30T17:55:59.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T16:02:20.000Z (about 2 years ago)
- Last Synced: 2025-03-01T20:35:37.221Z (about 1 year ago)
- Size: 2.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Курс HTML для JavaScript разработчиков
[Ссылка на курс](https://itgid.info/ru/course/html)
[Ссылка на сертификат](https://itgid.info/ru/certificate/view?Certificate[uid]=4d8jmh9vdazn)
---
### Пример задания и его решения, фото: Unit 13
---
### Пример задания и его решения: Unit 13 Task 1
```
unit_13.html
Task 1. Создайте анимацию. Блок должен становиться круглым.
Цвет - orangered. Анимация должна повторяться 3 раза.
unit_13.css
.block-1 {
animation-name: block1;
animation-duration: 2s;
animation-iteration-count: 3;
}
@keyframes block1 {
0% {
}
50% {
border-radius: 50%;
background-color: orangered;
}
100% {
border-radius: 0%;
}
}
```
---
### Технологии:
- Теги HTML
- Виды тегов
- Верстка HTML страницы
- CSS, Классы, id, Стили
- Блочные и строчные элементы
- Позиционирование элементов
- Float, Flex, Grid
- Адаптивная верстка
- Медиа запросы
- HTML5, валидация кода
- Семантическая верстка
- Псевдоклассы и Псевдоэлементы
- Анимация, @keyframe
- [gulpjs.com](https://gulpjs.com/)
- [getbootstrap.com](https://getbootstrap.com/)
- Проект курса создание сайта резюме с заполнением данными на основе JavaScript. Верстка с применением фреймворка
Boostrap. Сборка проекта, минимизация файлов CSS, JS с помощью сборщика Gulp.
---
### Уроки:
- Спринт 01. Основные теги html
branch: `sprint-01-basic-html-tags`
- Спринт 02. Основы css. Понятие классов, стилей. Написание css кода
- Спринт 03. Правильная организация css кода
- Спринт 04. Позиционирование элементов. Табличная верстка
- Спринт 05. Позиционирование элементов. Свойство position
- Спринт 06. Позиционирование практика
- Спринт 07. Позиционирование элементов. Float
- Спринт 08. Позиционирование элементов. Flex
- Спринт 09. Позиционирование элементов. Grid layout
- Спринт 10. Структура сайта. html 5 теги. Семантика
- Спринт 11. Адаптивность сайта. Перестройка сайта под мобильные устройства
- Спринт 12. Псевдоэлементы и псевдоклассы
- Спринт 13. Основы анимации
- Спринт 14. Готовим Gulp для проекта
- Спринт 15. Начинаем проект сайта резюме CV
- Спринт 16. Развертываем проект. Bootstrap и скелет
- Спринт 17. Проект. Блок фото, контактов, навыков, достижений
- Спринт 18. Проект. Верстаем правый блок с опытом работы.
- Спринт 19. Проект. Адаптируем под мобильные устройства
- Спринт 20. Заливаем проект на бесплатный хостинг
- Спринт 21. Делаем вывод информации с помощью JavaScript
---
### Структура:
От main идут ветки под каждый спринт.
Branch: `sprint-01-basic-html-tags` ветка с названием урока.
В ней файлы: `unit_01.html, unit_01.css, script.js, images`
Задание в `unit_01.html`, решение в `unit_01.html, unit_01.css или script.js` файле.
---
### Запуск приложения:
- Выбрать ветку например: branch: `sprint-01-basic-html-tags`
- Запустить live server
---
## Course Html Css for Javascript.
[Link to the course](https://itgid.info/ru/course/html)
[Link to certificate](https://itgid.info/ru/certificate/view?Certificate[uid]=4d8jmh9vdazn)
---
### Technologies:
* HTML
* CSS
* Flex
* Grid
* Adaptive layout
* Bootstrap
* Gulp
---
### Structure:
From main there is a branches with the name of the lesson.
Branch: `sprint-01-basic-html-tags` a branch with the name of the lesson.
It contains files: `unit_01.html, unit_01.css, script.js, images`
Task in `unit_01.html`, task solution in `unit_01.html, unit_01.css or script.js` file.
---
### Run the app:
- Select branch for example: branch `sprint-01-basic-html-tags`
- Run live server