HTML Academy

Сегодня и завтра скидка 70% на проект «Магазин косметики Maroon».

Проект подойдёт, чтобы отточить навыки и пополнить своё портфолио.

В комплект проекта вы найдёте шаги по вёрстке макета, а также список ссылок на полезные материалы. Макет создан в программе Figma и представляет собой три варианта одной страницы с примером отображения на разных разрешениях экрана.

Успейте купить

На этой неделе снова предлагаем вам попрактиковаться.
 
Подготовили макет, чтобы вы могли отточить навык работы с графикой.
  
Макет простой, подходит для самых упорных начинающих. Если что-то забылось, можно обновить знания на наших тренажёрах — https://tml.io/nlh94.
 
А чтобы практиковаться было интереснее, среди тех, кто пришлёт ссылку на гитхаб со свёрстанным макетом, разыграем любой навык в полной комплектации.
 
Победителя определим с помощью рандомайзера в понедельник.
  
Правила ещё раз:
— сверстайте макет,
— залейте его на Гитхаб,
— оставьте ссылку на готовый проект в комментариях под этим постом до 19.04,
— ждите розыгрыша в понедельник.

Приз — навык на выбор в полной комплектации.
 
Ссылка на сам макет — https://tml.io/7bfh6

Тренажёры, которые могут помочь — https://tml.io/8x0s1

Как работать с Фигмой — https://tml.io/ewny2

Как залить проект на Гитхаб — https://tml.io/56o93

Учимся определять тип изображения в карточках 👉

Разберёмся, что такое контентное изображение, что такое декоративное и как их отличить друг от друга. От типа изображения зависит то, как оно будет добавлено на страницу.

⚡️ Контентное изображение
Слово контент происходит от английского слова content — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке . Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.

⚡️ Декоративное изображение
Из названия понятно, что этот тип изображений используется исключительно для оформления. Такие изображения не несут для пользователя полезной информации. Декоративные изображения следует реализовывать с помощью CSS.

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

Давайте вместе рассмотрим различные ситуации на примерах в карточках 👉

Подборка сайтов с наборами svg-иконок.

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

А чтобы было легче, мы собрали сайты, на которых можно найти готовые наборы иконок в формате svg

1. Behance — https://tml.io/d36oj
На Behance можно найти не только вдохновение, но и бесплатные шрифты и иконки. Это не так удобно, как хотелось бы, зато можно найти что-то уникальное.

2. Dribble — https://tml.io/rl99l
Dribble ещё один дизайнерский ресурс, на котором можно искать иконки так же, как и на Behance.

3. Iconfinder — https://tml.io/99sq3
Сам сервис сравнивает себя с гуглом для иконок, что похоже на правду. На бесплатном тарифе вам открыт доступ к 319 205 иконкам.

4. Good stuff no nonsense — https://tml.io/ai66x
Можно скачать только 5 наборов бесплатных иконок, но качественных. Иконки имитируют рукописные, если вам понравится стиль, вы сможете нажать кнопку See All и перейти к выбору платных наборов.

5. Ikonate — https://tml.io/utdi1
Конструктор, который содержит более 200 иконок. Можно поменять размер, толщину линий, стиль и цвет — сделать дизайнерский контент, наиболее подходящий для вашего проекта.

6. Pixelsmarket — https://tml.io/s3h8m
Сайт-агрегатор, который собирает ссылки на менее известные сайты, где можно найти бесплатные иконки хорошего качества.

7. Streamlineicons — https://tml.io/jbof2
Большая коллекция иконок. Позволяет бесплатно скачать 100 svg-иконок в трёх вариантах начертаний.

8. Endless icons — https://tml.io/4j8g9
Простые и приятные иконки, а главное — бесплатные. Можно скачать в svg и png.


⚡️ Сохраняйте подборку в закладки, чтобы не потерять