24 декабря Архивач восстановлен после серьёзной аварии. К сожалению, значительная часть сохранённых изображений и видео была потеряна. Подробности случившегося. Мы призываем всех неравнодушных помочь нам с восстановлением утраченного контента!
Верстка тред (#44 не проебывайте больше нумерацию)
Здесь аноны изучают верстку, базовый фронт-енд и обсуждают все, что с этим связано. Основная инфа в факе по материалам, здесь только краткая выкладка базиса. Ссылки на новые интенсивы в конце поста. Если нужны макеты из рассылки Htmlacademy - пиши об этом в тред и не забудь приложить мыльцо.
Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты перед тем как что-то спросить, погуглишь хотя бы минут 5. В противном случае будешь послан нахуй, и абсолютно заслужено.
Заранее предупреждаем, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup Developer хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует. На данный момент фронтендеру нужно учить больше. В частности продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит.
Соответственно вырастает время, что требуется для обучения. С одного-двух месяцов до 4+, иногда до полгода. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция больше, в начале может быть сложно и скучно. Помните о портфолио, оно просто необходимо, да и за время его создания руку набъете.
1. Первичные обучающие материалы в хаотичном порядке. Все можете не проходить, выбирайте то что нравится. Проходится за недельку - две вечерами, дает первичное представление что, как и почему, поймете нужно ли оно вам. Не обзательно дрочить от начала до конца по очереди, заебало одно, попробуйте другое.
2. Для тех кто прошел шаг 2 есть литература и много видео. Вероятно на этом шаге вы встретите много информации из шага 2, но гайд рассчитан на дебилов, так что повторение вам только поможет. На этом этапе можно смело начинать верстать и срать очевидными вопросами в тред. Поехали:
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ. http://denweb.ru/put-veb-mastera_sod
Обычная верстка: Внимание! Тут сделано с ошибками, но можно получить общее представление о том, как выглядит по шагам верстка http://habrahabr.ru/post/202408/
Тот же самый шаблон, но уже на bootstrap: Внимание! Тут сделано с ошибками, но можно получить общее представление о том, как выглядит по шагам верстка на bootstrap . http://habrahabr.ru/post/211032/
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов ссылки ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
=========================== Официальное обращение к тем, кто выкладывает свой говнокод в архивах и файлообменниках: >Идите нахуй. или >Используйте блять cssdesk или jsfiddle или даже jsbin. Делать тут нам больше нехуй, кроме как выкачивать css
ИТТ казах-кун который устроился вресталой в студию и решил уволится, чтобы устроится джуниором фронтом в интерпрайз в Agile команду.
Работаю уже там третий месяц, жопа горит, какие-то спринты, скрамы по утрам. Аус-токины, работа с апи,REST, код-стайл ангуляра, написание BDD тестов на кукурле, ели как справляюсь с задачами и долго. Но прогресс есть. зп всего лишь 1200$, но зато хорошую страховку навесили и беспроцентный кредит можно брать, такой вот бонус от компании.
Задавайте свои ответы.
Алсо, вышки нет,до этого работал в студии верстаком с цмсками, верстал абсолютами и прикручивал джиквери плагины лол, понял что деградирую и решил дропнуть ту работу.
>>351554 Прошел только базовый, через три недели пойду на продвинутый. Сомневаюсь, что с набором знаний двух интенсивов можно легко найти работу, время уже не то. Но мне оно и не особо важно, верстку учу пока что для себя. Доставляет. Безработному небогатому анону я бы платные интенсивы не советовал, ибо трудоустройство они не гарантируют, а стоят немало. Можно пройти их бесплатно, заменив наставника тредом или специальными форумчиками и гуглом. Ну а после этого верстать, смотреть нужные вещи на ютубе, курить жс, ну ты понел. Сотню раз это тут уже расписывали. При определенном упорстве такой план сработает.
>>351757 Ты меня извини, но наставника тредами в сообществе дефективных не заменишь. Единственное ценное, что есть в этих курсах - это по сути и есть работа с наставником.
>>351733 (OP) Зря ты так быстро создал новый тред, я намеревался сегодня полностю перепилить шапку и пасту, ткак они существенно устарели, а затем все это залить в новый, все равно там до бампилита было еще постов 50, что хватает минимум на день. мимо Оп прошлых 5 верстка тредов
>>351793 Нихуя лол, единственное что там есть ценного, это блять знания. Если у тебя голова есть на плечах - все переваришь и усвоишь, а че не поймешь - объясним. Если же мозгов нет, ну тогда и наставник не поможет.
>>351892 К твоему сведению - эти интенсивы я давно прошёл(платно) и усвоил. Ценной информации там немного. На уровне мануалов или Getting Started. А такие "мастера", как громов, не стесняются просто зачитывать слайды 9 это я в основном про продвинутый)
>>351896 Ты научился верстать любые сайты средней сложности без дрожащих рук, делать это адаптивно и пользоваться всеми теми инструментами, о которых они рассказывали?
>>351930 Тогда не понимаю в чем твои претензии. Не ну отчасти пониманию, ткак я проходил интенсив на торренте и на платил за него, то есть в качестве бесплатного источника он для меня был просто идеален и вполне полноценен. Но задача ведь в том и заключалась, чтобы научить тебя всему этому, а тонкости уже познаются на практике, на них не уходит столько времени и сил, сколько на базу.
>>351797 >>351797 Это фантастика, сынку.Я мечтаю про 5 баксов в день. Если бы все так и было, улыбка бы не сходила с моих губ. Пару лет изучал питон и джангу, пару месяцев назад сделал акк upwork и охуел от своего уровня инглиша и отсутсвия работы для джангиста. Понял что светит мне только фронтэнд и PHP.
Верстаны, пилю тут гостевуху для своей девочки в стиле фэйсбука, есть одна кнопочка и цсс к ней всё в первой пикче. Проблема в следующем - пилю <a class="gutton" href="#">Комменитровать</a>, то при загрузке страницы текст кнопки не отображается. Помогите ёпта.
>>352047 Один хер, проблема у тебя не в guttone. Как не отображается текст? Цвет сливается с фоном или его вообще нет? Сделай скрин из инспектора колонки вычисленных стилей для твоей кнопки.
А чет ржу с markup-developerov, пару месяцев к вам не заходил, так новую специальность родили. Причем гугл по запросу выдает одних хохлов. Вроде хуйня какая-то, но проигрываю.
>>352098 Мимо. Теперь чтобы продолжать работу тебе нужно написать красным маркером себе на лбу "Шерлок" и кодить только с включенной вебкой, дабы не забыть.
>>352069 Двачую. Благородные заморские колонизаторы знают, как правило, ещё и уеб-дизайн и им и зарабатывают, а вёрстка – обязательный к знанию побочный навык типа мытья унитазов для любого работника макдональдса.
Сук вначале верстка показалась довольно сложным делом, вот уже 10 дней дрочу и понял что нихуя сложного нет и не удивительно что верстальщих это специалист уровня ПТУ, надо кароче дрочить JS еще, тогда може на бакалавра претензия будет
Простите, только начал, очень ньюфажный вопрос. Как, блять, попасть точно по пикселям? Случайно подбирать? У меня только 10 попыток, и они очень быстро сгорают.
Котаны, в Нёрдсе карта должна по ширине тянуться на вю ширину экрана или или быть фиксированной под контент? Алсо, в базовом интенсиве рассказывают, как ее стилизовать или нет?
>>353494 >>353503 А в базовом рассказывается как вообще эту карту прикрутить к сайту, а то после первых 2 вебинаров даже не имею представление как это реализовать.
Верстаны, ай нид хелп. Сейчас пытаюсь научиться пользоваться фотошопом. Непонятки со слоями, можно на самом макете выделить слой и увидеть его на боковой панели? Начинаю искать слой на боковой панели, клацаю на него, на самом макете его не вижу. Понимаю что банальщина и вопрос полного нуба, но помогите, позязя.
>>353508 ты посмотрел "Фотошоп для верстальщика"? там рассказывается как работать с макетами
а вообще чтобы на самом макете выделялось когда на слой нажимаешь надо поставить галочку show transform controls или как-то так в меню инструмента move tool
>>353538 я не тот парень, к которому обращаешься, но нердс делал. Делал отдельно от навигации, так как при добавлении пунктов в навигацию я не хотел чтобы корзина оказалась в середине, а хотел, чтобы она так и висела справа. Ну как и кнопка входа в барбершопе
>>353508 Попробуй щелкнуть по нему с зажатим альтом, тогда на панели возле него появитсяили пропадет глаз, а все остальные слои, кроме выделенного, пропадут с макета. Но вообще лучше глянь видео в том же интенсиве по фотошопу, тебе их уже посоветовали.
http://www.cssdesk.com/FLBcJ Верстаны, объясните почему валидатор на 40 и 115 выдает:"Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections." Какие там требуют заголовки и зачем, лол, это очень плохо? Гляньте еще строки 91-107, особенно те кто делал нёрдс, я правильно понимаю, что 3 иконки с логотипами бардершопа и прочих - это будут ссылки на их сайты? Если да, то так как сделал я допустимо делать или надо делать как в случае с сылками на социальные сети в футере: обычная ссылка, а картинка как-то через CSS задаваться будет?
Превед посоны, пару дней уже изучаю этот ваш жаваскрипт по кодакадемии и заступорился на одном моменте с каменьножницыбумагами: In this version, if both players make the same choice, the game returns a tie. What if the game didn't end there but instead asked both players for new choices? Как реализовать такое в вот таком уже готовом коду https://jsbin.com/qabizokavi/edit?js,output ? То есть, чтобы при ответе yes - меня переносило в начало программы или что-то вроде этого.
>>353625 По спецификации секции обычно с заголовками, как и article Но выдает не ошибку а предупреждение так как не очень это критично для функционала
Я думаю да, картинки в ссылки можно оборачивать в данном случае, так как это не оформление а контентное изображение (логотипы)
Названия классов и правда, лучше подправь и если не знаешь как правильно писать по английски - загляни в гугл-переводчик (дело пары секунд, зато ничью психику не травмируешь)
>>353711 я разделил экран на две колонки. Переименовал вторую в "main.css", но все что я туда пишу не работает вкладке браузера, т.е. он как-будто не подключен.
>>353751 Ну почему же, мне нравится, просто странно, что там пыхтели, делали всякие каскадности, тысячи типов селекторов, а эффективнее оказалось каждому блоку давать свой класс.
Аноны. Решил тут попробовать сделать свой сайт(занимаюсь по htmlacademy 5 день) с целью проверить сейчас свои знания. Вопрос такой: Указываю путь на картинку <img src="/art/1.jpg">. Обновляю потом сайт в браузере и вижу обычный значок картинки, но самого изображения нет. Что я сделал не так? Решил перепроверить в самой академии, но там все работает, и Инспектора Кексика показывает.
Слушайте, а поясните плес за Angular/React/Backbone и всё вот это новомодное. На кой оно и есть ли смысл учить всё это, учитывая, что новое выходит каждые джва месяца? Пробовал как-то взяться за ангуляр, но что-то совершенно НЕПОНЯТНО зачем оно.
>>354121 После 2-3 лендингов за 500р перекатываешься в зарубежный фрилонс и делаешь их уже за валюту. Но что-нибудь из MVC всё равно учи, а то гроб гроб стагнация пидор.
>>354108 И что это у тебя получилось? С img понятно, он схавал абсолютный путь и конечно картинка появилась (однако так делать не рекомендуется). Зачем тебе ссылка пустая в этом куске?
Кто верстал/верстате нёрдс. Подскажите пожалуйста - там на главной странице между блоками серенькая полоска на 2рх, ее можно верстать как нижнюю границу у этих самых блоков или лучше как псевдоэлемент?
Работал днище-контентщиком за копейки, год назад наткнулся на этот тред, от перспектив закружилась голова, уволился, полгода курил учебники и ныл тут, пока наконец не нашёл работу. Теперь сосу днище-верстальщиком за ещё меньшие копейки и думаю,что делать и куда расти, ибо вряд ли я смогу работать верстальщиком до пенсии, а почти 30-и летний жуниор никому не упёрся. Задавайте ответы.
>>354809 Без обид, но если ты получаешь меньше контентщика, то явно чето делаешь не так: либо скилов нет, либо повышения не пробовал просить. Рассказывай давай че умеешь, над чем работаешь, что в планах освоить?
>>354841 Верстальщиком и работаю. В основном занимаюсь версткой рассылок и задачами уровня "у нас там-то что-то отвалилось на сайте, поправь плиз", иногда верстаю промо-страницы для проектов. Все вкусное отдают более опытному коллеге, ибо нужно "быстро". Хотелось бы сказать, что умею все, кроме работы с svg и канвасом (к сожалению, мне это пока не было нужно) и хардкорного js, но скорее всего это не так. ДС 30к (предлагали больше, но я - дебил) >>354843 Геймдев, больше не скажу, ибо деанон, контора довольно известная. >>354882 Хотелось бы подтянуть же и освоить какой-нибудь Фреймворк, немножечко изучить пыху, но на работе это не пригождается, а после работы сил нет этим заниматься. В общем чувствую, что стагнирует. Вероятно буду просить повышения или искать другую работу.
>>354976 >подтянуть же подтянуть ЖС, конечно же. В работе использую less и gulp, могу в бутстрап, но тут он не нужен. >>354989 Тут просто пиздецкое количество легаси-кода, приходится долго искать, куда ткнуть палочкой, чтобы все не сломалась окончательно.
>>355008 По делу - ничем. Это очень хреново, я понимаю, но поле рабочего дня - чугунная голова и в глазах песок, не могу себя заставить писать что-либо. Впрочем это нытье и недостаток мотивации. Сам виноват.
>>354976 >Хотелось бы сказать, что умею все, кроме работы с svg и канвасом (к сожалению, мне это пока не было нужно) и хардкорного js, но скорее всего это не так. >ДС 30к >В основном занимаюсь версткой рассылок и задачами уровня "у нас там-то что-то отвалилось на сайте, поправь плиз"
Где то тут логическое противоречие и даже откровенный пиздеж, скорее всего в первой цитате Даже в моем унылом миллионнике быстрая решительная контент макака с минимальными навыками верстки может вырубать 20-30 тыс в зависимости от быстроты и решительности для версталы 25-35 опять же в зависимости от скилов и скорости. А уж опытная макака знающая "все" и умеющая аккуратно шатать php движки и прочие cms может вырубать уже 40-60 и считаться бохато живущим поцаном
>>355120 Хм, а нет механизма убирания переносов? >>355124 Да это вроде я сам придумал, хотя не помню уже, размечал давно, сейчас вот декорирую. >>355125 Ок, спасибо.
>>355129 Он же сказал что ему НЕ ДОВЕРЯЮТ, его проблема скорее заключается в том что он хикка омежка с низкой самооценкой, постоянно фрустрирующий, не умеющий преподнести себя и настоять на своем, ему так-то надо к психотерапевту идти, он бы его быстро подправил.
Аноны, реквестирую советов по скорости, кто чем набивает? Больше макетов? Меньше макетов, больше кода? Слушаешь псалмы когда кодишь и не отвлекаешься? Может упарываешь и сидишь в матрице? А может всё хуйня и придет только с опытом? Делитесь проф. секретами короч.
>>355273 >Аноны, реквестирую советов по скорости, кто чем набивает? Что бля? Чем можно набирать кроме как пальцами и автоматизированными инструментами?
>>355289 Меня не интересует кто чем набивает (хотя если скатить тред в меряние сборками, то может это бы пошло на пользу), мне интересно как народ набирает скорости.
>>355326 >нанявшие себя раба Он может в любой момент уйти либо поговорить с работодателем по поводу даваемых ему заданий и оплаты труда, он ничего этого не делает.
>>351733 (OP) Ребят, почему P толкает своим маргином блок, который выше в HTML, а не родитель, что было бы ожидаемо, и который fixed см в css 2 последних правила? http://codepen.io/anon/pen/PPeZNe
В макете разделители сделаны при помощи обычного текста из точек "....................." Мне эти разделители тоже сделать из точек через текст: .border-point:before {content: ".....................";} ? Или вырезать их как картинку? Я так понимаю что вертикальный разделитель будет сложно сделать через текст.
>>353570 Как то странно работает. Вернее не работает, зажимаю альт+ ЛКМ = нихуя. Полный. Вообще нихуя не работает. Про выделения слоя вообще молчу , есть папка со слоями , клацаю ПКМ , выбираю "скрыть другие слои" пропадает все к чертовой матери , просто квадратики на экране. Photoshop CS6/
>>356120 как раз сейчас прохожу макфаредла , есть такое свойство transform: skew(x, y), попробуй. Только хуй его знает как применить только к поребрику.
>>356110 >>356114 Спасибо. Возникла проблема - раньше поля стилизовались нормально. я что-то пошаманил с дивами, еще что-то поменял, и они перестали стилизоваться. Может найдете ошибку? http://www.cssdesk.com/7Prb6
>>356105 И еще - там в инпутах задан uppercase. Когда я пытаюсь печатать в этих инпутах, ВНЕЗАПНО, доступен тоже только верхний регистр. Допустим я сделал, :focus { text-transform: none }, но тогда получается некрасиво меняется регистр при щелчке на поле. Как решить эту проблему?
Ребята , совет , чтобы стать настоящим ГУРУ в HTML и CSS надо читать ТЕОРИЮ !!! Если просто тупо выполнять задания то ничему вы ничему не научитесь , и ничего не узнаете ( А еще это скучно )
Второй совет : Смотрите на результат ( мини-браузер ) , а не только на задание и окна HTML & CSS Так будет еще интересней и веселей выполнять задания .
Третий совет : не надо тупо залазить в комментарии , копировать код и вставлять его уже в HTML или CSS , если уж начали учиться то учитесь , а не просто выполняйте задания , проект не для этого создан !
Наткнулся на вот такой совет в комментариях академии. Где мне взять годный учебник про верстку, чтобы я мог читать эту вашу теорию? Или вы читаете ее в htmlbook.ru?
>>356150 -> htmlbook.ru Там описываются атрибуты для всех тегов. Отвечая конкретно на твой вопрос — да, можно задать ширину в символах. >>356272 Касательно последнего вопроса — я вот тоже бьюсь в поисках хорошего материала именно по HTML4 в формате учебника, но пока безрезультатно. Если вдруг найдёшь что-то интересное — поделись здесь, пожалуйста.
>>356276 находил группу впашке про верстку, и там было 4 учебника вроде. Один из них я скачал, но мне показалось он более для продвинутых верстальщиков, а не для новичков.
>>356278 >>356276 >>356272 Какие учебники по верстке, идиоты?! По программированию я понимаю учебники - там много теории, особенности, устройство языка, задачи. ХТМЛ это тупо язык разметки блять. какие тут могут быть учебники? Верстайте мактов побольше, учебники вообще нахуй по верстке не нужны.
>>356278 Именно по HTML 4.01 там было? >>356279 Ну справочник, не стукай. Просто хтмлбуком не всегда удобно пользоваться, не всегда интернет под рукой.
Ребятки, делаю я значит Седону с дополнительной резиновостью, лол =) короче в тз написано:
Элементы фильтра поиска и другие элементы данной страницы ("найдено:3", фото гостиниц) имеют отступ от левого края, который высчитывается так: ширина вьюпорта делится на 5, затем из оставшегося вычитается 93 px, полученное значение делим на два и получаем величину отступа от левого края. Фактически — это отступ перед пунктом меню "информация". Аналогичное значение принимаем и за правый отступ.
как это сделать в CSS? calc((100%/5-93px)/2) - нихрена не выходит думаю может просто посчитать самому взять скажем те же 768px по этой формуле посчитать величину и перевести ее в проценты от 768 и написать в процентах? Так тоже попробовал - не совпадает отступ с отступом перед пунктом меню "информация" при растягивании... короче если кто знает - подскажите плиз. Я пойду еще че-нить попробую/поищу
>>356304 кстати, если написать например так: calc(100vw/5) - то это срабатывает а вот дальнейшее вычитание и деление на 2 уже не срабатывает и хром пишет что недопустимое значение
>>356279 А они между тем есть, хотя это скорее справочники с подробными пояснениями и интересными практиками. Так что кто тут идиот - это еще большой вопрос.
>>356471 саму плашку я делал вроде просто фоном блока в котором картинка (ну паддинг задал сверху) а кружочек псевдоэлементом один - остальные просто тень сдвинутая от этого кружочка
Чувак, ты напиши когда набьется трое. чтобы остальные, кто захочет потом от меня регались (охота глянуть самому че там) Потом надо попробовать выложить в общий доступ.
Вот что получается. Чтобы иметь посещаемость уровня нормальной средней зарплаты по России надо 30к посетителей в месяц. Довольно много учитывая что в некоторых областях всего запросов 30к в месяц. Так что надо неплохо раскрутиться.
>>356901 Ты в web заходил вообще? Детский сад развели, с навивностью и не желением смотреть правде в глаза. Прям порно принес. Только матом здесь можно разговаривать иного способа не нахожу.
>>356906 >>356904 Не заходил, именно по этой причине. Желения у меня нет, понимаешь? У нас тут событие, между прочим, все собираются на конференцию. Просто все сидим регистрируемся по рефералкам и ждем, когда же нам уже расскажут про интерактивную 3D графику на WebGL, если ты понимаешь о чем я.
>>356840 Так ребятки, спасибо, по моей ссылочке уже не надо - трое набралось)
если кому еще интересно зарегаться - переходите по ссылочке от типочка из поста ниже (на всякий случай продублирую его ссылочку) http://geekweekconf.com/referer/22706
>>357344 Добавил, заработало. А почему не работает без добавления i? Она же внутри ссылки, а я задаю ховер для ссылки... Или я что-то наговнокодил в части блоков в этой менюшке?
Верстаны, я вот тут принялся за макет с шрифтом Verdana, который входит в состав этих ваших окон, и задумался, как бы лучше обеспечить его поддержку. Обычно я конвертирую шрифт, чтобы получить пять форматов: woff2, woff, ttf, eot, svg (пуленепробиваемый способ, описывался в одной статье на хабре). Сейчас есть на руках ttf, понятное дело, но во-первых, задумался о поиске woff'ов, так как они наиболее широко используются, а компиляция немного проёбывает качество (для хипстерков с ретиной актуально, думаю), и, во-вторых, я правильно понимаю, что сам ttf, нужный для некоторых версий ослика, класть в папку fonts не надо (и что насчёт eot, который нужен для других версий того же ослика)? Заранее спасибо.
>>357550 нахуя его вообще конвертировать, в то светлое время когда верстал говномакеты в офисе мне было прямо сказано на счет поддержки дефолтных шрифтов виндовс не заморачиваться, видимо поддержка linux,ов ? В любом случае как говорит википедия в виндовс он есть с 1996 года, а значит это дефолтный шрифт в любой версии в mac os тоже завезли https://ru.wikipedia.org/wiki/%D0%92%D0%B5%D1%80%D0%B4%D0%B0%D0%BD%D0%B0 так что просто забей
Ребятки, доверстал-таки все макеты с базового: все четыре с половиной, хах. Лвл ап так сказать - теперь я не одноклеточное, а до червя дорос, лол. Буду браться за продвинутый теперь)
>>357701 На вопрос "долго ли?" Ответит картинка выше) расшифрую: всего ушло 59 дней где-то по 2-3 часа в день.
первый макет параллельно с вэбинарами и доп материалами (примерно 30 дней, ну по расписанию курса почти) оставшиеся макеты за остальное время.
4 с половиной потому что в тз написано что Седона в двух вариантах - фиксированная и с дополнительной резиновостью. Вот и получатеся нердс, барбершоп, техномарт, седона и седона2)
поэтому совет всем кто еще больший новичок, чем я - занимайтесь как можно большее количество времени, так как можно было сделать и быстрее это (несмотря на то, что на базовом говорят мол между базой и продвинутым надо еще 1-2 месяца поверстать).
Лучше это сделать быстрее и быстрее перейти к адаптиву, методологии, автоматизации и т.д. Так как после этого еще ждет охуитительное погружение в js. И чувствую если так мало времени уделять растянется это все ппц на сколько.
Сам естественно тоже собираюсь увеличить время занятий
>>357750 я его задрочил на клавогонках малехо до того как вообще этот тред нашел (рекорды 500 в русском и 400 в инглише, средняя примерно на 100 символов меньше) даже не сколько раздражало что 4-5 пальцами, сколько то, что головой вертишь =)
>>357761 средненько.. да и вообще, с автодополнением кода и emmet-oм на самом деле пофиг какая скорость главное, чтобы вслепую, ибо набрал 2-3 символа и все, скорость уже больше к мерянию письками относится
>>357721 Брофист, я тоже уже месяц верстаю этот сраный нердс (ну может недели 2-3, как-то не засекал). Тоже в день уделяю пару часов. Еще учусь параллельно, четвертый курс, долги, специальность ебучая очень, и при этом бесполезная... Эх, еще наивно планировал в сентябре до НГ работу найти, сейчас я чувствую что готов буду отправлять резюме еще через пол года минимум, а так деньги сука нужны. И еще учеба это, так доебала, просто сил нет. Понимаю, что она принесет нихуя пользы, но дропать тоже н ехочется, хочется годик домучить. И еще долги сука, скоро отчислят нахуй, надо задротить учебу, а когда задротишь учебу, на действительно полезные дела типа верстки совсем времени не остается. Дропать учебу надо с одной стороны, а с другой - я пока нихуя не готов работать, скиллов мало, да и жилье надо быдет искать, а так место в общаге... Пиздец короче.
>>357721 То есть ты советуешь сразу после базового продвинутый смотреть? А >адаптиву, методологии, автоматизации это в интенсивах не объясняется? Где тогда брать это? Чувствую я после интенсивов вообще сам не смогу учиться...
>>358469 Я советую (в стиле кэпа) просто больше времени уделять (сам сверстал, как писал выше, все макеты, думаю это все же необходимо чтобы набить руку так сказать)
>>357721 как ты конкретно занимался каждый день? Смотрел вэбинары, делал макеты и все? Скачал вэбинары эти, и посмотрел содержимое внутри, так там вроде дают к макетам уже готовые данные или я не прав?
>>358992 на вэбинаре дают базовую теорию и рассказывают как делать барбершоп - только 2 из 4 страниц. Кроме барбершопа есть еще макеты: нердс, техномарт, седона и приложенное к ним тз.
Сначала я просто смотрел урок - читал доп материалы к нему, делал дз и верстал часть своего макета (нердс). Таким образом когда посмотрел все вэбинары у меня были сделаны нердс и 2 страницы барбершопа. Дальше уже ничего не смотрел а просто верстал остальные макеты + почитывал некоторые статейки из интернета и видосики проглядывал на ютубе.
>>359073 ну там же не все разметки, а только с вэбиков
на самом деле не очень много видосов смотрел с каналов sorax, devtips, webdesign master. Последние два наверное лучше смотреть после продвинутого, хотя в принципе и так более-менее понятно.
Зачастую процесс был таким: открываю видос, смотрю минут 30 потом забиваю и сажусь делать свой макет =)
>>359093 чувак, ты походу тролишь. как я могу свой макет делать так же как барбершоп, если они отличаются визуально?
Хотя да, они состоят из тегов и css-свойств, а они для всех сайтов одинаковые. Но бля задача верстальщика и заключается в том, чтобы используя набор тегов сделать из макета рабочую html/css структуру. Музыканты тоже юзают одинаковые ноты но пишут разные композиции.
Короче - берешь и смотришь вэбинары, там все расскажут как надо делать и че делать.
>>359466 я так предполагаю что скорее-всего ты дал класс иконки лейблу и оно у тебя просто впереди добавилось. А надо у лейбла самому сделать псевдоэлемент с контентом равным коду иконки.
>>359590 Если у них будут записи, то скорее-всего да. Сам записывать вряд ли буду, так как смотреть не все получится в прямом эфире. В принципе как писали выше можно фейковых акков порегать и на какие лекции интересны ходить.
Мне еще интересно на счет складчиков - выложили они уже или нет интенсив по JS, кто-то выше кидал картинку, что уже типа закончился он.
>>359804 Запилим под спойлером или это не сработает? Я вообще без понятия, если честно. Архив это мой, заливал его я, и с самого начала только я и раздавал. Не думал что такой спрос будет на макеты, потому и не пилил прямую ссылку в Оп-посте. Да и на меге это мой первый архив. Деталей не знал, вдруг сломается чего или еще что. А потом отбивайся от толп зевак с криками НЕТ АРХИВА, ССЫЛКА БИТАЯ, ЧТО ЖЕ ДЕЛАТЬ???
>>360470 А не, работает. Так вот, не подскажете, как задать плейсхолдеру поля цвет, отличный от цвета текста? Я тут поэкспериментировал и с определёнными цветами текста это работает, но не с белым. http://www.cssdesk.com/G2Vks
>>360875 А с чем вообще связано такое поведение? понимаю, что не стандарт, но интересно же У меня сложилось впечатление, что цвет плейсхолдера высчитывается как нечто среднее между заданным цветом и цветом текста.
>>360493 >>361025 Внезапно заработало, когда по нагугленному решению раскидал свойства для всех псевдоклассов и псевдоэлементов по отдельности и задал для огнелиса opacity: 1.
>>361565 Получается семантическая верстка это использование всех этих секшинов навов майнов вместо того чтобы тупо верставть все голыми дивами? Но какой смысл этого всего в БЭМ если там в цсс используются только селекторы по классам?
>>361755 Ну типа задел на будущее, когда поисковые системы научатся это говно обрабатывать. На самом деле семантические теги — самая непроработанная часть спецификации HTML5, не один ты не можешь понять, нахуя они вообще.
Ананасы, пытаюсь верстать бордершоп по интенсиву. Вырезал лого (на картинке), но с ним хуйня какая то оно вышло на белом фоне, как надо преоброзовать картинку?
>>361908 Да я посмотрел, как будто делаю как и там. -> тримминг-> подрезка на основе прозрачных пикселов -> экспорт в web. Почему появился белый фон - непонятно.
У меня котелок кипит уже третий день, гугл не помогает, стаковерфлоу игнорирует, официальный мелкософтовский форум несет пургу (вопрос по Windows Phone).
Суть в том, что есть один <iframe>, в котором есть набор якорных ссылок (это техмануал). Эти ссылки работают ВЕЗДЕ, в ЛЮБОМ браузере, кроме ебучего Windows Phone c осью 8.1.
Если на Windows Phone кликнуть по ссылкам во фрейме, то экранчик дернется на пару пикселей вниз и все. Но если отключить iframe, то все прекрасно работает.
Страница валидна. Я бы давно сделал это на скрипте, да клиент не разрешает применять скрипты.
Братушки, как с этой хуйней побороться? Какого хера Windows Phone так работает с якорями во фреймах? Может у него какой-то системный баг есть, а? Кто сталкивался?
>>362010 Нету разницы куда применять фильтр, на контейнер-враппер карты, или айфрейм, только айфрейм это жуткий костыль в этом случае будет, я вообще не понимаю, откуда вы взяли, что карты через айфрейм работают, ибо они сам под себя обертку создают обычную и всё.
>>361983 Да просто запили фон и все тут. В барбершопе, насколько я помню, фон засовывают вообще на бэкграунд в боди, а лого идет выше уровнем, соответственно оно наслаивается. Плюс можно просто задать помимо background-image еще и background-color одному и тому же элементу.
>>362531 Прошел всю htmlacademy, посмотрел интенсивы, сверстал два первых дивхака. Могу в правильную разметку, сетки и позиционирование, не могу в анимации и javascript.
Тут на фрилансе предлагают заказ - пидорасит вёрстку на разных разрешениях и браузерах. ТЗ включает скрины с мак-браузеров, работающих из-под разных версий мак-оси. Я же работаю в прыщах или виндовс. Так уот, есть какой-то способ протестить мои будущие фиксы в мак-браузерах?
>>362543 В анимациях, кстати, нет вообще ничего сложного. Платные курсы - хуита если нет возможности пройти их бесплатно, суть анимаций можно понять по статейке на хабре и побаловавшись в редакторе.
>>362566 так ты сказал что прошел интенсивы) препроцессор ты уже должен был освоить как минимум да и с системой сборки разобраться немного. Макеты, да, но ниче не мешает верстать и изучать js =)
посмотрел 4 урок интенсива. Сделал как показывают в конце css для своего макета и ничего не изменилось. Подумал это глюк, и решил проверить html и css коды, которые лежат в в папке этого урока. Открыл через браузер, и результат остался таким же. Хотя в конце видео показывают, как меню и т.п. уже находятся на своих местах. Что я сделал не так?
Короче поменял "background-color:" с черного на белый. И сразу все стало хорошо, но если поставить черный(так показывают в видео для барбиршопа), то там будет хаос. Работает почему-то только на этом сайте норм, если открыть отдельно файл с компа в браузере, то он словно не видит css.
>>362934 и да, еще на будущее, постарайся всякие мелкие вещи исправить сам, пересмотреть внимательно материалы к уроку, погуглить и только потом спрашивать, в принципе ответить не очень сложно, но по мелочам заебывать часто не стоит людей, ок?)
Если помните, я тут спрашивал как стилизовать черно-белой карту в нердсе. Вот, посмотрите, как это должно работать, ато что-то я не врубаюсь вообще? https://jsfiddle.net/34e30cca/
>>362990 я ее вообще не стилизовал когда делал - в тз не написано было что надо застилизовать именно под ч/б, просто сказали вставить карту - ну я и вставил, лол. Так что у меня фоновая картинка ч/б а карта обычная яндексовская)) Во всех остальных макетах вставлял гугл-карту, кстати, нердс у меня единственный с яндекс-картой)
>>362999 >>363003 Ну ладно, но я что-то смутно припоминаю, что смотрел ютуб какого-то чувака, там он эту карту стилизовал. А как ты вставлял картинку с контактами на карту?
>>363036 ну вот в этом видео типок с интенсива показывает стилизацию на гугл-картах и там он просто минуте на 4 на готовые скины клацает. https://youtu.be/FXT0zpss2x4
контакты - это относительно спозиционированный блок (для z-index) который просто поверх карты, а не картинка
Товарищи, а как отцентрировать блочный элемент внутри контейнера, который тянется на всю ширину? Классический способ с заданной шириной и margin: X auto; почему-то не работает. контейнер — .container-fluid из бутстрапа, если что
>>363140 У меня приблизительно следующая ситуация (на кссдеск не выкладываю, потому что ебал я туда бутстрап копировать): <div class="container-fluid"> <div style="width: 200px; margin-left: auto; margin-right: auto;"></div> </div> Если я правильно тебя понял, мне нужна ещё одна обёртка для дива? Но зачем?
>>363144 так, я другой анон, сразу предупрежу, что с бутстрапом особо не возился (только недавно продвинутый начал смотреть). НО
- проверь работает ли если контейнер обычный, а не флюид - если заработает в обычном контейнере, то надо копать исходник бутстрапа и смотреть че они там флюидному прописали такого, что не хочет пахать. (ваш кэп)
>>363146 Внезапно не работает. Спасибо за подсказку, я уже плохо соображаю. Почему-то автоматические маргины ставятся в ноль пикселов, будем разбираться.
Прошел бесплатные курсы на HTML-academy. Дальше базовый и продвинутый интенсивы проходить? Там уже нужно будет верстать макет? А то уже хочется попробовать простенький макет сверстать. И расскажут ли там как работать с макетом в фотошопе?
Я понимаю, идиотский вопрос, но можно ли навернув продвинутые курсы от академии, потом начать фрилансить на рубиржах? Я смогу клепая визитки хотя-бы 15к заработать в месяц? Мухосрань, контор нет, жизни нет, будущего нет.
Стоит ли начинать сразу с продвинутого (второго) курса академии? Прошел все курсы у них (платные тоже). Начальный уровень нет смысла ждать, а продвинутый стартует 12 ноября.
>>363653 ну, все правильно я тебе сказал - ссылки у тебя строчные, поэтому паддинг не применяется в вертикальном направлении. Надо в меню ссылки сделать блочными а кнопки, которые ниже инлайн-блоками.
>>363788 ты видео по работе с ФШ внимательно смотрел? пересмотри еще раз. Исследуй кнопку и поймешь, что это не бордер, а эффект внутренней тени. Вот его и применяй, он размеров не добавляет
>>363800 Спасибо, разобрался! Я помню в фотошопе рассказывали как смотреть эффекты у объектов, только почему-то не пользуюсь этим, может потому что первый макет только верстаю.
>>363825 ты тоже повнимательнее будь - в аутлайне нельзя задать только верхнюю границу. а если я еще правильно помню, то и закругления углов нет (но в этом не уверен)
а вообще топ 50% и лефт 50% при фиксированном (или абсолютном) позиционировании означают что верхний левый угол будет привязан ровно к центру ближайшего элемента-родителя с не static позиционированием
Сижу думаю, как анон так удобно сделал логин. Спустя 30 минут дошло, что это у сайта песочницы логин. Хотя что скажите насчет позиции для логина? Удобно ли будет?
>>364025 это не отменяет того факта, что привязывается левый верхний угол в данном случае и надо все-равно маргинами сдвигать чтобы центр блока совпадал с центром экрана
>>364026 Поясняю. Бывает, HTML теги в разных браузерах имеют разную стилизацию. Например, у инпута один браузер сам подставляет outline, а другой этого не делает. Ты, наверное, замечал, что браузеры автоматически дорисовывают элементам списка кружочки и добавляют маргины. Для предотвращения этого существует css reset, который обнуляет эти стили. Не самое умное решение. Лучше использовать normalize css Гугли
>>364130 а так же базовую оптимизацию, проверку на переполнение, на валидность и кроссбраузерность и можно еще дополнительно на скорость загрузки (в принципе про загрузку в требованиях вроде нет и если делал по их критериям то для десктопа должно норм грузиться)
Вопрос не обязательно по вёрстке, просто тематического треда для моего вопроса я не нашёл. Вопрос - я нюфаня, неделю назад начал учить Си (цель - развиться в хорошего Mac/iOS разработчика). Но до джуниора в iOS идти в разы дольше джуниора в вебе. За "кашу в голове" не боюсь, хочу ради заработка копеек податься в веб. Вопрос в том, что для заработка копеек как можно быстрее учить. Время есть стабильно 3+ часов на изучение. Инглиш на уровне чтения книг по руби (больше нигде не тестил).
>>364273 Учить дизигн. Ибо русский дизигн самая загадочная вещь во вселенной, вроде рисуют полнейшее говно, про расположение блоков по сетке знает только каждый 5й, а тот который знает нихуя не умеет применять, ну и все в таком духе. Но тем не менее деньги у дизигнера есть всегда и раза в два больше чем у верстальщика, погромиста и даже ебучего менеджера проектов.
Мимо-верстальщик напряженно ждущий свои 400 бачей уже неделю, с которыми его походу наебали
>>364305 У меня плохо с фантазией, очень плохо. Я могу только макет бложика нарисовать, и то взяв за основу 10 других блогов и спиздив с них по элементу.
работаю менеджером по продажам и работе с клиентами в одной большой конторе, которая продаёт шаблоны. пришёл туда - имел только базовые понятия о комплюктере, ну мог там винду переставить. Начал делать сверх обязанностей - и блять, сразу начали больше платить(!). Сейчас учу вёрстку. Мимо 22лвл укр-филолог 750 баксов
Аноны, я конечно понимаю сейчас прозвучит ну очень тупой вопрос, но все же он не дает мне покоя. Задавать свойства в css можно в любом порядке или строго в том порядке в котором они стоят в html вкладке? Просто сижу делаю свой макет, и испытываю какой-то дискомфорт.
Так же интересует еще один вопрос. Есть ли тут добрые аноны, которые могут скинуть свои макеты, так сказать для повышения навыков?
Господа, прохожу сейчас базовые курсы на html academy, но тут нашел интенсивные курсы на nnm-club от той же html-academy. Подскажите: стоит ли дальше проходить базовые или сразу надо проходить интенсив?
>>364440 css-правила можно писать в любом порядке, но есть нюанс, связанный со специфичностью, то которое ниже в коде при одинаковой специфичности имеет больший вес (будет перезатирать)
порядок же свойств со значениями внутри правила может быть произвольным, хотя зачастую придерживаются стайл-гайда, например такого http://instanceof.pro/code-guide/ .
пишешь мыло и тебе скинут макеты на него (написано в шапке)
совет: скачай и начни изучать интенсив, многие вопросы отпадут
Как вообще правильно изучать верстку? Вот сижу и смотрю интенсив, порешал какой-нибудь раздел в академии, попробовал поделать свой макет. Все правильно делаю или по ебанутому?
>>364130 Сейчас как раз делаю, сделал страничку отдельную на модальное окно, картинку вместо карты на JS (наверное не правильно, потому что у меня тупо с помощью z-index картинка под карту подкладывается, наверное надо сделать с помощью noscript). А больше даже не знаю где там PE применять - на странице с каталогом как? Типа если не работает JS, убрать пагинацию и все эти картиночки с сайтиками как размещать? >>364131 Не, сейчас все это буду делать. Блин, как же долго оказывается столь простой макет верстать.
>>364273 Че то я вообще не понял - ты учишь СИ, хотя на iOS нужен Objective-C, при этом ты хочешь временно податься в веб, чтобы заработать копеечку? ИМХО, тупая идея - пока разбираешься в вебе (а разбираться все-таки нужно будет, сколь легким занятием это не считалось бы), плюс тебе нужен будет совершенно ненужный в твоей ситуации JS, а это отдельный ЯП, не слишком простой к тому же. А еще ты книги по руби читаешь... Самое хуевое что можно делать в айти - учить все подряд никуда не углубляясь. Это как тебе нужно выкопать яму в 10 метров, а ты тут копнул - метр, почва какая-то хуевая, камни, перешел на другое место - песок, вроде легко идет, но через два метра все засыпает нахуй, подальше пиздец глина, и копать тяжело и вообще надоело уже, столько ям выкопал, а результата нет. Понимаешь? Нужно выбрать технологию и учить-учить-учить только ее, постепенно углубляясь, а не распыляться на много сразу, хватая каждую по верхам.
>>364576 Ок, как еще сделать css-фильтр цены рабочий? В интенсиве показывают, но там он не работает, а Першин в последнем интенсиве по ПЕ говорит что можно на ксс его рабочим сделать. Еще помню в каком-то из курсов на академии было, но не могу найти сейчас.
>>364581 не, фильтр цены рабочим на css нельзя сделать (по крайней мере полноценно работающий, как мне кажется) да и они его не требуют делать. то про слайдер (карусельку) речь вели они скорее-всего
сам же я один раз заморочился с этим, но вышла такая срань (помись чистого js и jquery), что оставлять я не стал. Но в принципе работало, правда чтобы изменение в поле переносилось на движение ползунка приходилось сделать чтобы при снятии фокуса с поля пересоздавался сам фильтр.
Думаю, когда вплотную начну js изучать - тогда сделаю (пока продвинутый сижу вчихляю). А под себя я допиливал вот эту вот вещь: http://ionden.com/a/plugins/ion.rangeSlider/ (точнее его html5 скин)
Сделал немного свой макет, но считаю очень плохо, что многое взято с барбершопа. Надеюсь со временем смогу уже более менее сам делать. Лого не делал, так как еще не посмотреть 3 интенсив. Правильно ли я оформил html и css? Думаю, что налепил много лишнего в css.
>>364592 Хм, ладно, тогда потестю сейчас на разные доп. критерии и буду верстать седону/техномарт. А JQuery тоже потрогать может мне, как думаешь? По JS прочитал/прорешал 1 часть книги с learn.js.ru.
в js сам особо не вникал я, все что касается каких-то вещей просто гуглил, думаю може к тому времени как пройду продвинутый кто-то поделится базовым по js интенсивом =)
>>364676 > не пизди А, не так тебя понял. Дело в том, что его один хуй нужно прописывать, в теории об этом говорилось. Поясните мне, что за ебола на пике? Это какая-то невидимая хуита, которую я пропустил?
После верстки нердса остались такие вопросы: 1. В интенсиве всегда верстали по две страницы и вторую называли inner-page, а как именовать другие страницы? inner-page-2 и т.д.? 2. Когда я пишу стили, в каскаде использовать наименьшее возможное количество классов? А то иногда получается по 4-5 уровней вложенности. Еще всегда делал приписку inner-page для внутренней страницы, чтобы легче ориентироваться в css-коде. 3. 1000+ строк ксс это нормально? 4. Использовать ли html-5 семантику? 5. Порядок написания свойств в классах - нужно ли соблюдать? 6. Пару раз заюзал !important - сильно плохо?
>>364706 ну, я не гуру, отвечу как понимаю, может кто-то подправит: 1) в барбершопе к примеру так делалось не из-за того что нам обязательно надо было называть внутренние страницы, а потому что на главной у нас к примеру цвет фоновый был темный, а на внутренней странице мы светлый делали. Короче дописывали когда есть какие-то отличия, чтобы можно было обратиться 2) в критериях написано стараться делать как можно меньшую вложенность (и стоит циферка 2). В продвинутом например БЭМ будет (как методология именования) и там тоже максимум вложенности 2 исходя из методологии, но зачастую вообще 1 уровень 3) ну как бы да, лол =) 4) надо стараться использовать так как это гуд по спецификации в допах есть видос с рассуждением на тему от Натальи какой-то там (сам же я туплю лично иногда с этими секшинами и атиклами =)) 5) желательно соблюдать (смотри стайлгайды академии или от мдо), но есть такая штука как csscomb - она за тебя после настройки может причесывать код - есть как плагин для sublime например. 6) плохо, надо избегать. но говорят, возможно применять точечно: например http://cssguidelin.es/#important
>>364728 Ну я знаю, просто верстали две в интенсиве. И вот получается что я вообще могу иногда стили не прописывать, а где надо - делать вот эту приписочку inner-page к body, да? А если я ее заюзал, на третьей страницу еще что-то надо поменять не так, как на главное и на inner-page, мне ее называть inner-page-2 допустим?
>>364732 ну у меня например было как-то так <body class="inner-page item-page"> это из барбершопа того же, посчитал что если и есть необходимость дописать, то лучше это делать по смыслу
я хз как надо правильно, у нас с тобой разница только в несколько сверстанных макетов, поэтому сам с удовольствием послушаю более опытных
все сделал - переходишь к следующему разделу. В самом конце у тебя минимум один готовый сверстанный макет. (как максимум еще барберщоп успеешь доверстать)
желательно сделать все как у них - за месяц или даже быстрее. потом делаешь верстку остальных макетов. когда сделал переходишь к продвинутому
как-то так желательно добавить эту в шапку, чтобы по 100500 раз не спрашивали
>>364706 1. Как хочешь так и именуй. Там есть нюансы при заливке на gh-pages, но это уже в процессе поймешь. В любом случае они вяжутся друг под друга через относительные адреса. 2. Старайся делать 2-3 уровня, не больше. 3. В зависимости от размера проекта. Для стилевого файла одной страницы барбершопа, насколько я помню, многовато. 4. Да. 5 Да. 6 Не сильно, но плохо. Все прекрасно верстается и без него.
>>364764 Забыл кстати спросить насчет барбершопа. В папках с видео вебинаров лежат файлы с кодами и свойствами барбершопа. Мне барбершоп верстать самостоятельно или просто сидеть изучать уже готовое все в этих файлах?
>>364766 ага, я тут несколько тредов уже пасусь, после того как выложил свою первую верстку, чтоб люди глянули - сказали, более менее норм - фигачь дальше.... сижу фигачу, хах
(не адаптивно а с доп резиновостью, если быть точным, под мобильники на продвинутом разбирают)
узнать меня не сложно - мне впадлу буквы большие печатать зачастую =)
>>365330 Ты хочешь чтобы мы тебе это по невнятному скрину пояснили? В шапке написано, поясняют только при наличии полноценного примера с кодом в песочнице. Иначе сразу нахуй.
>>365371 я ему вчера уже сказал - пусть стирает свою сраную звездочку и делает нормально, как того требует задание (к тому же еще и импортантов в код понапихивал). Он не понимает видимо что ему говорят и хочет делать как ему нравится
специально сука зашел проверить че у вас там не выходит все делается просто элементарно - сидите блин и читайте теорию этого раздела заново, пока не дойдет. ну в самом-то деле, раз сказал перепиши заново, не переписывает, второй раз сказал, что неправильно - не понимает....
>>365409 я тебе уже ответил что несовпадение с образцом на пиках ибо ты криво написал свой код, то что он якобы у тебя совпадает, не значит что он нормальный
>>365460 Ну не стукай, что ты. Ты думаешь, я не смотрел? Там приложение которое автоматом ксс переделывает, не щупал бы я node.js и ее npm вообще не знал бы как ее поставить. А я хочу ручками все это правлиьно расствить, чтобы лучше понять. Я просто по логике спрашиваю - куда относятся margin/padding в box-model или typography?
Поцаны только не ссыте, лучше бейте. У меня есть вопрос. Как определить высоту строки и отступы в макете фотошопа. С помощью линеццки что-то у меня не получается. P.S. Когда в фотошопе определяю размер шрифта и вбиваю его в стили - в браузере и в фотошопе совсем разный размер (в браузере больше). Как так?
>>365484 видео "Фотошоп для верстальщика" - 3 урок базового интенсива все рассказано. Но есть еще одно дополнение про высоту строки - это где-то в 5-6 уроке вроде, если в кратце то из высоты строки вычитаем высоту шрифта и делим на два - такое расстояние надо будет отнимать от расстояния которое померял линейкой. Но лучше все же посмотреть интенсив
Если согласны подождать еще денек - завтра постараюсь перепилить пасту или по крайней мере доделать ее, плюс подразгребстись со всей той ссылочной массой что имеется, а также кое чего добавить. Если нет, то пилите новый тред сами. А паста будет уже в последующем перекате. ОП прошлых тредов
посмотрел 3 урок интенсива про фотошоп. Не понял, как они сделали фон на сайте(комната в парикмахерской). Вообще весь урок не понял. Кто-нибудь доступно объясните.
>>365914 или я не прав и фотошопом надо пользоваться уже в конце своего макета? Смотрю еще один урок про фотошоп в верстке, и там тоже показывают на примере готового макета.
>>365957 Этот урок №3 что-то прям очень тяжелый. Во втором уроке не расписывали css, нужно ли мне расписать сначала его, чтобы потом уже лезть на урок 3?
>>365957 Дак он блять походу не верстать, а макеты рисовать собрался судя по постановке вопроса и упоминание про то что мол макет уже готовый в видосах и его это не устраивает
Короче вот просмотрел это видео, и если я правильно понял, то он в нем вырезает элементы с готового макета через фотошоп и клеит их в свой макет. Я правильно понял? Это пытались до меня донести в 3 уроке интенсива? Если нет, то походу я так и не пойму всей этой фишки.
>>365977 Нет, это древнее видео, в интенсивах все куда продвинутее или понятнее. Пересматривай снова, и снова, и снова. Перепройди курсы Это блять самый базис, если таки не поймешь, то возможно лучше действительно пойти заняться чем-то другим.
JS за 21 деньАноним09/11/15 Пнд 03:38:58#579№366525
Самое херовое во всех учебниках по программированию то, что в процессе обучения хрен догадаешься, к чему изученный тобой материал может быть применим. Все эти задачки типа елочки с помощью for полностью отбивают желание к изучению языка. В отличии от верстки, где с первого занятия ты понимаешь, для чего используются те или иные элементы.
>>365964 кароч глянь сначала 4 5 урок, может понятнее станет но вообще сначала нарезаются картинки а потом уже цсс расписывается, и ничего сложного в работе с фотошоп нет в чем трудность-то?
Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты перед тем как что-то спросить, погуглишь хотя бы минут 5. В противном случае будешь послан нахуй, и абсолютно заслужено.
Заранее предупреждаем, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup Developer хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует. На данный момент фронтендеру нужно учить больше. В частности продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит.
Соответственно вырастает время, что требуется для обучения. С одного-двух месяцов до 4+, иногда до полгода. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция больше, в начале может быть сложно и скучно. Помните о портфолио, оно просто необходимо, да и за время его создания руку набъете.
1. Первичные обучающие материалы в хаотичном порядке. Все можете не проходить, выбирайте то что нравится. Проходится за недельку - две вечерами, дает первичное представление что, как и почему, поймете нужно ли оно вам. Не обзательно дрочить от начала до конца по очереди, заебало одно, попробуйте другое.
http://dash.generalassemb.ly/
http://learnlayout.com/
http://learn.shayhowe.com/
http://www.wisdomweb.ru/
http://htmlacademy.ru/ - ультрагоднота
http://eloquentjavascript.net/
http://learn.javascript.ru/ - по JS на русском лютая годнота. Годнее только Флэнаган
http://www.codecademy.com/
http://codeschool.com/ - тут платно, но есть бесплатные курсы, годные вещи про jquery и git
http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.
http://teamtreehouse.com - тут все платно, но первые джве недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо. Добрый анон слил отличную подборку видео отсюда, ссылка будет в конце поста, за интенсивами.
2. Для тех кто прошел шаг 2 есть литература и много видео. Вероятно на этом шаге вы встретите много информации из шага 2, но гайд рассчитан на дебилов, так что повторение вам только поможет. На этом этапе можно смело начинать верстать и срать очевидными вопросами в тред. Поехали:
Текстовые редакторы:
http://brackets.io/
http://www.sublimetext.com/2
Курс профессионального javaScript. Кантор Илья - автор learn.javascript.ru
http://rutracker.org/forum/viewtopic.php?t=4654156
http://www.ozon.ru/context/detail/id/20279391/ - "Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS" Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.
http://rutracker.org/forum/viewtopic.php?t=4214664 - "CSS ручной работы" Дэн Седерхольм
http://www.ozon.ru/context/detail/id/5647176/ - "Большая книга CSS" Дэвид Сойер Макфарланд
Обучающее видео на английском. Все нужные технологии в подробных видеоуроках. Выбирай по душе и обмазывайся:
От lynda.com
http://rutracker.org/forum/tracker.php?f=1564&nm=lynda+com
От Tutsplus.com
http://rutracker.org/forum/tracker.php?f=1564&nm=Tutsplus.com
От Devtips
https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ
От LearncodeAcademy
https://www.youtube.com/user/learncodeacademy
Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало ОБЫЧНОЙ учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании:
http://htmlforum.ru/index.php?showtopic=47141
Появились новые тренировочные задания с ТЗ:
http://htmlforum.ru/index.php?showtopic=47974
http://htmlforum.ru/index.php?showtopic=47965
ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.
http://denweb.ru/put-veb-mastera_sod
Еще видео для начинающих:
http://psd-html-css.ru/
Верстка по БЭМ
http://habrahabr.ru/post/203440/
Обычная верстка:
Внимание! Тут сделано с ошибками, но можно получить общее представление о том, как выглядит по шагам верстка
http://habrahabr.ru/post/202408/
Тот же самый шаблон, но уже на bootstrap:
Внимание! Тут сделано с ошибками, но можно получить общее представление о том, как выглядит по шагам верстка на bootstrap .
http://habrahabr.ru/post/211032/
Видео урок верстки шаблона на BOOTSTRAP+LESS с самого нуля. Язык английский, но очень понятный. Очень мало сложных фраз и неизвестных слов:
http://thefreecourses.blogspot.ru/2013/09/psd-to-html-for-designers.html
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов ссылки ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
Гайд от анона по гитхабу:
http://randomfederation.github.io/
Базовый интенсив за 2015 год:
http://nnm-club.me/forum/viewtopic.php?t=899131
Продвинутый интенсив за 2015 год:
http://nnm-club.me/forum/viewtopic.php?t=900609
Обучающие видео Teamtreehouse от доброанона. Есть много годноты.
http://nnm-club.me/forum/viewtopic.php?p=7667080#7667080
===========================
Официальное обращение к тем, кто выкладывает свой говнокод в архивах и файлообменниках:
>Идите нахуй.
или
>Используйте блять cssdesk или jsfiddle или даже jsbin. Делать тут нам больше нехуй, кроме как выкачивать css
======================
Вся инфа здесь:
http://pastebin.com/tvvwC7uz
https://github.com/num13ru/verstka-threads