Как начать верстать сайты для становления хорошим frontend разработчиком?

Question

[Серафим]

Всем привет, я тут впервые, по-этому прошу отнестись с терпением (вопрос не так сформулирован, теги не те и прочее).

Немного о себе:
параллельно изучаю html, css, js (полноценной практики, кроме step-by-step гайдов по верстке сайтов не имею)
Хочу стать frontend разработчиком.

Я понимаю, что верстальщик и frontend разработчик несколько разные вещи.В моем понимании, верстальщик- это первая ступень эволюции фронтендера(поправьте, если я ошибаюсь), ведь везде в вакансиях и на форумах пишут, что фронтендер должен знать css и html. Вопросы:

1) Насколько хорош в верстке должен быть фронтенд разработчик? (просто понимать теги, или к примеру senior frontend developer должен уметь верстать сайты любой сложности с применением фреймворков и прочих крутых технологих)
2) Стоит ли подучить такие технологии как Flex-box и css-grid, прежде чем верстать первый макет или нужно сперва набить шишки на чистом css и html?
3) По поводу адаптивной верстки, какими средствами достигается адаптивность(по-мимо media запросов)?
4) Css фреймворки насколько широко они используются профессиональными компаниями? Слышал такое мнение, что bootstrap и прочее создают простые шаблонные сайты, и профессионалу они не к чему, т.к. ограничивают его свободу действий, так ли это?

Буду безмерно рад любым советам, особенно было бы приятно услышать мнение опытных разработчиков из данной сферы, заранее спасибо!

Answer 1

[sadieff]

Мой опыт показывает:
1. С одной стороны верстать нужно и сложные макеты, чтобы они были кроссбраузерными, но и с другой - чтобы потом было легко натягивать эту верстку. Приходилось видеть плашку со скидкой, где сама скидка была прописана в стилях в виде псевдоэлемента. Конечно переделать было не долго, но все же. Или вот подобный выбор цвета в фильтре от верстальщика: https://yadi.sk/i/tgr8M-ZjH-wj-g
2. Flex-box и css-grid это не такие уж прям технологии, на изучение которых нужны месяцы. Достаточно выделить день, в песочнице попробовать что оно из себя представляет и когда это нужно использовать, чтобы не пихать туда, куда не нужно.
3. media запросов вполне хватает
4. Зависит от компании, от цели, от стоимости проекта, от времени на разработку

Но могу ошибаться, интересно мнение других.

Comments

[Серафим]

Спасибо за ответ! Надеюсь услышать и другие мнения)

[Модератор]

Переместите линк с я.диска на гитхаб или прямо в текст ответа

Answer 2

[Сергей]

1) Насколько хорош в верстке должен быть фронтенд разработчик?

Как по мне, хороший фронтенд-разработчик должен уметь верстать хорошо, особенно, если он senior. Тем более вёрстка - это действительно наименее сложная вещь в веб-разработке.

2) Стоит ли подучить такие технологии как Flex-box и css-grid, прежде чем верстать первый макет или нужно сперва набить шишки на чистом css и html?

Разделять эти технологии и "чистый CSS" неверно, ведь Flexbox и CSS Grid - это часть CSS, и ничто не мешает вам применить их при создании первого макета. Знать их несомненно нужно, а использовать следует в зависимости от того, поддержка каких браузеров требуется в проекте.

3) По поводу адаптивной верстки, какими средствами достигается адаптивность(по-мимо media запросов)?

Например, за счёт использования относительных единиц измерения (%, em, rem, vh, vw) и функции calc().

4) Css фреймворки насколько широко они используются профессиональными компаниями?

По моему мнению, в достаточной мере, причём очень часто может использоваться не весь фреймворк, а лишь его часть (напр., разработчики очень часто используют одну лишь сетку Bootstrap). Многие админки сайтов сделаны на Bootstrap.

Слышал такое мнение, что bootstrap и прочее создают простые шаблонные сайты, и профессионалу они не к чему, т.к. ограничивают его свободу действий, так ли это?

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

Comments

[Серафим]

Спасибо за ответ!

Не сочтите за глупость, но я люблю переспрашивать очевидные вещи, так сказать под другим углом, для большей глубины понимания(наработанный навык за 3 года в университете, где преподавателю проще назвать тебя дураком, чем объяснить что либо).

По моему мнению, в достаточной мере, причём очень часто может использоваться не весь фреймворк, а лишь его часть (напр., разработчики очень часто используют одну лишь сетку Bootstrap). Многие админки сайтов сделаны на Bootstrap.

Я правильно понял, что мне при работе с макетом не обязательно описывать все элементы сайта исключительно средствами фереймворка? И рас уж зашла речь, практикуется ли использование нескольких фреймворков при работе с одним макетом?(к примеру сетку из botstrap, а какое-нибудь меню или карусель из foundation).

P.s. Прошу прощения, если сказал что-то абсурдное, ведь я нашел себя в вебе(если так можно выразиться) пару месяцев назад

[Сергей]

Я правильно понял, что мне при работе с макетом не обязательно описывать все элементы сайта исключительно средствами фреймворка

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

Практикуется ли использование нескольких фреймворков при работе с одним макетом?

Зачастую фреймворки имеют схожие названия классов, поэтому подключать css-файлы разных фреймворков на одну страницу категорически не рекомендуется во избежание конфликта стилей. Если же говорить об использовании одного фреймворка вместе с заимствованием идей построения компонентов из других фреймворков, то почему нет? Ну, а если речь идёт о js-плагинах, считается вполне нормальным внедрять те, которые лучше всего подходят для реализации задачи, будь-то плагины из других фреймворков или же плагины отдельных авторов. Например, у Bootstrap'а достаточно скудная по функционалу карусель, поэтому многие разработчики вместо неё используют Slick Slider или Owl Carousel.

[Серафим]

Сергей, Еще раз, большое спасибо, вы внесли ясность в мое представление о фреймворках.

Answer 3

[0xD34F]

Буду безмерно рад любым советам

советую научиться гуглить

UPD. Вынесено из комментариев:

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

Перевожу на русский язык: "я не умею понимать прочитанное".

Ну так и нечего тогда лезть в разработку. Пейте пиво, смотрите футбол.

Comments

[Николай Чуприк]

Вы неправы.

[Василий Мажекин]

Люди не советуйте гуглить тут. Это очень примитивный ответ. Человек задал правильный грамотно поставленный, достаточно развернутый вопрос. И просит практические ответы/советы от людей которые уже этим занимались. Неужели вы думаете, что человек не умеет гуглить? Это все равно что ответить советую научится читать. Это в первую очередь показывет ваш уровень развития. Не можете ответить на вопрос не надо к гуглу отсылать. Лишь бы что то написать.

[Серафим]

Василий Мажекин, Спасибо за понимание! Рас уж на то пошло тут же и отвечу. Вопрос был поставлен в как раз таки из-за того, что я "умею гуглить", но, к сожалению, в силу отсутствия опыта выделить полезную информацию из информационного шума довольно сложно.

[Владислав Лысков]

Василий Мажекин, этот вопрос задаётся по 15 раз на дню, и вопрос вообще не о чём

Answer 4

[sim3x]

1) Насколько хорош в верстке должен быть фронтенд разработчик? (просто понимать теги, или к примеру senior frontend developer должен уметь верстать сайты любой сложности с применением фреймворков и прочих крутых технологих)

Достаточно хорошо уметь верстать и отлично знать подходы client-side optimization

2) Стоит ли подучить такие технологии как Flex-box и css-grid, прежде чем верстать первый макет или нужно сперва набить шишки на чистом css и html?

гриды и флексы - чистый цсс. Что там учить - непонятно.
Верстать нужно сразу и много

3) По поводу адаптивной верстки, какими средствами достигается адаптивность(по-мимо media запросов)?

никакими. А те кто делают адаптивность на жс - будут гореть в аду

4) Css фреймворки насколько широко они используются профессиональными компаниями? Слышал такое мнение, что bootstrap и прочее создают простые шаблонные сайты, и профессионалу они не к чему, т.к. ограничивают его свободу действий, так ли это?

Вы создаете для каждого сайта свой браузер с 0? Нет?
В чем тогда проблема взять бутстрап и за 10 минут сделать вменяемый шаблон

В чем проблема сделать новый браузер под сайт, если вам дали под него бюджет и неограниченное время?