Html css: Тренажёр «Знакомство с HTML и CSS» — HTML Academy

HTML/CSS | OTUS

Что даст вам этот курс

На курсе вы освоите лучшие практики современной верстки сайтов, а также:

• научитесь интерпретировать макеты дизайнеров;
• создавать семантическую разметку вебсайтов;
• создавать макеты любой сложности без гор библиотек и плагинов;
• освоите основной стек технологий и приемы в верстке: box model, positioning, float, flexbox, grid, media quesries, fallbacks, CSS resets, autoprefixer, postcss;
• пройдете основы оптимизации, BEM номенклатуру;
• научитесь работать с фреймворками bootstrap и tailwind.

С первого же месяца вы будете заниматься в условиях, приближенных к реальной разработке: научитесь верстать сайт по макету, делать верстку адаптивной, тестировать ее на различных мобильных устройствах, деплоить промежуточные версии.

К концу обучения вы соберете портфолио из выполненных работ и сделаете готовый проект, который сможете опубликовать и показывать на собеседованиях.

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

Преподаватели

Мария Коршунова

Илья Филимонов

Артем Сальников

Артур Горохов

Преподаватель физики и информатики по образованию. Работает в сфере веб-разработки с 2011 года. Работала над сайтами как крупных холдингов (Redmond, BMV, Сибирская корона, ВО Рестэк и другие), так и небольших стартапов. За это время поработала с более чем сотней различных проектов.

С 2016 года преподаёт HTML, CSS и основы JavaScript начинающим и продолжающим верстальщикам. Автор и методист курсов: «Создание и продвижение сайтов», «Веб-разработчик с нуля», «Основы программирования на JavaScript», «JS для детей», «CSS-анимации для frontend-разработчика».

Стремится сама развиваться в индустрии, а также доступно объяснять даже самые сложные аспекты профессии тем, кто хочет к ней присоединиться.

Руководитель программы

Работает frontend-разработчиком в компании «Барс Груп» в Казани.
На данный момент пишет регистр для минздрава (ведение учета заболевших).

В свободное время программирует, изучает языки, занимается плаванием, путешествует.

Магистр по специальности «Программная инженерия». Около 5 лет опыта в продакшн проектах, на данный момент работаю в компании ОТР2000 на позиции Senior software engineer. Преподавал курсы по frontend разбработке от EPAM. Основной тех. стек: React JS + TypeScript

Преподаватель

Учился в Гикбрейнс на факультете вэбразработки. Работал в 1 бите, потом в вэбстудии примерно 6 месяцев. Потом ушел на фриланс. На платформу Upwork. Сейчас веду 8 проектов на поддержке в том числе сайты правительства Пензенской области и ПГУ + частные сайты. Увлекаюсь фитнесом и охотой.

Преподаватель

Преподаватели

Мария Коршунова

Преподаватель физики и информатики по образованию. Работает в сфере веб-разработки с 2011 года. Работала над сайтами как крупных холдингов (Redmond, BMV, Сибирская корона, ВО Рестэк и другие), так и небольших стартапов. За это время поработала с более чем сотней различных проектов.

С 2016 года преподаёт HTML, CSS и основы JavaScript начинающим и продолжающим верстальщикам. Автор и методист курсов: «Создание и продвижение сайтов», «Веб-разработчик с нуля», «Основы программирования на JavaScript», «JS для детей», «CSS-анимации для frontend-разработчика».

Стремится сама развиваться в индустрии, а также доступно объяснять даже самые сложные аспекты профессии тем, кто хочет к ней присоединиться.

Руководитель программы

Илья Филимонов

Работает frontend-разработчиком в компании «Барс Груп» в Казани.
На данный момент пишет регистр для минздрава (ведение учета заболевших).

В свободное время программирует, изучает языки, занимается плаванием, путешествует.

Артем Сальников

Магистр по специальности «Программная инженерия». Около 5 лет опыта в продакшн проектах, на данный момент работаю в компании ОТР2000 на позиции Senior software engineer. Преподавал курсы по frontend разбработке от EPAM. Основной тех. стек: React JS + TypeScript

Преподаватель

Артур Горохов

Учился в Гикбрейнс на факультете вэбразработки. Работал в 1 бите, потом в вэбстудии примерно 6 месяцев. Потом ушел на фриланс. На платформу Upwork. Сейчас веду 8 проектов на поддержке в том числе сайты правительства Пензенской области и ПГУ + частные сайты. Увлекаюсь фитнесом и охотой.

Преподаватель

Корпоративное обучение для ваших сотрудников

Подробнее

>

ДругаяИП

Нажимая кнопку, я принимаю условия Политики конфидециальности

Мы обещаем не присылать вам спам

Мы получили Вашу заявку, в ближайшее время с Вами свяжется наш менеджер.

Программа обучения

В процессе обучения вы получите комплексные знания и навыки.

Модуль 1 Введение в Web

C 28 декабря

Тема 1. Введение в Web

Тема 2. Version Control

Тема 3. Почему html — это не язык программирования

Тема 4. CSS: история стилей

Тема 5. Box model в деталях

Тема 6. Позиционирование элементов в деталях

Тема 7. Selector priority

Модуль 2 Layouts (макеты)

C 30 января

Тема 8. Layout: введение, основы

Тема 9. Layout techniques

Тема 10. Flexbox layout

Тема 11. Grid layout

Тема 12. Поддержка браузеров и fallbacks

Модуль 3 Адаптивный веб-дизайн

C 15 февраля

Тема 13. Введение в media queries

Тема 14. Mobile first vs desktop first media queries

Тема 15. Особенности мобильной верстки

Тема 16. Анимации CSS

Модуль 4 Coding style

C 1 марта

Тема 17. Номенклатура

Тема 18. Bootstrap

Тема 19. Tailwind

Модуль 5 JavaScript Basic

C 13 марта

Тема 20. Введение в JavaScript

Тема 21. Настройка окружения для верстки

Тема 22. Webpack (часть 1)

Тема 23. Webpack (часть 2)

Тема 24. Оптимизация ассетов

Тема 25. Деплой страницы

Тема 26. Аналитика и поддержка

Модуль 6 Проектная работа

C 5 апреля

Тема 27. Выбор темы и организация проектной работы

Тема 28. Защита проектных работ

Скачать подробную программу

Получить подробную программу обучения

Мы обещаем не присылать вам спам

Получить консультацию

Наш специалист свяжется с вами в ближайшее время. Если у вас возникли трудности в выборе курса или проблемы технического плана, то мы с радостью поможем вам.

Я принимаю условия Политики конфиденциальности и Пользовательского соглашения

Я принимаю условия Политики конфиденциальности и Пользовательского соглашения

Мы получили Вашу заявку, в ближайшее время с Вами свяжется наш менеджер.

Заберете с собой:

• основные и дополнительные материалы, и видеозаписи занятий;


• образцы кода;


• собственный проект, который можно будет показывать при трудоустройстве;


• сертификат о прохождении обучения.


• получите приглашение пройти собеседование в компаниях-партнерах (эту возможность получают самые успешные студенты).

Дата выдачи сертификата: 18 апреля 2023 года

Ваш сертификат

Прошедшие открытые вебинары

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

Маргарита Образцова

7 мая 2021 года в 20:00

Для доступа к прошедшим мероприятиям необходимо пройти входное тестирование

Возможность пройти вступительное тестирование повторно появится только через 2 недели

Результаты тестирования будут отправлены вам на e-mail, указанный при регистрации.

Тест рассчитан на 30 минут, после начала тестирования отложить тестирование не получится!

Партнеры ждут выпускников этого курса

Открытые технологии

ROCKET SALES

Zebomba games

Посещая наш сайт, вы принимаете  политику использования cookie-файлов

Для поступления на курс мы просим слушателей пройти вступительное тестирование, которое позволит определить, соответствуют ли ваши знания минимальному порогу поступления в группу. Тестирование «отсекает» новичков, для которых программа будет слишком сложна. Тот, кто его не сдаст, не сможет оплатить курс и начать обучение.

При положительном результате (уровни А, В, С и D) вы получите уведомление по электронному адресу и доступ в личный кабинет для оплаты. В случае неудачи (уровни E и F) возможно повторное прохождение, но только через 2 недели.

Как насчет приятных бонусов? Выбирайте!

Мы предлагаем массу возможностей для того, чтобы оплата обучения стала для Вас доступнее:

Бесплатный трансфер

Обучение за счет работодателя

Оплатить в рассрочку

Оплатить в кредит

Реферальные программы

Программы лояльности

Welcome-cкидка: 21 день

На ваш номер отправлен код. Введите его сюда.

Если смс не пришла, проверьте, правильно ли введен номер

Напомнить о тестировании

Email

Через 1 часЧерез 3 часаЧерез 6 часовЧерез 12 часовЗавтра

Неверный логин или пароль

бесплатное обучение онлайн, 11 уроков

Бесплатный курс

28518 студентов 1734 сообщения

Последнее обновление: 14 октября 2022

Включено в курс

11 уроков (видео и/или текст)

1 упражнение в тренажере

18 проверочных тестов

Дополнительные материалы

Помощь в «Обсуждениях»

Чему вы научитесь

• Создавать базовую разметку HTML-документа.
• Подключать стили для страницы.
• Использовать возможности веб-инспектора Chrome DevTools.
• Публиковать свой сайт в интернете на хостинге GitHub Pages.
• Использовать базовые концепции веб-дизайна.

Описание

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

вёрстка Веб-дизайн GitHub Pages Developer Tools HTML5 CSS3

Уроки курса

Продолжительность 5 часов

• Верстальщик vs. веб-дизайнер

  Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.

  теория

• Знакомство с HTML

  Познакомиться с HTML и попробовать его в деле.

  теория

  тесты

• Элементы, теги и атрибуты

  Изучить простую идею HTML и структуру элементов страницы.

  теория

  тесты

• Структура страницы

  Рассмотреть полную структуру целого HTML-документа, видимые и невидимые теги.

  теория

  тесты

• Основы CSS

  Научиться задавать оформление — стили — элементам HTML-страницы.

  теория

  тесты

• Chrome DevTools

  Познакомиться с Developer Tools и веб-инспектором, удобным инструментом для анализа и редактирования страницы прямо в браузере.

  теория

• Каскад

  Понять принцип, по которому стили собираются в один набор из разных источников.

  теория

  тесты

• div, span и display

  Познакомиться с принципами, по которым элементы выводятся на страницу и получают определённый размер.

  теория

• Правило близости

  Рассмотреть один из базовых принципов дизайна: правило близости или grouping/proximity principle.

  теория

  упражнение

• Размещение на GitHub Pages

  Освежить память по теме хостинга и разместить статичную страницу бесплатно на GitHub Pages.

  теория

• Интеграция с соц. сетями и семантический веб

  Рассмотреть инструменты разметки для лучшей интеграции с социальными сетями.

  теория

Формат обучения

jackplazma05 декабря 2020

какой же кайф слушать Рахима, особенно после его подкаста 🙂

---

kvinvi28 августа 2018

Немного сложновато слушать, когда Вы порой делаете паузы чуть ли не после каждого слова.. А в целом все замечательно, спасибо)

---

Вика Пыльнова14 июня 2018

огромное спасибо за курс

---

---

Максим Торбург03 февраля 2018

 Очень забавные резюме местами попадаются 🙂

Изучите HTML CSS

Изучите HTML CSS

Самый простой способ выучить

семантику и доступный HTML и CSS шаг за шагом.

Учитесь в интерактивной среде.
Читайте короткие уроки, делайте заметки и выполняйте задания прямо в браузере.

Попробуйте →

Анонимные файлы cookie используются для повышения качества курса.

Пришло время изучить

 HTML CSS с
 правильной семантикой и доступностью.

Изучите HTML CSS с нуля и попрактикуйтесь в интуитивно понятной среде. На протяжении этого курса вы узнаете о семантике и доступности.

Вы будете читать короткие уроки и решать задачи и проекты шаг за шагом. Попробуйте первые 50 уроков, задач и карточек бесплатно. Вы можете перейти на учетную запись Pro с единовременным платежом, который дает вам доступ на 5 лет.

Learn HTML CSS подходит как для начинающих, так и для опытных разработчиков, которые хотят правильно изучить HTML CSS.

Чему вы научитесь

Этот курс охватывает HTML и CSS с нуля. Хотя вы можете легко получить результат на экране с помощью HTML и CSS, важно иметь правильную семантику и доступность.

У нас уникальный подход, так как нам нравится объяснять концепции шаг за шагом, чтобы вы могли полностью понять, как это работает.

Уроки и задачи шаг за шагом проведут вас по этим темам:

• Доступность
• Семантика
• Headings
• Meta tags
• Semantic elements
• Non-semantic elements
• HTML Validation
• Left to right direction
• Horizontal writing mode
• Landmarks
• Reader mode
• DevTools (Inspect)
• Images
• Шрифты
• Единицы
• Отзывчивость
• Блочные модели
• Селекторы
• Сворачивающиеся поля
• CSS (ось) Сокращения
• Якоря
• Kit
• Доступ к цвету
• Пользовательски знания, у нас есть 2 проекта для вас. Эти 2 проекта повторяются на протяжении всего курса, помогая вам применить полученные знания.

  После прохождения курса вы сможете использовать эти проекты в своей (необразовательной) работе.

  HTML Карточки CSS

  Этот курс разработан для учащихся. Вот почему мы разработали отдельное приложение с карточками, где вы можете закрепить новые понятия, которые вы узнали, используя интервальные повторения.

  Повторение с интервалами оказалось более эффективным методом обучения.

  Что говорят люди

  
  

  Тодд 🦞

  @toddlibby

  Это то, о чем я говорю уже пару недель. Такое образование крайне необходимо в развитии.

  Брайан Хинтон 🐧

  @RealTinyPenguin

  Я занимаюсь кодированием и более 20 лет, и я до сих пор учусь понемногу из курса @JoubranJad #learnhtmlcss. Хорошее напоминание о том, что мы все забываем основные вещи с годами и никогда не должны прекращать учиться.

  О инструкторе

  
   

  Джад Джубран – эксперт Google Developer, Microsoft Most Valuable Professional (2019–2022) и внештатный консультант по веб-производительности из Амстердама.

  Его страсть к JavaScript привела его к созданию и разработке наиболее интерактивных пошаговых курсов по JavaScript, React, основам программирования и HTML CSS.

  Зачем изучать HTML CSS с помощью этого курса?

  Уроки

  • Чтение кратких уроков
  • Сохранение заметок в уроках
  • Экспорт и печать заметок
  • Прочитать резюме изученных тем4

    Practice

    • Practice directly in the browser
    • Solve interactive challenges
    • Test-driven environment
    • Solve real-world projects
    • Continue on your phone
    • Compare with official solution

    Flashcards

    • Keep your память свежая
    • Учитесь на ходу
    • Польза от интервального повторения
    • Повторение каждой главы
    • Поддерживайте полосу прогресса
    • 200+ карточек

    Современность

    
    Цены

    Бесплатная пробная версия

    Попробуйте первые 50 уроков, задач, проектов (первые 15 глав) и дидактические карточки бесплатно. Нет ограничения по времени.
    Для остальных глав требуется учетная запись PRO.

    Разовый платеж

    Мы не любим подписки. Вот почему Learn HTML CSS PRO можно разблокировать за один платеж, который дает вам доступ на 5 лет.
    Проверить страницу оплаты. Мы рекомендуем пройти бесплатную пробную версию перед обновлением.

    Самый простой способ выучить

    семантику и доступный  HTML CSS  шаг за шагом

    Присоединяйтесь к более чем 125 000 учащихся.

    Попробуйте →

    Введение в HTML и CSS

    Понимание связи между HTML и CSS полезно при разработке для Интернета.

    В этом уроке:

    1. Понимание того, как браузеры отображают код
    2. Проверка кода веб-сайта
    3. Понимание HTML и CSS
    4. Проектирование, в то время как Webflow генерирует для вас чистый код

    Понимание того, как браузеры отображают код

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

    Проверка кода веб-сайта

    Вы можете проверять и временно редактировать исходный код в большинстве браузеров.

    Чтобы открыть Chrome DevTools: и управлять

    1. Щелкните правой кнопкой мыши и выберите Проверить во всплывающем меню или нажмите Control + Shift + I  (в Windows) или Command + Option + I  (в Mac)
    2. Отредактируйте код в инспекторе, чтобы временно изменить содержимое в браузере.

    Может быть интересно проверить взаимосвязь между кодом и отображаемым содержимым. Поскольку вы вносите изменения только локально в своем браузере, ваши обновления исчезнут, как только вы обновите страницу.

    Понимание HTML и CSS

    HTML создает контент на веб-сайте, а CSS отвечает за дизайн и стиль контента.

    HTML: контент

    HTML обычно используется для контента: он сообщает браузеру, что находится на странице. Сюда входит все, что вы видите, включая заголовки, абзацы, ссылки и изображения.

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

    CSS: стиль

    CSS (каскадная таблица стилей) берет всю информацию о стилях, которая раньше была встроенной — цвета, границы, размер, расположение, типографику и т. д. — и перемещает ее в отдельный документ стилей с классами.

    Таким образом, любому из этих элементов в нашем HTML может быть присвоено имя класса, чтобы принять стили, связанные с этим классом.

    Внесите изменения в этот класс в файле CSS, и это повлияет на любой элемент, использующий этот класс.

    Большая проблема: код становится сложнее

    На заре Интернета нам нужно было знать только самые основные теги и атрибуты. Прошло время, и Интернет действительно начал расти. Устройства изменились, и то, как мы взаимодействовали с Интернетом, стало более личным.

    Как все случилось, пришлось переоборудовать. По мере того, как увеличивались возможности того, что мы могли создать как дизайнеры и разработчики, росла и сложность всего, чем нам приходилось управлять за кулисами.

    Сегодня, чтобы стать успешным веб-разработчиком, вы должны освоить HTML, CSS, JS, базы данных, Sass, библиотеки JavaScript, библиотеки CSS, особенности браузера, версии браузера, адаптивный дизайн, GitHub, jQuery, Java, сжатие изображений, скорость загрузки, оптимизация, SEO — этот список постоянно растет, и довольно скоро веб-разработка кажется невозможной.

    Проектирование, в то время как Webflow генерирует для вас чистый код

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

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

    Вместо создания эскизов и вывода прототипов, а также мучительной итерации от проектирования до процесса передачи разработки, мы выводим готовый к производству код. Таким образом, вы можете взять даже самые безумные дизайнерские идеи и воплотить их в жизнь без необходимости написания кода.

    Попробуйте Webflow — это бесплатно

    Был ли этот урок полезен? Дайте нам знать!

    Спасибо за отзыв! Это поможет нам улучшить наш контент.

    Свяжитесь с нашим сообществом

    Свяжитесь со службой поддержки

    Что-то пошло не так при отправке формы.

    Связаться со службой поддержки

    Есть предложения по уроку? Дайте нам знать

    Спасибо! Ваша заявка принята!

    Ой! Что-то пошло не так при отправке формы.