Можете помочь источником для изучения?

Question

[Станислав Дементьев]

Всем здравствуйте!
Начал заниматься веб-дизайном, и сразу стало понятно, что самому нужно уметь немного верстать и понимать как всё работает.
Вот Я и столкнулся с такими трудностями:

1. Смотрю сайты, вижу обалденные ховеры, небольшие анимации при появлении секции и тп.
Есть ли какой-нибудь сайт с большой базой ховеров, чтобы продумывая сайт, Я мог посмотреть туда и продумать анимацию, понимать как она будет сделана и как будет работать? И что должно приходить верстальщику с макетом, чтобы он понимал, чо за анимация должна быть? просто ТЗ?

2 Адаптивные сайты.
2 блока вертикальных в одной строке. Как это делается в Bootstrap и им ли это делается? Типа строка, там сначала 2 блока, а потом правее ещё 1 высотой с два предыдущих.

3 Media
Совершенно не понимаю как работает и прописывается (если я правильно понял) резиновая вёрстка. Вроде как с помощью @media Но где про это почитать?

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

Большое спасибо за ответы на такие туповатые вопросы.

Answer 1

[Flur]

Давайте пройдемся по пунктам :
1) Их много. Достаточно популярный codepen

2) Что касается адаптива.
Ничего сложного в бутстрапе нет. Особенно в сеточной системе (grid system). Документация по все классам и компонентам лежит на официальном сайте
Если вы любитель смотреть видосики, то вот рекомендую этого -> чувака

3) С медиа-запросами тоже всё довольно просто.
Смысл в том что вы просто переназначаете стили для определенных блоков при определенных размерах экрана
О медиа-запросах (и не только) понятным языком объясняет Sorax

HTML+CSS реально изучить за неделю (максимум за 2).

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

Comments

[Станислав Дементьев]

вот уже за это прям огромное спасибо, вот как раз то про что и спрашивал

[Иван]

Насчет "выучить" я не согласен,можно выучить,но понять как одно или другое работает,может потребоваться время,да и вообще чтобы влиться в верстку,нужно немного больше времени,чем одна неделя. (ИМХО и да,сужу по себе) :)

Answer 2

[Ivan Bogachev]

1. Анимации. Все "стандартные" анимации вы можете посмотреть тут. В этом случае достаточно сказать верстальщику название анимации и он будет знать, что делать (названия универсальные, они не привязаны к этой библиотеке). Если анимация не стандартная - то это другой вопрос. Продвинутые дизайнеры рендерят это дело в Adobe After Effects или его аналогах, но в общем случае достаточно покадровой схемы, нарисованной ручкой на бумажке. Именно покадровая схема, по написанному тексту обычно ничего не понятно.

2. Адаптивность. Не зацикливайтесь на bootstrap. Если вам нужна просто сетка - возьмите к примеру flexboxgrid (личный опыт показывает, что люди, которые начинают верстать сразу на bootstrap, потом без него вообще ничего сделать не могут). Но ваша задача, как дизайнера, скорее понимать, как что должно выглядеть на разных размерах экрана, и уметь это нарисовать (далеко не факт, что ваших знаний будет достаточно для того, чтобы это кроссбраузерно сверстать).

А по поводу различных странных вещей и того, что обычно вызывает вопросы у начинающих - советую посетить мою страничку на CodePen. Большая часть демок там являются иллюстрациями к ответам на тостере, в их описаниях есть ссылки на вопросы.

Comments

[Станислав Дементьев]

спасибо за ответ, тоже очень полезно.