Я Верстальщик 1.0 (html и CSS3)
Критерий завершения
Верстаю сайты, и у меня не возникает никаких вопросов по html и CSS3.
Личные ресурсы
Время, мотивация, небольшие знания о верстке, интернет.
- 
                    
                    
Основы создания сайтов:
- 
                                                                        
01. Введение
 - 
                                                                        
02. Установка редактора Brackets
 - 
                                                                        
03. HTML-теги (теория)
 - 
                                                                        
04. Создание скелета HTML-документа
 - 
                                                                        
05. HTML-теги форматирования текста
 - 
                                                                        
06. CSS-селекторы и свойства (теория)
 - 
                                                                        
07. Свойства для стилизации текста
 - 
                                                                        
08. Инструменты разработчика
 - 
                                                                        
09. Изображения и ссылки
 - 
                                                                        
10. Растровая и векторная графика, форматы изображений
 - 
                                                                        
11. HTML-таблицы
 - 
                                                                        
12. Блочные и строчные элементы
 - 
                                                                        
13. Работа с фоном. Часть 1
 - 
                                                                        
14. Работа с фоном. Часть 2
 - 
                                                                        
15. Справочники
 - 
                                                                        
16. Наименование классов
 - 
                                                                        
17. Создание простой HTML-страницы
 - 
                                                                        
18. HTML-формы
 - 
                                                                        
19. Псевдоклассы
 - 
                                                                        
20. Границы (border, outline)
 - 
                                                                        
21. Создание формы регистрации
 - 
                                                                        
22. Позиционирование
 - 
                                                                        
23. Позиционирование (практика)
 - 
                                                                        
24. Псевдоэлементы
 - 
                                                                        
25. HTML5-теги
 - 
                                                                        
26. CSS3-свойства
 - 
                                                                        
27. Основы flexbox
 - 
                                                                        
28. Доработка страницы
 - 
                                                                        
29. Селекторы, псевдоклассы
 - 
                                                                        
30. Приоритеты селекторов
 - 
                                                                        
31. Единицы измерения (em, rem)
 - 
                                                                        
32. HTML-теги (abbr, code, cite, blockquote и др.).mp4
 - 
                                                                        
33. Стилизация кода (HTML, CSS)
 - 
                                                                        
34. Вертикальное выравнивание (vertical-align)
 - 
                                                                        
35. Обтекания (float, clearfix)
 - 
                                                                        
36. Видимость элементов
 - 
                                                                        
37. Специальные символы
 - 
                                                                        
38. Префиксы (-webkit-, -moz-, -ms-)
 - 
                                                                        
39. Вставка видео и аудио
 - 
                                                                        
40. Google fonts, локальные шрифты
 - 
                                                                        
41. Основы адаптивной верстки.mp4
 - 
                                                                        
42. Цвета (HEX, rgb, rgba)
 - 
                                                                        
43. Возможности Brackets и плагины
 
 - 
                                                                        
 - 
                    
                    
Верстка адаптивного сайта
- 
                                                                        
1. Подготовительные работы
 - 
                                                                        
2. Верстка шапки сайта
 - 
                                                                        
3. Верстка текстового блока
 - 
                                                                        
4. Верстка фотографии
 - 
                                                                        
5. Верстка контактов
 - 
                                                                        
6. Верстка страницы 'Об авторе'
 - 
                                                                        
7. Верстка страницы 'Контакты'
 - 
                                                                        
8. Адаптация сайта под разные устройства. Часть 1
 - 
                                                                        
9. Адаптация сайта под разные устройства. Часть 2
 - 
                                                                        
10. Favicon, мета-теги
 - 
                                                                        
11. Кроссбраузерная и валидная верстка
 - 
                                                                        
12. Что делать дальше. План развития
 
 - 
                                                                        
 - 
                    
                    
Быстрая и комфортная верстка сайтов (автоматизация процессов):
- 
                                                                        
Модуль 1. Редактор, emmet, горячие клавиши
 - 
                                                                        
1. Работа с редактором кода
 - 
                                                                        
2. Работа с emmet
 - 
                                                                        
3. Горячие клавиши.
 - 
                                                                        
Модуль 2. Автоматизация, структура проекта:
 - 
                                                                        
1. Task-runner
 - 
                                                                        
2. Установка Gulp
 - 
                                                                        
3. Настройка gulpfile.js
 - 
                                                                        
4. Удобная структура проекта
 - 
                                                                        
5. Создаем gulp таски
 - 
                                                                        
6. Работа с плагином panini.
 - 
                                                                        
Модуль 3. БЭМ, SASS, Bootstrap 4:
 - 
                                                                        
1. БЭМ методология
 - 
                                                                        
2. Процесс работы с проектом
 - 
                                                                        
3. Работа с библиотеками
 - 
                                                                        
4 Препроцессор SASS
 - 
                                                                        
5. Модульная работа с Bootstrap4
 - 
                                                                        
6. Как работать с @media.
 - 
                                                                        
Модуль 4. Скорость работы сайта:
 - 
                                                                        
1. Правильная анимация
 - 
                                                                        
2. Шрифты
 - 
                                                                        
3. Системные шрифты - лучшее решение
 - 
                                                                        
4. Что влияет на скорость работы сайта
 - 
                                                                        
5. Тестируем скорость работы сайта.
 - 
                                                                        
Модуль 5. Стиль написания кода:
 - 
                                                                        
1. Стиль написания кода
 - 
                                                                        
2. Полезные советы.
 - 
                                                                        
Модуль 6. Практика:
 - 
                                                                        
1. Создаем новый проект
 - 
                                                                        
2. Верстка шапки сайта
 - 
                                                                        
3. Верстка центральной части
 - 
                                                                        
4. Верстка подвала и анимация
 - 
                                                                        
5. Стилизация модального окна
 - 
                                                                        
6. Верстка страница Сервисы
 - 
                                                                        
7. Верстка страницы Портфолио
 - 
                                                                        
8. Работа со слайдером
 - 
                                                                        
9. Адаптация сайта
 - 
                                                                        
10. Оптимизация изображений
 - 
                                                                        
11. Favicon для сайта.
 
 - 
                                                                        
 - 
                    
                    
KeyKey
Ежедневные занятия на KeyKey для ускорения навыка печати, на русском и английском языках.
 - 
                    
                    
Создание флеш-карт.
Создание флеш-карт на quizlet.com по html CSS3 и БЭМ для дальнейшего их заучивания.
- 
                                                                        
Создание флеш-карт по html
 - 
                                                                        
Создание флеш-карт по CSS3
 - 
                                                                        
Создание флеш-карт по БЭМ методологии
 
 - 
                                                                        
 - 
                    
                    
Пройти все бесплатные уроки на htmlacademy.ru
- 
                                                                        
Тренажер 1: Знакомство с веб-разработкой 3 части 47 заданий.
 - 
                                                                        
Тренажер 2: Знакомство с html и CSS 5 частей 109 заданий.
 
 - 
                                                                        
 
- 807
 - 09 декабря 2020, 17:06
 
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением