Как научиться делать недаптивные сайты адаптивными?

Question

[lilandre2]

Добрый день. Я начинающий веб-разработчик. Мне, как и многим разработчикам сложновато устроиться на первую работу без портфолио. Почти везде требуются готовые работы. Хочу научиться делать качественно адаптивные веб-сайты. Попробую сделать 2-4 сайта бесплатно. Планирую погуглить малооптимизированные сайты салонов красоты в моем городе и предложить оптимизацию за бесплатно. В первую очередь планирую брать сайты которые не адаптивны под мобильные телефоны. Таким образом получу готовые проекты для портфолио и прокачаю навыки в адаптации веб-сайтов.

Что можно изучить по этой теме? В каком направлении двигаться?

Answer 1

[Максим Тимофеев]

Посмотрите как устроен boostrap, я не говорю, что его надо использовать. Я предлагаю его разобрать по винтикам, как хороший пример адаптивности.

Comments

[lilandre2]

Знаком с бутстрапом. Верстал на нем шаблон.

[Максим Тимофеев]

lilandre2: Тогда откуда вопрос "Как научиться делать не адаптивные сайты адаптивными?"
Как минимум используя bootstrap, или медиазапросы используйте.

Answer 2

[Ankhena]

Что можно изучить по этой теме? В каком направлении двигаться?

1. Геометрию.
2. media условия
3. немного JS/JQ
4. оптимизицию изображений, отличия графики для ретины

Comments

[lilandre2]

У меня все ок с пунками: 1,2 ,(3), 4. Что дальше делать?

[Ankhena]

lilandre2: эммм... верстать?

[lilandre2]

Ankhena W: Что верстать? Верстальщики без готовых проектов никому не нужны.

[Ankhena]

lilandre2: Что хотите, несколько произвольных макетов на ваш вкус для портфолио.

freepsd.ws и все, что найдете по запросу "бесплатные PSD шаблоны", да или просто любые шаблоны с темплейтмонстра, не заглядывая в код.
Еще способ: регистрируетесь на фрилансе, заказчики иногда выкладывают макеты прямо в PSD.

Answer 3

[Денис Юдин]

В первую очередь, ознакомиться с информацией от Google - https://developers.google.com/web/fundamentals/des...

Посмотреть и изучить различные адаптивные фреймворки - Bootstrap, Zurb Foundation, etc.

Изучить, что такое XY Grid, Float Grid, Flex Grid - в чем между ними разница, какие ограничения и особенности и прочее.

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