Уроки верстки сайта: Уроки вёрстки с нуля? — Хабр Q&A

Уроки по теме «вёрстка» для начинающих

В каталоге хекслета найдено 61 урок по теме «вёрстка». Уроки по теме «вёрстка» есть в курсах: CSS: Позиционирование элементов, SASS: Программирование, CSS: Адаптивность сайта, HTML: Препроцессор Pug, Основы HTML, CSS и веб-дизайна, CSS: Вёрстка на Grid, SASS: Основы работы, CSS: Transform (трансформация объектов).

Урок «Знакомство с HTML»

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Элементы, теги и атрибуты»

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Правило близости»

В курсе «Основы HTML, CSS и веб-дизайна»

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

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

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Размещение на GitHub Pages»

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Chrome DevTools»

В курсе «Основы HTML, CSS и веб-дизайна»

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

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

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «div, span и display»

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Структура страницы»

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Каскад»

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Основы CSS»

В курсе «Основы HTML, CSS и веб-дизайна»

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

Урок «Фиксированное позиционирование»

В курсе «CSS: Позиционирование элементов»

Научиться позиционировать элемент относительно самого браузера

Урок «Введение»

В курсе «CSS: Позиционирование элементов»

Узнать о курсе

Урок «Относительное позиционирование»

В курсе «CSS: Позиционирование элементов»

Научиться использовать относительное позиционирование и узнать его особенности

Урок «Относительное и абсолютное позиционирование»

В курсе «CSS: Позиционирование элементов»

Узнать о связи абсолютного и относительного позиционирования. Научиться абсолютно позиционировать элемент относительно другого блока

Урок «Абсолютное позиционирование»

В курсе «CSS: Позиционирование элементов»

Узнать о том, как выдернуть элемент из нормального потока

Урок «Поток документа»

В курсе «CSS: Позиционирование элементов»

Узнать о том, как браузеры отображают HTML, что такое нормальный поток документа

Урок «Наложение элементов»

В курсе «CSS: Позиционирование элементов»

Узнать о наложении элементов, связи позиционирования и наложения

Урок «Плавающие элементы»

В курсе «CSS: Позиционирование элементов»

Узнать о плавающих элементах и их особенностях

Урок «Гибкие элементы»

В курсе «CSS: Адаптивность сайта»

Познакомится с вёрсткой с использованием процентов.

Урок «Медиазапросы»

В курсе «CSS: Адаптивность сайта»

Познакомиться с одним из самых мощных инструментов для создания адаптивных сайтов — Media Queries

Урок «Viewport»

В курсе «CSS: Адаптивность сайта»

Узнать о мета-теге viewport и как он помогает в адаптивности.

Урок «Проверка адаптивности сайта»

В курсе «CSS: Адаптивность сайта»

Узнать о том, как проверить ваш сайт на различных устройствах.

Урок «Flex»

В курсе «CSS: Адаптивность сайта»

Узнать о возможностях Flex при создании адаптивных макетов.

Урок «Медиазапросы и другие устройства»

В курсе «CSS: Адаптивность сайта»

Узнать о том, для каких устройств возможно применять свои стили.

Урок «Введение»

В курсе «CSS: Адаптивность сайта»

Узнать о курсе, посвящённом адаптивной вёрстке

Нашли 8 курсов по тегу «вёрстка»

CSS: Позиционирование элементов

позиционирование

HTML-элементы

вёрстка

9 часов

Посмотреть

SASS: Программирование

вёрстка

Препроцессоры CSS

7 часов

Посмотреть

CSS: Адаптивность сайта

вёрстка

CSS адаптивность

CSS Flex

Viewport

7 часов

Посмотреть

HTML: Препроцессор Pug

Шаблонизатор

вёрстка

9 часов

Посмотреть

Основы HTML, CSS и веб-дизайна

вёрстка

Веб-дизайн

GitHub Pages

Developer Tools

5 часов

Посмотреть

CSS: Вёрстка на Grid

вёрстка

CSS Grid

6 часов

Посмотреть

SASS: Основы работы

Препроцессоры CSS

Миксины

4 часа

Посмотреть

CSS: Transform (трансформация объектов)

CSS Transforms

CSS перспектива

7 часов

Посмотреть

Вам могут быть интересны темы: CSS перспектива CSS Grid Веб-дизайн Viewport Шаблонизатор GitHub Pages CSS3 Миксины Developer Tools позиционирование Трёхмерные объекты CSS адаптивность HTML-элементы SCSS Расширение CSS Гибкие макеты Анимации CSS Transforms Функции SASS HTML5 HTML Препроцессоры CSS Media Queries Pug Циклы SASS SASS Сетки CSS Flex

HTML CSS верстка сайта Портфолио — ВебКадеми

Главная » HTML, CSS

HTML, CSS

На чтение 2 мин Просмотров 1. 5к. Опубликовано 16.12.2020

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

Этот курс подойдет для тех кто хочет научиться создавать сайты и хочет сверстать свой первый сайт.

Файлы с макетом для верстки

Чтобы получить файлы макета и готовой верстки, необходимо подписаться на курс: http://webcademy.ru/htmlsite/

1. Настройка редактора, знакомство с версткой. Уроки по верстке сайта Портфолио HTML CSS

В этом уроке познакомимся с основами HTML и CSS, которые пригодятся нам для верстки данного макета.

2. Верстка Шапки сайта. Уроки по верстке сайта Портфолио HTML CSS

Верстаем HTML шапку сайта. Делаем фоновое изображение через CSS на весь блок.

3. Верстка секции Портфолио. Уроки по верстке сайта Портфолио HTML CSS

Верстаем секцию Портфолио с работами на сайте. Делаем заголовок секции и размещаем карточки с работами в ряд.

4.

Верстка Подвала. Уроки по верстке сайта Портфолио HTML CSS

Верстаем подвал сайта. Размещаем копирайт и ссылки на социальные сети.

5. Внутренняя страница для сайта. Уроки по верстке сайта Портфолио HTML CSS

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

6. Мобильная адаптация сайта. Уроки по верстке сайта Портфолио HTML CSS

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

7. Видео обложка для сайта Плавная прокрутка. Уроки по верстке сайта Портфолио HTML CSS

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

Оцените автора

WebD2: уроки для студентов

WebD2: уроки для студентов

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

Модуль 1: Базовая оценка сайта и рубрика Созидание

• Урок 1: Исследование возможностей
• Урок 2: Разработка инструмента оценки веб-сайта

Модуль 2: Теория цвета

• Урок 1: Теория цвета в веб-дизайне

Модуль 3. Веб-стандарты и доступный дизайн

• Урок 1. Веб-стандарты
• Урок 2: Как люди с ограниченными возможностями получают доступ в Интернет

Модуль 4: Планирование веб-сайта

• Урок 1: Организация веб-сайта

Модуль 1: Предварительное кодирование (Модуль 1)

• Урок 1: Предварительное кодирование (Урок 1)

Модуль 2: базовая разметка HTML

• Урок 1: Синтаксис HTML
• Урок 2: Основные теги
• Урок 3: Общие теги

Модуль 3: HTML-списки

• Урок 1: Списки
• Урок 2: Создание меню навигации

Модуль 4: Создание ссылок

• Урок 1: Создание ссылок на внешние интернет-сайты
• Урок 2: Ссылки на страницы вашего веб-сайта
• Урок 3: Специальные типы ссылок

Модуль 5: Создание таблицы данных (Модуль 5)

• Урок 1: Создание таблицы данных (Урок 1)

Модуль 6: HTML-видео

• Урок 1: Добавление видео на веб-страницы
• Урок 2: Добавление субтитров к видео

Модуль 7: Отражение модуля 2

Модуль 1: Введение в каскадные таблицы стилей

• Урок 1: Анатомия стиля
• Урок 2: Применение стилей
• Урок 3: Связывание с внешней таблицей стилей

Модуль 2: Цвет в CSS

• Урок 1: Понимание цвета в CSS
• Урок 2: Применение цвета в CSS

Модуль 3: Типографика в CSS

• Урок 1: Типографика в CSS
• Урок 2: Применение типографики в CSS

Модуль 4.

Блочная модель в CSS

• Урок 1. Понимание блочной модели в CSS
• Урок 2: Применение блочной модели в CSS

Модуль 5. Роль идентификатора и класса в CSS

• Урок 1. Понимание идентификатора и класса в CSS
• Урок 2. Применение идентификатора и класса в CSS
• Урок 3. Селекторы псевдоклассов в CSS

Модуль 6: Методы макета страницы

• Урок 1: Макет страницы с помощью CSS
• Урок 2. Стилизация меню навигации с помощью CSS

Модуль 7: Часть 3 Размышления

Модуль 1: Введение в веб-графику (Модуль 1)

• Урок 1: Введение в веб-графику (Урок 1)
• Урок 2: Закон об авторском праве и графика в Интернете

Модуль 2: Создание веб-фотоальбома

• Урок 1: Общие сведения о веб-графике
• Урок 2: Получение изображений для Интернета Графика
• Урок 3: Обрезка и изменение размера
• Урок 4. Добавление изображений на веб-страницу

Модуль 3: Создание кнопки

• Урок 1: Основные формы и цвета
• Урок 2: Работа со слоями
• Урок 3: Оптимизация изображений GIF
• Урок 4: Создание фавикона

Модуль 4: Создание баннера веб-страницы

• Урок 1: Инструменты выбора
• Урок 2: Эффекты слоя и смешивание
• Урок 3: Фоновые изображения

Модуль 5: Раздел 4 Размышления

Модуль 1: Обзор сценариев в Интернете

• Урок 1. Сценарии на стороне клиента и на стороне сервера

Модуль 2: JavaScript

• Урок 1: Использование JavaScript для отображения предупреждений
• Урок 2: Ошибки JavaScript и отладка
• Урок 3. Создание часов JavaScript, часть 1
• Урок 4. Создание часов JavaScript, часть 2
• Урок 5. Использование JavaScript для скрытия и отображения контента
• Урок 6. Создание пользовательского видеоплеера

Модуль 3: Раздел 5 Размышления

Модуль 1: Проверка веб-сайтов

• Урок 1: Проверка HTML
• Урок 2. Проверка CSS
• Урок 3. Проверка доступности

Модуль 2. Тестирование удобства использования

• Урок 1. Проведение теста удобства использования

Модуль 3: Часть 6 Размышления

Модуль 1: Программное обеспечение для веб-разработки

• Урок 1: Основные функции программного обеспечения для веб-разработки
• Урок 2: Содержание, структура, представление и поведение
• Урок 3: Функции управления сайтом

Модуль 2. Публикация в Интернете

• Урок 1. Услуги хостинга веб-сайтов
• Урок 2: Инструменты для публикации веб-сайтов

Модуль 3: Раздел 7 Размышления

Модуль 1: Веб-сайт клиента (Модуль 1)

• Урок 1: Планирование веб-сайта клиента
• Урок 2: Создание веб-сайта клиента
• Урок 3: Контроль качества веб-сайта клиента

Модуль 2: Модуль 8 «Отражение»

Copyright © 2005-2022 Вашингтонский университет. Разрешается использовать эти материалы полностью или частично в образовательных, некоммерческих целях при условии ссылки на источник. Этот продукт был создан при поддержке Национального института исследований в области инвалидности и реабилитации Министерства образования США (грант № h233D010306) и поддерживается при поддержке Национального научного фонда (грант № CNS-0540615). Содержимое не обязательно отражает политику федерального правительства США, и вы не должны предполагать их одобрение.

Планы уроков веб-дизайна — SchoolJournalism.org

ASNE Уроки веб-дизайна

День первый
Урок веб-дизайна — день первый
Веб-дизайн PowerPoint — день первый Two
Планировщик веб-сайтов

Другие уроки

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

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

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

Руководства и учебные пособия по дизайну

• Story Design Step-by-Step, слайд-шоу, составленное бывшим редактором, дизайнером и обозревателем, который теперь консультирует по дизайну в печати и в Интернете.
• 5 советов по дизайну газет, которые нельзя сломать, слайд-шоу, составленное бывшим редактором, дизайнером и обозревателем, который теперь консультирует по вопросам дизайна для печати и Интернета.
• Галерея графического дизайна с примерами оформления журналов с 1930 по 1969 год
• Цвет, контраст и размер в новостном дизайне от Poynter
• Руководство по основам HTML (для онлайн-дизайна)

Уроки

• Проверьте это в Интернете
  Урок, который поможет вашей студенческой медиа-программе выйти в онлайн.
• Введение в дизайн газет
  Изучение того, как выглядит хороший дизайн — и как он выглядел раньше — в ходе подготовки учащихся к изменению дизайна собственного издания.
• Макет школьной работы
  Модульная компоновка является стандартом для большинства публикаций. На этом уроке учащимся предлагается определить часть модульного макета страницы, а затем создать свою собственную в группах, сравнивая и сопоставляя с известным стандартом.
• Окружность в рамке
  Обманчиво простое упражнение: поместить окружность в трехмерную рамку в программе компоновки. Однако выполнение может быть намного сложнее.
• Фотожурналистика и создание макета
  Этот модуль исследует фотографию и дизайн, задавая учащимся вопросы, почему фотографии важны, из чего состоит хороший фоторепортаж и как к нему подходить, а также рассматривают примеры дизайна и фотографий, отмеченных наградами. Имеет компоненты одаренного и специального образования.
• Новый дизайн колеса
  Хороший план, чтобы заложить основу для изменения дизайна вашей школьной газеты. От сравнения хороших публикаций с вашими до получения комментариев и хороших элементов дизайна, которые можно использовать в дальнейшем.
• Изменение дизайна школьной газеты
  Обширный план по изменению дизайна школьной газеты, которую можно использовать в конце года в свободное время и в качестве итоговой оценки за экзамен. Также отлично подходит для генерации новых идей для бумаги.