Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Верстка сайта html css: Как сверстать веб-страницу. Часть 1 / Хабр

Содержание

Основы верстки HTML и CSS, курс современной адаптивной верстки для начинающих, 12 уроков

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

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

5 упражнений в тренажере

32 проверочных теста

Самостоятельная работа

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

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

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

  • Узнаете основы веб-верстки: как разрабатывать статические веб-страницы и задавать стили элементам.
  • Разберетесь, как пошагово отлаживать код для быстрого обнаружения ошибок.
  • Будете использовать редакторы кода с расширениями, помогающими в разработке. Например, Emmet.
  • Сможете публиковать свой сайт в интернете на хостинге GitHub Pages.

Описание

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

HTML5 CSS3 Developer Tools Верстка

Уроки курса

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

  • Введение

    Курс «Основы современной верстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.

    теория

  • Введение в HTML

    Урок посвящен HTML верстке с нуля. Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.

    теория

    тесты

  • Блочная модель

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

    теория

    тесты

  • Семантический HTML

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

    теория

    тесты

    упражнение

  • Базовая структура HTML документа

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

    теория

    тесты

    упражнение

  • Основы CSS

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

    теория

    тесты

    упражнение

  • Каскадность в CSS

    Что такое каскадность, и как она работает в CSS? Урок посвящен различиям в приоритетах селекторов и умению использовать это в своих проектах.

    теория

    тесты

    упражнение

  • Chrome DevTools

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

    Ранее это делалось преимущественно вручную. Сейчас современные браузеры имеют функцию веб-инспектора. Рассмотрим возможности одного из них – Chrome DevTools.

    теория

    тесты

  • Редакторы кода

    Чтобы сохранять результаты работы, вам потребуется редактор кода. В этом уроке разберем, как установить Visual Studio Code. Это мощный инструмент, который можно использовать не только для верстки, но и для программирования на любом языке.

    теория

  • Emmet

    Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.

    теория

    тесты

    упражнение

  • Публикация в интернете

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

    теория

  • Графические редакторы

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

    теория

  • Самостоятельная работа

    Дополнительные задания, которые позволяют закрепить полученную теорию

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

Вячеслав Межуревский01 июня 2022

Спасибо за задание, было интересно!

Виктория Аблаева12 апреля 2022

Блин-блинский! 6 задание с первого раза получилось! Хекслет, спасибо за полезные уроки, которые остаются в голове!

Дмитрий Коржов01 августа 2021

Пишу здесь, потому что не нашёл, как написать отзыв ко всему курсу.

Курс отличный, как для вводного — затронуты все основные аспекты вёрстки без излишнего углубления в детали.

Из пожеланий — добавить больше практики — упражнений и, особенно, испытаний.

Яна15 апреля 2021

Потрясающе удобный инструмент, особенно при составлении таблиц, которые я раньше ненавидела)) 15 символов против 139 это мощно! Спасибо за интересный курс 🙂

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Профессия

с нуля

Фронтенд-разработчик

Разработка фронтенд-компонентов для веб-приложений

10 ноября 10 месяцев

Профессия

с нуля

Python-разработчик

Разработка веб-приложений на Django

10 ноября 10 месяцев

Профессия

с нуля

Java-разработчик

Разработка приложений на языке Java

10 ноября 10 месяцев

Профессия

с нуля

PHP-разработчик

Разработка веб-приложений на Laravel

10 ноября 10 месяцев

Профессия

с нуля

Node. js-разработчик

Разработка бэкенд-компонентов для веб-приложений

10 ноября 10 месяцев

Профессия

с нуля

Fullstack-разработчик

Разработка фронтенд- и бэкенд-компонентов для веб-приложений

10 ноября 16 месяцев

Профессия

с нуля

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

Онлайн-курс «HTML и CSS. Профессиональная вёрстка сайтов» — HTML Academy

Онлайн-курс «HTML и CSS. Профессиональная вёрстка сайтов» — HTML Academy

16 января — 20 марта 2023

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.

Запишитесь на консультацию

Оставьте свои контакты, мы свяжемся с вами и ответим на все вопросы.

Телефон *

Эл. почта *

Соглашаюсь на обработку персональных данных и получение рекламных и информационных сообщений в соответствии с «Политикой» и «Пользовательским соглашением».

*Обязательное поле

Записаться на консультацию

Почему курс профессиональный

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

Чтобы добиться такого качества обучения, мы используем профессиональную триаду «критерии-проекты-наставники»:

НаставникиПроверкой ваших проектов на соответствие критериям качества занимаются наставники, которые являются профессиональными разработчиками.

Критерии качестваПрофессиональные критерии качества мы разрабатываем совместно с компаниями и профессиональным сообществом.

Настоящие проектыВ течение обучения вы выполняете настоящие проекты.

Настоящие проекты

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

В чём отличие от тренажёров?

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

Как проходит


обучение на курсе

  • Неделя 1
  • Неделя 9

  • Профессиональный рост

Что вас ждёт на обучении

  • Лайвы

    Прямые эфиры, на которых преподаватели разбирают сложные моменты из теории и практики. Проходят с 19 до 21 по Москве, запись доступна на следующий день.

  • Практика

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

  • Ревью кода

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

Подходит ли вам этот курс

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

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

  • Вы сами регулируете нагрузку в зависимости от тарифа. На продвинутом тарифе понадобится уделять 8 часов в неделю, на базовом – 20 часов в неделю.

  • Сроки итоговой защиты позволяют детально проработать обратную связь от проверяющего наставника и получить отлично выполненный личный проект.

Учим делать правильно

  • Актуальные стандарты качества: не нужно переучиваться после курса.

  • Понимание полного цикла работы верстальщика.

  • Фундаментальные и структурированные знания необходимых технологий.

  • Опыт работы с дедлайнами и планирования работы.

Ориентировочная зарплата выпускника

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

Младший верстальщик

Зарплата: 70 000 ₽

HTML и CSS.
Профессиональная вёрстка сайтов

Фронтенд-разработчик

Зарплата: 150 000 ₽

HTML и CSS.
Адаптивная вёрстка и автоматизацияJavaScript.
Профессиональная разработка веб-интерфейсов

React-разработчик

Зарплата: 150 000 ₽

JavaScript.
Архитектура клиентских приложенийReact.
Разработка сложных клиентских приложений

* Информация о медианных зарплатах получена на основе исследования компании «Хабр Карьера» в первом полугодии 2022 года.

Записаться на курс

Цена повысится через 6 дней.

Наставники — это опытные профессионалы, работающие в индустрии

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

Чтобы отбирать таких специалистов, мы построили уникальную систему привлечения и фильтрации.

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

Процесс отбора наставника

  1. Формальные требования

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

  2. Собеседование

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

  3. Регулярная обратная связь

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

Процесс работы с наставником

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

Что входит в программу курса

Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий в GitHub Desktop и с графическим макетом в редакторе Figma, создадите выразительную и доступную разметку, построите сетки страниц на гридах, поработаете с кастомными свойствами, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать наставник.

Учебные проекты

Во время курса вы будете работать над учебными проектами «Седоной», «Девайсом» и «Глейси».

В течение курса вы успеете разработать и защитить от одного до трёх проектов в зависимости от тарифа.

Отзывы компаний

Мы давно зарекомендовали себя в профессиональном сообществе. Нас и наших выпускников знают не только разработчики, но и крупные компании. Вот несколько отзывов от компаний о наших курсах и выпускниках.

В Авито нет верстальщиков, только фронтенд-разработчики разных уровней. Чтобы попасть к нам на работу младшим разработчиком, человек должен обладать определёнными навыками. Это уверенное владение базовыми технологиями: HTML, CSS и JavaScript, понимание того, как работает браузер, знание, как делать проекты кроссбраузерными, как работает API, DOM и другие важные основы. Кроме этого мы ценим ответственность, умение играть в команде, желание развиваться и инициативность.

Мне, как наставнику на курсах и бывшей студентке, известны стандарты качества Академии и то, как строится работа. Всё максимально приближено к реальным условиям — используется система контроля версий Git, есть разбивка проекта на этапы (своеобразные итерации), обязательное ревью кода наставниками и неумолимый дедлайн. Большое внимание уделяется доступности интерфейсов, а это полезно для всей отрасли.

В целом программа обучения в Академии построена грамотно для старта. Она помогает подготовить универсального бойца, который сможет качественно заниматься разработкой и в студии, и в крупной продуктовой компании. Если человек защитился на 100%, то это показатель, что у него всё в порядке с обучаемостью, мотивированностью и личными качествами, которые понадобятся в будущем на работе. А дальше уже всё зависит от активности и способности доказать свои умения делом.

Яна Крикливая разработчик клиентской части, Авито

Авито Интернет-сервис для размещения объявлений о товарах, услугах, вакансиях и резюме на рынке труда.

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

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

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

Сейчас в команде работает выпускник Академии Павел и я им доволен. Необходимые базовые навыки, понимание семантики, работа с чистым CSS — всё это на хорошем уровне, а что касается JavaScript — он быстро ориентируется, если делал что-то похожее — вспоминает. Он был сразу готов взять и начать работать.

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

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

Сергей Чикирев Wrike Website Team Lead

Wrike Популярный сервис для управления проектами и совместной работы.

Мы в Ostrovok.ru постоянно ищем талантливых ребят: наш продукт быстро развивается и лишние фронтендерские руки (желательно «золотые») нужны всегда. Хорошего специалиста найти не так просто, поэтому мы уже несколько раз обращались к Академии, когда подбирали джуниоров.

Ребята приходили с хорошей базой и горящими глазами, быстро вливались в процессы и команду. Сейчас в Ostrovok.ru работают три выпускника Академии — все на позиции джунов и отлично справляются.

Спасибо Академии за хорошо подготовленных специалистов.

Ostrovok.ru Интернет-сервис по бронированию более 900 000 отелей.

Мы регулярно отправляем своих сотрудников на тренинги, семинары, интенсивы и всячески открыты к образовательным программам, так мы и познакомились с HTML Academy.

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

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

Валерия Шемякина Менеджер по обучению Ozon.

Ozon Крупнейший российский интернет-магазин.

HTML Академия — лучшее, что происходило с ИТ-образованием в России.

Если вы боитесь, что не разберётесь или «программирование — это не для вас», то HTML Академия подойдёт вам идеально. Всегда будет у кого спросить и кто вас поддержит.

Они много работали с сообществом, чтобы понять какие именно знания нужны на работе. Круто насколько всё приближено к реальной разработке.

Андрей Ситник Автор множества проектов с открытым исходным кодом. Создатель PostCSS, Autoprefixer и Logux_io.

К нам на вакансию фронтенд-разработчика пришёл выпускник Академии. Знания, полученные на интенсивах по JavaScript и вёрстке помогают ему решать задачи с минимальными трудозатратами.

В целом, именно обучение на курсах Академии дало нашему сотруднику возможность развиваться как хорошему разработчику и профессионально подходить к решению проблем в работе.

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

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

NORDMOUNT Внедрение, кастомизация и интеграция Salesforce на рынках США и западной Европы.

Программа курса

Обучение Участие в живых лекциях, работа над проектом с наставником.

Раздел 1

Старт

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

  • Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
  • Узнаем, кто такие авторы, кураторы и наставники курса.
  • Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
  • Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
  • Разберём процесс работы над проектом и его защиту.

Статьи

  • Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.

Проекты

  • Выбираем наставника.
  • Настраиваем инструменты разработки, создаём репозитории проектов.
  • Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.

Раздел 2

Разметка

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

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

Демонстрации

Интерактивные демонстрации по разметке учебного проекта.

ТренажёрыСтатьи

  • Тренажёры для знакомства с HTML.
  • Статьи о том, как правильно создавать семантическую HTML-разметку.

Проекты

  • Получаем макеты в Figma.
  • Создаём и размечаем страницы проекта.

Раздел 3

Графика

Экспортируем графику из макета.

  • Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
  • Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
  • Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.

Демонстрации

Интерактивные демонстрации по внедрению графики учебного проекта.

ТренажёрыСтатьи

Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.

Проекты

  • Экспортируем растровую и векторную графику из Figma.
  • Подключаем контентную графику в разметку.

Раздел 4

Базовая стилизация

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

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

Демонстрации

Интерактивные демонстрации по базовой стилизации учебного проекта.

ТренажёрыСтатьи

Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.

Проекты

  • Подключаем шрифты.
  • Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.

Раздел 5

Сетки страниц на флексах

Построим крупные сетки страниц с помощью флексов.

  • Разберёмся в боксовой модели и познакомимся с типами боксов.
  • Научимся анализировать сетки на макетах и определять крупные сетки страниц.
  • Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.

Демонстрации

Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.

ТренажёрыСтатьи

  • Статьи, которые помогут разобраться с особенностями флексов, блочной модели и приёмами построения сеток.
  • Тренажёры для знакомства с блочной моделью документа, флексами и приёмами построения сеток.

Проекты

  • Описываем крупные сетки страниц на флексах.
  • Сравниваем вёрстку с макетом.

Раздел 6

Сетки компонентов на флексах

Создадим мелкие сетки компонентов страниц при помощи флексов.

  • Разберём особенности мелких сеток.
  • Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
  • Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.

Демонстрации

Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

ТренажёрыСтатьи

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

Проекты

  • Описываем мелкие сетки компонентов страниц на флексах.
  • Сравниваем вёрстку с макетом.

Раздел 7

Сетки компонентов на гридах

Создадим мелкие сетки компонентов страниц при помощи гридов.

  • Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
  • Разберём типовые ситуации, когда гриды подходят лучше флексов.
  • Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.

Демонстрации

Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

ТренажёрыСтатьи

  • Тренажёры для знакомства с гридами.
  • Статьи, которые помогут разобраться с особенностями гридов.

Проекты

  • Описываем мелкие сетки компонентов страниц на гридах.
  • Сравниваем вёрстку с макетом.

Раздел 8

Декоративные элементы

Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.

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

Демонстрации

Интерактивные демонстрации со стилизацией декоративных и контентных элементов учебного проекта.

ТренажёрыСтатьи

Тренажёры для закрепления навыков создания декоративных элементов.

Проекты

  • Добавляем мелкие декоративные и иконочные графические элементы.
  • Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.

Раздел 9

Попапы, слайдеры, формы

Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.

  • Научимся оформлять нестандартные элементы форм.
  • Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
  • Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.

Демонстрации

Интерактивные демонстрации с вёрсткой всплывающих элементов, стилизацией форм и состояний интерактивных элементов учебного проекта.

Проекты

  • Добавляем разметку и стилизацию всплывающих элементов и слайдеров.
  • Стилизуем формы и элементы форм.
  • Добавляем состояния интерактивных элементов.

Защита проекта Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.

Раздел 10

Подготовка к защите

Проверим проект на соответствие критериям качества и подготовим его к публикации.

  • Доработаем доступность и интерактивность интерфейса.
  • Протестируем контент на изменение количества и размеров элементов, текста и графики.
  • Проверим проект на соответствие макету и стайлгайду.

Демонстрации

Интерактивные демонстрации с тестированием и корректировками учебного проекта.

Проекты

  • Тестируем вёрстку в соответствии с чеклистом приёмки проекта.
  • Вносим корректировки в соответствии с критериями.
  • Добиваемся полного совпадения вёрстки с макетом и стайлгайдом.

Защита проекта

Проверка проекта проверяющим наставником по критериям качества, его улучшение и защита.

Раздел 11

Финал

Поговорим о том, как прошёл курс и куда вам двигаться дальше.

Результаты курса.

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

Статьи

  • Статьи про создание портфолио на GitHub, поиск работы и про развитие в профессии.

Записаться на курс

Цена повысится через 6 дней.

Отзывы выпускников

Отчёт о 34 потоке читайте в нашем блоге.

16 января — 20 марта 2023

Зарегистрироваться и оплатить


курс «HTML и CSS. Профессиональная вёрстка сайтов»

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

— Длительность 2 месяца.
— Нагрузка 20 часов в неделю.
— 1 выполненный проект.
— Работа с наставником в группе (8-10 человек).

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

— Длительность 5,5 месяцев.
— Нагрузка 8 часов в неделю.
— 3 выполненных проекта.
— Итоговое грейдирование.
— Нет жёстких регламентов и дедлайнов — учитесь без стресса.
— Личный наставник и работа в группе.

16 января — 20 марта 2023

Осталось 80 мест

Осталось 77 мест

$359 до 11 ноября$359 $319

$89 до 11 ноября$89 $79 в мес.яц

$419

$839 до 11 ноября$839 $749

$209 до 11 ноября$209 $189 в мес.яц

$899

  • Оплата целиком
  • Оплата в рассрочку
  • Корпоративным клиентам

Ваше имя *

Ваш телефон *

Ваша электронная почта *

Нажимая «Оплатить», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями предоставления услуг».

Промокод

Заполните, пожалуйста, ваши имя и электронную почту для регистрации.

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

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

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

Если у вас возникли проблемы при оплате, пожалуйста, напишите нам

Несколько правил для корпоративных клиентов:

  • Мы работаем по договору оферты.
  • Стоимость участия для юридических лиц зафиксирована — полный прайс-лист.
  • Услуги не облагаются НДС на основании ст. 145. 1. Налогового кодекса Российской Федерации.

Чтобы получить счёт на оплату, отправьте на почту:

1. Заполненное и подписанное заявление об акцепте оферты, которое вы можете скачать здесь: шаблон заявления.

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

2. Реквизиты вашей организации.

3. Ссылку на профиль вашего сотрудника на сайте Академии, который будет проходить обучение.

4. Доверенность, если заявление подписано лицом, действующим по доверенности

  • У нас есть образовательная лицензия
  • Выдаём электронные сертификаты
  • Можно сделать налоговый вычет

Телефон *

Электронная почта

Соглашаюсь на обработку персональных данных и получение рекламных и информационных сообщений в соответствии с «Политикой конфиденциальности» и «Пользовательским соглашением».

Запишитесь на консультацию

Мы любим отвечать на вопросы. Поэтому ждём ваших контактов, чтобы поскорее на всё ответить.

Телефон *

Эл. почта *

Соглашаюсь на обработку персональных данных и получение рекламных и информационных сообщений в соответствии с «Политикой» и «Пользовательским соглашением».


*Обязательное поле

или

Эл. почта

Пароль

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Вход

Банковской картойНаличными через терминалС телефонаЭлектронными деньгамиИнтернет-банкинг

Оплатить банковской картой

CloudPaymentsЮKassaРобокасса

Тут будет отзыв

Создание базового макета веб-сайта с помощью HTML CSS

Создание базового макета веб-сайта с помощью HTML CSS

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

Мы собираемся использовать HTML-тег DIV, потому что это будет дизайн на основе DIV, а мы используем только HTML и CSS. Проекты на основе DIV намного эффективнее и приводят к более чистому коду по сравнению с проектами на основе таблиц. В табличном дизайне мы используем Тег

и его столбцы / строки для построения макета, который вообще не считается правильным способом.

Приступим

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

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

ГОЛОВНАЯ Секция 



<голова>
<мета-кодировка="utf-8">
Демонстрационный макет

В этом разделе мы дали этой странице заголовок «Демонстрационный макет» и связали файл таблицы стилей style.css в каталоге css. Если вы не знаете этих основ, вы можете узнать больше об этом здесь.

Кузовная часть 

<тело>
<дел>
<дел>
  
<дел>

    
    <дел>
    

    <дел>
    
<дел>

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

CSS

Перед оформлением каждой секции вам необходимо знать размеры, такие как ширина и высота каждой секции. Эти измерения, очевидно, будут отличаться от проекта к проекту. Я использую инструмент «Линейка» в Adobe Photoshop, чтобы получить измерения, щелкая и перетаскивая из одной точки в другую. Размеры этой базовой компоновки можно увидеть на рисунке выше. Вы также можете скачать прилагаемый пустой PSD-дизайн.

.сворачивать {
ширина: 980 пикселей;
поле:0 авто;
}

Как видно из названия «.wrap», это называется оберткой DIV, которая содержит все остальные DIV. Очевидно, вы можете присвоить любое другое имя, такое как обертка, контейнер или main_div и т. д., но я предпочитаю называть его .wrap выглядит чистым и коротким.

Мы задали ширину 980 пикселей и добавили верхнее/нижнее поле как 0 и правое/левое поле как auto . Это поле auto с обеих сторон делает наш веб-сайт выровненным по центру по горизонтали.

тело { поле: 0; заполнение: 0; }

Просто сброс полей и отступов по умолчанию для тела.

.заголовок {
высота: 140 пикселей;
нижняя граница: 15px;
цвет фона: # 0d7963;
}

Я надеюсь, что это довольно просто и объясняется именами свойств CSS, которым мы присвоили высоту 140 пикселей, нижнее поле 15 пикселей и цвет фона «#0d7963», используя цветовой код. Я использовал инструмент выбора цвета, чтобы получить цветовой код в Adobe Photoshop.

.содержание {
ширина: 690 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
поплавок: справа;
}
.сайдбар {
ширина: 275 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
плыть налево;
}

Мы добавили свойство float , чтобы сделать этот DIV плавающим. Таким образом, мы можем поставить эти DIV рядом друг с другом. Без свойства float DIV занимал бы всю ширину страницы, а новый DIV «.sidebar» начинался бы под DIV «.content». Вы можете поменять местами значения float , чтобы изменить положение боковой панели на левую или правую сторону.

.Чисто {
ясно: оба;
}

Как вы заметили, мы использовали чистый DIV, который, вероятно, будет таким же, как и во всех других проектах, без текста или содержимого. Цель этого DIV — очистить пространство для плавающих элементов выше, иначе DIV нижнего колонтитула проигнорирует плавающие DIV выше и привяжется к DIV заголовка. Нажмите здесь, чтобы узнать больше о свойстве clear.

.нижний колонтитул {
высота: 70 пикселей;
верхнее поле: 15 пикселей;
цвет фона: # 0d7963;
}

Довольно просто, как заголовок DIV.

Полный код HTML и CSS

Вот полный код для «Создание базового макета веб-сайта с помощью HTML CSS». Вы также можете загрузить дизайн PSD и файлы HTML / CSS с боковой панели выше.

HTML 



<голова>
<мета-кодировка="utf-8">
Демонстрационный макет


<тело>
<дел>
<дел>
  
<дел>

    
    <дел>
    

    <дел>
    
<дел>

КСС 

тело { поле: 0; заполнение: 0; }
. сворачивать {
ширина: 980 пикселей;
поле:0 авто;
}
.заголовок {
высота: 140 пикселей;
нижняя граница: 15px;
цвет фона: # 0d7963;
}
.содержание {
ширина: 690 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
поплавок: справа;
}
.сайдбар {
ширина: 275 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
плыть налево;
}
.нижний колонтитул {
высота: 70 пикселей;
верхнее поле: 15 пикселей;
цвет фона: # 0d7963;
}
.Чисто {
ясно: оба;
}

Этот «Создание базового макета веб-сайта с помощью HTML CSS» — базовый туториал для начинающих. Вы можете посмотреть больше руководств по HTML здесь. Скоро появятся более продвинутые руководства.

Html Css Дизайн веб-сайтов, темы, шаблоны и загружаемые графические элементы на Dribbble

  1. Посмотреть агентство по разработке программного обеспечения

    агентство по разработке программного обеспечения

  2. Посмотреть новые HTML-шаблоны Plasma 🥳

    Новые HTML-шаблоны Plasma 🥳

  3. Просмотр войны.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    © 2019 Штирлиц Сеть печатных салонов в Перми

    Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.

    Карта сайта