24 декабря Архивач восстановлен после серьёзной аварии. К сожалению, значительная часть сохранённых изображений и видео была потеряна. Подробности случившегося. Мы призываем всех неравнодушных помочь нам с восстановлением утраченного контента!
Здесь аноны изучают верстку, базовый фронт-енд и обсуждают все, что с этим связано. Основная инфа по материалам в пасте, здесь только краткая выкладка базиса и основные ссылки. Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты, перед тем как что-то спросить, погуглишь хотя бы минут 5. В противном случае будешь послан нахуй, и абсолютно заслужено. Совершенно идиотские вопросы, нытье и прочее - аналогично. Не говорите, что мы не предупреждали.
Заранее предупреждаем, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup или HTML/CSS Developer называйте как хотите хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует. На данный момент фронтендеру нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит. Только есть нюанс, материалов по бэкенду здесь в пасте представлено мало, если кто-то в будущем поделится – будем рады и включим в будущие редакции.
Так как стек технологий вырастает, то соответственно вырастает время, что требуется для обучения. С одного-двух месяцев до 4+, иногда до полгода, в зависимости от твоей обучаемости. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция там больше, в начале может быть сложно, скучно и относительно дешево. Помните о портфолио, оно просто необходимо, да и за время его создания руку набьете.
Дальше представлены первичные обучающие материалы в сильно сокращенном варианте, полные списки найдете в пасте.
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ. http://denweb.ru/put-veb-mastera_sod
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
=========================== Официальное обращение к тем, кто выкладывает свой говнокод в архивах и файлообменниках: >Идите нахуй. или >Используйте блять cssdesk или jsfiddle или даже jsbin. Делать тут нам больше нехуй, кроме как выкачивать css
То же касается умников со скриншотами. Если запили скрин и желаете получить внятный ответ – показывайте и код, а лучше оформите все в песочнице. В противном случае не жалуйтесь на реакцю.
В прошлом не ответили, спрошу в этом: Анон, а вообще какие перспективы роста в верстке? То есть вот сейчас мне 20, я начну изучать всё это, каким я в теории смогу стать через 5 лет? А через 10? К примеру, начать с обычной верстки, а через лет 10 стать востребованным веб-разработчиком возможно? А если мне приспичит ради интереса какой-нибудь крупный проект/стартам запустить, смогу? Всё в теории, естественно. Мне конкретно про перспективы и пределы роста хочется узнать. Да и образования у меня нет. Вот думаю, стоит ли целиком и полностью себя этому посвящать. Последний раз делал простенькие сайты, когда мне было лет 13. Тогда пиздец как интересно было, только вот инфы тогда на русском особо не было, так что забил.
Анон, вкатываюсь к тебе в тред в связи с отсутствием самодисциплины и усидчивости. Набрел на верстку пару дней назад и решил изучать, но смотреть эти интенсивы и выполнять задания, за которые дают ачивменты - нету сил, ужасно скучно. Буду пробовать от противного, брать макет и ковырять, параллельно гугля. Начну с небезызвестного барбершопа. Сколько опытному html-верстальщику на данный макет требуется времени и сколько посоветуешь дать самому себе? Как тебе план? Буду отписываться в стиле успешного марафонца.
Прочитал книгу по HTML и СSS, знания поверхностные, но суть понятна. Теперь нужно набивать руку и учиться на практике. Какой годный ресурс посоветуете и с чего начать?
>>377554 >Сколько опытному html-верстальщику на данный макет требуется времени Час, меньше часа даже, раскидать эту поебень по колонкам бутстрапа не составляет труда и тут кроется главная подъебка учебного макета, в реальной работе такие аккуратные макеты разбитые по колонкам встречаются чуть реже чем никогда
>>377615 А есть ли что-нибудь взамен барбершопа? Надеюсь, что буду примером для нюфанек, которые прокрастинируют годами и не знают с какой стороны начать. Если предложений более реалистичных сайтов, которые являются рутиной для штатного html-верстальщика не будет, то буду начинать марафон "учимся гуглить на ангельском и не только" с барбершопа. Старт девятнадцатого ноября.
>>377646 Специально для тебя , чтоб прочувствовать уровень боли, макет на котором я в свое время по неопытности дико сфейлился и сорвал все сроки https://yadi.sk/i/VskZEyyYkY8Gz 2013й год магазин одежды для толстых баб - реальная студия, реальный макет, реальный магазин, реальная боль 10 страниц страха и унижений в одном psd
Контент шириной 960 верхняя картинка тянется на весь экран
P.S. И это еще не самое корявое и убогое что я видел/верстал
>>377677 Другой анон Стесняюсь спросить: 1) что за куча невидимых слоев там? 2) верстка предполагала адаптив чтобы ты запилил им по десктопной версии? или фикс и по пизде должна идти карточка с бабой?
>>377765 Адаптива не было, там все 10ть экранов сайта в композициях слоев смотри + у дизайнера хуевая привычка не удалять мусорные слои которые вообще не использовались
>>377775 >как блядь с ним вообще можно было работать? Приходишь в офис садишься за пекарню, прибегает манагер говорит я тебе задачу в битриксе поставил, открываешь макет с окейфэйсом и работаешь. Она еще и из канады фрилансит охуеть неправда ли ?
>>377842 она едва ли не с самого основания этой студии там работала >что это телка была понятно Кстати там был дизайнер мужик, у него макеты уже не такие вырвиглазные были, что характерно
>>378375 Курсы на академии - это те же самые w3school или htmlbook, только материал собран по категориям и добавлениы задания, чтоб ты мог на практике понять как это работает. ИМХО, ненужно, но 300 рублей - это совсем не деньги, чтобы думать брать подписку или нет.
Ананасы кто делала барбершоп у вас переключалось меню? У меня почему-то все переключаются между собой, но если тыкать на "Главная", то он не переключает. Что делать?
Посоны, как вы учите языки программирования? Вот я недавно прочел курс на learn.javascript и по итогу смог написать лишь сраный калькулятор с использованием if и switch. Может есть какая-нибудь техника по запоминанию яп?
>>379139 Ты курсы на академии проходил или интенсив смотрел?
В курсах они пишут что можно подключить prefixfree например к странице. А на интенсиве упоминают например prepros куда встроен автопрефиксер, либо юзать таскраннер с этим самым автопрефиксером
Поддерживает какой-либо браузер то или иное свойство и нужен ли префикс можно найти в инете, например caniuse
>>377308 (OP) Котаны, когда-то задрачивал html, css, js, соснул на паре собеседований (в первом собеседовался на фронтендера, по js интервьювер обоссал меня с ног до головы), забил хуй. Потом задрочил C#, опять соснул, но уже на тестовом. После этого опять забил. Прошло много времени и ситуация изменилась (дико жалею о проебанном времени - чуть-чуть не добил в свое время, не хватило настойчивости, но что поделать). Насколько сейчас тяжело найти работу, на какие деньги можно рассчитывать в ДС-2 верстальщику/фронтэндщику начального днищеуровня? Стоит ли отдать $30 за codeschool, чтобы ознакомиться с jquery, backbone, angular, node? Годные там курсы по ним?
Котаны, помогите. Почему у меня блоки с классами .footer-row-1.1 / .footer-row-1.2 прилипли друг к другу и никак не реагируют на изменение свойств? Заодно можете обоссать разметку. http://www.cssdesk.com/Z35rS
>>379198 >Стоит ли отдать $30 за codeschool Не, не стоит. Можешь еще подождать и тебе там должны скидку дать - один месяц 9$, за один месяц наверное можно все пройти. Но курсы там простенькие, чтобы устроиться на работу их не хватит. Лучше читай книги самостоятельно и задачи решай, на этих сайтах кроме красивого оформления ничего нет.
>>379139 У любого сборщика есть плагин для этого, будь то грант, галп, или вебпак, так что можешь верстать без них, а плагин подключи в сборку, он сам префиксы добавит. autoprefixer
>>379277 Ну, я, в общем-то, так и подумал, пройдя курс по SQL. Скидку дают, если ты зарегистрировался, но не купил подписку? "Ты чего там затих, почему js-фреймворки не изучаешь?" Про книги - это понятно, но я бы посмотрел на общие моменты "в живую", чтобы получить быстрый беглый обзор, а потом сориентироваться.
>>379310 >Скидку дают, если ты зарегистрировался, но не купил подписку? Точно не знаю, но когда я прошел пару бесплатных уроков по js и забил на этот сайт, где-то через месяц прислали письмо что дают скидку. >"Ты чего там затих, почему js-фреймворки не изучаешь?" Да, лол, примерно так. >Про книги - это понятно, но я бы посмотрел на общие моменты "в живую", чтобы получить быстрый беглый обзор, а потом сориентироваться. Вся книга Кантора (learn.javascript.ru) построена на живых примерах, а также там в конце почти каждого урока есть задачки. Если так нужны именно курсы - попробуй codeacademy, там бесплатно, есть еще udacity, да тысячи их.
>>379412 ну и нахуй так делать? Скачал там шрифт, и получил кучу всякого гавна в придачу на свой комп. Спасибо тебе за амиго и тому подобное дерьмо. Как теперь это все удалить?
>>379410 нахер тебе скачивать шрифты для фотошопа? может для вставки на сайт все-таки? юзай гугл фонтс, если там нет шрифта - просто найди в интернете ttf файл к примеру и конвертни на том же фонтсквирелл для подключения
>>379470 Нужен был шрифт, чтобы размеры шрифта посмотреть. Потому что когда тыкал в фотошопе на буквы в макете, он их менял на стандартные и все летело к чертям. Позанимался версткой сегодня.
При наведении на что должен меняться фон блока? На сам блок или на элементы? Если на элементы, фон должен меняться только у них или у всей этой полоской?
Котаны, как вкатываться на работу? Изучить 100500 всякого говна на уровне второго интенсиа -> заполнить портфолио (сколько макетов хватит?) -> откликаться на все вакансии на hh.ru? Давно что-то не было историй о успешных устройствах ИТТ.
>>380233 Можно. Нажимаешь на иконку с эффектами на слоях. А затем выбираешь в списке shadow или что-то типа того. Уже и не помню точно. Но эффекты там наложены немного неочевидно. Часть придется брать из головы.
>>380620 >>380615 Я ньюфаг, хз В смысле у страницы фиксированный размер, не прокручивается вниз, надо чтобы элемент был в видимой части экрана около низа. В интернете советуют Position absolute bottom 0, но это не работает
>>380633 Сделал футер. Через margin и делал, но почему-то иногда сбивается и хуй знает как это будет выглядеть на другом мониторе. Лучше делать отступ в процентах, или в пикселях?
>>380624 Это стандартный футер, если страница не прокручивается, значит пили его нижним элементом. Это если я правильно понял. Можно задать и через абсолют, но тут надо смотреть, где располагается точка координат. Можно и через position fixed, но это уже петросянство.
>>380661 Кинь лучше изображение макета и что тебе конкретно требуется. Так наугад я тебе могу дохуя посоветовать, а оно может и не нужно вовсе. Что там за страница такая, у которой футер надо отрывать, при этом она не прокручивается?
>>380684 это для фиксированного навбара сверху, он у них через position:fixed прибит кверху, чтоб контент не залез под этот навбар в body сделан padding-top по его высоте
>>380692 Тогда я ничего не понял. Паддинг 60 надо сделать всем элементам, чтобы они не залезли под верхнюю панель, так? Ф12 показывает, что нижняя панель сделана через position: absolute; bottom: 0;
>>380724 >>380738 а нет я тебя наебал кажись, у .container задан padding: 60px 15px; чтоб он под навбар не залез, хотя в принципе можно и так и так С футером та же история
Аноны, которые делали "Nёrds". Меню прописывать надо ведь перед слайдером? В третьем слайде почему-то не влезает 3 картинка. Делал все по обучающему видео, но все-равно не влазит. Как быть?
А насчет этого что сделать нужно? Сейчас залью скрины моего макета и макета готового сайта, чтобы понятнее было. <br> прописывал, но все-равно не такой вид получается.
>>381277 ну очевидно же, что блок текста у тебя маленький по длине - надо больше длину прописать, а там уже на каких слайдах короче - там уже можешь <br> вставлять для переноса, чтоб отдельно для каждого слайда длину не корректировать
>>381279 ну и добавлю еще - у тебя цель не переписывать буква в букву все что говорят на видео - тебе надо понять суть вещей и учиться самому дописывать то что надо, чтобы заработало + научиться находить проблемы, в том числе с помощью инструментов разработчика, встроенных в браузер, которые помогают посмотреть код и какие стили куда применяются и еще кучу полезных вещей
>>381279 >>381284 все переделал, спасибо за помощь! Ну насчет макета "nerds" нет больше подсказок, как было в барбершопе. Дальше самому придется ведь думать.
</div> Я хочу применить к ссылкам "a" разные цвета фонов. Я пишу разную хуету по типу ".section-block .btn:nth-child(2) { background: black }", но это не работает. Подскажите пожалуйста как это сделать очень лениво писать отдельный класс для каждой ссылки.
Не могу сделать меню у Nёrds. Чувствую себя нубом 1 лвл. Пересмотрел уроки, полистал хтмлбук, посмотрел всякие ролики на ютубе. Киньте советов, что делаю не так.
>>381538 Класс nav-bar сделай inline-block. Корзинка - не картинка, а иконочный шрифт, я с ней долго проебался, пока нашел. Корзину сделай через :before. Как то так.
>>381615 Двачую этого. Если это один из твоих первых макетов, то все норм. Запили еще парочку, и сам охуеешь от того, какую хуйню писал. Но это собственно, и будет явным показателем твоего роста.
Посоны, сейчас прохожу курс на learn.javascript. Стоит ли прямо таки вызубривать все эти замыкания и рекурсии со стеками, перед тем тем как переходить к событиям и интерфейсам? Просто в следующем разделе все в принципе понятно, что и для чего используется. А вот во введении много лишней инфы.
>>381635 ну я сделал по примеру барбершопа свой макет, и Нёрдс уже будет вторым когда его сделаю. Нёрдс дается мне тяжеловато, но посмотрим что из этого выйдет дальше.
Анон, помоги найти плагин для браузера, показывающий структуру страницы. Он бордером обводил дивы, навы... очень хороший. По-моему в программаче видел, теперь того треда там нет. Да, и в пасту хорошо было бы его закинуть.
>>381938 Что-то похожее я видел. Плагин создает трехмерную структуру сайта, где каждый уровень вложенности - это как прямоугольный блок из которых складывается пирамида. Чем выше он по структуре, тем шире у него основание. Вроде как в интенсиве о нем упоминали. Но я, если честно, точно уже и не вспомню, а времени искать сейчас нет.
>>382122 Не слушай пидора >>382128 Такие штуки делают через line-height, поставь её у кнопки равной высоте кнопки и всё будет ок. А text-align только по горизонтали текст выравнивает
>>382145 ну да, она у тебя бесконечно типа тянуться будет. представь у тебя есть кнопка например по высоте 100px. Пока у тебя в ней одна линия текста все норм, ты можешь писать высоту строки равную высоте кнопки и все будет центрироваться норм. Но когда у тебя будет несколько строк текста у тебя будет конское расстояние между строками, поэтому высоту строки надо ставить как в фш прописано и задавать падинги
>>382157 Ты тоже даун? Я тебе показал, вставляй любой текст нахуй какой хочешь, в чем проблема? Алсо, если ты считаешь, что мультилайн кнопки разной высоты это ок, то ты точно уёба
Пиздец, джва года работаю версталой, таких идиотов как тут не встречал. При этом это не новички, а просто долбоёбы, которые думают, что знают лучше всех лол, зачем я только решил помочь
>>382157 а если сделать паддингами, а потом заказчик скажет уменьшить размер текста? будешь паддинги переделывать все? анон с лайн хейтом прав, так намного проще и правильней сделать, тем более кнопок с текстом на двух строках я даже не припомню
>>382168 что значит паддинги переделывать все? типа их там много
вот ситуация которую я обрисовал выше с доп текстом и изначальной высотой кнопки в 100 пикселей, что будет если высоту строки делать тоже 100 пиксельной
>>382018 Нет. Я с плагином заходил на любой интересующий сайт и нажимал на иконку расширения, и вуаля, все блоки обводились и вроде как выводились названия тегов, прямо на самой странице. В базовом интенсиве на 4-ом уроке практически это же было реализовано с помощью стилей.
>>382173 можешь показать двухстрочную кнопку из реальной жизни? где ты такое видел в принципе? и зачем предсказывать будущее и усложнять себе жизнь пытаясь предугадать что-то и сделать универсальную хуйню?
>>382173 Кстати, вопрос, а если я захочу сделать иконку рядом с текстом, то что мне делать в твоём случае паддингов? Как мне её выровнять по центру?
Поясню про иконку: не такую, чтобы бекграундом, а чтобы она сразу после текста шла, т.е. произвольной длины текст, скажем от 5 до 20 символов, высотой 30px, после него иконка произвольной высоты от 10 до 30 px, обрисуй ситуацию, как будешь её выравнивать?
>>382192 Нет, дружок, ты видимо новичок, поэтому думаешь, что нужно всё предсказывать наперед, но ты немного ошибаешься, хороший верстальщик/программист знает когда нужно что-то сделать наперед, а когда нет, и не делает это втупую. Ты этого не знаешь, т.к. не можешь показать пример двухстрочной кнопки, поэтому сосешь хуй и идёшь в пизду.
>>382192 кекнул ты видимо про принципы программирования не слышал, например про KISS куда уж вам дальше расти, если даже тут не можете врубится ни во что
>>382194 Что за хуйню я сейчас прочитал. Сходи на пару собеседований, да послушай что тебе умные дядьки говорить будут, если мне не веришь. В продвинутых компаниях дают изъебистые куски макетов, а потом заваливают вопросами типа, а почему вы этот блок сверстали так? А что будет если сюда добавить текст, а там убрать? А почему вы выбрали такое решение? А может это решение выбирают из нескольких вариантов будет лучше? А как это будет взаимодействовать с кодом. А что будет если что-то не подгрузится. Видишь ли, если ты не думаешь на перспективу, а просто лепишь наугад с мыслями "и так сойдет" то у меня для тебя плохие новости.
>>382210 Ну ты же сам сказал, что знаешь что иконка будет идти после текста и т.д. Я видимо не понял твои условия, либо ты нечетко их пояснил. Если запилишь скрин своих требований, предложу свой вариант. А иначе мы хуйней маемся.
Ну че там, где люди делись с 2 годами опыта работы в верстке?
Если бустрапа мало, могу еще с фэйсбука подкинуть скриншотик, где пацаны тоже юзали падинги для простой кнопочки "Регистрация" и у них после добавления лишнего текста с переходом на несколько строк ничего не расползается
>>382225 на ютубе по-другому. я думаю логика этого анона в том, что можно сделать по-разному, он это с самого начала сказал, хотя в принципе я с ним согласен, что прощё просто задать line-height чем высчитывать там какие-то паддинги
>>382237 так или иначе, даже на самом фейсбуке, который ты, или кто-то другой привел в пример, кнопки сделаны обеими способами (например кнопка лайка или создания сообщения/страницы сделана через lh)
>>382245 так или иначе, он сразу начал с оскорблений и его сообщение несло смысл типа так не делают надо как я говорю, тогда я в его манере начал объяснять ему в каком случае его решение не подходит, привел примеры сайтов где используется в том числе и такой подход, который описал, дал статью еще про переполнение и т.д. кнопки в несколько линий текста все же есть я ему кидал уже пример именно кнопок, вот еще пример сайта с такой кнопкой https://www.zendesk.com.ru/
к тому же в интенсиве, а макет с интенсива есть проверка на переполнение кнопок, поэтому логичнее это сделать падингом.
Не могу найти простую вещь. Нужен плагин для саблайма или ноутпад++ который конвертил бы текст в html. Если бы просто хоть теги <p> мог проставлять в абзацы, то уже хорошо. Онлайн сервисами не хочу пользоваться, не хочу чтобы текст как-то попадал в интернет до публикации.
>>382446 Делаю так: копирую текст в редактор, ставлю мультикурсор перед каждой строкой и набираю </p><p>, потом автоформатирование выставляет все тэги вокруг текста как положено. Правда нужно будет удалить один ненужный закрывающий тег перед текстом.
Анонисты, а стоит ли заниматься вёрсткой, если не планируешь делать дизайн? Ну то есть веб-сайты, их внешняя сторона, скажем, состоят из макетов и натянутой на них вёрстки и интерфейса. Но есть ли вообще смысл, если я не хочу рисовать. А только сидеть кодировать хтмл и ксс. Ну и джаваскрипт, но ему ещё научиться надо. Я имею в виду, а где же тогда макеты брать? Или только средствами вёрстки, получается, только сайты делать? Вы вообще делаете дизайн, посоны?
Дорогая редакция, как мне блять сохранить это изображение как на пике. Создаю дупликат слоя, тримминг на основе прозрачных пикселей, сохранить для веб, даю имя... Открываю - нихуя, просто белый фон и все.
>>383171 Посоны, такой вопрос, там три одинаковых дефиса такие как я выделил. В фотошопе три одинаковых слоя или как то дублируют себя и может по этому я не могу сохранить?
>>383180 Сохранить ты можешь т.к. криворукий, скачай avocode лучше И правильно уже сказали, такая хуйня делается через псевдоэлемент простым ксс в 3 строчки.
Цвет сделал, но вот дефис получился очень маленький, не кошерно выглядит. В макете он сдоровеный размером почти в 3 буквы. А у меня маленький. Посоветуй как увеличить.
>>383226 >7 февраля 2004 Сука ну ты тупой пидор >>383213 >>383218 Если ты сделал так, то просто дай псевдоэлементу color: colorname, а чтобы увеличить размер font-size соответственно, это же просто текст у тебя там внутри
А вообще надо было сделать это типо того: height 2px width 10px background-color colorname
И дальше уже позиционированием куда надо зафигарить, а самой li'шке дать паддинг слева
>>383261 Советую пройти ещё платные, а потом начать верстать макеты, больше тебе реально ничего не понадобится, если будут сложности просто гугли конкретную проблему
Аноны опытные верстальщики, нужен ваш совет. Работаю сейлзом в ДС3, выходит порядка 60-65к. Раньше получал 2k $ в месяц - меня устраивало более менее. Но в рашке походу таких светлых деньков теперь не скоро будет. Раньше занимался версткой работал несколько лет фрилансером (в период где с то с 2005 до 2009, но не очень интенсивно). Сейчас до хера чего поменялось, но тем немее запустил один коммерческий проект сделав его сам. Знания в вертке конечно нужно будет подтянуть и актуализировать, плюс без знания JS щас никуда. Так вот думаю, сменить сферу работы на вертску (в офисе поработать), а далее пойти на апворк. Есть перспективы в офисе получать не меньше моего текущего дохода? За 20 тысяч хуй сосать не могу себе позволить сидеть.
>>383534 Да какая разница сколько тебе? Сядь, учи, пиши код. Даже не задумывайся насчет невозможности вкатывания. Твой мозг так и хочет остаться в зоне комфорта: >25 лвл, я ничо нимагу уже >яж долбанный гуманитария, бу-бу-бу
>>383534 нет блин, ты уже старик полный, хах Ну че за дурь, возможно конечно. Минимальное ограничение что я видел было 30, и то я думаю если соображалка есть то пофиг будет (ну в разумных пределах конечно)
>>383544 на фрилансе судя по заказам надо или быть человек-оркестром (делать под ключ), либо минимум знать движки (wp, joomla, bitrix). Верстка и js там не шибко часто. А еще в русском сегменте прикалывает что стоит например тег верстка - открываешь, а там почти как под ключ
(на истину не претендую, ибо просто просматривал заказы, чтобы иметь для себя представление)
>>383638 Чтобы взяли хотя бы стажером, надо хоть минимальное представление иметь то. А ты еще нихуя не разобрал как я понимаю и уже на собеседование хочешь.
Парни, помогите. В общем делаю сетку нердс базового интенсива. Как видно на рисунке всё содержимое я пихаю в .container. И вот дошло до карты. Как мне её разместить? Так же пихнуть в .container в виде фона и сместить в минус? Извините если тупой или не правильно написал.
>>383747 ну, типа того вроде, только у тебя див не закрыт contact-us который вместо button надо a (так как без js должен быть переход на отдельную страницу по PE) ну и в блоке карты потом будет выше контейнера еще один блок с айдишником, куда ты карту свою интерактивную вставлять будешь в уроке по js
>>383758 Так там же, цитирую >- блок карты: по клику на кнопку «напишите нам» возникает модальное окно с формой отправки сообщения Нас ведь не ведёт на другую страницу. Ну до явы еще дожить надо.Спасибо.
>>383763 ну да, а что мешает прицепить модалку на ссылку? В 8 уроке будет расскажут тебе про Прогрессивное улучшение (поймешь про другую страницу) И не ява, а JS - это разные языки
Работаю в ВордПресс. Понадобилось поюзать классы, а они нихуя не работают. В чем может быть проблема? Все остальное пашет, а ебаные классы вообще не реагируют.
>>384843 Я точно не гожусь ещё. Ничего полноценного сделать не смогу, то есть того, что могло быть полезно.бред какой-то Хотел узнать когда стоить начинать проситься на работу.
>>384915 Берёшь, значит, и вырезаешь вертикальную линию с этой полоски, толщиной в один пиксель и репитишь по иксу, значит. я нуб, так что возможно говно совет
Ананасы, подвинулся к "продвинутому" курсу академии и сразу обосрался с понятием структуры html5. В общем я про эти ваши блять артикли section head footer и т.д Не пойму нахуй всю эту систему. Если в общем виде я правильно понимаю?
>>385106 картинка что-то не грузится Я хоть и только на базовом, но мне вроде понятно назначение этих блоков. В базовом об этом даже говорилось. Я так понял, что главное назначение, это хорошее считывание сайта ботами. А так, мне удобнее читать не сплошные дивы, а структуру с использованием этих, новых тегов.
>>385106 Напишу как я понимаю: Внешний блок не article так как article должен иметь смысл в отрыве от всего остального содержимого, а тут смысл частично утерян так как не понятно чей именно адрес, поэтому я бы сделал это секцией
Далее наш адрес это заголовок, так как семантические теги имеют свою иерархию то в принципе можно писать и h1, хотя и h2 тоже можно оставить
Далее адрес обычным параграфом бы делал, затем телефон ссылкой с приписыванием к адресу tel: чтобы можно было нажав позвонить и точно так же мыло только с припиской
Както так, на объективность не претендую, могу и ошибаться
>>385130 Вообще можно и простым дивом сделать, но типа у секшн хорошо бы чтобы был заголовок. Короче как сеошник скажет так и сделаем, всеравно стилизация по классу)
>>385106 Нет. Не правильно. Тут вместо артикл будет секшн, а все остальное - обычне дивы. Кроме h2. В книге Introducing HTML5 это неплохо прояснено. Можешь глянуть. Если коротко, то есть пару правил, которые помогают быстро распознать что есть что.
Навскидку вспомнить 1. Article или section практически всегда содержат в себе другие элементы и ВСЕГДА содержат в себе заголовок. Все что не имеет заголовка - див. 2. Section - конкретный блок сайта с заголовком. При верстке сразу становится видно, что вот у меня этот блочок под портфолио, этот под слайдер етц. По сути на секции и разбивают сайт при верстке. Вот эти все разделы в лэндингах - features, testimonal, portfolio, about us - чистешие секции. 3. Article желательно использовать по прямому назначению. То есть это могут быть статьи, документы, части документов, информационные блоки, комментарии, ссылки на статьи кстати тоже. Все что не подпадает под эту категорию можно смело лепить в section. 4. Section может содержать в себе article и не один, равно как и article может содержать в себе section. Во втором случае практически всегда мы говорим о делении конкретной статьи на подразделы.
Суть такова. Делал я как-то сайт для одного знакомого. Позвонил он мне вчера и сказал, что какие-то мудаки хотят получать некоторые данные с его сайта при помощи csv-файла. Прислали какой-то собственный шифр. Ну, там всё понятно, вот только с этими цсв я никогда раньше не сталкивался. Как это обычно работает? Как мне сделать, чтобы они могли этот файл загрузить?
>>385136 по спеке section не обязан содержать заголовок. но если автору книги удобнее жить в своём удобном мирке с обязательными заголовками внутри секшнов, а ты с ним согласен, то тогда всё ок. только другим не мешайте секшны без заголовков юзать.
Вот тебе с w3c инфа http://www.w3schools.com/html/html5_semantic_elements.asp The <section> element defines a section in a document. According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."
>>385226 Перевод слова typically тебя не смущает? Что он какбы не равен слову всегда. Так что возможны случаи использования и без заголовков. Ну и валидатор выдает отсутствие заголовка как варнинг, а не ошибку вроде бы
седня ночью снизошло верстка озарение, это получается же пздц не сложно же да? просто дивы создать/расположить - согласно макету поправить селекторами, вот и все
вопросики:
1) чтобы шаб растягивался в зависимости от размеры экрана - нужно достаточно указаывать размеры в %?
2) можно ли также указывать размер текста в %?
3) если ли какой нить док, где все селекторы разобранны на русском ну типо блок (отступ внешний/внутренний - такой селектор, местоположение - такой селектор, размеры - такой-то селектор)
>>385561 1) Оборачиваешь хедер в див обертку и указываешь ему свойство max-width, если хедер должен тянутся на весь экран делаешь его обычным дивом. 2) Можно. Но лучше его указывать в em и rem. https://learn.javascript.ru/css-units вот тут можно почитать 3) На html-book можешь прочитать про основные теги и селекторы.
Аноны, новый ньюфаг в треде. Планирую я, значит, заняться вёрсткой. Сижу на htmlacademy, базовые курсы прохожу. Потом перейду к продвинутым, а дальше надо будет покупать на торрентах интенсивы, я так понимаю. Но проблема в том, что родители меня гонят нахуй из дома через месяц-два. Первый месяц мне будет где пожить, а дальше надо будет как-то зарабатывать. Меня, ничего не умеющего, вряд ли возьмут макакой в какую-нибудь контору, так что остаётся одна дорога - фриланс. Да, я знаю, что там дикая конкуренция, да меня предупреждали, что ньюфагам там особенно сложно обосноваться. В связи с этим вопрос - как скоро я смогу перейти к, собственно, фрилансу? Смогу ли я через месяц заработать себе минимум хоть на хлеб с картошкой?
Всегда отталкивает, когда пишут, что нужно знать пяток фреймворков, лучше бы сразу писали что они юзают, а не разглагольствовали, хотя наверное это тупой эйчар решил так написать.
Ну а в общем нормальная вакансия вроде, а почему ты спрашиваешь?
Алсо, 8 часовой рабочий день это конечно не очень клёво, я люблю часов 6 чтобы был, но в целом это стандарт конечно у нас особенно в России.
>>386507 >Москва >12к >8 часов рабочий день >3 года опыта >десяток фреймворков Отличная вакансия. Алсо, насчет фреймворков, когда их используют ворох, варианта два: вакансию в самом деле писал эйчар, второй вариант - это очень низкопробная конторка, которая не могет в универсальность.
>>386507 >12к >3 года опыта Они будут ну ооочень долго искать человека на эту вакансию. На эти данные некоторые предлагают без преувеличения в 10 раз больше бабла.
Хах. Когда такое вижу у меня только пара вопросов: кто писал это вообще и под чем он был в момент написания. От 3 лет опыта фронт Москва и от 12к рублей, да эти вещи в одно предложение даже совмещаться не хотят. Небось отбоя от кандидатов нету лол
>>386832 Ну с моей (ньюфанской) точки зрения выглядит всё так. У боди есть стандартные паддинги и их нужно обнулить (в самом начале css), а у таблицы ничего не тройгай, она сама впритык встанет. body { margin: 0px; padding: 0px; }
Котаны, я вот прохожу продвинутые курсы и думаю, неужели скоро JQuery и прочие JSы в верстке совсем не будут нужны, а все эффекты будут делаться с помощью голово css?
>>387008 Ну, на codecanyon есть много всяких дизайнерских решений с кнопками и прочим, готовых из коробки. Берёшь кусок кода, херачишь к себе, и готово. Только там всё платно.
>>386177 Няша. Ебать, у неё стим акк. Вот жеж люди всё успевают и потрахаться и в игори поиграть и видео со своим проном залить на порнхаб и ещё жс задрачивать.
Аноны, что есть "сверстать макет"? Насколько я понимаю, есть дизайнер, онЮ в фотошопе, или где там, рисует дизайн страницы, как он видит чтобы "пакайфу есть жи" было. А задача берстальщика - открыть этот макет в псд-шке, и затем средствами вёрстки (хтмл + ксс) повторить, то что нарисовал дизайнер, ну а уникальные картинки и логотипы тупо вырезать и добавить.
Я правильно понимаю или нет? Что вообще кроется за этим "сверстать макед"?
в папке nerds/symbol-nerds/font/symbols-nerds.ttf есть этот файл. Я его установил, и что делать дальше? Я не подключал еще эти иконочные шрифты в вёрстке
>>387447 Иду нахуй мимо-тупая-мразь Реально, неужели вы все тут такие тугие пидоры? 4 блять человека не смогли понять, что в вакансии зп просто как плейсхолдер стоит, пиздец
>>387438 кек, а потом они сидят тут и ноют, что нету работы, наверняка смотрят вакансии, где написано что зп от 10к и думают, что это реально такая зп, а на деле просто, чтобы больше показов было так поставлено
Посоны, опять я к вам прибежал. Проблемка опять с дефисом как на пике, когда я делаю его через css и задаю большой шрифт дефису - увеличиваеться его толщина, прийдеться вырезать картинку? Может еще что то посоветуйте.
кто пользуется "Sublime Text"? Как сделать две колонки html и css, чтобы было как в brackets? В чем отличие у бесплатной версии с платной? Пользуюсь brackets, но смотрю много видео по верстке с "Sublime Text", и тоже решил попробовать.
>>387525 пхп это самый большой зашквар, который возможен в кодерстве, иди нахуй >>387529 Я тебе уже говорил как это сделать.
Можно ещё так: 1) Делаешь див нужной ширины, ему псевдоэлемент с дисплей блок, нужной высотой и шириной 100% 2) внутри дива спан с текстом "since blablabla", его выравниваешь по центру, даёшь z index и бекграунд колор нужный, чтобы он перекрывал псевдоэлемент дива. Вуаля.
>>387544 альт+шифт+2 Либо в меню view-layout-columns Брекетс полное говнище, юзай либо саблайм, либо атом. Отличий между версиями нету
>>387531 Псевдоэлемент это типо :before ? > высотой нужной, шириной и бэкграундколором А как его выровнять в строке? Не кипятись, ткни носом в пример какой нибудь. >>387530 Нищие хохлы.сэр.
>>387554 Короче проще сделать, чем объяснять http://codepen.io/anon/pen/PPrvZa Есть ещё другой более крутой способ, но сейчас влом уже делать, весь день ебашил на работе, заебался двигать пиксели
>>387597 На данный момент эта хуйня почти ни на что не влияет, скорее всего тебе нет смысла заморачиваться. Чисто для своего удобства можно юзать хедер и футер, например
>>387600 С другой стороны рано или поздно поисковики начнут учитывать логическую вёрстку, а люди, которым очень нужно, смогут пользоваться своими стилями или упростить обработку страниц (типа загонять их в читалку — ежели слепые люди, допустим).
>>387600 У меня на собеседовании в конторке на аутсорсе тамошний технический спец про это спрашивал. Я тоже сказал, что мол всю эту хуйню знаю, и даже решительно ему пояснил про отличие секшна от артикла, но мол, использовать только начинаю и без особого энтузиазма, ткак пользу в этом вижу только за счет улучшения читабельности кода. Он же мне заявил что моя информация устарела, что есть определенное влияние и на производительность, и на работу поисковых алгоритмов и еще по мелочи, типа жирный буст к читабельности у скринридеровпрограммки позволяющие слепым серфить инет, если кто не вкурсе. К тому же это просто хорошая практика вместе с следованием прогрессу. Вообщем я щас верстаю с использованием всех элементов, и очень этому рад. Всем советую.
>>387654 >что есть определенное влияние и на производительность, и на работу поисковых алгоритмов и еще по мелочи Он тебя жестко наебал, к сожалению Специалист по семантической верстке на яндекс конфе рассказывал, что это всё хуяня собачья, и да, единственный плюс для скрин ридеров, и то лучше делать через специальные стандарты это всё. Так что на данный момент практической пользы ноль, алсо это не прогресс, а регресс, вместо одного универсального элемента делают кучу бесполезных.
Ну что вы мамкины корзиночки и заводо куны, все еще зубрите? Честно признаться я удивлен что верстко треды до сих пор живы. Пол года назад выкатился от вас и с нуля поднял и раскрутил небольшой интернет магазинчик узкой но востребованной отрасли. На еду вполне хватает, думаю расширяться. Все это время параллельно чекал вакансии фроент эндов( про обычных верстальщиков даже говорить не буду). Ну что могу сказать, вакансии то вроде есть, но вот требуют в них все больше и больше. Сейчас в основном ищут фулстаков который и сверстать и натянуть сможет. Ну и по традиции хочу порекомендовать всем тем кто сидит и зубрит только ради заработка. Выкатывайтесь от сюда как можно скорее, вы зря тратите время. Идите лучше грузчиками работайте, там хоть карьерный рост есть.
Анонизмы, а с какого фига верстальщики вообще живы как класс? То есть есть дизайнеры, они как бы проектируют и рисуют сайт. Они ведь могут просто выучить вёрстку и не ябать мозги. А верстальщику учить дизайн это как-то сомнительно.
>>387739 Потому что в нормальных конторках над одним проектом может корпеть по 10 человек и больше. Там нужна эффективность, когда каждый занимается своим делом. Проект идет как по конвейеру, передаваясь с рук в руки. Пока один закончил таск на этот проект, может сразу же переходить на следующий. Сколько раз вам объяснять?
>>387684 Не знаю о каком ты видео, я про летнюю конференцию, но на самом деле ничего не изменилось даже с того момента, вообще с релиза хтмл5 ничего не изменилось в этом плане.
Анончик, я школьник, 10 класс, очень нравится разработка сайтов, от верстки(ничего не умею), до сео. Хочу задрочить фронтенд, заиметь какой-никакой капитал и вкладываться в светлое будущее в виде сдл и прочих статейников. Я опоздал?
>>387560 Ты, блять, гений. Четко все работает, спасибо. Догло курил и не мог понять почему :before лезет сверху на элемент. Я думал before стоят строго перед элементом, ну это потому что я туповат.
>>387837 Посмотри ещё второй способ, он тоже интересный. Алсо, для спана с текстом обязательно нужен position relative, т.к. он тоже влияет на взаимное расположение элементов, без него бы полоска шла поверх текста.
>>387678 Ты опять начинаешь ебучий шакал? >>387739 >То есть есть дизайнеры, они как бы проектируют и рисуют сайт. Они ведь могут просто выучить вёрстку и не ябать мозги. А верстальщику учить дизайн это как-то сомнительно. В манямире розовых пони и единорогов так бы оно и было, но мы увы живем в суровой реальности где дизигнеры ни то что верстать не умеют, даже по сетке свой говнокреатив разбить не всегда умеют, тем и живем
>>387889 Ничего себе. Значит, действительно, каждому своё. А вообще, много ли заказов, где надо не макет верстать, а самому креативить? Ну там, чисто средствами ксс только рисовать.
>>387897 не одного не было, зато иногда мудаки в png присылают и типа сам с этим говном разбирайся, таких надо посылать сразу быстро и решительно фрилансю из мухосранска миллилонника
>>387901 Ты где заказы то находишь на верстку? (Или ты не только вертску делаешь?) Просматривал заказики так там то джумла, то вп, то вообще подключ, на верстку и прикручивание плагинчиков на jquery мало видел.
>>387919 Помню, в первое пришествие в веб, в школьные годы ещё, лет десять назад, наткнулся на джумлу, подумал "говно какое-то этот ваш веб с этой оранжевой фигнёй" и забил. Мой соснический мозг правильно за джумлу рассудил или это крутая штукенция?
Аноны объясните как он увеличивает буквы на 18 минуте в #home h3 и h1? У него вроде даже не прописаны шрифты. Пытаюсь сам так же сделать, но у меня не получается. Размеры шрифта не меняются вообще.
Я учусь делать одностраничники и хотелось бы попросить вас скинуть тех. задание, дабы попрактиковаться. Что можете посоветовать в качестве наиболее подходящего языка для этого?
>>387919 С заказами разовыми не связываюсь, удаленно на всякие веб студии, просто потоком в течении месяца на тебя макеты новые падают Есть только одна проблема, у же 4ю контору скоро буду менять только за этот год, уже пишу это в резюме тупо как "фриланс", а то у следующего работодателя будут вопросы. За эту работу могу сказать только одно, где то через полтора месяца охватывает лютая скука и потеря мотивации, где то еще через месяц-два свистопляска с макетами дивами и прочими скриптами и погоняющий тебя через скайп менеджер заебывает окончательно и ты начинаешь косячить и приходится сливаться. А так работы дохуя на том же хед-хантере и для любого уровня, и платят более менее, ну для моей нищей мухосрани. >>388005 Хедер прилеплен слишком вплотную к верху Слишком дохуя пустого пространства везде и всюду Вертикальный ритм отсутствует как класс Ноут с вписанным в него макетом - you doing it wrong у дизигнеров есть куча готовых мокапов, гугли как это выглядит по людски В предпоследнем блоке текст над рукой оче уебищно выглядит, нужна либо другая картинка, либо сместить его куда то влево Футер вообще пиздец
И это я еще не дизайнер, так из накопленных за год верстки шапочных знаний. Тру дизайнер мог бы поливать говном этот макет часами
>>388053 что курить чтобы сделать менее вырвиглазный макет? на кого ориентироваться? что сейчас в тренде? где почерпнуть основы современного вебдизайна? гугл выдает хуйню, поэтому спрашиваю у тебя, няша
>>387815 Бамп вопросу. Есть будущее у веб-дизайна? Не перенасыщен ли рынок?
Возможно, лучше пойти в разработку мобильных приложений или SMM? Слышал, что гугл хочет сделать ранжировку по рейтингу автора, что всё катится в пизду социальных сетей и прочее. Не хочу лезть в закрывающийся гроб, посоветуйте пожалуйста
>>388053 Какого уровня верстка требуется, какие скиллы будут нужны? Можешь скинуть пример рабочего макета или хотя бы описать его, чтобы понимать уровень задач? В чем заключается ебля со скритами, нужно писать что-то архиебическое или просто подключить парочку готовых на jquery? Мне как раз тоже одна студия удаленку предложила, я срезался, что мол позже отвечу. И щас вот думаю ответить, но хз, хватит ли моих скиллов, или еще надо что-то подтянуть, чтобы не обосраться.
Верстаки, подскажите, открываю модальное окнок бутстрапа, при клике где угодно внутри него, окно закрывается. data: { toggle: 'modal', target: "#imagemodal", backdrop: "static", keyboard: "false" } бекдроп стоит, клики за пределами модалки не срабатывают, но нужно наоборот! Ибо как только я пытаюсь написать что то в инпуте модального окна, оно тут же закрывается.
>>388070 Прошелся по бесплатным урокам htmlacademy покурил доки sass и bootstrap вкотился в местную вебстудию где мне выпрямляли руки по мере возможности, потом уволили месяца через 4ре, с тех пор фрилансю >>388116 Уровня чтоб был пиксель перфетк и все не разваливалось во всех браузерах Мне пока хватало bootstrap, sass, compass и Jquery на самом блядь вводном уровне, все собираюсь глубже задрочить его и JS да все никак не соберусь, бабло и так платят, а после работы лень, ну вы поняли Вообще stackoverflow наше все не знаешь ответ на вопрос, смотри там кто то уже делал подобное
>>388072 Что курить х.з. приходит само в процессе ебли с макетами и общением с дизайнерами еще как то раскошелился и оплатил месяц codeschool у них как раз вводная по дизайну появилась тогда https://www.codeschool.com/courses/fundamentals-of-design могу их методичку с кратким пересказом скинуть оттуда Про тренды не знаю, когда сам делал робкие попытки вкатится в дезигн меня всегда тыкали в http://www.awwwards.com/ мол смотри как там и пытайся делать так же А так всякой хуйни по дизайну в интернетах дохуя, гугли и обрящешь
>>388703 >То же касается умников со скриншотами. Если запили скрин и желаете получить внятный ответ – показывайте и код, а лучше оформите все в песочнице. В противном случае не жалуйтесь на реакцю.
>>387841 >>387841 Я же говорю...Вкаааатываться. Пока я вкачусь профессия верстальщика окажется невостребованной, следовательно смысла сие дествие не имеет.=((
>>388663 Ну есть вот такая борода с картинками они как бы на разном уровне получаються. А на макете они стоят как по струночке , ихние центры на одной оси. Я вот за это спрашивал, как выстроить их центры по струнке.
На одной картинке скрин из фотошопа, на второй из браузера(стоит два плагина). И в макете и в css страницы установлен шрифт 16px, но почему-то выходит такая фигня. Разве размер шрифта не должен быть равен высоте символа?
>>388744 Решил и эту проблему. Шрифт сначала не менял, считая что разница в размерах будет незначительной или не будет вовсе, оказалось очень даже значительна.
Аноняны, как включить шрифты? Вот поставил я шрифты "Lato" , и как мне указывать это в дальнейшем? Я писал уже и font-family: 14px/18px 'Lato', sans-serif; ,и font-family: 14px/18px Lato, sans-serif; . Все равно не меняется шрифт. Так же когда мне надо указать в тексте "italic" или "bold". Мне уже смешно из-за этого, но не могу ничего сделать. Объясните тупому.
>>389334 Они у тебя на компьютере есть? Если не входят в стандартный набор бери, например, отсюда - https://www.google.com/fonts ТЫ ЧО, ИНТЕНСИВ НЕ СМОТРЕЛ???
>>377677 Каков пиздец, я бы после такого пошел бы продаваном каким-нибудь, лучше помогать наушники подбирать или даже мешки грузить. Блять, да что угодно лучше этого.
Решил сесть за продвинутый, посмотрел тот который в открытом доступе (ну и в шапке) и глянул их программу нынешнюю - есть различия: 1) появился отдельный раздел на флексбокс 2) раздел на тестирование производительности верстки
пропали разделы про js (я так понимаю связано с их запуском интенсива по js)
Решил полазить в интернете нашел только обновленный базовый (17.08-22.09.2015), но есть ли там различия не знаю так как еще не качал. А вот обновленный продвинутый и интенсив по js найти в открытом доступе не получилось.
Поэтому вопрос: господа, у кого-нибудь есть ссылки на обновленный продвинутый и js или хотя бы на один из них - премного буду благодарен.
>>389647 В продвинутом что указан в шапке есть 2 урока по Js. Сам интенсив по Js обещали выложить, но воз и ныне там. Насчет обновленного продвинутого я хз. Не думаю что это так уж критично. Флексбокс охуенно разучивается и сам, нужно только попрактиковаться. Инфы в нете навалом. Тестирование производительности верстки - уже интереснее да, но ссылок на него я не искал, ткак давно уже все усвоил.
Анон нужна твоя подсказка. На первом скриншоте с фотошопа я указал элементы, которые мне надо поставить на своем сайте. Я зажимаю контр, и объединяю слои и после преобразовываю в смарт-объект. Потом полученный слой я ставлю в стили. На втором скриншоте результат, но он очень отличается от фотошопа. Мне нужно как-то сдвинуть это правее, но у меня не получается. Что делать?
Антуаны, собираюсь удариться во фриланс, и чем скорее - тем лучше. Цель для начала - умение выполнять самые простые задачи, верстать говностраницы по макетам. Сейчас сижу на академии, разбираю базовые курсы, восстанавливаю старые знания. Затем перейду на интенсивы. Этих действий хватит чтобы достичь цели? Алсо, стоит ли брать подписку на html Academy ради продвинутых курсов, если я собираюсь в интенсивы?
>>390101 > Этих действий хватит чтобы достичь цели? Даже не близко >Алсо, стоит ли брать подписку на html Academy ради продвинутых курсов, если я собираюсь в интенсивы? Нет
>>390148 >Даже не близко Это печально. Шапку читал, но всё же, какой порядок действий посоветует анон чтобы прийти к минмальному успеху? Базовые курсы академии - интенсивы - работа с макетами - изучение JS. Такой порядок. Что ещё мне нужно?
>>390172 Только вот заказов на просто ленды во фрилансе, насколько я знаю, очень мало. Да и те слишком мощные. К ним после одного сверстанного макета не подступишся.
>>390172 Ты сделал меня радоваться. Я просмотрел несколько проектов, некоторые выглядят не слишком сложно, хотя много незнакомых нюансов. Поэтому трудно судить о необходимом объёме знаний. >>390177 Я, конечно, попробую покрафтить несколько макетов на пробу, прежде чем лезть в незнакомое болото. Только тут у меня и сомнения - хватит ли крафта макетов чтобы смочь затем в заказы или нужны принципиально другие знания, которых на академии нет.
>>388788 хуяришь их ссылками, делаешь одинаковую высоту, display: inline-block, vertical-align: top; ну и маргин всем задаешь одинаковый, ширину тоже. картинку впихиваешь при помощи background-image. и background-position каждому из них задаешь. извини, что долго отвечал
>>389114 я тут тебе простыню накатал, но случайно обновил браузер, и все нахуй стерлось. короче: во первых, !doctype ставь html. просто html. это уже стандарт, не нужно писать много всякой хуеты. html xmlns="http://www.w3.org/1999/xhtml" - в топку. пиши просто <html> 1) забудь id. в большинстве случаев они тебе не нужны. id нужны для того, чтобы накидывать на них скрипты и якоря ссылок. классы - твое все, id для быдла фрондэнда; 2) у тебя есть два блока: .container и #wrapper. по Id и классу этих блоков можно подумать, что они выполняют одинаковую роль. ты должен выбрать между блоком с классом .container или блоком .wrapper на деле это несущественно, какой класс будет у блока, просто у тебя два блока выполняют одинаковую функцию. #wrapper вообще не определен в стилях. значит, он тебе нахуй не нужен. кстати, пофикси .container, у тебя все нахуй съезжает, когда страницу ресайзишь. 3) блоки неправильно распределены, название блока #home - вообще неправильно, это все тот же header. 4) ты не видишь разницы между padding и margin. padding используется для внутренних отступов элемента, margin - для внешних. посмотри на свой блок #header. после него идет блок #home. во первых, объедини их в один блок, потому что это все шапка сайта. блоку задай background-color и все остальное, что у тебя сейчас определено в #home. во вторых, #header поставь margin вниз столько, сколько тебе нужно, чтобы #home опустился вниз. а вот у #home нахуй убери padding вверх, он там нахуй не нужен; 5)у кнопок не убран border; 6) запомни такую структуру. у тебя есть элемент, у него есть border. margin - отступ элемента, например, вправо ссылка на пример http://jsfiddle.net/oszis113/zbto39nh/. padding - отступ текста внутри элемента от border. старайся не делать margin-top (отступ сверху от элемента), это плохой тон (padding-top делать можно, это нормально); 7) на самом деле, недочетов много, мне просто лень писать дальше, я не тот анон, который хотел тебе руки вырвать, потому не буду дальше писать, он все остальное допишет
Это бы не было так смешно, если бы один хуй из академии, громов, не говорил постоянно, что за такое убивают ващет. Причем я читал как-то бложек этого громва, он так говорил еще задолго до всяких флексбоксов, имея в виду, что надо не пихать распорки, а ставить оверфлоу: хидден родителю. В интенсиве, правда, и про это тоже ни слова, лол, не говоря уж про флексы.
>>390533 Ой почистил бы ты лучше уши когда слушаешь, он имел ввиду что пустой элемент не надо в html вставлять задавая ему clear, а фигачить псевдоэлементом распорку. А в продвинутом он сказал что не надо когда пишем по БЭМ давать блоку вспомогательные классы в html типа того же clearfix а просто в стилях делать примесь.
У блочной верстки множество плюсов, но есть и минусы. Самый главный из них связан с обтеканием элементов (блоков, имеющих свойства float: right или float: left). Если такие блоки сильно отличаются по высоте, то следующие за ними в потоке HTML‑документа элементы начинают обтекать один из блоков.
Для «сброса обтекания» часто используется следующий принцип:
То есть вставляется дополнительный «сбрасывающий» блочный элемент, предотвращающий смещение последующих элементов (в примере выделен полужирным).
Этот подход имеет право на существование только в одном случае – когда невозможно указать ширину родительского блока. Если же ширину родительского блока указать можно (единицы измерения значения не имеют), то короче и правильнее опустить «сбрасывающий» блок, а для родительского блока задать следующие CSS‑свойства:
#content {width: [ширина]; overflow: hidden}
Есть похожие техники, связанные с использованием псевдокласса :after или свойства height: 0 – несколько менее удобные и красивые, на мой взгляд.
Анончики, я сейчас ебанусь. Помгите , запутался в трех соснах. Есть вот такая хуйня. <div class="midd"> <img src="images/linkin.gif" width="30px" height="30px"> </div> И к нему стайл .midd { width: 100%; display: inline-block; text-align: center; vertical-align: middle; height: 300px; border: 1px solid black; background: #a6b7d2; } Изображение которое должно быть в центре divа нихуя не становиться. Я если честно в ахуе. Я просто не могу понять почему не становиться. Бля, помогите.
А теперь мой вопрос. (смотрю 5 урок интенсива если что) Нормально будет выглядеть если в самом начале я создам 3 класса для span например .light {font-weight: 300} .normal {font-weight: 400} .bold {font-weight: 700}
А то бывает в одном заголовке 3 вида текста и их как то надо отбить. А так еще и просто в тексте смогу использовать.
Принес кое-что интересное. http://www.freecodecamp.com Сам только начал, но похоже что такие же как и на codecademy интерактивные курсы, но дополнительно входит в обучение участие в некоммерческих проектах.
>>391667 ломается при ресайзе. вся проблема в колонках. все три колонки фиксированной ширины => при ресайзе всегда будут ломаться. тут выбирать надо: 1) кнопка фиксированной ширины, у колонок максимальная ширина указана, они ужимаются. проблем при ресайзе быть не должно. 2) все фиксированной ширины, при ресайзе ломаются, лечим media-queries под разрешения экрана.
>>391724 ресайз - изменение размеров окна браузера. сайт начинает ужиматься при уменьшении окна. примерно то же самое происходит, когда ты заходишь на сайт с планшета или мобильника. сайт ужимается под размер экрана устройства.
чтобы сайт выглядел нормально при разных расширениях, его делают либо резиновым, либо адаптивным (либо резиной с адаптивом, что многие порицают). резина - большая часть значений в % высчитывается. адаптив - медиа-запросы в css. почитай про медиа-запросы и адаптивную верстку
>>391730 муторно, долго, получается, что некоторые значения ты делаешь в процентах, а некоторые в пикселях, потом в медиа-запросах все переопределяешь итп. удобнее сделать адаптив - выглядит лучше, легче в работе итп
>>391737 нахер? можно сохранить страницу с данными + картинки + css. можно парсить картинки с сайта. скачать шаблоны нельзя, так как они на сервере собираются, и ты получаешь уже готовые html и css файлы. а на сервере это могут быть какие-нибудь jade и stylus файлы.
>>391741 ну я хочу у одного сайта скачать html, css и js файл, чтобы посмотреть код через submit text 3. Потому что через просмотр кода неудобно смотреть.
>>391832 Я почти только что устроился на работу вертальщиком с окладом в 60к. А нужно было всего-то убрать слово "Junior" из резюме на хх. До этого много месяцев вообще никуда не брали. Не 3к$, конечно, но лично для меня это больше, чем дохуя.
Привет, ребята. В верстке и оформлении мне приглянулся такой способ работы <div class="slide"> <div class="title"> The title is here </div> </div>
А потом в CSS цепляюсь вот так: .slide .title { bla-bla: bla; }
Это позволяет не писат ебал ее рука в духе .slider-slide, .slider-slide-title соответственно. Вообще очень удобно, хотя бы оттого что не нужно выдумывать длинные названия. А еще в этом проще ориентироваться.
А теперь вопрос: какой велосипед я только что придумал? Хочу почитать побольше о таком способе, но в душе ниебу как он называется. Как называется такой способ верстки, анон?
>>400630 Это что то типа отношений между элементами. Если див с классом title не один , но именно когда он вложен в див с классом slide надо поменять какие то стили. Это норм практика. Ты ничего не изобрел. Почитай про селекторы отношений в css /
Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты, перед тем как что-то спросить, погуглишь хотя бы минут 5. В противном случае будешь послан нахуй, и абсолютно заслужено. Совершенно идиотские вопросы, нытье и прочее - аналогично. Не говорите, что мы не предупреждали.
Заранее предупреждаем, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup или HTML/CSS Developer называйте как хотите хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует. На данный момент фронтендеру нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит. Только есть нюанс, материалов по бэкенду здесь в пасте представлено мало, если кто-то в будущем поделится – будем рады и включим в будущие редакции.
Так как стек технологий вырастает, то соответственно вырастает время, что требуется для обучения. С одного-двух месяцев до 4+, иногда до полгода, в зависимости от твоей обучаемости. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция там больше, в начале может быть сложно, скучно и относительно дешево. Помните о портфолио, оно просто необходимо, да и за время его создания руку набьете.
Дальше представлены первичные обучающие материалы в сильно сокращенном варианте, полные списки найдете в пасте.
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/
Базовый интенсив за 2015 год:
http://nnm-club.me/forum/viewtopic.php?t=899131
Продвинутый интенсив за 2015 год:
http://nnm-club.me/forum/viewtopic.php?t=900609
Макеты для верстки, тоже от академии. Все из их рассылки, поэтому лучше бы тебе на нее подписаться. Ребята вываливают кучу годноты, хоть и относительно редко.
https://mega.nz/#!CtYGSCbB!3Y6fDxxL_N_LstGFPGjHrhXbIoNqk4BzmNjjEmk2jPc
===========================
Официальное обращение к тем, кто выкладывает свой говнокод в архивах и файлообменниках:
>Идите нахуй.
или
>Используйте блять cssdesk или jsfiddle или даже jsbin. Делать тут нам больше нехуй, кроме как выкачивать css
То же касается умников со скриншотами. Если запили скрин и желаете получить внятный ответ – показывайте и код, а лучше оформите все в песочнице. В противном случае не жалуйтесь на реакцю.
======================
Все основная инфа и материалы здесь:
Обновленная паста - http://pastebin.com/ytWW0UfU
Старая паста если кому вдруг понадобится - http://pastebin.com/tvvwC7uz