Как верстать адаптивно с нуля?

Я новичок в верстке, проходил только базовый интенсив в хтмл академии, там сверстал макет фиксированной ширины на 1200пх, после окончания курса отправил его в пару студий, макет прикрепил бы сюда, если знал как. Город небольшой (400к), студий по пальцам пересчитать. Ответила только одна, скинула макет который нужно сверстать адаптивно, но я про адаптив не знаю вообще ничего, он проходится только на продвинутом интенсиве. Смотрел те же статьи на хабре, там только советы или обрывки. Подскажите, что и где лучше почитать, чтобы по полочкам от и до, да и вообще подскажите что делать в такой ситуации, а то я уже расстроился. Конечно опрометчиво было думать, что после базового интенсива меня оторвут с руками, но я сразу написал что претендую только на позицию джуниора, а тут держи то чего не знаешь и делай как хочешь.
  • Вопрос задан
  • 17872 просмотра
Решения вопроса 1
yanis_kondakov
@yanis_kondakov
Так как люди до сих пор читают этот ответ, а время прошло немало, то считаю нужным изменить его.
Ответ будет содержать информацию для тех, кто предпочитает самообучение.

0) https://www.memrise.com/login/?next=/home/ + https://www.memrise.com/course/332202/12527/
www.bbc.co.uk/learningenglish
https://www.ted.com/

Изучайте английский. Язык международный. 90% информации на этом языке! Без него никак.
Не сыграйте пару партий в HS/доту. Посмотрите на одну серию текущего сериала меньше, или лучше посмотрите его на английском с субтитрами! Всего 30 минут в день обеспечат вас безбедным будущим!

1) klava.org/#eng_basic
15 минут в день. Это все, что нужно для осваивания слепой печати.

2) https://webref.ru/ref
Учим все. Как учили стихи в школе. Да, будет больно, но потом это окупится сторицей.
Совет: заведите тетрадку и переписывайте туда все теги/свойства. Не ставьте себе задание: "выучить все за месяц". Поставьте задание: "выучить три тега/три свойства за день". Так ваш мозг будет получать удовлетворение от процесса.

3) https://flexbox.io/
https://cssgrid.io/ Отличный курс по относительно новой технологии. При поддержке Mozilla
Переходите к этим курсам только после выполнения второго пункта.
Курсы на английском. Если не понимаете, вообще ничего страшного. Просто повторяйте за автором. Пройдите курсы до конца. По видео в день. Это не займет много времени.

4) https://drive.google.com/open?id=1uD0VkRXS3wUlw3oP...
Сверстайте любые три макета.
- не использую flexbox/cssgrid
- используя flexbox
- используя cssgrid
Сделайте их полностью adaptive/responsive.

В общем-то все. Для вас после этого не составит никакого труда сверстать что-либо. НЕ НУЖНЫ никакие платные курсы для этого.

Что касается дальнейшего развития, то это отдельная тема. Удачи, я в вас верю! =)

Старый ответ
spoiler
@dyfran: мне потребовалось 4 месяца, чтобы изучить с нуля до уровня подходящего для устройства на работу. При этом я часов по 12 занимался каждый день, может было в сумме выходных 5 за это время. Изучил html, css, sass, js, gulp, bower, git. Начинал тоже с html academy, но там его полностью прошел 2 раза. Вот курсы, которые я прошел за эти 4 месяца:

1) Html academy
2) https://www.coursera.org/learn/html-css-javascript...
3) https://www.coursera.org/learn/html-css-javascript
4) https://www.coursera.org/learn/website-coding
5) https://learn.javascript.ru/
6) После прохождения первых пяти, копайте в сторону stylus/sass, bourbon, webpack/gulp, git.

Чтобы отдыхать от курсов, подпишитесь на рассылку от htmlacademy и верстайте макеты, которые они будут присылать.

Несколько musthave ссылок
1) https://developer.mozilla.org/en-US/docs/Learn/Jav...
2) https://webref.ru/ref
3) caniuse.com
4) stackoverflow.com
5) https://codepen.io/
6) https://www.youtube.com/channel/UC7enHM_oJRYJOnyJr... канал с полезной информацией

Сделайте упор на эти вещи и не распыляйтесь ни на что другое.

Удачи.
Ответ написан
Пригласить эксперта
Ответы на вопрос 11
maxminimus
@maxminimus
просто или ничего
твой вопрос - как работать программистом без знаний языка программироания?

перед началом любой работы в любой компании или на фрилансе - надо знать основы веб-программирования - в том числе надо знать css и адаптив

мне кажется надо не менее года учебы-практики перед тем как пытаться кудато устроиться
Ответ написан
Anna_BS
@Anna_BS
Нужно пробовать устроится, но после 3-5 макетов минимум(базовых знаний css и html. Js(jquery)  будет плюсом). Нужно понимать, что вы можете дать работодателю(Даже при стажировке он будет тратить время на вас).
Макет, что дали, попробуйте сделать на bootstrap
Смотрите вакансии и требования к ним в вашем городе и на них ориентируйтесь.
Хорошие книги, уроки и блоги много раз советовали в других вопросах
Ответ написан
@sincopa
Для адаптива используй медиа запросы.
https://habrahabr.ru/company/google/blog/173861/
Какой нужен для планшетов media запрос?
Там, все просто если не понятно, посмотри пару уроков на ютюбе. Сразу поймешь.

paranoida.github.com/sass-mediaqueries - миксины для SASS
Ответ написан
vilka_2009
@vilka_2009
Верстаю
На базовом интенсиве ты наверняка познакомился с относительными единицами измерения. Попробуй переверстать свой макет используя %. Сразу станет яснее, как работает резина и адаптив. Тот же самый бутстрап для своей сетки использует float:left и процентные ширины колонок. Вот и ты попробуй. Вообще лучше всего для практики адаптива подойдет макет Sedona. Сначала верстаешь так, чтобы сайт был резиновым, потом адаптивным. Попробуй еще переверстать его без флоатов, а на inline-block. И да, тут советовали медиа-запросы - тоже базовая часть адаптива. И познакомься с понятием "область просмотра" - почитай в гугле про мета-тег viewport

Покапайся по-больше в бутстрапе, конкретнее в сетке бутстрапа. Поняв ее (а это очень просто), поймешь и все об адаптиве. Так же начни изучать флексбоксы - это будущее, т.к. фреймворки, флоаты и инлайновый блоки - это лишь хаки для построения сеток, а флексбоксы как раз были созданы для этого. И для адаптива конечно же)

Просто смотреть видосы, коих слишком много, так же и со статьями, проходить курсы - все это полезно конечно, но так же и бесполезно, т.к. их уже слишком много и много воды в них. Самостоятельные исследования полезнее для твоего мозга и для понимания.
Ответ написан
@Shinso
Не ну год программиста возможно, но для верстальщика и пары месяцев хватит я вот проходил халявные онлайн курсы где-то 2 месяца и довольно быстро после них устроился вот кстати видео с них https://www.youtube.com/playlist?list=PLPEdpzU3rpf... в процессе их прохождения будет создание и просто адаптивного сайта и на бутстрапе главное самому в процессе прохождения найти 1-2 макета и сверстать
Ответ написан
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Вот вам курс https://www.youtube.com/playlist?list=PLyf8LgkO_8q... На словах это не рассказать. Пробуйте.

Либо так: https://www.youtube.com/results?search_query=%D0%B...
Ответ написан
Чисто верстка сейчас в вашем городе мало кому нужна, если откликнулась только одна студия. Большинство разработчиков сами в состоянии верстать, тем более часто это макеты фреймворков и CMS со специфической разметкой, с которой вы конечно не знакомы. Тем более вы, я так понимаю, не знакомы с JS. Сейчас востребованы front-end разработчики, а там такой зоопарк технологий, что мама не горюй.
Но с другой стороны, если получится устроится, то это уже какой-никакой опыт работы. А это очень важно. В общем выводы делайте сами.
Ответ написан
@antdigo
Можно посмотреть курс "Школа разработки интерфейсов" от Яндекс. Например, Школа разработки интерфейсов – Адаптивная вёрстка в описании к видео есть полезные ссылки. Плюс в их блоге на Хабре есть подробно разобранный пример из лекции.
Ответ написан
tramp55
@tramp55
Землю попашет, попишет стихи....
Ну если дело только в этом (выполнить задание по верстке макета адаптивно), достаточно будет одного только bootstrap по этой ссылке. Там все досконально объясняют, как раз для тех, кто слабовато знает HTML, CSS, JS. Очень подробно описан адаптивный дизайн. За вечер, максимум за два разберешься и научишься адаптивной верстке. Но этого хватит только для выполнения задания, для дальнейшей работы в студии этого не достаточно.
Ответ написан
@ralaton
Город небольшой (400к), студий по пальцам пересчитать.


У нас 500 000 человек.
Порядка 30 студий.

Ищите лучше

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


Самое простое - сверстать на адаптивном фреймворке.
Я вообще сомневаюсь, что они ожидают от вас что вы сверстаете адаптивно вручную. Скорее всего и подразумевается именно такой фреймворк.

Я рекомендую Zurb Foundation
Можете взять более распространенный Twitter Bootstrap.

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

Кроме всего вышеперечисленного в интернетах рекомендуют Итана Маркотта "Отзывчивый веб-дизайн", где описываются принципы адаптивной вёрстки.

Вопрос к знатокам: стоит ли тратить время на это произведение?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы