Вы видите копию треда, сохраненную 6 января 2016 года.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.
Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты, перед тем как что-то спросить, погуглишь хотя бы минут 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
Анон, а вообще какие перспективы роста в верстке? То есть вот сейчас мне 20, я начну изучать всё это, каким я в теории смогу стать через 5 лет? А через 10? К примеру, начать с обычной верстки, а через лет 10 стать востребованным веб-разработчиком возможно? А если мне приспичит ради интереса какой-нибудь крупный проект/стартам запустить, смогу? Всё в теории, естественно. Мне конкретно про перспективы и пределы роста хочется узнать. Да и образования у меня нет. Вот думаю, стоит ли целиком и полностью себя этому посвящать. Последний раз делал простенькие сайты, когда мне было лет 13. Тогда пиздец как интересно было, только вот инфы тогда на русском особо не было, так что забил.
нет никаких перспектив)))) всю жизнь будешь на харкаче сидеть и интенсивчики пересматривать)))))
))))))))))
>Сколько опытному html-верстальщику на данный макет требуется времени
Час, меньше часа даже, раскидать эту поебень по колонкам бутстрапа не составляет труда и тут кроется главная подъебка учебного макета, в реальной работе такие аккуратные макеты разбитые по колонкам встречаются чуть реже чем никогда
шапку читай
А есть ли что-нибудь взамен барбершопа? Надеюсь, что буду примером для нюфанек, которые прокрастинируют годами и не знают с какой стороны начать. Если предложений более реалистичных сайтов, которые являются рутиной для штатного html-верстальщика не будет, то буду начинать марафон "учимся гуглить на ангельском и не только" с барбершопа. Старт девятнадцатого ноября.
.social-btn {
margin: 0 2px;
display: inline-block;
vertical-align: top;
width: 43px;
height: 43px;
font-size: 0;
text-decoration: none;
background: #000 url("../img/sprites.png") no-repeat center;
}
.social-btn:hover {
background-color: #fff;
}
Специально для тебя , чтоб прочувствовать уровень боли, макет на котором я в свое время по неопытности дико сфейлился и сорвал все сроки https://yadi.sk/i/VskZEyyYkY8Gz
2013й год магазин одежды для толстых баб - реальная студия, реальный макет, реальный магазин, реальная боль
10 страниц страха и унижений в одном psd
Контент шириной 960 верхняя картинка тянется на весь экран
P.S. И это еще не самое корявое и убогое что я видел/верстал
Другой анон
Стесняюсь спросить:
1) что за куча невидимых слоев там?
2) верстка предполагала адаптив чтобы ты запилил им по десктопной версии? или фикс и по пизде должна идти карточка с бабой?
Адаптива не было, там все 10ть экранов сайта в композициях слоев смотри + у дизайнера хуевая привычка не удалять мусорные слои которые вообще не использовались
Ну я так и подумал, припиздил бы на месте этого дезигнера, как блядь с ним вообще можно было работать?
>как блядь с ним вообще можно было работать?
Приходишь в офис садишься за пекарню, прибегает манагер говорит я тебе задачу в битриксе поставил, открываешь макет с окейфэйсом и работаешь.
Она еще и из канады фрилансит охуеть неправда ли ?
Ну то, что это телка была понятно из названия - главная выпадайки (или как-то так)
Интересно, таких личностей вообще собеседуют?
Есть же блин статьи, сайты, коференции на которых рассказывают о том как нормально надо оформлять макет...
Главное ты делаешь верстку, чтобы удобно было работать дальше, а о том чтобы было работать удобно с макетом видимо когда малюют не думают
она едва ли не с самого основания этой студии там работала
>что это телка была понятно
Кстати там был дизайнер мужик, у него макеты уже не такие вырвиглазные были, что характерно
да бля, у тебя спрайт, надо просто background-position подкрутить чтобы по центру было
Бери, стоит то совсем ничего. Месяца тебе хватит. Годно.
Курсы на академии - это те же самые w3school или htmlbook, только материал собран по категориям и добавлениы задания, чтоб ты мог на практике понять как это работает.
ИМХО, ненужно, но 300 рублей - это совсем не деньги, чтобы думать брать подписку или нет.
по всему можно найти, кроме флексов. вот флексы там разобраны ок
Может есть какая-нибудь техника по запоминанию яп?
Бамп.
Ты курсы на академии проходил или интенсив смотрел?
В курсах они пишут что можно подключить prefixfree например к странице. А на интенсиве упоминают например prepros куда встроен автопрефиксер, либо юзать таскраннер с этим самым автопрефиксером
Поддерживает какой-либо браузер то или иное свойство и нужен ли префикс можно найти в инете, например caniuse
Котаны, когда-то задрачивал 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
>Стоит ли отдать $30 за codeschool
Не, не стоит.
Можешь еще подождать и тебе там должны скидку дать - один месяц 9$, за один месяц наверное можно все пройти.
Но курсы там простенькие, чтобы устроиться на работу их не хватит.
Лучше читай книги самостоятельно и задачи решай, на этих сайтах кроме красивого оформления ничего нет.
clearfix для родителя флоутных элементов Пушкин делать будет?
юзай devtools а браузере - там легко можно отыскать в чем трабла
У любого сборщика есть плагин для этого, будь то грант, галп, или вебпак, так что можешь верстать без них, а плагин подключи в сборку, он сам префиксы добавит. autoprefixer
Блин, я понял в чем прикол - в названии класса есть точка .footer-row-1.1, короче обосрался я по-полной.
Ну, я, в общем-то, так и подумал, пройдя курс по SQL.
Скидку дают, если ты зарегистрировался, но не купил подписку? "Ты чего там затих, почему js-фреймворки не изучаешь?"
Про книги - это понятно, но я бы посмотрел на общие моменты "в живую", чтобы получить быстрый беглый обзор, а потом сориентироваться.
Вебпак - российская торгующая компания, специализирующаяся на розничной и оптовой продаже упаковочных материалов.
>Скидку дают, если ты зарегистрировался, но не купил подписку?
Точно не знаю, но когда я прошел пару бесплатных уроков по js и забил на этот сайт, где-то через месяц прислали письмо что дают скидку.
>"Ты чего там затих, почему js-фреймворки не изучаешь?"
Да, лол, примерно так.
>Про книги - это понятно, но я бы посмотрел на общие моменты "в живую", чтобы получить быстрый беглый обзор, а потом сориентироваться.
Вся книга Кантора (learn.javascript.ru) построена на живых примерах, а также там в конце почти каждого урока есть задачки.
Если так нужны именно курсы - попробуй codeacademy, там бесплатно, есть еще udacity, да тысячи их.
ну и нахуй так делать? Скачал там шрифт, и получил кучу всякого гавна в придачу на свой комп. Спасибо тебе за амиго и тому подобное дерьмо. Как теперь это все удалить?
хуесос ебаный, рот твой ебал гнида. Теперь винду сносить к хуям. зарепортил тебя уебана.
нахер тебе скачивать шрифты для фотошопа? может для вставки на сайт все-таки?
юзай гугл фонтс, если там нет шрифта - просто найди в интернете ttf файл к примеру и конвертни на том же фонтсквирелл для подключения
Нужен был шрифт, чтобы размеры шрифта посмотреть. Потому что когда тыкал в фотошопе на буквы в макете, он их менял на стандартные и все летело к чертям. Позанимался версткой сегодня.
ну как бы размер можно узнать не ставя шрифты и пох что он семейство меняет
Отклеилось.
Давно что-то не было историй о успешных устройствах ИТТ.
Это у тебя нужно спрашивать. Ты ж интенсив смотрел, у тебя же сейчас макет. Посмотри сам.
Можно. Нажимаешь на иконку с эффектами на слоях.
А затем выбираешь в списке shadow или что-то типа того. Уже и не помню точно.
Но эффекты там наложены немного неочевидно. Часть придется брать из головы.
"фотошоп для верстальщика" - там рассказано как снять показатели
Палю годноту. http://css3ps.com Тени, скруглённые уголки, градиенты молниеносно без лишней ебли.
А то я уже два собеседования проебал :) и мне нужен стимул
Сначала ты запили, как проебал.
это интернет, тут и на хуй могут послать, делай свой элемент тегом <footer> прописывай свойства отступов в css (margin, padding), добра :3
Сделал футер. Через margin и делал, но почему-то иногда сбивается и хуй знает как это будет выглядеть на другом мониторе. Лучше делать отступ в процентах, или в пикселях?
Это стандартный футер, если страница не прокручивается, значит пили его нижним элементом. Это если я правильно понял.
Можно задать и через абсолют, но тут надо смотреть, где располагается точка координат.
Можно и через position fixed, но это уже петросянство.
Честно говоря, вообще не понимаю, как задавать позицию не через margin и padding. Что значит нижним элементом?
Кинь лучше изображение макета и что тебе конкретно требуется. Так наугад я тебе могу дохуя посоветовать, а оно может и не нужно вовсе.
Что там за страница такая, у которой футер надо отрывать, при этом она не прокручивается?
Почти. По сути у меня то же самое через margin. Почему там указано именно padding 60?
это для фиксированного навбара сверху, он у них через position:fixed прибит кверху, чтоб контент не залез под этот навбар в body сделан padding-top по его высоте
Тогда я ничего не понял. Паддинг 60 надо сделать всем элементам, чтобы они не залезли под верхнюю панель, так? Ф12 показывает, что нижняя панель сделана через position: absolute; bottom: 0;
нет только body{padding-top:60px;}
т.к. у nav задан position:fixed его размеры браузером игнорируются как будто там и нет ничего вообще
Не сталкивался, предполагаю, что тебе просто надо задавать нормальный тип файла - например png24
position: absolute;
бамп вопросу, тоже интересно
скрин еще выложи, чтобы увидеть что с картинкой не так, а то тут то ее не видно
хотя я вроде и так понял
например для второго слайда у тебя стоит
.slide:nth-child(2) {
background-image: url("../img/slide2.png");
background-repeat: no-repeat;
background-position: 100% 10px;
}
пропиши для третьего что-то типа такого (должно помочь, если нет еще подумаем):
.slide:nth-child(3) {
background-image: url("../img/slide3.png");
background-repeat: no-repeat;
background-position: 100% 0;
}
>.slide:nth-child(3) {
>background-image: url("../img/slide3.png");
>background-repeat: no-repeat;
>background-position: 100% 0;
>}
появился. Спасибо!
А насчет этого что сделать нужно? Сейчас залью скрины моего макета и макета готового сайта, чтобы понятнее было. <br> прописывал, но все-равно не такой вид получается.
ну очевидно же, что блок текста у тебя маленький по длине - надо больше длину прописать, а там уже на каких слайдах короче - там уже можешь <br> вставлять для переноса, чтоб отдельно для каждого слайда длину не корректировать
ну и добавлю еще - у тебя цель не переписывать буква в букву все что говорят на видео - тебе надо понять суть вещей и учиться самому дописывать то что надо, чтобы заработало + научиться находить проблемы, в том числе с помощью инструментов разработчика, встроенных в браузер, которые помогают посмотреть код и какие стили куда применяются и еще кучу полезных вещей
там двое советовали вроде - один из них я, пользуйся на здоровье, мне самому помогает)
Если ты подумал, погуглил, потом подумал еще раз, и таки не вышло. Вот тогда можно.
все пункты выполнил, но еще немного подумаю, и тогда попрошу помощи.
<div class="section-block">
<div class="caption-image back1">
</div>
<div>
<a href="#" class="btn"> Заказать</a>
</div>
</div>
<div class="section-block">
<div class="caption-image back2">
</div>
<div >
<a href="#" class="btn"> Заказать</a>
</div>
</div>
Я хочу применить к ссылкам "a" разные цвета фонов.
Я пишу разную хуету по типу ".section-block .btn:nth-child(2) { background: black }", но это не работает. Подскажите пожалуйста как это сделать очень лениво писать отдельный класс для каждой ссылки.
Пересмотрел уроки, полистал хтмлбук, посмотрел всякие ролики на ютубе. Киньте советов, что делаю не так.
http://www.cssdesk.com/WqdMM
Класс nav-bar сделай inline-block. Корзинка - не картинка, а иконочный шрифт, я с ней долго проебался, пока нашел. Корзину сделай через :before. Как то так.
Тупой еблан.
http://www.cssdesk.com/WqdMM
В песочнице как-то по другому выглядит, если сравнивать со скриншотом.
>>381587-кун
Да ты не бойся. Делай и все. Лучше что то делать и постояно ошибаться, чем тупо пространировать.
Двачую этого. Если это один из твоих первых макетов, то все норм. Запили еще парочку, и сам охуеешь от того, какую хуйню писал.
Но это собственно, и будет явным показателем твоего роста.
Просто в следующем разделе все в принципе понятно, что и для чего используется. А вот во введении много лишней инфы.
ну я сделал по примеру барбершопа свой макет, и Нёрдс уже будет вторым когда его сделаю. Нёрдс дается мне тяжеловато, но посмотрим что из этого выйдет дальше.
Живут же люди на фрилансе, значит можно.
Wireframily, сам нашел подобный, но все же тот был много лучше.
Что-то похожее я видел. Плагин создает трехмерную структуру сайта, где каждый уровень вложенности - это как прямоугольный блок из которых складывается пирамида. Чем выше он по структуре, тем шире у него основание.
Вроде как в интенсиве о нем упоминали. Но я, если честно, точно уже и не вспомню, а времени искать сейчас нет.
н вроде только в Firefox Developer Edition
Лендинг пейдж
Лол, ущербный, ну добавь потом в своем коде вместо слова заказать - заказать вэб-сайт и посмотри че будет с твоим предложением
ну да, она у тебя бесконечно типа тянуться будет.
представь у тебя есть кнопка например по высоте 100px. Пока у тебя в ней одна линия текста все норм, ты можешь писать высоту строки равную высоте кнопки и все будет центрироваться норм. Но когда у тебя будет несколько строк текста у тебя будет конское расстояние между строками, поэтому высоту строки надо ставить как в фш прописано и задавать падинги
Ну вот когда будет несколько строк, тогда и сделаешь через паддинги, хуле ты приебался?
Если одна строка то нахуй твои паддинги не сдались
ну да, проверка на переполнение, тестирование верстки нахуй не всрались
будем говорить заказчику в дизайне был именно такой текст в одну строку, то что туда будет вставлен другой не оговаривалось, че вы ко мне доебались???
Ты даун штоле? Или троллишь? Каким боков это усложнение? Пиздец пидораха
Ты тоже даун? Я тебе показал, вставляй любой текст нахуй какой хочешь, в чем проблема?
Алсо, если ты считаешь, что мультилайн кнопки разной высоты это ок, то ты точно уёба
Пиздец, джва года работаю версталой, таких идиотов как тут не встречал. При этом это не новички, а просто долбоёбы, которые думают, что знают лучше всех лол, зачем я только решил помочь
а если сделать паддингами, а потом заказчик скажет уменьшить размер текста? будешь паддинги переделывать все? анон с лайн хейтом прав, так намного проще и правильней сделать, тем более кнопок с текстом на двух строках я даже не припомню
что значит паддинги переделывать все? типа их там много
вот ситуация которую я обрисовал выше с доп текстом и изначальной высотой кнопки в 100 пикселей, что будет если высоту строки делать тоже 100 пиксельной
Нет. Я с плагином заходил на любой интересующий сайт и нажимал на иконку расширения, и вуаля, все блоки обводились и вроде как выводились названия тегов, прямо на самой странице.
В базовом интенсиве на 4-ом уроке практически это же было реализовано с помощью стилей.
можешь показать двухстрочную кнопку из реальной жизни? где ты такое видел в принципе? и зачем предсказывать будущее и усложнять себе жизнь пытаясь предугадать что-то и сделать универсальную хуйню?
Кстати, вопрос, а если я захочу сделать иконку рядом с текстом, то что мне делать в твоём случае паддингов? Как мне её выровнять по центру?
Поясню про иконку: не такую, чтобы бекграундом, а чтобы она сразу после текста шла, т.е. произвольной длины текст, скажем от 5 до 20 символов, высотой 30px, после него иконка произвольной высоты от 10 до 30 px, обрисуй ситуацию, как будешь её выравнивать?
Затем что это блять жизнь. И тут случается всякое. Хороший верстальщик от плохого тем и отличается, что продумывает все наперед.
Другой анон.
Нет, дружок, ты видимо новичок, поэтому думаешь, что нужно всё предсказывать наперед, но ты немного ошибаешься, хороший верстальщик/программист знает когда нужно что-то сделать наперед, а когда нет, и не делает это втупую. Ты этого не знаешь, т.к. не можешь показать пример двухстрочной кнопки, поэтому сосешь хуй и идёшь в пизду.
кекнул
ты видимо про принципы программирования не слышал, например про KISS
куда уж вам дальше расти, если даже тут не можете врубится ни во что
Что за хуйню я сейчас прочитал. Сходи на пару собеседований, да послушай что тебе умные дядьки говорить будут, если мне не веришь.
В продвинутых компаниях дают изъебистые куски макетов, а потом заваливают вопросами типа, а почему вы этот блок сверстали так? А что будет если сюда добавить текст, а там убрать? А почему вы выбрали такое решение? А может это решение выбирают из нескольких вариантов будет лучше? А как это будет взаимодействовать с кодом. А что будет если что-то не подгрузится.
Видишь ли, если ты не думаешь на перспективу, а просто лепишь наугад с мыслями "и так сойдет" то у меня для тебя плохие новости.
Мде хех, ок, живи в своём манямирке
Алсо, советую зайти на любой модный сайт ютуб, твиттер, фейсбук и посмотреть как там сделаны кнопки
я всё ещё жду кнопку, на которой используются две строки текста.
Всмысле?
Иконки произвольной высоты и ширины, и текст тоже произвольной длины, ты не можешь знать наперед где будет иконка.
http://codecanyon.net/item/fancy-2-line-css-buttons/109049
http://habrahabr.ru/company/2gis/blog/246831/
скрин того, что бустрап делает кнопку используя свойство падинга и обычную высоту строки для текста
Ну ты же сам сказал, что знаешь что иконка будет идти после текста и т.д. Я видимо не понял твои условия, либо ты нечетко их пояснил. Если запилишь скрин своих требований, предложу свой вариант. А иначе мы хуйней маемся.
Если бустрапа мало, могу еще с фэйсбука подкинуть скриншотик, где пацаны тоже юзали падинги для простой кнопочки "Регистрация" и у них после добавления лишнего текста с переходом на несколько строк ничего не расползается
Не, ты давай реальный пример использования такой кнопки
на ютубе по-другому.
я думаю логика этого анона в том, что можно сделать по-разному, он это с самого начала сказал, хотя в принципе я с ним согласен, что прощё просто задать line-height чем высчитывать там какие-то паддинги
видимо вот это является его фразой "можно делать по-разному" которую он с самого начала сказал:
Не слушай пидора
Такие штуки делают через line-height, поставь её у кнопки равной высоте кнопки и всё будет ок.
так или иначе, даже на самом фейсбуке, который ты, или кто-то другой привел в пример, кнопки сделаны обеими способами (например кнопка лайка или создания сообщения/страницы сделана через lh)
так или иначе, он сразу начал с оскорблений и его сообщение несло смысл типа так не делают надо как я говорю, тогда я в его манере начал объяснять ему в каком случае его решение не подходит, привел примеры сайтов где используется в том числе и такой подход, который описал, дал статью еще про переполнение и т.д.
кнопки в несколько линий текста все же есть я ему кидал уже пример именно кнопок, вот еще пример сайта с такой кнопкой https://www.zendesk.com.ru/
к тому же в интенсиве, а макет с интенсива есть проверка на переполнение кнопок, поэтому логичнее это сделать падингом.
Как называеться эта програмуля, которая показывает код прям в браузере?
Называется f12
и да, она встроена в браузеры
правой кнопкой мыши на элементе страницы и выбираешь что-то типа "просмотр кода элемента"
Есть тег, сохраняющий форму текста, и ни каких <br>, <p> не надо. Правда не помню какой.
Делаю так: копирую текст в редактор, ставлю мультикурсор перед каждой строкой и набираю </p><p>, потом автоформатирование выставляет все тэги вокруг текста как положено. Правда нужно будет удалить один ненужный закрывающий тег перед текстом.
Я имею в виду, а где же тогда макеты брать? Или только средствами вёрстки, получается, только сайты делать?
Вы вообще делаете дизайн, посоны?
Ну я-то имею в виду оригинальные макеты.
А не с сайта 500 МОКЕТОВ СКОЧАТI БЕЗПЛАДНО ДЛЯ ТРЕНЕРОВКИ))
А, вспомнил, ты про 15 число каждого месяца, лол.
Да ну, это тоже ёбля какая-то. Онлайн сервисы это делают норм безо всяких мультитыканий.
Либо перекат бэкенд, либо будешь работать на ебаную тучу уже знающих тебя клиентов. Оба варианты ниче так.
Верстальщик != дизайнер.
Нахуй тебе его сохранять, если это делается с помощью css? Пересмотри лучше видео с обзором макетов
Посоны, такой вопрос, там три одинаковых дефиса такие как я выделил. В фотошопе три одинаковых слоя или как то дублируют себя и может по этому я не могу сохранить?
Сохранить ты можешь т.к. криворукий, скачай avocode лучше
И правильно уже сказали, такая хуйня делается через псевдоэлемент простым ксс в 3 строчки.
ты не можешь*
я таки ее сохранил. Че то не то с фотошопом
http://www.artlebedev.ru/tools/technogrette/html/list-style-image/
Ая-яй, не хорошо товарищей вводить в ересь.
>7 февраля 2004
Сука ну ты тупой пидор
>>383213
>>383218
Если ты сделал так, то просто дай псевдоэлементу color: colorname, а чтобы увеличить размер font-size соответственно, это же просто текст у тебя там внутри
А вообще надо было сделать это типо того:
height 2px
width 10px
background-color colorname
И дальше уже позиционированием куда надо зафигарить, а самой li'шке дать паддинг слева
Охуеть надо было сделать {content :"\2015"}
Никогда бы не подумал что студия лебедева может сделать что хорошее, а не тут то было.
Советую пройти ещё платные, а потом начать верстать макеты, больше тебе реально ничего не понадобится, если будут сложности просто гугли конкретную проблему
Уровень знаний какой? Только курсы прошел и все?
Качай торренты с шапки и проходи интенсивы
Работаю сейлзом в ДС3, выходит порядка 60-65к. Раньше получал 2k $ в месяц - меня устраивало более менее. Но в рашке походу таких светлых деньков теперь не скоро будет.
Раньше занимался версткой работал несколько лет фрилансером (в период где с то с 2005 до 2009, но не очень интенсивно).
Сейчас до хера чего поменялось, но тем немее запустил один коммерческий проект сделав его сам. Знания в вертке конечно нужно будет подтянуть и актуализировать, плюс без знания JS щас никуда.
Так вот думаю, сменить сферу работы на вертску (в офисе поработать), а далее пойти на апворк.
Есть перспективы в офисе получать не меньше моего текущего дохода? За 20 тысяч хуй сосать не могу себе позволить сидеть.
Нет. Сейчас даже за двадцадку придётся дохера чего учить. Поверхностными знаниями новых вещей никого на собеседовании не удивишь.
Так и каким путем лучше пойти? Быть макакой на неполной занятости за копейки?
А кто всрался? ну верстак а там дальше глядишь JS, всякие библиотеки типа Ангуляра и прочей еботы.
Поясните, фикс
Да какая разница сколько тебе? Сядь, учи, пиши код. Даже не задумывайся насчет невозможности вкатывания. Твой мозг так и хочет остаться в зоне комфорта:
>25 лвл, я ничо нимагу уже
>яж долбанный гуманитария, бу-бу-бу
Ну мне кажется, это должен быть весьма нехилый уровень JS, а не "ну верстак а там дальше глядишь JS, всякие библиотеки".
Сам посуди, там миллиард ебаных индусов сидит.
нет блин, ты уже старик полный, хах Ну че за дурь, возможно конечно. Минимальное ограничение что я видел было 30, и то я думаю если соображалка есть то пофиг будет (ну в разумных пределах конечно)
на посмотри видосик на тему
https://youtu.be/7N2a2qTf9ik
на фрилансе судя по заказам надо или быть человек-оркестром (делать под ключ), либо минимум знать движки (wp, joomla, bitrix). Верстка и js там не шибко часто. А еще в русском сегменте прикалывает что стоит например тег верстка - открываешь, а там почти как под ключ
(на истину не претендую, ибо просто просматривал заказы, чтобы иметь для себя представление)
Ангуляр не библиотека. jQuery - библиотека.
Чтобы взяли хотя бы стажером, надо хоть минимальное представление иметь то. А ты еще нихуя не разобрал как я понимаю и уже на собеседование хочешь.
секция карты должна тянуться на всю ширину
а контейнер внутри этой секции делаешь уже вместе с блоком с адресом
ну, типа того вроде, только у тебя див не закрыт contact-us который
вместо button надо a (так как без js должен быть переход на отдельную страницу по PE)
ну и в блоке карты потом будет выше контейнера еще один блок с айдишником, куда ты карту свою интерактивную вставлять будешь в уроке по js
Так там же, цитирую
>- блок карты: по клику на кнопку «напишите нам» возникает модальное окно с формой отправки сообщения
Нас ведь не ведёт на другую страницу.
Ну до явы еще дожить надо.Спасибо.
ну да, а что мешает прицепить модалку на ссылку? В 8 уроке будет расскажут тебе про Прогрессивное улучшение (поймешь про другую страницу)
И не ява, а JS - это разные языки
>http://htmlacademy.ru/ - ультрагоднота
азза, годно, кто на каком уровне? я на 6 ^^
а платный интенсив есть у кого нить?https://htmlacademy.ru/intensive
Бля где вас таких плодят?
Шапку прочитай внимательно и обрати внимание на две ссылки на торренты с интенсивами
ссылка на css указанна?
link href="/assets/course2/final.css" rel="stylesheet">
можеш попробовать в head добавить стили
<style>
.kart {
background: #FF3300; / Цвет фона /
}
</style>
Символов
Посмотри заказы, если можешь выполнить, берись.
По-мне так разумно. Сам я ещё совсем зелёный. Но сначала собираюсь в конторку устроиться.
Псевдоэлементами делай.
А вот какой минимальный уровень необходим для устройства в мелкую конторку интересно.
Походи по мелким конторкам, поспрашивай. Нам расскажешь. Совсем охуели, ленивые мрази.
Я точно не гожусь ещё. Ничего полноценного сделать не смогу, то есть того, что могло быть полезно.бред какой-то Хотел узнать когда стоить начинать проситься на работу.
Как сможешь в полноценное, так и иди.
А ты хорош. Откуда будешь?
попробуй ёба, не ссыкуй, я вот слету (хтмлакадемию проходил) и сверстал простой сайтик с таблицами, сразу так сказать, что вообщем и так понятно
идти только вперед, не отступать и не сдаваться
Берёшь, значит, и вырезаешь вертикальную линию с этой полоски, толщиной в один пиксель и репитишь по иксу, значит.
я нуб, так что возможно говно совет
http://www.cssdesk.com/dWcpa
полоска уходит вверх.
Подскажите, что делать? Много чего еще не доделал, так что не надо тыкать пальцами типа "почему у тебя в SINCE полоска такая широкая?".
Спасибо. Накидал бы тебе няшек, но я на работе.
В общем я про эти ваши блять артикли section head footer и т.д
Не пойму нахуй всю эту систему. Если в общем виде я правильно понимаю?
не h2 а <head> selfix
картинка что-то не грузится
Я хоть и только на базовом, но мне вроде понятно назначение этих блоков.
В базовом об этом даже говорилось.
Я так понял, что главное назначение, это хорошее считывание сайта ботами. А так, мне удобнее читать не сплошные дивы, а структуру с использованием этих, новых тегов.
Не ты один.
Напишу как я понимаю:
Внешний блок не article так как article должен иметь смысл в отрыве от всего остального содержимого, а тут смысл частично утерян так как не понятно чей именно адрес, поэтому я бы сделал это секцией
Далее наш адрес это заголовок, так как семантические теги имеют свою иерархию то в принципе можно писать и h1, хотя и h2 тоже можно оставить
Далее адрес обычным параграфом бы делал, затем телефон ссылкой с приписыванием к адресу tel: чтобы можно было нажав позвонить и точно так же мыло только с припиской
Както так, на объективность не претендую, могу и ошибаться
Те же кто например будет гуглить "прейскурант" продвинутый интенсив 2 занятие отметка 2часа 6 минут
Вообще можно и простым дивом сделать, но типа у секшн хорошо бы чтобы был заголовок. Короче как сеошник скажет так и сделаем, всеравно стилизация по классу)
Нет. Не правильно.
Тут вместо артикл будет секшн, а все остальное - обычне дивы. Кроме h2.
В книге Introducing HTML5 это неплохо прояснено. Можешь глянуть.
Если коротко, то есть пару правил, которые помогают быстро распознать что есть что.
Навскидку вспомнить
1. Article или section практически всегда содержат в себе другие элементы и ВСЕГДА содержат в себе заголовок. Все что не имеет заголовка - див.
2. Section - конкретный блок сайта с заголовком. При верстке сразу становится видно, что вот у меня этот блочок под портфолио, этот под слайдер етц. По сути на секции и разбивают сайт при верстке. Вот эти все разделы в лэндингах - features, testimonal, portfolio, about us - чистешие секции.
3. Article желательно использовать по прямому назначению. То есть это могут быть статьи, документы, части документов, информационные блоки, комментарии, ссылки на статьи кстати тоже. Все что не подпадает под эту категорию можно смело лепить в section.
4. Section может содержать в себе article и не один, равно как и article может содержать в себе section. Во втором случае практически всегда мы говорим о делении конкретной статьи на подразделы.
Вот как-то так.
Делал я как-то сайт для одного знакомого. Позвонил он мне вчера и сказал, что какие-то мудаки хотят получать некоторые данные с его сайта при помощи csv-файла. Прислали какой-то собственный шифр. Ну, там всё понятно, вот только с этими цсв я никогда раньше не сталкивался. Как это обычно работает? Как мне сделать, чтобы они могли этот файл загрузить?
по спеке section не обязан содержать заголовок. но если автору книги удобнее жить в своём удобном мирке с обязательными заголовками внутри секшнов, а ты с ним согласен, то тогда всё ок. только другим не мешайте секшны без заголовков юзать.
Двачую, там в спецификации написано мол тема каждой секции должна быть определена, как правило путем добавления заголовка в секцию
The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
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."
Это кстати тоже говорит в пользу заголовков, так что кто еще живет в манямирке - большой вопрос.
Перевод слова typically тебя не смущает? Что он какбы не равен слову всегда. Так что возможны случаи использования и без заголовков. Ну и валидатор выдает отсутствие заголовка как варнинг, а не ошибку вроде бы
ОО, Илай, братуха-борцуха. У него вообще годные видосы по ИТ, администрированию и прочему говну. Он там чего, до сих пор скитается?
вопросики:
1) чтобы шаб растягивался в зависимости от размеры экрана - нужно достаточно указаывать размеры в %?
2) можно ли также указывать размер текста в %?
3) если ли какой нить док, где все селекторы разобранны на русском ну типо блок (отступ внешний/внутренний - такой селектор, местоположение - такой селектор, размеры - такой-то селектор)
4 день хтмл академии кун
1) Оборачиваешь хедер в див обертку и указываешь ему свойство max-width, если хедер должен тянутся на весь экран делаешь его обычным дивом.
2) Можно. Но лучше его указывать в em и rem. https://learn.javascript.ru/css-units вот тут можно почитать
3) На html-book можешь прочитать про основные теги и селекторы.
двачую, у них уже новый набор пошел даже
Сколько времени учился прежде чем начал работать?
Как давно это было и чего за это время достиг?
Как оценил бы свой уровень перед трудоустройством и что вообще знал?
Планирую я, значит, заняться вёрсткой. Сижу на htmlacademy, базовые курсы прохожу. Потом перейду к продвинутым, а дальше надо будет покупать на торрентах интенсивы, я так понимаю.
Но проблема в том, что родители меня гонят нахуй из дома через месяц-два. Первый месяц мне будет где пожить, а дальше надо будет как-то зарабатывать. Меня, ничего не умеющего, вряд ли возьмут макакой в какую-нибудь контору, так что остаётся одна дорога - фриланс. Да, я знаю, что там дикая конкуренция, да меня предупреждали, что ньюфагам там особенно сложно обосноваться.
В связи с этим вопрос - как скоро я смогу перейти к, собственно, фрилансу? Смогу ли я через месяц заработать себе минимум хоть на хлеб с картошкой?
Неплохая вакансия, на первый взгляд.
Всегда отталкивает, когда пишут, что нужно знать пяток фреймворков, лучше бы сразу писали что они юзают, а не разглагольствовали, хотя наверное это тупой эйчар решил так написать.
Ну а в общем нормальная вакансия вроде, а почему ты спрашиваешь?
Алсо, 8 часовой рабочий день это конечно не очень клёво, я люблю часов 6 чтобы был, но в целом это стандарт конечно у нас особенно в России.
>Москва
>12к
>8 часов рабочий день
>3 года опыта
>десяток фреймворков
Отличная вакансия.
Алсо, насчет фреймворков, когда их используют ворох, варианта два: вакансию в самом деле писал эйчар, второй вариант - это очень низкопробная конторка, которая не могет в универсальность.
>12к
>3 года опыта
Они будут ну ооочень долго искать человека на эту вакансию.
На эти данные некоторые предлагают без преувеличения в 10 раз больше бабла.
ФАКТ!!!
Нет.
пилю сайтик, курю академию
хочу переключатель языков, создал табличку, как её теперь вплотную к верху захуярить?
.lang_table {
float: top;
margin: 0;
}
что еще за float: top?
кстате получилось
body {
margin-top: 0; / верхний внешний отступ /
}
http://ru.stackoverflow.com/questions/216642/Шапка-сайта-убрать-отступ-сверху
Кстати, не раз видел что люди жаловались на отступ этот, а у меня такой хрени не возникало, а все потому что нормалайз юзаю)
Ну с моей (ньюфанской) точки зрения выглядит всё так. У боди есть стандартные паддинги и их нужно обнулить (в самом начале css), а у таблицы ничего не тройгай, она сама впритык встанет.
body {
margin: 0px;
padding: 0px;
}
Подъебал.
На знаю что по ссылке, но если тебе нужны бесплатные курсы, то они есть на codecademy
Тебе для прототипирования чтоль готовые нужны?
Так юзай просто css-фреймворки
Или я тебя не так понял?
мимоанон
Ну, на codecanyon есть много всяких дизайнерских решений с кнопками и прочим, готовых из коробки. Берёшь кусок кода, херачишь к себе, и готово.
Только там всё платно.
Качай пээсдешки и верстай ещё, поверстаешь немного и можешь начинать продвинутый курс проходить.
Что ты вкладываешь в понятие "сделал свой сайт"?
А вообще в интенсиве 4 макета все сверстаешь - садись за продвинутый
Как это работает? Зачем нужно?
Нашел. Вот я дурак.
По первой же ссылке.
https://necolas.github.io/normalize.css/3.0.2/normalize.css
Няша.
Ебать, у неё стим акк. Вот жеж люди всё успевают и потрахаться и в игори поиграть и видео со своим проном залить на порнхаб и ещё жс задрачивать.
Тю бля, разобрался.
Ага, а ты не трахаешься, видео не заливаешь, еще и верстку изучаешь уже пол года.
Насколько я понимаю, есть дизайнер, онЮ в фотошопе, или где там, рисует дизайн страницы, как он видит чтобы "пакайфу есть жи" было.
А задача берстальщика - открыть этот макет в псд-шке, и затем средствами вёрстки (хтмл + ксс) повторить, то что нарисовал дизайнер, ну а уникальные картинки и логотипы тупо вырезать и добавить.
Я правильно понимаю или нет? Что вообще кроется за этим "сверстать макед"?
правильно
Да, я знаю, это просто невероятно и необъяснимо, но факт, что нажатие это когда кнопка мыши зажата на ссылке
Ты интенсив смотрел вообще? В 6 разделе есть скринкаст небольшой про использование иконочного шрифта
Один ты у нас интеллектуальная элита нации, почаще отписывайся тут, а то без твоих умных и нужных комментов сгинем все тут нахер
мимокрокодил
Иду нахуй мимо-тупая-мразь
Реально, неужели вы все тут такие тугие пидоры? 4 блять человека не смогли понять, что в вакансии зп просто как плейсхолдер стоит, пиздец
кек, а потом они сидят тут и ноют, что нету работы, наверняка смотрят вакансии, где написано что зп от 10к и думают, что это реально такая зп, а на деле просто, чтобы больше показов было так поставлено
:/ есть еще focus, когда попал на ссылку через tab
Потому что это не программирование и здешняя аудитория не способна постичь что-то большее, это просто рабочий класс.
Потому что верстка именно html/css все-таки не является программированием, ну а по js есть отдельный тред если что
Бля тебе советовали сделать псевдоэлемент с высотой нужной, шириной и бэкграундколором
А, ты уже про другой, который про синс... тут громов говорил в видосе что можно в одну картинку совместить нердс и синс тут и не ебать мозг
пхп это самый большой зашквар, который возможен в кодерстве, иди нахуй
>>387529
Я тебе уже говорил как это сделать.
Можно ещё так:
1) Делаешь див нужной ширины, ему псевдоэлемент с дисплей блок, нужной высотой и шириной 100%
2) внутри дива спан с текстом "since blablabla", его выравниваешь по центру, даёшь z index и бекграунд колор нужный, чтобы он перекрывал псевдоэлемент дива.
Вуаля.
>>387544
альт+шифт+2
Либо в меню view-layout-columns
Брекетс полное говнище, юзай либо саблайм, либо атом.
Отличий между версиями нету
Короче проще сделать, чем объяснять
http://codepen.io/anon/pen/PPrvZa
Есть ещё другой более крутой способ, но сейчас влом уже делать, весь день ебашил на работе, заебался двигать пиксели
http://codepen.io/anon/pen/epwazN
На данный момент эта хуйня почти ни на что не влияет, скорее всего тебе нет смысла заморачиваться.
Чисто для своего удобства можно юзать хедер и футер, например
С другой стороны рано или поздно поисковики начнут учитывать логическую вёрстку, а люди, которым очень нужно, смогут пользоваться своими стилями или упростить обработку страниц (типа загонять их в читалку — ежели слепые люди, допустим).
Поддерживать прогресс это годное дело.
У меня на собеседовании в конторке на аутсорсе тамошний технический спец про это спрашивал. Я тоже сказал, что мол всю эту хуйню знаю, и даже решительно ему пояснил про отличие секшна от артикла, но мол, использовать только начинаю и без особого энтузиазма, ткак пользу в этом вижу только за счет улучшения читабельности кода.
Он же мне заявил что моя информация устарела, что есть определенное влияние и на производительность, и на работу поисковых алгоритмов и еще по мелочи, типа жирный буст к читабельности у скринридеровпрограммки позволяющие слепым серфить инет, если кто не вкурсе. К тому же это просто хорошая практика вместе с следованием прогрессу.
Вообщем я щас верстаю с использованием всех элементов, и очень этому рад. Всем советую.
>что есть определенное влияние и на производительность, и на работу поисковых алгоритмов и еще по мелочи
Он тебя жестко наебал, к сожалению
Специалист по семантической верстке на яндекс конфе рассказывал, что это всё хуяня собачья, и да, единственный плюс для скрин ридеров, и то лучше делать через специальные стандарты это всё.
Так что на данный момент практической пользы ноль, алсо это не прогресс, а регресс, вместо одного универсального элемента делают кучу бесполезных.
Раскрываю перспективы профессии
Я знал что кроме отрицание ничего в ответ не будет. Но думал может что-то изменилось здесь. похоже что нет
Ну да, я аутист, плюс сильно прокрастинирую.
расскажи плз за грузчика, какие подводные камни, брат жив?
Стеклопакеты уже небось стоят.
То есть есть дизайнеры, они как бы проектируют и рисуют сайт. Они ведь могут просто выучить вёрстку и не ябать мозги. А верстальщику учить дизайн это как-то сомнительно.
Верстальщики учат js и работают фронтэндерами
Потому что в нормальных конторках над одним проектом может корпеть по 10 человек и больше. Там нужна эффективность, когда каждый занимается своим делом. Проект идет как по конвейеру, передаваясь с рук в руки. Пока один закончил таск на этот проект, может сразу же переходить на следующий.
Сколько раз вам объяснять?
А фриланц?
Не знаю о каком ты видео, я про летнюю конференцию, но на самом деле ничего не изменилось даже с того момента, вообще с релиза хтмл5 ничего не изменилось в этом плане.
Хочу задрочить фронтенд, заиметь какой-никакой капитал и вкладываться в светлое будущее в виде сдл и прочих статейников.
Я опоздал?
Ты, блять, гений. Четко все работает, спасибо. Догло курил и не мог понять почему :before лезет сверху на элемент. Я думал before стоят строго перед элементом, ну это потому что я туповат.
Посмотри ещё второй способ, он тоже интересный.
Алсо, для спана с текстом обязательно нужен position relative, т.к. он тоже влияет на взаимное расположение элементов, без него бы полоска шла поверх текста.
Смотри шапку и пасту.
Ты опять начинаешь ебучий шакал?
>>387739
>То есть есть дизайнеры, они как бы проектируют и рисуют сайт. Они ведь могут просто выучить вёрстку и не ябать мозги. А верстальщику учить дизайн это как-то сомнительно.
В манямире розовых пони и единорогов так бы оно и было, но мы увы живем в суровой реальности где дизигнеры ни то что верстать не умеют, даже по сетке свой говнокреатив разбить не всегда умеют, тем и живем
Ничего себе. Значит, действительно, каждому своё. А вообще, много ли заказов, где надо не макет верстать, а самому креативить? Ну там, чисто средствами ксс только рисовать.
не одного не было, зато иногда мудаки в png присылают и типа сам с этим говном разбирайся, таких надо посылать сразу быстро и решительно
фрилансю из мухосранска миллилонника
Ты где заказы то находишь на верстку? (Или ты не только вертску делаешь?)
Просматривал заказики так там то джумла, то вп, то вообще подключ, на верстку и прикручивание плагинчиков на jquery мало видел.
интересующийся
Помню, в первое пришествие в веб, в школьные годы ещё, лет десять назад, наткнулся на джумлу, подумал "говно какое-то этот ваш веб с этой оранжевой фигнёй" и забил. Мой соснический мозг правильно за джумлу рассудил или это крутая штукенция?
Аноны объясните как он увеличивает буквы на 18 минуте в #home h3 и h1? У него вроде даже не прописаны шрифты. Пытаюсь сам так же сделать, но у меня не получается. Размеры шрифта не меняются вообще.
ну я писал как на видео все, и пробовал другие прописывать через гугл фонтс. Все-равно не меняются.
>font: 75px/75px, 'Raleway', sans-serif;
Запятая после line-height лишняя.
font: 75px/75px 'Raleway', sans-serif;
помню в прошлом треде или чуть позже даже, один анон меня уже исправлял насчет этих запятых. Снова наступил на те же грабли.
Спасибо, анон.
Я сам с ними ошибаюсь, обычно пишу отдельно font-size, line-height и font-family.
Что можете посоветовать в качестве наиболее подходящего языка для этого?
Обводкой?
Алсо покидайте примеры хороших, годных, современных макетов. Хочу задрочить ФШ и загребать бабло лопатой(или нет).
С заказами разовыми не связываюсь, удаленно на всякие веб студии, просто потоком в течении месяца на тебя макеты новые падают
Есть только одна проблема, у же 4ю контору скоро буду менять только за этот год, уже пишу это в резюме тупо как "фриланс", а то у следующего работодателя будут вопросы. За эту работу могу сказать только одно, где то через полтора месяца охватывает лютая скука и потеря мотивации, где то еще через месяц-два свистопляска с макетами дивами и прочими скриптами и погоняющий тебя через скайп менеджер заебывает окончательно и ты начинаешь косячить и приходится сливаться. А так работы дохуя на том же хед-хантере и для любого уровня, и платят более менее, ну для моей нищей мухосрани.
>>388005
Хедер прилеплен слишком вплотную к верху
Слишком дохуя пустого пространства везде и всюду
Вертикальный ритм отсутствует как класс
Ноут с вписанным в него макетом - you doing it wrong у дизигнеров есть куча готовых мокапов, гугли как это выглядит по людски
В предпоследнем блоке текст над рукой оче уебищно выглядит, нужна либо другая картинка, либо сместить его куда то влево
Футер вообще пиздец
И это я еще не дизайнер, так из накопленных за год верстки шапочных знаний. Тру дизайнер мог бы поливать говном этот макет часами
Ааааа, понял, значит удаленка, ок, спасибо за ответ)
что курить чтобы сделать менее вырвиглазный макет? на кого ориентироваться? что сейчас в тренде? где почерпнуть основы современного вебдизайна? гугл выдает хуйню, поэтому спрашиваю у тебя, няша
Бамп вопросу. Есть будущее у веб-дизайна? Не перенасыщен ли рынок?
Возможно, лучше пойти в разработку мобильных приложений или SMM? Слышал, что гугл хочет сделать ранжировку по рейтингу автора, что всё катится в пизду социальных сетей и прочее. Не хочу лезть в закрывающийся гроб, посоветуйте пожалуйста
Спасибо за помощь
Какого уровня верстка требуется, какие скиллы будут нужны? Можешь скинуть пример рабочего макета или хотя бы описать его, чтобы понимать уровень задач? В чем заключается ебля со скритами, нужно писать что-то архиебическое или просто подключить парочку готовых на jquery?
Мне как раз тоже одна студия удаленку предложила, я срезался, что мол позже отвечу. И щас вот думаю ответить, но хз, хватит ли моих скиллов, или еще надо что-то подтянуть, чтобы не обосраться.
data: { toggle: 'modal', target: "#imagemodal", backdrop: "static", keyboard: "false" } бекдроп стоит, клики за пределами модалки не срабатывают, но нужно наоборот! Ибо как только я пытаюсь написать что то в инпуте модального окна, оно тут же закрывается.
Прошелся по бесплатным урокам 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/ мол смотри как там и пытайся делать так же
А так всякой хуйни по дизайну в интернетах дохуя, гугли и обрящешь
https://yadi.sk/d/zkbqnXmlkoxKS
Собственно Fundamentals of Design 4ре видоса и pdf'ка
залил, расшарил может кому поможет
Вангую что то нахуевертил у z-index окна и его бэкграунда
Пиздуй в de
хз упячка какаято, провисел на сайте секунд 30 и так и не понял где я и в чем его суть
а еще этот он пиздел что на дваче ток школота в вебмке, легион такого не прощает
Спасибо
Ты на них молиться должен. Одна из самых профессиональных команд нашей страны.
Спасибо, не дошел еще туда.
У меня еще вопрос, почему текст ссылкой стал? Что я делаю не так?
Тю блядь, я там скобку проебал выше.
Анон помоги с "Contact Us". Не получается сделать, как на макете. Что я делаю не правильно?
Не та картинка
привыкай. контейнер, в нем 3 дива (или ссылки), с одинаковым классом. у последнего дива добавляется last-child.
да, и сесть еще придется
>То же касается умников со скриншотами. Если запили скрин и желаете получить внятный ответ – показывайте и код, а лучше оформите все в песочнице. В противном случае не жалуйтесь на реакцю.
Я знаю. Где-то накосячил, но все же не в этом дело. Было бы здорово если бы на причину и этого косяка указали.
*Ошибся где-то с размерами, и поэтому не влезает по 780px(столько в интенсиве ставили)
Слова из моей верстки и из макета становятся равными при размере шрифта в 13px, в макете 16px.
В чем дело?
Ну есть вот такая борода с картинками они как бы на разном уровне получаються. А на макете они стоят как по струночке , ихние центры на одной оси. Я вот за это спрашивал, как выстроить их центры по струнке.
И в макете и в css страницы установлен шрифт 16px, но почему-то выходит такая фигня. Разве размер шрифта не должен быть равен высоте символа?
Все, нагуглил.
Решил и эту проблему.
Шрифт сначала не менял, считая что разница в размерах будет незначительной или не будет вовсе, оказалось очень даже значительна.
Наслушался видать вскукареков копирайтеров, или просто ленивый хуй.
P.S. Запятых перед названием шрифты нет.
Они у тебя на компьютере есть? Если не входят в стандартный набор бери, например, отсюда - https://www.google.com/fonts
ТЫ ЧО, ИНТЕНСИВ НЕ СМОТРЕЛ???
дык я оттуда и беру шрифты.
Вручную.
Каков пиздец, я бы после такого пошел бы продаваном каким-нибудь, лучше помогать наушники подбирать или даже мешки грузить. Блять, да что угодно лучше этого.
Учти, они могут стать дизайнерами
Ну как бы так делает отбитое быдло.
Што? Поясни за гугел
лол, ты там ващет и одного из преподов подчеркнул.
1) появился отдельный раздел на флексбокс
2) раздел на тестирование производительности верстки
пропали разделы про js (я так понимаю связано с их запуском интенсива по js)
Решил полазить в интернете нашел только обновленный базовый (17.08-22.09.2015), но есть ли там различия не знаю так как еще не качал. А вот обновленный продвинутый и интенсив по js найти в открытом доступе не получилось.
Поэтому вопрос: господа, у кого-нибудь есть ссылки на обновленный продвинутый и js или хотя бы на один из них - премного буду благодарен.
Ссылка на обновленный базовый (нужна рега и лайк там чтобы скачать) https://openssource.info/threads/html-academy-mesjachnyj-onlajn-intensiv-sozdanie-veb-interfejsov-s-pomoschju-html-i-css-2015.8356/
http://www.cssdesk.com/P5yLu
вот код. Странно что там кнопка не по центру, а у меня открывается в центре.
Домой приду - поясню.
В продвинутом что указан в шапке есть 2 урока по Js.
Сам интенсив по Js обещали выложить, но воз и ныне там.
Насчет обновленного продвинутого я хз. Не думаю что это так уж критично. Флексбокс охуенно разучивается и сам, нужно только попрактиковаться. Инфы в нете навалом.
Тестирование производительности верстки - уже интереснее да, но ссылок на него я не искал, ткак давно уже все усвоил.
вот переделал. Не знаю нормально так или нет. Масштаб экрана поставил на скрине 90%.
Сейчас сижу на академии, разбираю базовые курсы, восстанавливаю старые знания. Затем перейду на интенсивы. Этих действий хватит чтобы достичь цели?
Алсо, стоит ли брать подписку на html Academy ради продвинутых курсов, если я собираюсь в интенсивы?
Ну у тебя на первом скрине еще и текст не так переносился, а сейчас вроде норм
лучше бы паддинг увеличил правый для абзаца - вставлять br просто так посреди текста - плохая практика
> Этих действий хватит чтобы достичь цели?
Даже не близко
>Алсо, стоит ли брать подписку на html Academy ради продвинутых курсов, если я собираюсь в интенсивы?
Нет
>Даже не близко
Это печально. Шапку читал, но всё же, какой порядок действий посоветует анон чтобы прийти к минмальному успеху?
Базовые курсы академии - интенсивы - работа с макетами - изучение JS. Такой порядок. Что ещё мне нужно?
походу я накосячил, и делал все не правильно.
http://www.cssdesk.com/6WpDt
.info {
\twidth: 1180px;
\tmargin: 0 auto;
}
вот тут я так думаю я должен был указать 700px в ширине, как указано на макете. После написать margin-left: 150px;
Что-то я запутался малость
ну простые ленды верстать сразу после академии помоему можно верстать, не?
>даже не близко
ой иди нахуй маня
неделю на академии кун
Только вот заказов на просто ленды во фрилансе, насколько я знаю, очень мало. Да и те слишком мощные. К ним после одного сверстанного макета не подступишся.
Ты сделал меня радоваться. Я просмотрел несколько проектов, некоторые выглядят не слишком сложно, хотя много незнакомых нюансов. Поэтому трудно судить о необходимом объёме знаний.
>>390177
Я, конечно, попробую покрафтить несколько макетов на пробу, прежде чем лезть в незнакомое болото. Только тут у меня и сомнения - хватит ли крафта макетов чтобы смочь затем в заказы или нужны принципиально другие знания, которых на академии нет.
пока нихуя не скажу про фриланс, но можно приклеится к дизайнерам/студиям с ними пилить и свою студию раскрутить
что вообще может быть сложного в верстке лол, все элементарно и обсосанно на многих сайтах
А кому нужен рандомный ноунейм, прочитавший в интернете две статьи о верстке?
хуяришь их ссылками, делаешь одинаковую высоту, display: inline-block, vertical-align: top; ну и маргин всем задаешь одинаковый, ширину тоже. картинку впихиваешь при помощи background-image. и background-position каждому из них задаешь.
извини, что долго отвечал
я тут тебе простыню накатал, но случайно обновил браузер, и все нахуй стерлось.
короче:
во первых, !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) на самом деле, недочетов много, мне просто лень писать дальше, я не тот анон, который хотел тебе руки вырвать, потому не буду дальше писать, он все остальное допишет
я тут тебе простыню накатал, но случайно обновил браузер, и все нахуй стерлось.
короче:
во первых, !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) на самом деле, недочетов много, мне просто лень писать дальше, я не тот анон, который хотел тебе руки вырвать, потому не буду дальше писать, он все остальное допишет
а ты предлагаешь все хуярить таблицами? или инлайн-блоками? или, быть может, флекс-боксами?
Это бы не было так смешно, если бы один хуй из академии, громов, не говорил постоянно, что за такое убивают ващет. Причем я читал как-то бложек этого громва, он так говорил еще задолго до всяких флексбоксов, имея в виду, что надо не пихать распорки, а ставить оверфлоу: хидден родителю. В интенсиве, правда, и про это тоже ни слова, лол, не говоря уж про флексы.
стало интересно, не пробовал оверфлоу, но попахивает говнокодом. все ж таки лучше (как по мне) на распорках делать
Ой почистил бы ты лучше уши когда слушаешь, он имел ввиду что пустой элемент не надо в html вставлять задавая ему clear, а фигачить псевдоэлементом распорку. А в продвинутом он сказал что не надо когда пишем по БЭМ давать блоку вспомогательные классы в html типа того же clearfix а просто в стилях делать примесь.
Да, и про флексы есть в интенсиве, правда не целый раздел, но все же.
Бложик его я не читал, поэтому если ткнешь носом, где он пишет что надо использовать оверфлоу вместо распорки, то с удовольствием почитаю
>>390585
>>390587
Правильный сброс float‑блоков
У блочной верстки множество плюсов, но есть и минусы. Самый главный из них связан с обтеканием элементов (блоков, имеющих свойства float: right или float: left). Если такие блоки сильно отличаются по высоте, то следующие за ними в потоке HTML‑документа элементы начинают обтекать один из блоков.
Для «сброса обтекания» часто используется следующий принцип:
<div id="content"> <!- родительский блок->
[… ]
<div style="float: left">некое содержимое</div>
<div style="float: left">другое содержимое</div>
<div style="clear: both"></div> <!-- «сбрасывающий» блок -->
[...]
</div> <!-- /content -->
То есть вставляется дополнительный «сбрасывающий» блочный элемент, предотвращающий смещение последующих элементов (в примере выделен полужирным).
Этот подход имеет право на существование только в одном случае – когда невозможно указать ширину родительского блока. Если же ширину родительского блока указать можно (единицы измерения значения не имеют), то короче и правильнее опустить «сбрасывающий» блок, а для родительского блока задать следующие CSS‑свойства:
#content {width: [ширина]; overflow: hidden}
Есть похожие техники, связанные с использованием псевдокласса :after или свойства height: 0 – несколько менее удобные и красивые, на мой взгляд.
https://web.archive.org/web/20140628222109/http://nicothin.ru/page/10-priznakov-professionalnoj-verstki.html
>>390585
>>390587
Правильный сброс float‑блоков
У блочной верстки множество плюсов, но есть и минусы. Самый главный из них связан с обтеканием элементов (блоков, имеющих свойства float: right или float: left). Если такие блоки сильно отличаются по высоте, то следующие за ними в потоке HTML‑документа элементы начинают обтекать один из блоков.
Для «сброса обтекания» часто используется следующий принцип:
<div id="content"> <!- родительский блок->
[… ]
<div style="float: left">некое содержимое</div>
<div style="float: left">другое содержимое</div>
<div style="clear: both"></div> <!-- «сбрасывающий» блок -->
[...]
</div> <!-- /content -->
То есть вставляется дополнительный «сбрасывающий» блочный элемент, предотвращающий смещение последующих элементов (в примере выделен полужирным).
Этот подход имеет право на существование только в одном случае – когда невозможно указать ширину родительского блока. Если же ширину родительского блока указать можно (единицы измерения значения не имеют), то короче и правильнее опустить «сбрасывающий» блок, а для родительского блока задать следующие CSS‑свойства:
#content {width: [ширина]; overflow: hidden}
Есть похожие техники, связанные с использованием псевдокласса :after или свойства height: 0 – несколько менее удобные и красивые, на мой взгляд.
https://web.archive.org/web/20140628222109/http://nicothin.ru/page/10-priznakov-professionalnoj-verstki.html
проиграл с этого дауна
2008 год...
Да там реально большинство какие-то домохозяйки или вахтеры, тоже удивлялся этому.
Аж стыдно. Спасибо.
<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а нихуя не становиться. Я если честно в ахуе. Я просто не могу понять почему не становиться. Бля, помогите.
Я бы сделал так. https://jsfiddle.net/vo3ab7o0/
display: table-cell;
Правда ширину придется не в процентах устанавливать.
И кстати я не знаю легально так делать или меня опытные версталы виебут.
поясните как кнопку ставить по середине. Уже час ебусь с ней, и гугл молчит.
Нормально будет выглядеть если в самом начале я создам 3 класса для span
например
.light {font-weight: 300}
.normal {font-weight: 400}
.bold {font-weight: 700}
А то бывает в одном заголовке 3 вида текста и их как то надо отбить. А так еще и просто в тексте смогу использовать.
margin-left: 35%;
Ночью сделаю
http://www.freecodecamp.com
Сам только начал, но похоже что такие же как и на codecademy интерактивные курсы, но дополнительно входит в обучение участие в некоммерческих проектах.
Завтра заценю, пасибо
Спасибо
дерьмовый вариант
ломается при ресайзе. вся проблема в колонках. все три колонки фиксированной ширины => при ресайзе всегда будут ломаться. тут выбирать надо:
1) кнопка фиксированной ширины, у колонок максимальная ширина указана, они ужимаются. проблем при ресайзе быть не должно.
2) все фиксированной ширины, при ресайзе ломаются, лечим media-queries под разрешения экрана.
эмнюме...
статическая страница получается. тогда нужно медиа-запросы делать, это как раз второй вариант.
ресайз - изменение размеров окна браузера. сайт начинает ужиматься при уменьшении окна. примерно то же самое происходит, когда ты заходишь на сайт с планшета или мобильника. сайт ужимается под размер экрана устройства.
чтобы сайт выглядел нормально при разных расширениях, его делают либо резиновым, либо адаптивным (либо резиной с адаптивом, что многие порицают). резина - большая часть значений в % высчитывается. адаптив - медиа-запросы в css. почитай про медиа-запросы и адаптивную верстку
муторно, долго, получается, что некоторые значения ты делаешь в процентах, а некоторые в пикселях, потом в медиа-запросах все переопределяешь итп. удобнее сделать адаптив - выглядит лучше, легче в работе итп
нахер?
можно сохранить страницу с данными + картинки + css.
можно парсить картинки с сайта.
скачать шаблоны нельзя, так как они на сервере собираются, и ты получаешь уже готовые html и css файлы. а на сервере это могут быть какие-нибудь jade и stylus файлы.
ну я хочу у одного сайта скачать html, css и js файл, чтобы посмотреть код через submit text 3. Потому что через просмотр кода неудобно смотреть.
Люди такого уровня здесь не сидят. Тут полнейшие ньюфаги. А тебе нужен уровень мидл+. Или сеньйор.
Я почти только что устроился на работу вертальщиком с окладом в 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 соответственно. Вообще очень удобно, хотя бы оттого что не нужно выдумывать длинные названия. А еще в этом проще ориентироваться.
А теперь вопрос: какой велосипед я только что придумал? Хочу почитать побольше о таком способе, но в душе ниебу как он называется. Как называется такой способ верстки, анон?
Это что то типа отношений между элементами.
Если див с классом title не один , но именно когда он вложен в див с классом slide надо поменять какие то стили. Это норм практика. Ты ничего не изобрел. Почитай про селекторы отношений в css /
Вы видите копию треда, сохраненную 6 января 2016 года.
Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее
Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.