Вениамин Смирнов

Я уже давно понял, что лучше сразу делать адаптивно. Иначе потом все равно переделывать придется. Контейнер у меня выглядит так:

.container {
width: 100%;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
}

Причем стараюсь делать все резиново. Если такой возможности нет - медиазапросы.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

#left{
    	width: 600px;
    	float: left;
    	margin-right: 10px;
    	}
    #right{
    	width: 400px;
    	float: right;
    	}	
    	
    @media only screen and (max-width: 1010px){ 
    	#left, #right{
    		width: 98%;
    		float: none;
    		margin: 10px auto;
    		}
    }

Очень востребованы

studio.envato.com вот тут фанаты креатива

P.S. и заюзайте lancemonitor.com - увидите, сколько чего по теме

Конечно, очень.

Практика, практика, и только практика.
Вы выучили основы html и css, и вроде бы можете что-то сверстать.
На одном вроде бы, и с такими знаниями сразу подобное (svg анимации и т.д.) сверстать вы не сможете.
Начните с малого, развивайте скилл, после того как разберетесь с типографией / сетками, и сможете верстать настоящие проекты - читайте и вникайте в примеры на codyhouse.co, там вся реализация разложена по полочкам.

Extract - киллер-фича Аdobe для Brackets, так что в других редакторах её нет и в ближайшем времени не будет.
Но есть онлайн вариант - https://assets.adobe.com/ (бесплатный)
Или похожее решение от сторонних разработчиков (десктоп приложение) - avocode.com (платное)
Очевидно, что оба решения не имеют прямой привязки к редактору, но жизнь верстальщику всё же упрощают значительно. Хоть оба ещё и невероятно сырые и глюковатые, впрочем, как и сам Extract.

Думаю, стоит сначала закрыть тег.
И проверить файл CSS, а то бывает и такого, что его вовсе нет.

Vim(vintage mode, не знаю есть ли он в atom)+emmet+stylus, куда же еще быстрее?

Горячие клавиши в emmet? Ничего не путаете?

Добавить сниппеты для html/jade, css/less/sass. Добавить плагины:
https://github.com/atom/autocomplete-html
https://atom.io/packages/autoclose-html

Простое и незатейливое можно на GameMaker,Construct2. Unity3D уже посложнее(с# скриптинг) и весит побольше(сам проект). В теории, для красоты можно использовать UE4 с блюпринтами(аля Construct 2, только с графончиком).
Короче, для не программистов Construct 2 и GameMaker, а продвинутые уже знают нужное)

craftyjs.com - браузер.
...или для мобил Unity3D - только туда!

Как вариант - использовать Gulp с плагином BrowserSync: https://www.browsersync.io/docs/gulp/

Есть два пути: Brackets или плагин для браузера livereload.
Лучше использовать веб-сервер (как вариант локальный апач).

1. Kenney.nl

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

2. OpenGameArt.org

Наверное, один из лучших сайтов в своём классе. OpenGameArt.org огромный сайт, предлагающий все виды графики, необходимые для разработки игр. Так же на сайте имеется бесплатная музыка (звуки). Основными плюсами данного ресурса являются наличие оживленного и весьма полезного форума, а так же постоянное обновление материалов за счет пополнения самими пользователями и рейтинговой системы оценивания. Так что вы всегда сможете быстро выбрать самое лучше и свежее.

3. Untamed.wild-refuge.net

Отличный ресурс для тех, кто задумывает или уже создает свою RPG.
При переходе по ссылке справа вы увидите колонку ресурсов. Персонажи, предметы, локации и тому подобное, при нажатии на которых все-все объекты появятся на одной странице, что упрощает и ускоряет выбор. При клике на понравившегося персонажа, открывается ссылка на .png файл, со всеми 3d-проекциями и движениями, что идеально подходит для создания собственных спрайтов.

4. Crateboy.itch.io

Отличительная особенность данной коллекции - 8-битная графика городов. Вся библиотека совершенно бесплатна, и всё, о чём просит автор - упомянуть о нём в своей игре (credits).
Цветовая гамма данной библиотеки является её отличительной особенностью, и при использовании в исходном виде вполне может определить дизайн всего проекта.

5. Bagfullofwrong.co.uk

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

6. Gameart2d.com

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

7. Wigdetworx.com

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

8. Glitchthegame.com

Создатели проекта Glitch, закрытого в 2012 году решили сделать всю её графическую часть Достоянием общественности (никакие авторские права для использование не требуются). К Вашим услугам более 10,000 изображений восхитительного качества собранные воедино и доступные по одному нажатию.

9. Dumbanex.com

Идеально для сайдскроллеров и платформеров
Множество графики от дизайнера-фрилансера Брента Андерсона. Всё бесплатно при условии упоминания в приложении (Credits).

10. Reinerstilesets.de

Бесплатная графика от разработчика игр разработчикам игр. Помимо библиотек на сайте есть неплохие туториалы.

11. Sharecg.com

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

12. Roenica.com

Отличный сайт с графикой для инди проектов и казуалок.
Всё разбито на категории по типу игры и упаковано в ZIP архивы. Есть и 2D и 3D графика, но так же как и в предыдущем случае стоит внимательно смотреть на лицензию, под которой распространяется контент.

13. Blogoscoped.com

Сам сайт - форум про Гугл и всё, что с ним связанно, но в 2006 году его участник Philip Lenssen выложил на нем около 700 спрайтов, которые теперь распространяются под Creative Commons License

14. Lostgarden.com

Сайт немного отличается от рассмотренных выше. Это блог игрового дизайнера, в котором время от времени появляется бесплатная графика для разработчиков игр. Так же интерес представляет и сам блог, в котором дизайнеру можно найти уйму важной и интересной информации.

15. Subtlepatterns.com

Безумное количество фонов и текстур для Ваших игр и приложений. Всё как и прежде бесплатно - только не забудьте поблагодарить автора.

16. Openclipart.org

Обширное сообщество с огромными объемами графики. Всё, что сможете найти на этом сайте, совершенно бесплатно. Правда вот поискать придется как следует.

А дальше есть возможности для роста - в более углублённые фронт-энд и бэк-энд специализации, к примеру.

Фуллстек и бекенд в случае с дизайном - мимо, давайте смотреть реально на вещи. Какое может быть развитие в бекенд, тогда дизайн точно до свидания, и пройдет не меньше нескольких лет, за которые вы научитесь программировать.
Реально продолжать заниматья тем, чем сейчас. Дизайн + интерфейс (строго без фронтенда). Скрипты и анимации - это не фронтенд, они не требуют навыка программирования/проектирования.

для меня это пока тёмный лес, но если мне это будет интересно по мере развития, почему бы и нет?

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