24 декабря Архивач восстановлен после серьёзной аварии. К сожалению, значительная часть сохранённых изображений и видео была потеряна. Подробности случившегося. Мы призываем всех неравнодушных помочь нам с восстановлением утраченного контента!
Front-end thread - реинкарнация и логический этап развития верстка треда, в котором в течение 60 выпусков отважные аноны учили других анонов верстать говносайтики, сжимать ксс и читать фак. Здесь аноны изучают верстку, базовый фронт-енд и обсуждают все, что с этим связано. Полноценная инфа по материалам в пасте, здесь только краткая выкладка базиса и основные ссылки. Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты, перед тем как что-то спросить, погуглишь хотя бы минут 5 и прочитаешь фак/пасту. В противном случае будешь послан нахуй, и абсолютно заслужено. Совершенно идиотские вопросы, нытье и прочее - аналогично. Не говорите, что мы не предупреждали. ====================
КРАТКИЙ ФАК ДЛЯ НЬЮФАГОВ И ПРОЧИХ МИМОКРОКОДИЛОВ
>Можно ли вкатиться в randomAge. Можно.
>Можно ли вкатиться без знаний программирования/матана/функционирования гипертекст протоколов/етц. Можно.
>С чего начать? Что учить? Куда смотреть? Внимательно прочитать ОП-пост, затем прочеть пасту от корки до корки. Подумать, надо ли оно тебе, перечитать все еще раз. Приступать к изучению материалов по порядку.
>Есть ли работа? Была, есть и будет, устраиваются как версталой, так и джунами фронт-ендами. Верстала без хотя бы базового знания JS сейчас как мамонт, поэтому готовьтесь учить и Javascript. В любом случае он вам понадобится, если планируете развиваться хоть куда-то. Джун фронтенд, полноценный и востребованный на рынке, а не программист на джиквери - это спец, умеющий и сайтик сложный сверстать, и страничку оживить, и приложение на нативном сваять.
>Кто-то уже приходил к успеху/расскажите кулстори/кто-то уже работает/кто-то съехал от мамки/поднимите мне настроение и вселите надежду в себя/etc Да, и не один а двое, азазазза, кхм. Да приходили, и да, вряд-ли кто-то тут получает удовольствие от повторения одних и тех же слов в тысячный раз. Пожалуйста, избавь нас от этой головной боли. Хочешь мотивации/психологической зарядки/утешения – посмотри вот это https://www.youtube.com/watch?v=ZXsQAXx_ao0
>Сколько времени займет обучение? Плотно стоящий на ногах верстальщик с портфолио из 3-5 адаптивных макетов, но практически без знаний JS - 400+ часов. Верстала с пониманием JS и портфолио - 600+ часов. Фронт-енд джун с уверенной версткой, уверенным JS, умением в дополнительные техи/фреймворки/препроцессоры/либы/системы сборки/otherSkillName, своими пет-проджектами, в том числе наверстанным портфолио - 1000+ часов.
>Могу ли учить верстку/JS после работы по 2 часа? Можешь но это вряд ли будет эффективно. Указанное время в таком случае можешь смело умножать на 1,3+.
>Слышал что для устройства на работу нужно портфолио. Нужно, чтобы всякие эйчары могли убедится еще до отсылки тестового что ты что-то умеешь. Верстале для портфолио достаточно запилить самостоятельно пару макетов. Джуну фронту надо либо макеты с вменяемой клиентской логикой и безупречной версткой, либо какую-то приложуху.
>Подскажите хостинг/сайт/место где все эти проекты держать? Для сверстанных макетов без логики или с клиентской логикой хватит и гитхаба. Гуглишь бесплатный хост для страничек от гитхаба - github pages(gh-pages). Иметь профиль на гитхабе вообще - признак хорошего тона, так что в любом случае пригодится.
>Могу ли я спросить что-то в треде? Конечно. Но перед этим следует проделать следующие действия. 1. Подумать. 2. Погуглить. 3. Попробовать решить задачу самостоятельно. 4. Еще раз подумать. Если решения все равно нет - спрашиваешь.
Задачу описываем четко, код показываем только в песочнице тут не экстрасенсы сидят нам нужно пощупать код, иначе никто не поможет Аноны с кодом в постах, на скринах, в архивах, сразу идут нахуй. Вас предупредили. Дополнительно можно приложить скрины где показано, что работает/что не работает/как хотелось бы/как планировалось/етц. Плюс текстовые пояснения конечно. Оформите вопрос правильно - практически гарантированно получите грамотную и своевременную помощь.
>Почему фронтенд вообще существует? Есть же CMS/конструкторы-сайтов. Почему существуют рестораны и кулинария?? Есть же доширак.
Дальнейшая информация для ньюфагов в пасте в конце ОП-поста. Там ВСЕ расписано, в том числе самый удачный по мнению автора алгоритм изучения основ верстки, есть тонна полезных ресурсов для разработчиков начального-среднего уровня и прочая годнота.
=====================
Cразу скажу, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup или HTML/CSS Developer называйте как хотите хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует, если конечно сможете найти такую позицию. На данный момент фронтендеру нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит. Только есть нюанс, материалов по бэкенду здесь в пасте представлено мало, если кто-то в будущем поделится – будем рады и включим в будущие редакции.
Работу находим в конторках и крупных фирмах. Конторки/студии - основное направление деятельности. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция там больше, в начале может быть сложно, скучно и относительно дешево. Помните о портфолио, оно просто необходимо, да и за время его создания руку набьете.
Дальше представлены первичные обучающие материалы в сильно сокращенном варианте, полные списки найдете в пасте.
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ. http://denweb.ru/put-veb-mastera_sod
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
А я бампану вопрос, как сделать такие треугольнички, кроме очевидного абсолютно спозиционированного псевдоэлемента с пнгшным фоном или все так и делают?
>>619348 >лучше делать с помощью svg ясно. Как думаешь, анон, фронт-енду стоит на базовом уровне овладеть иллюстратором, чтоб уметь самому рисовать там те же треугольники?
>>619380 Если ты на протяжении достаточно долгого времени считаешь один из своих тренировочных проектов лучшим, значит ты деградируешь. Репозитории можно удалять, как напишешь что-то гораздо круче, снеси. Для работодателя хватит 2-3 грамотных штук на гитхабе.
>>619467 Знать больше чем подключение свистоперделок JQuery. Ну хули, кому нужен обычный верстала? Ты либо на фрилансе человек оркестр, который сам рисует, верстает и подключает плагинчики JQuery. Либо верстала + JS джедай, который способен запилить SPA.
>>619124 Кто нибудь конкретно объясните что не так в мануале адаптивности от Першина. Насколько я понимаю есть два типа вёрстки - резина и простой адаптив. Как правило, резина используется на всяких сайтах с дизайном а-ля windows 8 (напр. всякие магазины ювелирки). Для обычных же (которых большинство и новичок с вероятностью 70% возьмёт именно такой проект) интернет магазинов (которые я уже делал) хватает простого адаптива, да и платят за это нормально, аналогично и с обычными интерфейсами / веб приложениями, которым нахуй не нужна резина, т.к. в основном они юзаются на десктопах, вопрос в том что за кукареканье тут раздаётся? Или это свидетели секты БЭМ'а?
>>619501 Ебать ты дебил. Я в вебдизайне 5 лет и могу тебе с уверенностью сказать что владение иллюстратором в нём нужно минимальное. Так как всё что касается вектора и иллюстраций покупается на стоках/воруется.
>>619508 >у отброса порвало пердак и он перешёл на личности зачем мне что то рисовать самому, лол тем более я перекатываюсь во фронтенд и интерактивный дизайн просто иди нахуй
>>619492 Резина - это отсутствие фиксированных размеров. Я допускаю, что можно изъебнуться раком кверху и захуярить чисто резиновую верстку на флексах, например, но тут нужен хороший дизайнер, который понимает, что к чему. Адаптив - перестроение сетки/размеров/шрифтов в зависимости от девайса (плотность пикселей, ориентация, разрешение и т.п.). "Обычный" адаптив, в твоем понимании, это подгонка страницы под стандартные вьюпорты (разрешения х480, х760, х920+). Адаптив+резина = респонсив.
Смотрю вот, как верстать иконочки из седоны и думаю - либо взять всё из макета и слепить из этого спрайт, либо взять уже нарезанные svg-иконочки. Какой вариант лучше? Как я понял, в первом я получу лучшую производительность, во втором - оптимизацию количества запросов.
>>619536 Я об этом же и говорю, вопрос в том что не так в гайде от першина. Понятно что бэкграунд всегда будет резиновый. А то что ты написал про адаптив першин в последующих частях рассказывает.
>>619548 Делай свг. Спрайтами намного проще, но это тренировочный макет, плюсик в резюме и все такое. Я пошел третьим путем и подключил фонтавесоме, лол. >>619550 А что там не так? Я упустил нить разговора. Никакого особого гайда по адаптиву у академии нет.
>>619550 Создаешь свг спрайт с помощью галп таска. В итоге будешь иметь 1 запрос, нормальное кэширование и конечно манипуляцию цветом, размерами в css.
>>619545 Ссу тебе на ебало, убогий. Веб-дизайнер не должен рисовать иконки в 2016 году. Потому что этим занимаются иллюстраторы. И да, я умею рисовать "логотипы". Но как правило эти задачи разделены в норомальных проектах, и если заказчик просит нарисовать лого у веб-дизайнера, то это вася из мухосранска который продаёт голубцы.
>>619552 >спрайтами намного проще Я бы не сказал. Если свгшками, надо будет просто их перекрасить и подключать как обычные файлики. Если спрайтами, там тоже ничего сложного, но таки использование спрайтов требовало от меня настройки специального плагина, да и каждую фоновую иконку теперь надо помещать в отдельный див. Или ты имел в виду склеить из svg спрайт?
>>619576 Блин, я тебя так и не полнял :) Взять из макета пнгшки и слепить спрайт из них? Или просто взять svg, которые предоставила академия, и вставлять их не склеивая?
уиии, верстка, фронтенд))) буду получать 100к))) поеду в мацквуу)))) я на ютубе видел, это ж любой дурак сможет)) уже два макета сделал))) кстати аноны подскажите, кароч отступ менюшке написал и все чот развалилось((( эт че за дела ваще, а?(((
>>619559 Ты болен. А знаешь почему? Да потому что ты пытаешься навязать свои взгляды как единственную возможную истину.
Вебдизайнер не должен...., вебдизайнер не делает это... Чувак, если это принесет ему дополнительную прибыль, то почему бы ему это не сделать? Не все живут по шаблонам. Не все дулают и поступают в точности как ты. И только гнилой-долбаеб будет за это упрекать их и оскорблять.
Граждане, узбагойтесь. Оба ваших постулата верны. И один прав в том, что чем дальше, тем больше идет узкое специализирование по задачам - аля конвейер Форда. И другой в том что люди-оркестры всегда будут более ценны даже в рамках конвейерного производства.
>>619614 Вообще, не понимаю, зачем нужно сраться? Если с чем-то не согласен, можно же нормально, вежливо, без наездов это с одной стороны донести, с другой - выслушать, и в ходе обсуждения прийти к чему-нибудь или обоим остаться при своём мнении.
>>619599 я еще друзьям всем рассказал)))) у меня сосед как узнал что за это деньги платят, сразу полез редактор ставить))) как в студию устроюсь, говорит, жене сапоги куплю)))
ПАцаны начинать с хтмл/цсс это стандарт? Заканчиваю бесплатные курсы, будуначинать интенсив хтмлакадемии. Потом понимание само прийдет что учить или сейчас можно посматривать на питоны, пыхи и прочие джавы? Пока время есть, а то потом опять учеба начнется.
>>619797 Какие джавы, питоны, пыхи? Это тред про фронтенд! У нас есть только три столпа - Отец Html, Сын Css и Святой Дух Js. А про прочее в нашем Храме не упоминай даже.
>>619687 Анон, а на гитхабе можно держать только одну страницу, или несколько? Страницу с именем своего аккаунта я уже запилил, можно ли с этого же акка запилить ещё одну страницу?
>>619901 Почему везёт? Ты отмучаешься в ближайшие пару недель, а ему ещё несколько месяцев страдать. А вот мне хорошо - работу искать не надо, поэтому забил на реакты и ангуляры, автоматизации вёрстки и прочую поебень, а просто обмазался жкверей и пхп, чтоб ненапряжно кодить в своё удовольствие.
>>619905 Я бы тебе посоветовал забить на жиквери и перейти на "ванильный" ES6. Намного приятней и красивее, никаких особых трудностей при переходе да и настройка занимает пару минут. Жиквери какое-то черезчур говно, особенно если "для себя". Хотя не знаю, может тебе нравится.
Так, аноны, перекрасил svg и у неё почему-то изменились размеры, представляете! Полез в код и увидел, что иллюстратор или что-то ещё округлил кое-какие значения. Что это за фигня? И это векторная графика?
>>619940 Попробовал перекрасить голубые иконочки (те, что были предварительно обработаны в иллюстраторе) обратно в чёрные. Желаемого эффекта достиг. Получется, при обработке иллюстратор округляет некоторые значения.
>>619991 Получилось сделать через гугл карты, но это и раньше получалось. Просто нужно как-то убрать с карты все украшения вроде иконки гугл-пользователя, или иконки изменения масштаба, вот это всё.
Как эту хуету сверстать? Это одна (стартовая) секция лендинга. Она должна быть высотой на весь вьюпорт? Если так, то какого хуя в ней всё такое огромное. У меня монитор 1378 * 768 и одно только лого в таком размере занимает почти весь вьюпорт.
>>619918 Двачую этого. JQuery многие используют, так как там очень высокая поддержка динозавров. Тебе оно нахуй не нужно, так как пока ты сверстаешь свою браузерку, большинство динозавров попросту вымрут.
>>620006 Такс, после попытки хитрожопого решения с скрытием всех элементов управления карты через css понял, что гугл не даёт блокам этих элементов классов. Второй вариант, похоже - включаться в сложную систему гугла и пилить аккаунт разработчика для доступа к их апи.
>>620028 блин, только сейчас понял, что можно было не качать иллюстратор, а открыть файлик в сублайме, поменять цвет и сохранить уже под новым именем. Ну я и дурак.
Оффтопну мальца: гигбрейнс высрали новый курс по тестировке. Последняя "темная" лошадка околоайтишной сферы официально зашкварена толпами дебилов, лол.
>>620050 Толку с этих курсов? Не у всех есть чугунный зад и прочие предрасположенности к этой профессии. Не у всех есть банально усердие и методичность. Ответственность в конце концов, аккуратность и все в этом духе. Так что пущай хуярят.
>>620053 Да, эта секция должна быть на весь экран. Можешь использовать height: 100vh и background-size: cover; Но кажется лучше это на JS запилить, так как vh не очень хорошо поддерживается.
>>620052 Как минимум усилением нагрузки на эйчаров потенциальных работодателей. Сейчас "выпускники" тыкают в резюме "знаю адаптивность, свг, лесс/галп, жиквери))", а будут еще и реакт приписывать. >>620003 Это модный дизайн. min-height: 100vh в помощь. А еще флексы. Размеры задавай по макету, ничего страшного, что не влезает. А вообще от верстки таких макетов толку особого нет, если только ты не собираешься самостоятельно JS-интерактив писать для тренировки.
Такс, аноны. Я вот разбираюсь с созданием гугл-карт без элементов управления и всё не могу понять, как нахаляву получить ключ к google maps API. Возможно ли это? Кто-нибудь решал эту проблему? или я вообще не по тому пути иду?
>>620003 Анон, так ты делай по размерам макета. Что значит, "всё такое огромное"? В макете какого она размера точно в пикселях? Вот и сделай такую. А потом уже, если это адаптив, то уменьшай по обстановке.
>>619988 >Ребзя, поздравьте меня защитился сегодня в институте! >N-день-кун, поздравляю, дальше пойдёт по накатанной. Поздравляю, анон, это здорово! Спасибо тебе за поздравления тоже. А я ЕГЭ в этом году сдавал тянка верещит, чтобы я поступал на заочку , но, чувствую, хуёво сдал математику и физику, хотя русский сдал на 73, поготовившись всего неделю, лол.
В студии пиздец творится. Кодер опять ебанул бутстрап на мою вёрстку, ебанул Woocommerce, перемешал все стили, всё поехало. Я выкатил руководству нехилый такой список того, как можно организовать и оптимизировать работу, потому что, реально, творится хуйня какая-то, а не налаженный рабочий процесс. Ну они посмотрели, сказали, всё классно, карты тебе в руки, если реализуешь, можешь ебашить как проект-менеджер, а версталу ещё одного мы наймём.
Вот, короче, буду на выходных этим делом заниматься.
Алсо, по баблу, вроде, ничего так выходит. Трёшку мне задолжавший заказчик вернул, ещё штуку сегодня поднял, сверстав хуйню за джва часа и, думаю, сейчас сдам проектик на 4К. Плюс ещё з.п., которую ждал сегодня, но, видимо, уже будет на следующей неделе.
Так что, друзья, не унывайте, если ваша жизнь идёт по синусоиде. В какой-то момент всё может OCHE хуёво, но всегда после этого наступает улучшение и профит. Ебашьте флексы, собирайте спрайты, посылайте неадекватных заказчиков прямо в лицо, ТОЛЬКО ФРОНТ-ЕНД, ТОЛЬКО ХАРДКОР.
Ананы, сижу тыкаюсь, не могу понять почему свойсво list-style-image не работает для списка. Не работает только в определеном файле. Может это быть из за того что применяю reset(сброс все настроек)?
>>620070 Добра анон, молодца. Попробую вписаться на какой-нибудь фл.ру пока что. А то уже жрать нечего, а я все надрачиваю, сначала думал: ну JS осилю и начну искать работу. Сейчас думаю: ну реакт осилю и начну искать работу.
>>620070 >>620066 >>620062 Большое спасибо, анончики! Просто было подозрение, что как-то оно слишком большое, но видимо это я просто за своим микроскопическим монитором с искаженным восприятием сижу.
>>620104 Не знаю, я даже не смотрел. Портфолио на выходных забацаю, буду уже искать, что и где есть. >>620114 Ресет сбрасывает вообще все, в т.ч. и дефолтный лист-стайл. Соответственно, надо смотреть и прописывать. Никогда сам лично ресет не использовал. Проще его нахер удалить и воспользоваться нормалайзом.
>>620118 Макет уже практически сверстан. Прийдется все переделывать. Заглянул в ресе, там есть строка list-style: none. А вот как ее включить хуй его знает. >буду уже искать, что и где есть Чует моя жопа, нихуя там работы нет. Один битрикс, да задачи с которыми справиться только студиям под силу.
вечер в хату, двощ Тут такая постанова - изучаю JS на learn.javascript.ru, дошел до замыканий и не могу в них въехать. Вопрос: стоит ли задрачивать их до талого, или лучше пропустить, а потом вернуться? Заодно буду рад анонам, которые смогут объяснить эту тему на пальцах
>>620141 Замыкание это свойсто языка использовать переменные находящиеся из внешней области видимости. Что тут понимать. С практической точки зрения: ты определяешь переменную во внешней функции, но можешь её использовать во внутренней функции.
>>620091 Разобрался. В начале всех своих изыканий я получил ключ, даже схоронил его, но так и не понял, зачем он нужен. В итоге гугл не давал мне создать новый, так как он у меня уже был.
>>620159 И всё-таки, опять она не хочет работать так, как хочу я. Анон, почему консоль выдаёт мне вот такие ошибки? main.js:8 Uncaught TypeError: document.getElementByTagName is not a function main.js:8 Uncaught TypeError: document.getElementByClassName is not a function Только когда использую айди (а я не хочу этого делать) всё работает как положено.
>>620217 Хотя только что, взглянув на код, всё понял. 1. Присваиваем значение функции левой переменной. Теперь эта переменная содержит массив (в моём случае из одного элемента). 2. Затем присваиваем тому, чему я хотел присвоить результат вывода функции изначально, присваиваем нулевой элемент этого массива. Вот примерный код: http://codepen.io/anon/pen/mERmQr?editors=0010
>>620144 Строку удалил, но один хуй не работать. Ебись оно конем, прийдеться делать через бакграунд. Хуй я больше буду применять reset, воистину пока себе ноги не поотсреливаешь, хуй поверишь что ружье стрелает. Пизда.
>>620218 Нахуй этого кантора. Может он и спец, но учебник его гавно полное. После типов данных можно смело бросать. Про замыкания, прототипы и всю эту лабуду Head First заткнула Кантора за пояс.
Пожалуй, пора спать. Кстати, аноны, кто-нибудь осиливал убрать и это? В документации вроде инфы по этому нет, да и по логике, убираться это не должно, копирайты как-никак.
Хай гайс, сижу тут уже достаточно давно и складывается впечатление, что я тут один унтерменш без знания английского. Читаю тред и жопа горит после каждой сылки на английский ресурс. Сейчас досмотрел базовый, думал дальше сам поосваивать всякие инструменты, но вся блядская документация на инглыше. Видимо пойду смотреть продвинутый. Или сразу идти нахуй с такими скилами?
>>620323 Мало кто владеет инглишом в совершенстве, но чтобы читать доки, это и не нужно. Гугл транслейт тебе в помощь. недавно вот проходил курс по гиту, так там вообще почти читать не надо было, всё было понятно по коду.
Всё таки пиздец в верстке много мелочей. Да, работа не шибко высоко-интеллектуальная, но знать нужно много всего. Смотришь на какого нибудь Першина и думаешь "ебать как элементарно", начинаешь сам и гуглишь каждую деталь по пол часа.
Почему когда я тестю респонсив в браузере (типа Ctrl+Shift+M в мозилле, например) меняя ширину экрана, то все норм, а если меняю ширину самого окна браузера, то верстка в каком-то диапазоне пикселей по ширине ломается? Это норма?
Аноны, напомните, какой символ нужно добавить в конце к селектору icon чтобы в итоге он сработал и для классов icon--facebook, icon--twitter и icon-youtube?
>>620654 Там не просто популярные, там справа есть ползунок, за который тянешь и все меняется плавно, как если бы ширину окна изменял. Но там такого не происходит.
>>620810 В такой последовательности заработало, в другой - нет, а нужно именно в другой :( Анон, если не так, то как создать плюсы, минус и календарики на пикрелейтеде? Абсолютно спозиционированными дочерними элементами label'ов?
>>620817 Ессно отдельными элементами. Это ж не декорации. Календарик, насколько я понимаю, должен разворачиваться по клику. Как ты его или плюсики/минусики таргетить будешь, если они псевдоэлементами сделаны? Псевдоэлементы джаваскрипт пока что ловить не умеет.
>>620066 >Как минимум усилением нагрузки на эйчаров потенциальных работодателей. Сейчас "выпускники" тыкают в резюме "знаю адаптивность, свг, лесс/галп, жиквери))", а будут еще и реакт приписывать. Тыкают-то тыкают, но кто реально все это знает и умеет применять? Все думают, что если ты посмотрел видео на полтора часа в интернете и тупо перепечатал код себе в редактор, то уже умеешь инструментом пользоваться. Другое дело придти на работу и разобраться в готовом уже проекте, как там там все устроено, еще происходит интернационализация, вникнуть что часть страницы генерится в gulp, часть берется из документации, что-то компонентами через mustashe. Повторюсь, если ты сверстал барбершоп и настроил автоматизацию по гайду, это нихуя не значит, что ты шаришь. Максимум, конечно, можешь галочку ткнуть, но по сути ты нихуя не умеешь и жопу тебе порвет на первом же тикете в жире. Да и с гитом охуеешь сколько заморочек на самом деле - это тебе не пушить в мастер-ветку на свой аккаунт. Это если ты запушишь куда-нибудь не туда, тебе придется просить тимлида, чтобы он разбирался. А у тимлида итак головняка много и ходить тебе попу подтирать ему не очень хочется. Это я пишу как отработавший неделю джун, вынужденный ежедневно зашивать свой пердак от сложностей реальной работы. Но вообще мне пока все нравится.
Парни, кто-нибудь копался в стартовом проекте Громова, который у него на гитхабе? Я ставлю эту херь, она ровно 2 раза нормально работает, а потом начинает крашится, да так, что я вообще не могу понять в чем дело. им кто-нибудь пытался пользоваться/настраивать под себя? Это имеет смысл?
Закончил верстать седону, решил минифицировать файлы, но сломались скрипты. Как я понял, галп поменял имена переменных, и где-то он поменял их так, что вышла ошибка. Кто сталкивался с такой проблемой? Как можно её решить?
>>620919 Не все же такие виртуозные верстальщики, как ты. Ура, доверстал статичную седону. Можете глянуть на мои труды. Сейчас буду думать, как всё то говно, что я написал, сделать адаптивным. http://frollodecol.github.io/sedona/dist/index.html алсо, как пофиксить то, что при наведении изображения, пока подгружаются, мигают? Как загружать их все?
>>620930 >+/- должны быть блочными всмысле? Там у меня и так блоки, 30 пикселей в высоту и 10 в ширину (если бы сделал в ширину больше, свгшная картинка бы растянулась.)
Алсо, возник вопрос, существуют ли плагины, преобразующие вставленные как файлы cduirb в код?
>>620978 Я имею в виду, что, допустим, запилю я огромный большой svg-спрайт и потом запилю его фоном. Там же не получится отловить картинку, браузер просто сделает фон из всего спрайта и порежет его размеры.
>>620985 Это работает не так как растровый спрайт. Тут ты указываешь путь к сфг файлу и заодно ID нужной тебе картинки. Профит от этого способа - 1 запрос на сервер, так как 1 файл. ВОзможность изменять цвет, размеры в css. И кэшширование.
>>620937 Ты неправильно сделал + -. Нахуя ты их сделал через <i> и прицепил позиционирование к лейблу? Это максимум уебищно. Они должны быть сделаны через ссылки. Грубо говоря, это два квадрата внутри или снаружи дива с цифрой-количеством. >Алсо, возник вопрос, существуют ли плагины, преобразующие вставленные как файлы cduirb в код? Какие плагины, ты о чем? Если тебе нужен код свг-шки, просто перетаскивай ее в редактор драг'энд'дропом и вставляй этот код в хтмл. >>621008 >Дай пожалуйста ссылку на гайд и на плагин, просто насколько я помню, в продвинутом этого не было. Парень, 90% работы фронт-энд разработчика - поиск в гугле готовых решений. Поэтому учись делать это уже сейчас.
>>621038 Нет, так не получится. Только если вручную править свг в редакторе, если тебе допустим какую-то часть не надо. Потом снова сохраняешь как новый свг и вставляешь фоном.
Аноны, делюсь хаком, может кому пригодится. Многие думаю знают, что background-size: cover и background-attachment: fixed не дружат друг с другом и когда их используешь вместе, то все стремно выглядит и ведет себя не так, как ожидается.
Долго гуглил на эту тему, но так и не нашел нормального решения, пока не включил СМЕКАЛОЧКУ и сам до него не допер. Делается все так: для блока с фоновым изображением добавляем враппер и прописываем ему абсолютное позиционирование, а так же clip: rect(auto, auto, auto, auto). А самому блоку с изображением прописываем фиксированное позиционирование. Все, background-attachment: fixed писать не надо. Работает заебись, правда подводный камень в том, что clip считается устаревшим и возможно его выпилят когда-нибудь. Но пока пользоваться можно.
>>620922 Неплохо, но меня честно заебывает много hover псевдокласса на кнопках еще ладно, но на формах нахуя. Ну пиздец, все мигает в глазах рябит. На форме можно просто оставить :focus, Еще там где + и - рядом с кнопками курсор меняет вид на "ввод", тоже как-то неочень. Т.е визуально кнопки вроде бы большие но по факту - маленькие. Сделай эти элементы блочно-строчными и укажи размеры.
>>621145 Да я уже тогда знал. Но если я даже закину поле в див, то потом позиционировать придётся просто относительно этого дива, точно так же абсолютно, цифры просто другие будут. Но вообще да, там очень много всего надо переделать.
Пиздец я уже поехал со своим ПЕРФЕКЦИОНИЗМОМ. Как ебанутый смотрю разные доклады, гуглю, что бы узнать как какая-то мелочь делается идеально. Потом уже нахожу, что даже чуваки из гугла в это не сразу врубились, похуй, всё равно нужно сделать идеально. Подозреваю у себя ОКР, лол.
>>621323 Хорошо тебе. В мне лень переделывать в своей седоне иконки на иконочные шрифты, чтоб не мигали, и вместо этого я тупо подключил костыль - блок с множественным фоном из всех картинок проекта.
>>620922 Много куда надо дописать cursor:pointer Либо убрать всякие подсветки от ховеров если они не нужны (например на главных иконках по середине) Алсо где адаптив? Без адаптива это все оторвано от реальности пиздец
>>621359 Это какой-то пиздец, чувак. 23 ебаных запроса, когда всё это можно реализовать одним, с помощью свг спрайта. Да и не нужно дублировать картинку, изменяя только ее цвет. Все это меняется через css.
>>621323 Иногда требуются перфекционисты кстати, видел в вакансиях pixel perfect. Но вообще делается обычно хуяк-хуяк и в продакшн. Я как-то тимлиду говорю: "здесь вообще хуйня, хорошо бы все это отрефакторить", он такой: "хуевый ответ, давай накостыли тут, чтобы работало и побыстрее".
>>621371 Ну хуй знает, на самом деле, стоит ли ковыряться во всем этом говне. Я седону адаптивную наговнокодил и забил, поправил только совсем уж уебанские костыли. Все равно этот макет даже стыдно кому-либо показывать, у каждого первого он в "портфолио", лол. Потом наверстал более симпатичные макетики на флексах и прочих йобах и уже окончательно забил на верстку. мимо пердолюсь с реактом
>>621463 Ужасно, если честно. Да, осваиваю ЕС6 и реакт одновременно. После ваниллы очень непривычно, совсем другой уровень мышления нужен, хех. Думаю еще потом сразу ноду зацепить, уж очень интересно стало.
>>621454 Первые твои проекты в 95% случаев будут почти полностью состоять из верстки. Если заказчик в адеквате, то он попросит полный адаптив. И не просто адаптив типа, вот эта хуйня не влезает, править лень, уберу нахуй. А полноценный адаптив, когда каждый элемент видоизменяется на разных разрешениях, вплоть до полной транформации всей структуры. Плюс вся страница должна без перезагрузки при любом ресайзе втч мобильном ресайзе, идеально подстраиваться. У меня даже с хорошими навыками на разработку первых проектов ушло на процентов 40 больше времени чем планировалось. Оно ессно не оплачивается, потому что цену ты называешь сразу, исходя из личной оценки. Так что ты хорошенько подумай, действительно ли тебе лень. Чтобы потом бесплатно с горящей жопой не править кучу косяков.
>>621464 Вангую что не разбираясь в базе и мвисишках прыгнул на такую высокоуровневую йобу как реакт, вот и сложности появились. Какой уровень в нативе? Успел написать мелкую спа?
>>621444 >Все равно этот макет даже стыдно кому-либо показывать Потому не сверстал ни одного макета от академии, лол. Нет ни малейшего желания притрагиваться к этому говну как будто из 90-х годов.
>>621483 Ну мвс мне знаком еще с пэхапэ, а так я поковырял модульность, коммонджс вот это вот все. СПА не писал, только собственные велосипеды уровня стики хедера и слайдера. Хотел еще поуглубляться, но мне тут посоветовали сразу в реакт. Я и подумал: "а почему бы и нет?" Мне нравится, просто пока путаюсь вот в этих вот компонентДидМаунт, компонентШудАнмаунт и прочем. А ЕС6 охуенен, никаких тебе var _that = this и прочей ереси.
>>621514 Только теоретически, я меньше недели сижу. >>621512 А зачем ты контейнеру прописал одновременно width и max-width? Текст выезжает, кстати. Вообще то, что ты сделал можно и без медиа-запросов оформить. Вернее даже нужно, у тебя сейчас фактически простая резина, только без резиновости.
Анон, подскажи, как стать top-tier во фронтенде? Вкатился пол-года назад, осилил базовую верстку, jquery и реакт с экосистемой, написал пару приложений. Но нету чувства собственной охуенности. Куда идти дальше, где брать вау-эффекты? Смотрю в сторону d3, что еще? Думаю, что смог бы закодить любое говно, но подводит чувство прекрасного. Неужели надо вкатываться параллельно в дезигн? мимовоннаби фуллстек
>>621521 Спасиб, анон, переделал. Кстати, как раз сейчас всплыла хуёвость той идеи с абсолютным позиционированием управляющих иконок относительно label'a. Завтра подправлю это, да и доведу таки хоть что-то в своей жизни до ума и запилю мобильную версию. Всем спокойной ночи.
>>621570 Да ладно, шучу я, профессия резиновая, влезут все. Хотя ладно, не будем начинать этот срач, который начинается в каждом втором треде, он уже всех заебал.
Четыре часа проходил "Сетки", думать сегодня больше не хочу. Такое ощущение, что там костыль на костыле. Утешьте меня, скажите, что флексы логичнее, чем флоаты.
>>621535 Ваш стрим полностью иллюстрирует то, как я сам пердолился с вебпаком и сборщиками (дольше, чем с самим реактом), лол. Олсо, поясните, почему вы именно так запускаете? Неудобно жи, я через вебпак-дев-сервер запускал. >>621689 Флексы обширнее, по-началу непривычно.
>>620070 >Так что, друзья, не унывайте, если ваша жизнь идёт по синусоиде. В какой-то момент всё может OCHE хуёво, но всегда после этого наступает улучшение и профит. Ебашьте флексы, собирайте спрайты, посылайте неадекватных заказчиков прямо в лицо, ТОЛЬКО ФРОНТ-ЕНД, ТОЛЬКО ХАРДКОР. Бро, у меня все очень хуево в жизни, вот недавно вкатился на работу фронтом-джуном. Но чувствую, что пиздец как сложно идет, нет какой-то предрасположенности у меня к программированью, что ли. А фронт-енд по большей части из него и состоит. Я много учусь, но иногда хочется просто заплакать и бросить это дело, иногда прямо на работе. Может у кого найдется для меня совет?
Бле, чет даже пригорело. Я много что не понял из курса "Сетки", в частности обсирался с испытаниями, на одно из трех вообще скопипастил решение. И это при том, что я вебинар уже посмотрел, где все это разжевывали. Ну ключевые понятия запомнил вроде распорки, псевдораспорки, клирфикса, центровщика и прочее.
>>621535 Если таки доделаете, вбросьте ссыль на репо в тредик, пожалуйста, интересно посмотреть. А то лагающий лайвкодинг у меня вызывает приступы ярости, пойду лучше свой кулькулятор пока писать. >>621708 Нормально. Или ты хотел за день-два освоить основы (а это именно сновы)? Сверстаешь свой собственный кривой барбершоп - все станет ясно.
>>621700 Мне это не то чтобы не нравится. Мне нравится визуальная часть, нравится верстать, очень люблю когда из кода появляется живая и красивая страничка. Но вот когда я вижу огромный проект и кучу непонятного кода в нем, мне дико становится грустно, что я ничего не понимаю в этом. >>621701 Я 6 лет на образование потратил, но так и не получил его. Я знаю, что это не мое, но хотел просто получить эту сраную бумажку и заниматься уже чем хочется. Ну и так все хуево очень - ни друзей, нихуя нет. Еще куча проблем со здоровьем и долги по деньгам. В общем, тред ни для того, чтобы здесь сопли распусктаь. Но просто я за фронт держался как за ниточку последнюю и горько будет, если она оборвется.
http://codepen.io/anon/pen/xOgWmE?editors=0010 Аноны, функция, присвоенная событию window.onload и window.onresize, срабатывает только один раз. При этом, когда я присваиваю им анонимные функции, всё работает нормально. Что я сделал не так?
>>621725 От тебя зависит. Можно и за пару недель освоить и пойти фрилансить через знакомых или даже на апворке, если знание языка позволяет. А можно как я, второй месяц барбершоп с седоной верстать.
>>621716 Да хуй знает, куда уже идти. Мне 23 года уже, начинать с нуля учить что-то некогда особо. Деньги нужны, чтобы жить, чтобы здоровье поправить (зубы), чтобы комнату снимать. Вся эта мантра про "занимайся что тебе вставляет" работает если ты живешь в развитой стране с высоким уровнем жизни. Вот я в школе сочинения по литературе охуенно писал и учительница меня хвалила постоянно и говорила, что у меня талант. А потом меня батя с мамкой на матфак засунули и все пошло хуево. А куда с литературой сунешься? В журношлюхи разве что или копирайтеры. А я копирайтил немного, никакого творчества там нет это вообще пиздец какой-то. Вообще хочется взять с собой что есть нихуя и уебать куда-нибудь на край света, подальше от всех.
>>621733 Да что-то мне кажется даже если я по 14 часов в сутки буду учить хуй что за 2 недели получится. Там же еще и опыт надо набрать где-то, нельзя ж фрилансить только выучив теорию =/
>>621727 Присвоил функцию без аргументов и всё заработало. Но так как-то неинтересно. Хочется с аргументами. Это возможно малой кровью, или стоит смириться?
>>621742 Вряд ли у тебя получится по 14 часов в день, тут нужна просто колоссальная сила воли. Даже я, не учась, не работая и сидя на шее у мамки в свои 19 лет, неторопливо верстаю ну максимум по паре часов в день, а остальное время страдаю фигнёй.
Насколько плохая идея упороться по-хардкору и поставить линух, если я типичный виндузятник? В шинде жуткий пиздец с командной строкой, ни с гитом нормально не поработать, ни с директориями.
>>621770 Серьезному фронтендеру не грех вложиться в покупку мак мини, так как в итоге получится стабильная система с фотошопом и всеми плюсами командной строки линукса, даже лучше, потому что zsh так то поудобней баша для разработчика.
>>621781 Ты просто никогда не пытался разобраться в готовых хардкорных проектах, где разметка в том числе может идти через пыху. А пхпшторм это мощнейший инструмент в котором все есть изкаробки.
>>619258 (OP) Недавно начал заниматься версткой. Собственно, верстаю макет, с помощью бутстрапа. но вот незадача. 2 блока стало на место, как и текст в оных, а с 2 другими что-то невнятное. vertical-align не помогает, как и text-align В документации по бутстрапу ничего по сабжу нет
Варианты решения 1.Для каждого изображения задать фиксированную ширину\высоту, дабы не было таких съездов 2. ??
Так же проблема с позиционированием вот этой полосочки. По сути, она должна находится по середине, именно полоска, а не ее начало. Т.е margin 50% не прокатывает. Display: inline (inline-block) Тоже не прокатывает. Text-align:center тоже не прокатывает.
Как решил проблему? На глаз стал подбирать ширину, вышло около 46-47%(маргин-а). Но вот так вышло, что при сжатии, она совершенно идет по пизде и не соотносится с текстом.
Я ньюфаг, все через костыли, но все же. хотелось бы получить ответ от опытного верстальщик-куна как бы он эту проблему решил.
Собственно , разобрался. Макет кривой и картинки не 1 размера, соотв. надо каждую картинку подгонять к 1 ширине и к 1 высоте, иили подгонять под каждую отступы для текста. Поэтому дело в картинках.
Там дальше какие то круги будут, посмотрел, они хотя бы одинаковы.
>>621735 Хватит сопли на кулак наматывать. В африке вон кроки вообще без интернета сидят, спидами болеют и пухнут с голодухи. А у тебя есть компьютер, мозг две руки и ноги. Зубы можешь вылечить бесплатно, а что не лечится - выдерни, вставишь потом. Для карьеры фронтэнд-погромиста тебе не нужно 32 зуба. Инфантильный ты вообще какой-то. Уходи
>>621849 пишу псд с гугла, осталось еще 3 колонки. Дальше быстрее пойдет, хотя, только в футере будут проблемы, ибо там ебучие формы с их ебучими дизайнами вот как это все было >>621787 >>621793 >>621826 >>621815
>>621850 Зря ты сразу бутстрап поставил, это же лютое говно, предназначенное для хуяк-хуяк и в продакшен. >>621852 Советую накидать основную разметку сегодня, без особого упарывания наименованиями и прочим, завтра светлым взглядом пофиксишь.
>>621852 Я когда интенсив смотрел не размечал с ним этот гейшоп, там все просто, вот с техномартом возник затуп, ибо там реально сложно. Я тогда не знал про бутстрап, но все же, даже с ним тяжко.
>>621854 Почему лютое говно? Сидеть и вручную страдать хуйней?
По моему очень удобно. Да и никто не заставляет использовать его на полную, ты всего лишь можешь сделать сетку или,скажем, кнопку какую, или пошаманить над адаптивностью
>>622050 Мне кажется потому что setTimeout срабатывает только один раз. У тебя один раз отрабатывает функция. А потом уже не работает, несмотря на то, что ее вызывает событие onresize. Попробуй без таймаута запустить.
>>621951 >а что плохого ? Плохо то что бутстрапщики в итоге перестают развиваться в плане верстки, делая элементарные макеты напихивая кучу левых классов. В итоге во первых теряются знания, любой верстала делающий все ручками по знаниях уделает бутстрапера с разгромным счетом. А именно знания чистого хтмл+ксс спрашивают на собеседовании в контору уровнем выше "Делаем сайты у Петровича". Во вторых, что следует из первого, если будет заказ на чистую верстку, а за такие платят больше ибо там уровень и сложность повыше, то ты на нем тупо обосрешся. Потеря заказчика, денег и уважения к себе.
>>622114 мне наоборот показалось легче. >>622113 >чистую верстку.
А как нормально тогда сделать сетку? В интенсиве у него все FLOATами, что, уместно только в случае с тем же гейшопом, в том же техномарте (другой макет) это совершенно не прокатит.
>>622113 >верстала делающий все ручками по знаниях уделает бутстрапера
сука, проиграл с этой маньки. Работодателю вообще похуй умеешь ли ты там в адаптивную верстку или нет. Для него главное бутстрап, но тебе маня я желаю удачи.
>>622126 Лол. Окей. Давай поиграем с тобой в игру. Как ты думешь, сколько мне заплатили за чистую верстку одной страницы, состоящей из менюшки с дропдаунами, баннера, слайдера, двух блоков новостей и футера? Ессно что делал я ее по БЕМу, с минимумом классов, делением на отдельные блоки со своими стилевиками, идеальная адаптивность, изменения при ресайзе етц. От тебя требуется 2 вещи. Цена которую заплатят за такую страницу на бутстрапе, и цена которую заплатили мне.
Я не он, но все же, думаю около 5-8к рупий. Прикол в том, что результат на бутстрапе будет такой же ( плюс минус) , но ценник хз. Искренне не понимаю, почему хотят именно чистую верстку, за пару тройку лишних килобайт платят меньше или что?
>>622119 >А как нормально тогда сделать сетку? В интенсиве у него все FLOATами, что, уместно только в случае с тем же гейшопом, в том же техномарте (другой макет) это совершенно не прокатит. Если ты задаешь такие вопросы, то советую тебе о бутстрапе забыть минимум на 2-3 месяца. мимо
>>622129 мляяяя, вот именно из-за таких петушков вроде тебя, я перестал сюда заходить. Помню послушался одного петушка вроде тебя, и в итоге обосрался потом, но сейчас у меня все шикарно, и я бы советовал не слушать подобных петушков в этом треде, как этот даун. А еще лучше дам такой совет новичкам. Вообще не заходить сюда и учить самостоятельно без всяких подсказок. Потому что подобные петушки >>622113 только подосрут вам. Вот например сейчас начал жалеть, что зашел сюда в надежде, что тут все поумнели, но я как всегда ошибся.
>>622131 >Искренне не понимаю, почему хотят именно чистую верстку, за пару тройку лишних килобайт платят меньше или что? Ты не понимаешь почему некоторые ставят в приоритет качество кода?
>>622138 Качество кода? Смотри, код то 1, вопрос в другом, будет ли там 3 класса или 1. Естественно, все нормально размечено и т.д. Так код может быть качественным и с бутстрапом и без него.
>>622139 Если коротко, то любой проект больше лендинга, со сложными компонентами и претензией на реюзабельность на бутстрапе взоврвет пердак всем в проекте. Чистая верстка в этом плане куда гибче и качественнее, особенно в умелых руках. Если подольше, то вот тебе чтиво первая ссылка в гугле, но мне лень искать что-то еще, да и вроде мысль переданаhttps://gist.github.com/iAdramelk/d328b73c72cab92ef95f >>622141 >А трахаться с position как-то не очень. Лол. Дружище ты видимо в сетках вообще не шаришь. А ведь это фундаментальная вещь. Мой тебе совет, подтяни тут знания и сверстай парочку макетов своими руками. Не понравиться, перелезешь на бутстрап, дело твое. Это нужно хотя бы для того, чтобы на собесе не обосраться. Потому что спросят там тебя не о том как сделать сетку на бутстрапе, а о том как она делается стандартно. Поверь, после упоминания про табличную верстку или не дай бог position в контексте сеток, тебя выпизднут оттуда сразу по окончании.
Сука, какой же ты даун, пиздец. Бутстрап это просто набор готовых решений повседневных задач. Ты в любом случае придешь к подобным решениям, дабы сэкономить время на однотипных задачах. И я не вижу ни одной причины не использовать их, разве что у тебя свободного времени дохуя.
>>622155 >сайт содержит рандомно раскиданные блоки с информацией Поясни что ты подразумеваешь под этим, лучше если со скрином. За всю свою практику я позишн для сеток использовал только разрабатывая паралакс, ну и еще пару случаев, но то скорее даже не сетка была, а декоративное раскидывание блочков по блоку карты.
Не много куда, а лишь на небольшую часть специфичных проектов. Но бутстрап и не позиционируется как фреймворк идеальный для ВСЕГО. Понятное дело, что на каком-нибудь SPA он нахуй не нужен, но какой процент этих SPA от общего числа сайтов?
У меня вариант такой(как бы я делал) : 1. без бутстрапа. 2. для каждой картинки свой div , там вроде одинаоквые отступы, поэтому задам их и буду 1 за 1 размечать. Но, вангую , что то как обычно не станет и поплывет.
>>622161 может ты и прав. Нужно различать верстку сайта для контора %хуйпойми% , где нет особых требовании, просто чтоб КРАСИВА , НУ ТАМ НАРМАС БЫЛА и верстку в серьезной конторе, где с тобой еще человек 10 работают над каким то заказом, уровня сайта Тинькоффа того же(недавно была статья , как писали фронтэнд для нового сайта)
Напоминаю, что бутстрап использует устаревший подход с флоатами и инлайн-блоками, это в 2016-то. Нормальный человек, если будет пилить все с нуля сразу будет использовать флексы. Так что ни о каком повторении бутстраповских решений даже речи не идет.
Вы заебали, пидоры. Бутстрап это инструмент. Джиквири это инструмент. Реакты ваши, ангуляры и иже с ними. Инструменты подходят для определенных задач, делая их легче, решая какую-то проблему. А потом приходят петухи и спорят реакт вс ангуляр, бутстрап вс флехбох, жиквири вс подрочить сегодня на трапов. Идите нахуй.
>>622170 Суть в том, что внутри флекс-контейнера ты можешь выравнивать блоки как тебе хочется — в ряд, в колонку, с равными интервалами, с вертикальным выравниванием, с переносами и т.д. Дальше сам гугли.
Как я понял из интенсива по сеткам, флексы сейчас уже поддерживаются всеми нормальными браузерами исключая один ужас с синей буквой Е, версия 8 или 7 И в принципе по-человечески можно уже на флексах делать, а флоаты как бы устарели.
>>622173 >Разрабатывать второе мало кому светит из этого треда. Ну я тащемта и разрабатывал. Правда ебать корпорацией я б ту компанию не назвал. Так, софтовая фирма на 100 человек, работающая на биржу по продаже специфического дорогостоящего оборудования. >>622129 кун
>>622204 Это выбор определенного элемента по его номеру. Например, Дается список из трех li, вот :nth-child(3) будет действовать на третий ли. Ты курсы от академии не проходил что ли?
>>622204 >.el:nth-child(1) Класс + псевдокласс. Обратись к элементу под классом .el, который является первым в списке потомков. То есть находится на первом месте на своем уровне/в своем родителе.
>>622213 А чому такая несправедливость? Они так упирают на флоаты только потому, что сами овер 10 лет двигали блоки флоатлефтами, или в этом есть какая-то практическая ценность для ньюфага?
Я бы наоборот учил флексам, потому что в скором времени (2-3 года максимум даю) это и так будет стандартом. Флоатам тоже надо учить, но уже во вторую очередь. Типа смотрите, как деды верстали, вам надо знать для общего развития.
>>622216 Флоаты и инлайн-блоки все еще в ходу. Поэтому полностью исключать их было бы ошибкой. Кому-то попадутся заказчики продвинутые, со свеженькими проектами нацеленными только на целевую аудиторию, кому-то попадется легаси код или васян желающий "чтоб работало везде". К тому же, сверстав даже парочку адаптивных макетов на флоатах/i-b, к флексам подходишь как матерый. Сразу понимаешь все профиты и возможности. Это как сесть на велик за 1000 баксов после нескольких месяцев активного катания на ашанбайке.
АНаны, странная штука. Divы какого то хуя съежают вниз. Почему так может происходить? Падинги и маржины сверху снизу не задавал, дивам присвоено display: inline-block, должны как бы в одну линию выстриваться.
ПОЯСНИТЕ ЗА БУТСТРАП, ПЛИЗ это в помощь новичку или опытному? на этом и зарабатывают или нет? его вообще надо использовать или он только уничтожит все мои знания, которые я накопил за месяц???
>>622358 Это набор готовых компонентов, из которых можно быстро сваять сайтец. Помогает, когда тебе нужно сделать работы быстро и не-очень-качественно, а так же при разработке веб-интерфейсов, но это тебе пока не нужно.
Господа, философский вопрос. Делаю затычку для IE 9-, как написать - This site doesn't support your browser или Your browser doesn't support this site?
>>622421 Поддержка старых версий не нужна, с клиентом это обсудил. Сайт частично на флексах, хочешь, чтобы васян, зашедший с IE8 охуел от того, что всё распалось?
>>622418 Это называется «заглушка», лол. Пиши второе, это же браузер говеный, а не сайт. Только в более понятной формулировке — типа браузер слишком старый, вот вам ссылка на обновление.
>>622422 >>622423 >>622424 Его проблемы. Распадется, значит распадется, контент он получить сможет, просто в уродливом виде. Захочет не в уродливом, скачает новый браузер. "Заглушка" -- несостоявшийся подход из 2007. Сейчас так никто не делает.
>>622428 На инлайн-блоках и флоатах. Иногда пихать флекс - overkill, если можно просто прописать флоат. >>622426 Вот да, имел в виду именно это. Спасибо.
>>622431 Ты думаешь, тётя зина разбирается в браузерах и поймёт, что всё распалось из-за старого браузера? Твоя идея в принципе здравая, но заглушка всё же нужна. Пройду по золотой середине и добавлю кнопку, которая скрывает эту заглушку, если пользователю влом качать браузер вместо ие.
>>622432 >Иногда пихать флекс - overkill, если можно просто прописать флоат Нет. Флоат предназначен для обтекания картинок текстом, нахуя его использовать для чего-то еще? В чем флекс оверкилл?
>>622442 Смотри, есть ul - меню сайта. Допустим, как менюшка контакта, что слева от основной части. Там есть li, которая содержит ссылку на сообщения и цифру-количество непрочитанных сообщений.
Делаем флексами - li { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } Если непрочитанных сообщений нет, то ссылка уедет в центр li'шки, если память не подводит. Делаем флоатом. li { line-height: 60px; // вертикально центрируем текст } li .unread-messages { float: right; } Итого два правила против 4 или больше, в случае если нет непрочитанных и отсутствие багов.
чет читаю ваши сообщения и ощущаю себя тупым говном, которое умеет только одстроничники с текстом делать :((( зато знакомый просит сделать лендинг за мани, а я в душе не ебу как его делать надеюсь, что к новому году я что-то и научусь делать :(
> бутстрап Так ведь все просто: бутстрап обоснован, если нужна поддержка ие8+ или если вы клепаете говнолендинг - писать кастомные сетки на флоатах достойно премии дарвина. Все это не отменяет того факта, что начинающий просто обязан сверстать хотя бы какой-нибудь вшивый техномарт или седону на флоатах без использования сторонних фреймворков. Чтобы потом не возникало совершенно уебанских вопросов.
Поясните-ка мне. Проходил курс от "Специалиста", так там препод говорил о том, что p и li не обязательно закрывать. Такая же информация на вебреференс. Почему тогда все закрывают?
Посоны, у нас в компании 15 человек на фронтэнде сидит, а на бэке 40+. Так что подумайте, прежде чем хардкорно углубляться в жс тот же. Я бы сейчас выбрал пыху как профильный язык если бы начинал.
>>622475 Можно не закрывать, потому что браузеры пошли умные и закрывают всё сами. Но, с другой стороны, всё-равно при определённых обстоятельствах это всё может поломаться, так что лучше закрывать.
>>622478 Сейчас изучаю его на ходу, клепая сайт под ключ. И это пиздец, посоны, после няшного синтаксиса JS (не думал, что скажу это) синтаксис пыхи - блевотня. Жаль, что использование рельс неоправдано для простых сайтов с минимальным бэкендом.
>>622473 У тебя даже в таком варианте код на флоатах длиннее на строку, лол. Плюс flex-flow: row nowrap не нужен. Так что на две строки. И лишний класс не используется.
А за пункты меню, у которых зона клика не дотягивает до края сверху и снизу сразу нужно по ебалу лопатой бить.
А ещё такой вопрос, аноны. Как вы автоматизируете рутинную работу? Допустим создание кучи <li> элементов. Или множественное создание страниц. Втупую копировать код в новый файл и редактирувать? Вообще, какие средства ватоматизации есть во фронтэнде?
>>622501 Я, например, все блоки выношу в отдельные файлы и подключаю через препроцессор pug. Правда, не знаю, как буду со всем этим работать, когда вкачусь в бэк.
>>622439 >Ты думаешь, тётя зина разбирается в браузерах и поймёт, что всё распалось из-за старого браузера? Если поддержка динозавров в проекте не требуется, значит на таких теть зин априори наплевать.
>>622478 Причем здесь пэхапэ вообще, у нас здесь тред про фронтенд. Олсо, никто не мешает через год-два-три при желании обмазаться нодой со всеми причитающимися и стать полноценным бэкендером без распыления по технологиям (считай тот же JS, что и во фронте, только более вылизанный).
>>622552 Блядь, ты какой-то тупой, да? Если поддержка динозавров не требуется, значит на часть "платежеспособной аудитории" в виде 0.1% пользователей не поддерживаемого браузера 10 летней давности всем наплевать. Зачастую так и бывает. Если заказчик/работодатель захочет поддержку, то ты поперек собственного визга без всяких заглушек полетишь верстать под это доисторическое дерьмо.
Есть ли тут, кто уже что-то умеет? Супер-уровень не требуется, берёмся за 'простые' проекты. Могу предложить работу, не регулярную, можете рассматривать как подработку.
Верстаны, попытался недавно скрыть адблоком рекламу, а у той прямо в стиле элемента прописано visible: visibility !important . И я вот подумал, а неужели это панацея от адблока?
>>623288 В курсе. У меня addblock plus. Алсо, попытался скрыть через инструменты разработчика, си там скрывание элемента тоже не работает, только удаление.
Аноны, помогите пожалуйста, я знаю, тут много добрых людей по выходным.
В общем я прохожу вступление в ксс на хтмлакадемии, но завис на испытании https://htmlacademy.ru/courses/41/run/15. Тут у меня единственная проблема в том, что кексби продакшн на несколько пикселей выше чем в образце, но я из за этого не могу пройти испытание.
Кто знает, как опустить блок при помощи ксс? Хтмл код заблокирован.
Аноны, подскажите технологию, или плагин для Sublime Text, чтобы можно было делить HTML блоки на отдельные файлы, например, header.xxx, main.xxx, footer.xxx и потом подключать эти файлы в другом файле. Например, есть у меня index.html, я в нём пишу что-нибудь вроде:
include header.html <body> ... тут куча кода </body> include footer.html
Потом компилирую и он собирается в один index.html со вставленным кодом из этих двух файлов.
А то просто когда делаешь вёрстку из макета, порой, когда у тебя уже несколько страниц (главная, например, и пара внутренних) свёрстано и тебе нужно изменить что-то в подвале или хэдэре, то приходится копипастить код в нескольких файлах. А так можно было бы написать один раз и просто подключать во всех файлах, где он нужен. А потом просто скомпилировать.
Если нажать на 1 - идет на платный курс с названием базовый Если нажать 2 - начинает обучение, эмм тоже "базовый курс" или что это тогда? ведь там тоже базовые знания для совсем нулевых(как я)
или этот же бесплатный курс можно купить? не совсем понял.
>>623540 https://htmlacademy.ru/program Вот все курсы, где нет метки рубля - бесплатны. Где есть, там первые 5 заданий - бесплатны. Тебе сделали максимально дружественный интерфейс, а ты заблудился в трех кнопках, блять. Надеюсь тебя никогда не возьмут на работу.
>>623670 трудновато тебе будет. все-таки верстать самому и с помощью кого-то - разные вещи. тем более на первых порах нужно смотреть, как делается правильно, чтобы потом воспроизводить
подсмотреть я после работы могу, вот html с некоторыми косяками сделал, думаю с css также попробую, а там уже подсмотрю как правильно. Время очень ограничено, дома 1,5 - 2 часа только и успеваю посмотреть 1 видео интенсива. А на работе времени дохера, а в открытую нельзя.
>>623717 ну, если ты знаешь основы, то может и сделаешь. я вот прошел курсы "Специалиста", прочитал книгу по КСС, но бля, все равно не до конца понимаю. Курсы с книгой и реальность сайтостроения расходятся. Я знаю только основы, да и на курсах не делали мы сайтах на дивах.
Я курсы Кокодемии делал, мне понравились, единственное, что при разметке html не всегда еще вижу где стоит разбивать страницу на колонки, а где нет (например фичи: быстро, круто, дорого порывался колонками сделать, хотя нахуй не надо для последующей стилизации, а вот уже основной контент разбивать понятное дело надо)
В качестве мотивации напомню, что когда ты фрилансер-вебмакака, то твой день начинается с курения марихуаны и фапа на лоликон. вкатился в фронт-енд благодаря этому ИТТ треду за 6 месяцев обучения средней упорности
>>623789 До недавнего времени был psd-to-html макакой, такие редко получают хорошие деньги. За год работы у меня $2000 общего заработка. Сейчас расширяю квалификацию на php.
Знаю html,css,js,jqueryникаких фреймворков и немного php.
>>623815 Он же не сказал, что в месяц. А так, вполне реальная цифра за полгода. С учётом того, что за лендинг на вордпрессе там стабильно 35 бачинских дают.
>>623815 Статка. >>623799 Начал с html academy, интенсивов не смотрел, потом JS до уровня уверенного jquery-разработчика. Потом занялся всякими ништяками вроде препроцессоров, сборщиков и прочих инструментов. С этим вот уже начал вкатываться, пошел на тогдашний elance, выполнил пару мелких заказов, нашел почасовый за $3/ч, израильская контора, пишущая веб-приложухи на php. Потом начал потихоньку учить php, одновременно с работой. Вот сейчас делаю сайты под ключ. Правда, wordpress пока не освоил.
>>623833 Он самый. Более-менее, в переписку могу, разговорный - нет. Ни разу не говорил по скайпу с заказчиками, кроме пары рускоговорящих. Хотя бывают случаи, что я не понимаю, чего хочет собеседник.
Верстуны. Нужен человек на работу. Навыки - хорошая верстка, знание js и разговорный ингриш. Желательно молодой-обучаемый. Предполагается дальнейшая эволюция в фронтендера. Пишите свои скуйпы, телеграмы, дальше там расскажу.
>>623835 Внутренний. Хотя некоторым удобнее по почте или в скайпе. Да, проходил. На половину ответы гуглятся, Кстати, за каждый пройденный тест вроде бы дают 5% заполненности профиля, а это важный показатель.
>>623849 Вот меня всегда удивляло, разве можно живя в рашке подтянуть ангельский до свободного общения? Если ты не йоба-переводчик, конечно. Имхо только контакт с носителями можно себе это обеспечить. Я вот технический знаю на ок, научные статьи читаю почти не заглядывая в словарь. Но блять как только какой-нибудь телефонный развод в мурике на ютубчике смотришь, или просто общение молодежи, то все твои знания уровня. London is the capital of Great Britain оказываются и не нужны.
>>623849 >>623853 Пацаны, уточню, не нужен уровень королевы Елизаветы. Нужно понимать что от тебя хотят и сказать чем ты занят. Обсуждений преимуществ реакта перед ангуляром и наоборот никто не просит и не ждет.
Верстаны, как удалить плагин из галпа? Допустим, поставил я его, потом понял, что не нужен, и как-то нужно при помощи консоли убрать его из package.json и node-modules.
Самому пришлось отказаться от свг спрайтов из за этого. Но я посмотрел на других популярных сайтах, там не особо брезгают вставлять свг инлайного, несмотря на то что изображение не будет кэшироваться.
>>623884 Вставлять инлайного, если нужна манипуляция через css. (не кэшируется) Вставлять через <img>, если просто нужна статичная картинка. (кэшируется) Вставлять через xlink:href="sprite#name", если тебе нужно всё сразу и тебе похуй на всё, так как ты верстаешь для себя. (кэшируется)
>>623898 Использовал третий способ при работе с векторными спрайтами. Как раз сейчас проверял сайт на своём некроведре и всё работало. Так что я молодец, всё с самого начала работало норм. алсо, почему этот вариант считается по-твоему неприемлимым для вёрстки заказчикам?
>>623905 Не, просто щас с телефона, в поездке. Еще пару дней на связь толком выйти не смогу. А предложением заинтересовался, под все требования подхожу. Когда особожусь отпишу тебе, если конечно еще будет актуально, там уже можно и скайпиком/телеграмчиками обменяться.
>>623853 Пойди в fl/ в англотред. Если мне не изменяет память, там есть ссылки на ресурсы, где можно бесплатно пообщаться с носителями онлайн. >>623859 Пиши тогда [email protected]. Покажу, что умею. >>623855 Сложных макетов особо не было. Иногда попадаются с нестандартным расположением элементов. По js - уверенный jquery разработчик, лол. + десяток-другой библиотек на все случаи жизни. JS -
Аноны, выручайте. Нужен супер краткий и годный курс по хтмл и цсс. Взяли пхп макакой (ну в кодинге именно в самом коде я шарю, был опыт крестов и сей года 2 круглосуточного кодинга). Взяли практически по знакомству, собеседования как такового практически не было. Напиздел что есть знания верстки. А знаний то нихера нет.
>>623958 Просто берешь, копируешь весь код внутри свг картинки и вставляешь его в html. Надеюсь ты понимаешь, что тут спрайт не нужен, так как запросов небудет.
>>623968 Мне больше понравился тот факт, что в едже убрали парочку флексобагов, свойственных ие11 (типа непереносимости флекс-бэйзиса и минхейта), но добавили парочку новых (типа странного центрирования при использовании колумн-врап+жустифай:сентер). Майкрософт такие майкрософт.
>>623962 Ах, понятно. Мне фронтенд очень нравится, надеюсь что на уровне "знаю реакт" можно будет зарабатывать хотя бы на ежедневную порцию гречки с солью. От пэхапэ тошнит (я его знаю относительно неплохо).
>>623970 IE 11 - говно, он даже размеры паддингов в проентах не понимает. Не буду верстать под него ни за какие деньги, а на всех сайтах, которые буду пилить, буду добавлять фиксированный блок со ссылкой на нормальный браузер. Нужно сжечь это говно в огне.
Пацаны, как на js приятно связать элементы? Ну, то есть, вот есть у меня, положим, 2 дива (на самом деле их больше), и нужно, чтоб по клику по одному элементу (который кнопка) вылезала инфа из другого дива. На хтмлцсс знаю как сделать, а вот как на js?
>>623983 Не понял, при нажатии на одну кнопку, все другие нужные дивы должны разворачиваться, или на каждый див будет по кнопке? Если да, то чел выше сделал. Если же нужны все дивы одной кнопкой то: http://codepen.io/pidaraha/pen/XKpvQe Но я не уверен что это не говнокод.
>>624087 А то! Но это я так шучу. В хромоге самый удобный инспектор и JS-консолька. А для серфинга двочей лично я предпочитаю лису. Она милая и без анальных зондов.
Посмотрел я ру-фриланс помойки, пиздец конечно с версткой. "Значит так, нужно сверстать вот эти 10 страниц ie6+, пиксель перфект, адаптивно, респонсивно, мобайл ферст, вся хуйня. Готово должно было быть еще вчера епту бля! Плачу 500 рублей, если понравится как мне вылижут жопу."
>>624112 Для пользователя яндекс браузер очень хорош, по крайней мере, до последних апдейтов, которые стали гораздо сильнее кушать ресурсы. Для разработчика лучше использовать хром, так как в яндексе, например, нельзя уменьшать ширину окна меньше 800 пикселей.
Да я не видел даже ни разу это яндекс браузер, сирисли, меня все эти яндекс бары, браузеры как-то обошли стороной, но последние года полтора-два стал замечать этот их логотип везде. Очень агрессивно рекламируют.
Сам я на вивальди сижу, лучший хром сейчас как по мне.
>>624141 >Очень агрессивно рекламируют. Вся интернет-реклама в РФ (в частности среды работы), Майл.ру, Яндекс ведется просто очень агрессивно. Вплоть до того, что пишутся вируса, которые инсталлируют тебе в систему все это гавно и реинсталлируют если удалишь. Все рассчитано на неграмотность пользователя. У меня горит постоянно у родных всю эту парашу вычищать. Особенно дети хватают. Я считаю что нужно ввести на гос.уровне какую-нибудь хуйню типа запрета всплывающих окон/автоматической инсталляции программ от знаменитых оформленных компаний. Беспредел какой-то.
Не то что бы мне это было нужно, но странно, что не могу открыть ссылку из курса, пикрелейтед. К лисе, опере, сафари - открывает норм. Хром дефолтный, без дополнений. Просто интересно, что там по ссылке.
>>623923 >Пойди в fl/ в англотред. Если мне не изменяет память, там есть ссылки на ресурсы, где можно бесплатно пообщаться с носителями онлайн. Зачем всё так усложнять? Есть фочан с примитивным английским как раз для обучения.
Здесь аноны изучают верстку, базовый фронт-енд и обсуждают все, что с этим связано. Полноценная инфа по материалам в пасте, здесь только краткая выкладка базиса и основные ссылки.
Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты, перед тем как что-то спросить, погуглишь хотя бы минут 5 и прочитаешь фак/пасту. В противном случае будешь послан нахуй, и абсолютно заслужено. Совершенно идиотские вопросы, нытье и прочее - аналогично. Не говорите, что мы не предупреждали.
====================
КРАТКИЙ ФАК ДЛЯ НЬЮФАГОВ И ПРОЧИХ МИМОКРОКОДИЛОВ
>Можно ли вкатиться в randomAge.
Можно.
>Можно ли вкатиться без знаний программирования/матана/функционирования гипертекст протоколов/етц.
Можно.
>С чего начать? Что учить? Куда смотреть?
Внимательно прочитать ОП-пост, затем прочеть пасту от корки до корки. Подумать, надо ли оно тебе, перечитать все еще раз. Приступать к изучению материалов по порядку.
>Есть ли работа?
Была, есть и будет, устраиваются как версталой, так и джунами фронт-ендами. Верстала без хотя бы базового знания JS сейчас как мамонт, поэтому готовьтесь учить и Javascript. В любом случае он вам понадобится, если планируете развиваться хоть куда-то. Джун фронтенд, полноценный и востребованный на рынке, а не программист на джиквери - это спец, умеющий и сайтик сложный сверстать, и страничку оживить, и приложение на нативном сваять.
>Кто-то уже приходил к успеху/расскажите кулстори/кто-то уже работает/кто-то съехал от мамки/поднимите мне настроение и вселите надежду в себя/etc
Да, и не один а двое, азазазза, кхм.
Да приходили, и да, вряд-ли кто-то тут получает удовольствие от повторения одних и тех же слов в тысячный раз. Пожалуйста, избавь нас от этой головной боли. Хочешь мотивации/психологической зарядки/утешения – посмотри вот это
https://www.youtube.com/watch?v=ZXsQAXx_ao0
>Сколько времени займет обучение?
Плотно стоящий на ногах верстальщик с портфолио из 3-5 адаптивных макетов, но практически без знаний JS - 400+ часов.
Верстала с пониманием JS и портфолио - 600+ часов.
Фронт-енд джун с уверенной версткой, уверенным JS, умением в дополнительные техи/фреймворки/препроцессоры/либы/системы сборки/otherSkillName, своими пет-проджектами, в том числе наверстанным портфолио - 1000+ часов.
>Могу ли учить верстку/JS после работы по 2 часа?
Можешь но это вряд ли будет эффективно. Указанное время в таком случае можешь смело умножать на 1,3+.
>Слышал что для устройства на работу нужно портфолио.
Нужно, чтобы всякие эйчары могли убедится еще до отсылки тестового что ты что-то умеешь. Верстале для портфолио достаточно запилить самостоятельно пару макетов. Джуну фронту надо либо макеты с вменяемой клиентской логикой и безупречной версткой, либо какую-то приложуху.
>Подскажите хостинг/сайт/место где все эти проекты держать?
Для сверстанных макетов без логики или с клиентской логикой хватит и гитхаба. Гуглишь бесплатный хост для страничек от гитхаба - github pages(gh-pages). Иметь профиль на гитхабе вообще - признак хорошего тона, так что в любом случае пригодится.
>Могу ли я спросить что-то в треде?
Конечно. Но перед этим следует проделать следующие действия.
1. Подумать.
2. Погуглить.
3. Попробовать решить задачу самостоятельно.
4. Еще раз подумать.
Если решения все равно нет - спрашиваешь.
Задачу описываем четко, код показываем только в песочнице тут не экстрасенсы сидят нам нужно пощупать код, иначе никто не поможет Аноны с кодом в постах, на скринах, в архивах, сразу идут нахуй. Вас предупредили.
Дополнительно можно приложить скрины где показано, что работает/что не работает/как хотелось бы/как планировалось/етц. Плюс текстовые пояснения конечно. Оформите вопрос правильно - практически гарантированно получите грамотную и своевременную помощь.
>Почему фронтенд вообще существует? Есть же CMS/конструкторы-сайтов.
Почему существуют рестораны и кулинария?? Есть же доширак.
Дальнейшая информация для ньюфагов в пасте в конце ОП-поста. Там ВСЕ расписано, в том числе самый удачный по мнению автора алгоритм изучения основ верстки, есть тонна полезных ресурсов для разработчиков начального-среднего уровня и прочая годнота.
=====================
Cразу скажу, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup или HTML/CSS Developer называйте как хотите хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует, если конечно сможете найти такую позицию. На данный момент фронтендеру нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит. Только есть нюанс, материалов по бэкенду здесь в пасте представлено мало, если кто-то в будущем поделится – будем рады и включим в будущие редакции.
Работу находим в конторках и крупных фирмах. Конторки/студии - основное направление деятельности. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция там больше, в начале может быть сложно, скучно и относительно дешево. Помните о портфолио, оно просто необходимо, да и за время его создания руку набьете.
Дальше представлены первичные обучающие материалы в сильно сокращенном варианте, полные списки найдете в пасте.
http://dash.generalassemb.ly/
http://learnlayout.com/
http://htmlacademy.ru/ - ультрагоднота
http://learn.javascript.ru/ - по JS на русском лютая годнота. Годнее только Флэнаган
http://www.codecademy.com/
http://codeschool.com/ - тут платно, но есть бесплатные курсы, годные вещи про jquery и git
http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.
http://teamtreehouse.com - тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.
Для работы понадобятся текстовые редакторы или среды разработки, тут уж решать вам.
Текстовые редакторы:
http://brackets.io/
http://www.sublimetext.com/3
https://atom.io/
ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.
http://denweb.ru/put-veb-mastera_sod
Верстка по БЭМ
http://habrahabr.ru/post/203440/
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
Гайд от анона по гитхабу:
http://randomfederation.github.io/
Шпаргалка от Громова по гиту
http://nicothin.pro/page/git
Теория продвинутых курсов HTMLacademy
https://yadi.sk/d/Ka-aU3poqa8bM
Базовый интенсив за 2015 год:
http://nnmclub.to/forum/viewtopic.php?t=899131
Тот же базовый но посвежее, за 2016 год:
http://nnmclub.to/forum/viewtopic.php?t=999246
https://yadi.sk/d/3AhpPwHaq5Bwp
Продвинутый интенсив за 2015 год:
http://nnmclub.to/forum/viewtopic.php?t=900609
Дополнительные материалы к интенсивам, рекомендуются к ознакомлению.
https://github.com/tsergeytovarov/htmlacademy-basic-additional-material
Базовый JS интенсив за 2015 год:
http://nnmclub.to/forum/viewtopic.php?t=974803
https://github.com/o0/keksobooking
Используемые нынче технологии
https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.ez
Макеты для верстки, тоже от академии. Все из их рассылки, поэтому лучше бы тебе на нее подписаться. Ребята вываливают кучу годноты, хоть и относительно редко.
https://mega.nz/#!CtYGSCbB!3Y6fDxxL_N_LstGFPGjHrhXbIoNqk4BzmNjjEmk2jPc
======================
Все основная инфа и материалы здесь:
Обновленная паста, она же FAQ - http://pastebin.com/ytWW0UfU
Старая паста если кому вдруг понадобится - http://pastebin.com/tvvwC7uz
Прошлый тред