Как выглядит современная верстка?

Question

[mag_lenar]

Доброго всем времени суток!
Уже несколько месяцев, меня не покидает мысль о том, что я хожу по кругу.
Давно, очень давно уже занимаюсь контентом на фрилансе.
Хочу глубже погрузиться в мир IT, поэтому учу основы верстки.
Прошёл Html academy, wisdomweb, sorax, много разных видео на ютубе по верстке макета, верстая за ними.

Взял за основу макет, сверстал так как учили(не без ошибок конечно)
Уровень сейчас такой(со стыдом) прикрепляю свою небольшую вёрстку.
Ссылка на DropBox

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

Comments

[DTX]

Нужно уметь верстать адаптивные вещи. Чтобы и на мобильном нормально отображалось.

[sim3x]

залей на гитхаб

[Ярослав Иванов]

"Какие технологии нужно?" БЭМ

[mag_lenar]

DTX: как лучше добиваться адаптива? в голове только такие варианты как, менять готовые верстку, или использовать сетки.
Ярослав Иванов: спасибо, буду гуглить!
sim3x: ок, залил.

Answer 1

[Lam Besis]

Как человек, который был в той же ситуации, рекомендую вот что: в первую очередь, самым идеальным вариантом будет найти работу верстальщиком, как уже сказали выше. Пусть не за очень большие деньги, но найти ее надо обязательно. Вы не поверите, насколько быстро вы будете учиться, т.к. задачи перед вами будут стоять совершенно реальные, и каждый день будет что-то новое чего вы еще не делали, в отличии от тренировочных макетов. Таким образом у вас накопится хороший опыт реальной разработки.
Далее, настоятельно рекомендую постоянно гуглить. Абсолютно по всем вопросам и сложностям которые у вас возникают. Повторюсь, именно гуглить, не задавать вопрос на тостер (не воспринимайте в упрек :)), а самостоятельно искать ответы, решения и туторы. В будущем это очень поможет вам быстро находить всю необходимую информацию, а так же грамотно и четко формулировать соответствующий вашей задаче запрос.
Так же, советую постоянно читать книги и статьи из мира фронтенда. Постоянно!
Навскидку из того что пришло в голову скажу четыре сайта.
Всем известный хабр: открываем тег "html" и внимательно изучаем все статьи подряд, делая для себя пометки в блокноте и добавляя в закладки полезные статьи, которые могут пригодиться в будущем, отмечая для себя темы которые нужно изучить в будущем и т.д. Даже касательно вашего вопроса о технологиях - полхабра забито статьями на эту тему.
Второй - css-live.ru, шикарный ресурс с русскоязычным контентом, огромным количеством переводов каяественных иностранных статей, и очень понятной подачей материала.
Третий - webref.ru (бывший htmlbook). Лучший справочник по html и css, а так же на нем множество уроков, статей и полезных материалов и бесплатных обучающих курсов.
И четвертый - frontender.info. Изначально может показаться что там все связано с Js, но на самом деле это не так.
Помимо всего этого, порекомендую вам курсы от LoftSchool. Они лучшие, честно. За два месяца с ними вы изучите больше чем самостоятельно за полгода, и я не утрирую.

И на последок, вам нужен наставник. Человек, который подскажет решение если в гугле не удается найти ответ, придумает ТЗ для тренировки, подскажет где ошибка в коде и, если что, направит в нужное русло. Если хотите, могу вам в этом помочь, я люблю делиться знаниями :)

Comments

[mag_lenar]

Lam Besis: спасибо за ответ! Про вопросы в Тостер Вы правы, они уже все решены в гугле, сюда написал, просто видя такое множество путей, и не зная куда лучше податься.
Про работу, устроится я не могу, только удалено, в принципе я так работаю, только далеко не верстальщиком. А куда Вам можно написать?

[Lam Besis]

mag_lenar: можно в телеграм по нику "lambesis", либо в контакт, ссылка в профиле тостера :)

Answer 2

[asd111]

Вроде всё норм. Вам нужно найти работу - так вы сможете не просто учиться новому, но и получать деньги за любимое занятие.
Адаптивность конечно полезно знать( media запросы min-width и т.п.), хоть её и мало где можно применить, но часто бывает нужно т.к. у многих сайтов есть мобильные версии. Большинство дизайнеров делают мобильную версию сайта ОЧЕНЬ сильно отличающуюся от целой версии поэтому вместо адаптивности проще сделать новую верстку на поддомене. Взять например vk.com и m.vk.com - это две разных верстки хотя многое то же самое(цвета и размеры кнопок и т.п.)

В вашем примере сделайте так чтобы при размере экрана меньше 760, если я ничего не путаю, все элементы исчезли кроме main content и названия сайта, а элементы в блоке main-content встали в один столбик друг под другом. Я не дизайнер поэтому выглядеть это будет некрасиво, но вам главное уловить суть как менять дизайн при изменении ширины экрана. Наподобие этого alexdev.ru/1497

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

Comments

[mag_lenar]

asd111 Спасибо, обязательно сделаю адаптив.

Answer 3

[Saberwalker]

Завис так само...Видимо нужно больше практики.
Мне как новичку не совсем понятно : "очень давно уже занимаюсь контентом на фрилансе ?" -поясните пожалуйста.

Comments

[mag_lenar]

Saberwalker: Контент-менеджер, по сути это к IT относится лишь опосредовано, но частенько приходилось в кодах лазить, но только html