Введение

Почти все, кто сталкивался с HTML/CSS замечали, что простота изучения синтаксиса, никак не упрощает дальнейшую верстку - элементы ведут себя не так как ожидалось, отображение страницы не совпадает в разных браузерах, а просмотр сайта на компьютере друга разбрасывает сайт по экрану. Порой удается добиться шаткого равновесия, но малейшие изменения превращают сайт в кашу.

Цель этой книги дать учащемуся поэтапную схему верстки, а также полное понимание происходящего. Данную книгу можно рассматривать скорее как учебник по HTML/CSS, чем справочник по нему.

Здесь Вы найдете более 200 задач по верстке, которые познакомят Вас с разнообразными проблемами и особенностями html/css, включая верстку на flexbox, grid layout, svg, адаптивную верстку и анимации.

Сообщество книги в Telegram https://t.me/unexpected_html

Последняя отредактированная версия книги https://github.com/dmitrytinitilov/unexpected-html

Оглавление

• Введение
• 1. Старт
• 2. Строчные и блочные элементы
• 3. Внешний CSS. Базовые CSS-селекторы
• 4. Отступы
• 5. Фиксированная и резиновая верстки
• 6. Цвета, картинки, CSS-переменные
• 7. Свойства фона
• 8. Приклеивание футера
• 9. Свойства текста
• 10. Шрифт
• 11. Скругления и тени
• 12. Градиенты
• 13. Псевдоклассы и контекстные селекторы
• 14. Расширенные CSS селекторы
• 15. Трансформации
• 16. Позиционирование
• 17. Наложение объектов
• 18. Адаптивная верстка
• 19. Viewport
• 20. # Организация кода
• 21. # SCSS
• 22. # Переменные в CSS
• 23. #Модульные сетки
• 24 # Bootstrap
• 25. # flexbox
• 26. #Grid'ы
• 27. Списки
• 28. nth-of-type
• 29. :before :after
• 30. Анимации
• 31. # Формы
• 32. # SVG
• 33. # Таблицы
• 34. float и clearfix
• 35 # Семантика
• # @supports
• Дополнение по Sublime 3
• Emmet
• #Полезные ресурсы
• Руководства по HTML
• Codepens
• Вдохновение
• Вопросы к экзамену
• Благодарности
• Разное
• #TODO list