devstudent

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

квадратную скобку потеряли. И зачем писать input[id=tovarname] если можно #tovarname

Для поменялось его направление, исползуите transform

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

https://psdfreebies.com/ ,
на Pinterest ищешь free PSD template
Удачи

Эээ, а зачем?

используете media queries и больше никакого колдовства, разберетесь с медиа выражениями, можно спокойно использовать Bootstrap либо любой фреймворк, но все же лучшая практика это медиа выражения

Почему именно так? Вы хотите сделать галлерею?
Зачем такой велосипед изобретать, когда есть fancybox.net ?

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

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

Писать проект не на чистом листе, а натягивать на какой-то грамотный фреймворк, играя по его правилам. Это поможет освоить и понять некоторые паттерны, принципы SOLID / GRASP, которые вам уже порекомендовали, и избежать совсем неразборчивой каши в архитектуре.

Давайте понятные названия методам/функциям/классам. Избегайте длинных кусков кода – бейте на меньшие. Многие «правильные» практики сами встанут на место, если начнёте работать над проектом не в одно лицо, а с кем-то.

Делите сложность на уровни абстракции. Самый верхний, как в общем функционирует ваше приложение, без деталей, всего несколько компнентов – например, веб-клиент, backend сервер и третий сервис. Эти 1-2-3 несложно запомнить/вспомнить ) Далее, как работает backend – с чем взаимодействует (БД, Redis). И т.д. вглубь, в детали.

Подчинённый перед лицом начальствующим должен иметь вид лихой и придурковатый! Дабы не смущать начальство разумением своим.

Петр I Великий

Это объясняет все парадоксы СНГ-шного рынка труда, неизвестные в остальном мире.
Как 20-летний новоиспеченный манагер будет строить 50-летнего сотрудника, который старше его отца?
А как без построений обеспечить дисциплину в коллективе и правильныйЪ уклад отношений с подчиненными?

Вам помогут только время и большое количество реализованных проектов. Всё приходит с опытом.
Я, например, каждые полгода делаю ревью собственного кода за предыдущие полгода и ужасаюсь - как я мог так писать? А ведь полгода назад я мнил себя профессионалом... и так каждые полгода ))

Не занимайся херней, отдай верстальщикам.

Скрывается любым классом по условиям по сути .hidden-md, hidden-xs и другие в бутстрап например.
А вот чтобы не загружалось то тут только уже либо Js, jQuery либо php, определять что это смартфон, после поставить условия что такие то блоки не подгружаем

Если хотите улучшить качество кода:
1) Изучите книги "Рефакторинг" и "Совершенный код".
2) Тренируйтесь на CodeWars - старайтесь более понятный и чистый код. А потом сравните с решениями других участников, берите на вооружение, как можно было сделать лучше.
3) Изучите шаблоны проектирования.
4) Берите большие опенсорс-проекты с хорошей архитектурой и пробуйте что-то в них изменить, улучшить. В процессе изучите, как они спроектированы, невольно будете учиться и перенимать эффективные методы решения многих задач.

Только свои.
Т.к. фреймворковые на 80% избыточны и под уникальные проекты все-равно их допиливать нужно.
Ну, или на крайний случай выдергиваю миксины из bootstrap, они хотя бы код не засоряют. Получается 100% бэм css =)