Уроки верстки сайта: Верстка сайта — создание сайтов с нуля, курс обучения верстки на itProger

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

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

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

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

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

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

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

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

Урок «Chrome DevTools»

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

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

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

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

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

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

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

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

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

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

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

Урок «div, span и display»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Урок «Viewport»

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

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

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

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

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

Урок «Flex»

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

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

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

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

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

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

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

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

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

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

вёрстка

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

7 часов

Посмотреть

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

вёрстка

Веб-дизайн

GitHub Pages

Developer Tools

5 часов

Посмотреть

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

вёрстка

CSS Grid

6 часов

Посмотреть

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

Viewport

Гибкие макеты

Media Queries

7 часов

Посмотреть

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

Миксины

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

9 часов

Посмотреть

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

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

HTML-элементы

вёрстка

9 часов

Посмотреть

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

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

Миксины

4 часа

Посмотреть

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

CSS Transforms

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

7 часов

Посмотреть

Вам могут быть интересны темы: CSS перспектива CSS Grid Веб-дизайн Viewport Шаблонизатор GitHub Pages CSS3 Миксины Developer Tools позиционирование Трёхмерные объекты HTML-элементы CSS адаптивность SCSS Расширение CSS Гибкие макеты Анимации CSS Transforms Функции SASS HTML HTML5 Препроцессоры 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

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

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

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

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

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

Другие уроки

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

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

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

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

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

Уроки

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

Учебное пособие по дизайну веб-сайта: Wellknown.as Case

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

Итак, в этом уроке я немного покажу вам, как я создал его с помощью Fireworks. Конечно, вы можете сделать то же самое в Photoshop, команды немного изменятся, но процесс практически не изменится.

Справочные материалы по дизайну

Шаг 1

Первое, что нужно сделать, это, конечно, иметь в виду концепцию того, что вы хотите сделать. В моем случае ребята из Wellknow.as рассказали мне, что именно они хотели от макета. Также я использовал CSS Framework и шаблон Fireworks. Вы можете скачать его по адресу http://960.gs/

Шаг 2

С помощью Rectangle Tool (U) создайте новый прямоугольник с размером документа. Для Цвет используйте Solid и #191D22 . Затем на Панели свойств щелкните значок Добавить (+) и выберите Добавить шум . Используйте 1 для суммы.

Шаг 3

Инструментом «Прямоугольник» (U) создайте еще один прямоугольник, но сделайте его полосой, начиная с 200 пикселей по оси Y. Для цвета используйте #1c202a.

Шаг 4

Нажмите «Добавить» и в « Тень и свечение» > «Внутренняя тень 9».0023 . Используйте 0 для расстояния, 40% для непрозрачности, 1 для размытия и 270º для угла.

Шаг 5

Нажмите еще раз на значок «Добавить» и выберите Тень и свечение>Тень . Используйте 0 для Distance, 65% Opacity, 4 для Blur . Угол не будет иметь никакого значения, потому что Расстояние равно 0.

Шаг 6

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

Шаг 7

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

Шаг 8

Дублируйте слой и перейдите к Modify>Transform>Flip Vertical . Затем измените непрозрачность на 50% и перейдите в Modify>Mask>Reveal All. С помощью Gradient Tool (G) выберите черно-белый пресет и примените его к маске слоя. Что белое будет видно, а что черное прозрачно. Итак, создаем знаменитый эффект мокрого пола.

Шаг 9

Добавьте новый прямоугольник с помощью инструмента Rectangle Tool и залейте его градиентом, используя белый цвет для обоих цветов. Просто измените непрозрачность: одна будет 100% (1), а другая 0% (2) . Используйте Gradient Tool (G) , чтобы применить градиент под углом 90º.

Шаг 10

Создать световой эффект было очень просто. С помощью Ellipse Tool (U) создайте эллипс, затем используйте белый цвет для цвета и измените Edge to Feather и 100 для значения (1) . После этого просто измените режим наложения на Overlay (2).

Шаг 11

Теперь продублируйте, чтобы усилить свет. Также добавьте различные эллипсы, чтобы сделать световой эффект более реалистичным. Еще одна вещь, которая очень важна, это игра с непрозрачностью. Используйте 50-60% для новых эллипсов.

Шаг 11

Для слогана я использовал Arial 35px для шрифта, потому что Arial — это шрифт iPhone, и градиент от светло-серого к белому. Также я добавил тень, используя 1px для Distance, 90% для Opacity , 1 для Blur и 90º для угла.

Шаг 12

С помощью инструмента Round Rectangle Tool (U) создайте прямоугольник, залейте его серым цветом и измените непрозрачность на 80% (1) . Инструментом «Прямоугольник» (U) создайте еще один прямоугольник, но под серым. Также уменьшите его (2). Снова с помощью инструмента Round Rectangle Tool (U) создайте еще один элемент (3). Затем выберите 2 круглых прямоугольника и перейдите к Modify>Combine Path>Punch . Выделите все элементы и сгруппируйте их. После этого добавьте шум, как в первых шагах.

Шаг 13

Инструментом Line Tool (N) создайте линию, затем перейдите в Modify>Mask>Reveal All . Выберите инструмент «Градиент» и черно-белый пресет с овалом для типа и закрасьте маску слоя. Таким образом, края будут бледнеть.

Шаг 14

С помощью Ellipse Tool (U) добавьте эллипс черного цвета и измените Edge на Feather и используйте 60 для количества. Затем с помощью маски скройте часть под линией. Сделать это очень просто, создайте прямоугольник с областью, которую вы хотите показать, и выберите Edit>Cut . Затем выберите эллипс и перейдите к Modify>Mask>Paste as Mask.

Шаг 15

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

Шаг 16

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