Список из самых популярных хештегов по теме #ВЕРСТАЛЬЩИК

⚡️ как сработаться дизайнеру и верстальщику (часть 2) ⠀ в первой части этого поста я рассказала о том, что должен делать дизайнер для комфортного взаимодействия с верстальщиком — пост можно найти по хэштегам #chernoova_офрилансе #chernoova_ядизайнер ⠀ ⠀ а теперь о том, что должен или не должен делать ВЕРСТАЛЬЩИК: ⠀ 1. нельзя, нельзя, НЕЛЬЗЯ менять дизайн без ведома дизайнера ! я вообще не понимаю этой фишки верстальщиков, когда в них просыпается креативный дизайнер и они начинают менять дизайн и делать сайт «попроще» да чтоб побыстрее было. 
в большинстве случаев это происходит из-за того, что какой-то элемент или функция кажутся им сложным в реализации, а дальше — из-за собственной лени и не желания погуглить и научиться. ⠀
и если вдруг вам кажется, что «вот эту вот мелочь можно не делать» — то нет. мелочи — это как раз-таки самое важное ⠀ 2. если вам предоставили дизайн-макеты только десктопной версии (что нередко встречается на фрилансе), а заказчик просит вас сделать адаптив — сделайте его по-человечески, хотя бы так, чтобы сайт не выглядел криво и уродско и нормально отображался на всех устройствах. ⠀ 3. попробуйте понять дизайнера, зачем он нарисовал это так, а не иначе. а лучше — побудьте в его роли сами и задизайните сайт, а потом дайте свою работу дизайнеру на оценку. это будет поводом убедиться, что дизайнеры не даром едят свой хлеб. ⠀ 4. общайтесь с дизайнером. если дизайнер забыл что-то отрисовать (например, hover-эффекты) или вам из макета не ясно, как будут вести себя элементы — спрашивайте и еще раз спрашивайте. словом, работайте, как команда. от этого и проект станет только лучше, и совместная работа не будет вызывать неприятных эмоций. (+ см. пункт 1) ⠀ 5. если вы находитесь на постоянном сотрудничестве с каким-то дизайнером — выясните, с какой программой вам обоим будет удобно работать. ⠀ вроде всё :) ⠀ ⠀ если я что-то упустила — дополните, пожалуйста ⠀ ⠀

⚡️как сработаться дизайнеру и верстальщику (часть 1) ⠀ ⠀ дизайнеры гневаются на верстальщиков, верстальщики — на дизайнеров. эти войны закончатся, когда каждый из нас будет проявлять профессионализм, желание развиваться и учиться новому, не бояться трудностей. ⠀ ⠀ итак, что должен делать ДИЗАЙНЕР: ⠀ 1. использовать сетку. сетка задает иерархию вашего макета и её нельзя игнорировать. ⠀ 2. понимать, как верстается сайт. я уже говорила, что дизайнер не должен УМЕТЬ верстать, но он должен ПОНИМАТЬ, как будет верстаться сайт, чтобы объективно оценить сложности задачи, которую он ставит перед верстальщиком. сверстать можно всё, но многое зависит от опыта верстальщика: кому-то на задачу потребуется пару часов, а кому-то целая неделя. если возможно, обсудите вашу идею с верстальщиком. ⠀ 3. показывать состояния объектов (кнопки, анимации, эффекты, поля, формы). анимацию и эффекты опишите хотя бы словами, кнопки, ссылки и прочее — показываем в редакторе изменение состояния (размер/форма/цвет и т.д.). иначе верстальщик сам додумает, какими должны быть объекты при наведении. можно сделать это как на самом макете, так и в отдельном документе.
⠀ 4. именуйте и группируйте слои. верстальщик должен с лёгкостью ориентироваться в вашем макете. должна быть понятна иерархия макета. слои должны идти друг за другом, а не в хаотичном порядке. разные составляющие одного объекта также должны быть объединены в группы (например, форма и текст у кнопки или карточка товара) ⠀ 5. типизируйте объекты. если это заголовки — то у них одинаковый шрифт, кегль, начертание. кнопки одинакового размера, отступы и т.д. вовсе не обязательно, чтобы весь макет выглядел одинаково, бывают исключения из правил, но чем больше у вас типизированных объектов, тем проще верстальщику с ними работать. ⠀ 6. иконки и изображения соберите в отдельную папку проекта. ⠀ 7. дайте комментарии по динамичным и анимированным элементам дизайна, функциям, чтобы верстальщик знал о вашей задумке. ⠀ ⠀ кому есть, что добавить — велкам в комменты ⠀ #chernoova_офрилансе #chernoova_дизайнер

Всем привет . ⠀ Сегодня поговорим о css-свойстве box-sizing. ⠀ Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px (все примеры можете посмотреть в галерее ☝️). ⠀ Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing. ⠀ У этого свойства есть значения: ⠀ - content-box — по умолчанию, контент внутри div'а будет отображаться как в примере выше: вместо 100х100 будет 140х140 ⠀ - border-box позволяет значения padding и border вычитать из ширины и длины блока, т.е. в нашем примере div останется с фиксированными параметрами, но для контента останется 60х60 px ⠀ - padding-box, при котором свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border). ⠀ - inherit, при котором блок наследует значение родителя. ⠀ Поддержка браузерами ⠀ Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com. ⠀ Практический пример ⠀ Рассмотрим реальный пример использования свойства box-sizing. Есть меню из пяти пунктов: ⠀ Добавим немного фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px: ⠀ Меню выглядит нормально, но при добавлении левого или правого border'а последний пункт меню съезжает, потому что не помещается, но если использовать box-sizing, то этой проблемы нет. ⠀ Данный пост является адаптацией статьи css3: свойство box-sizing на Хабре. ⠀ Надеюсь было было полезно, не забываем ♥️

Как я делал свой первый заказ в Интернете...⠀ ⠀ Помню у друга спрашивал, как перевести гривны в рубли. Он тогда работал в самом популярном банке Украины и естественно знал, что к чему.⠀ ⠀ Артем еще предупредил: "Ты что, в интернете покупать что-то вздумал?  Смотри там, не вляпайся никуда!"⠀ ⠀ Я тогда поугукал ему в трубку телефона, а сам себе на уме...⠀ ⠀ В общем, это была моя первая покупка в интернете. Ссыкотно было очень. А вдруг обманут, а вдруг что-то впарят или просто кинут.⠀ ⠀ Но тяга к расширению знаний и навыков была сильнее. Я хотел развиваться!⠀ ⠀ Покупал тогда обучающий курс по верстке HTML+CSS. Как сейчас помню, назывался он "Верстаем на 5 с +" А решающим фактором к покупке стала фамилия автора - Михалевич. Сергей Михалевич - инфобизнесмен.⠀ -----------------------------⠀ Это ни в коем случае не реклама! Люди из моего близкого окружения поймут, что он однофамилец еще одного моего друга, близкого друга.⠀ -----------------------------⠀ В итоге купил я этот курс. Деньги перевел через PayPal вроде или что-то похожее, не суть.⠀ ⠀ Видеоуроки оказались очень таки полезными. Я изучил основы верстки и тем самым заложил фундамент для собственного совершенствования как верстальщика.⠀ ⠀ Мне стало гораздо легче разбираться с особенностями и принципами сайтостроения. Научился править шаблоны для движков, а позже - создавать собственные.⠀ ⠀ Да много чего я научился, благодаря вовремя заложенному фундаменту. Кроме того, открыл для себя эру интернет покупок.⠀ ⠀ Мораль сей басни такова:⠀ 1. "Лучшая инвестиция - инвестиция в саморазвитие" - в этом я убедился на собственном опыте и рассказал тебе.⠀ 2. Если чувствуешь, что все знаешь в своей работе или ремесле - это тупик. Срочно ищи пути совершенствования. Не важно - платные или нет!⠀ 3. Развивайся постоянно. Когда ты стоишь, все двигаются вперед. В этом я тоже убедился лично и скоро расскажу тебе.⠀ ⠀ А теперь просьба. Если ты прочел и тебе понравилось - поставь лайк. Я ведь стараюсь не для себя. Все эти - чистая правда. Такого мало в сети. А если не понравилось, напиши в комментариях, почему. Я постараюсь писать лучше.⠀ ⠀ #mediol #верстка #верстальщик #саморазвитие #инвестициявсебя #создатьсайт #заказатьса

Всем привет . ⠀ Продолжаем про гриды. Следующее, что вам потребуется узнать, как разместить элементы на сетке. Здесь вы получаете сверхспособности, так как создавать макеты очень просто. ⠀ Давайте создадим сетку 3x3, используя ту же разметку, что и раньше. ⠀ .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } ⠀ Это приведет к макету как на второй фотке . ⠀ Заметьте, мы видим только сетку 3x2 на странице, в то время как мы определили ее как сетку 3x3. Это потому, что у нас есть только шесть элементов, чтобы заполнить сетку. Если бы у нас было еще три, то и нижняя строка была бы заполнена. ⠀ Для позиционирования и изменения размера элементов мы будем указывать их и использовать свойства grid-column и grid-row: ⠀ .item1 { grid-column-start: 1; grid-column-end: 4; } ⠀ Здесь мы говорим о том, что мы хотим, чтобы item1 начинался с первой линии сетки и заканчивался на четвертом столбце. Другими словами, это займет всю строку. (смотри 3 картинку). ⠀ Вы, наверное, в замешательстве, почему у нас 4 столбца, когда у нас есть только 3 столбца. На следующем фото я отобразил линии столбцов черным. ⠀ Обратите внимание, что теперь мы используем все строки в сетке. Когда мы сделали чтобы первый элемент занимал весь первый ряд, он сдвинул остальные элементы вниз. ⠀ Наконец, я хотел бы показать более простой синтаксис для примера выше: ⠀ .item1 { grid-column: 1 / 4; } ⠀ Чтобы убедиться, что вы правильно поняли эту концепцию, давайте немного перестроим элементы. ⠀ .item1 { grid-column-start: 1; grid-column-end: 3; } ⠀ .item3 { grid-row-start: 2; grid-row-end: 4; } ⠀ .item4 { grid-column-start: 2; grid-column-end: 4; } ⠀ Как это выглядит посмотрите на последней картинке. Попытайтесь понять почему это выглядит так. Это не должно быть слишком сложно . Если было интересно - не забываем ❤️.

ЧТО ТАКОЕ «ДОРОГО»... ⠀ ...и как с этим бороться Если вы сами продаете себя, то рано или поздно вы столкнетесь с тем, что клиент скажет вам «Это дорого». Вот несколько причин, почему заказчики это говорят и советы, которые помогут вам отстоять свою цену и не лишиться клиента ⠀ 1⃣ Он не знает цен Вероятно, клиент просто решил, что дизайн сайта будет стоить ему 10 000 рублей и выделил их из своего бюджета, не ознакомившись с ситуацией на рынке. Это не значит, что у него нет 30, 50 или 100 тысяч. Дайте ему понять, что вы грамотный специалист и стоите тех денег, которые просите. Уточните, что именно он хочет получить за свои деньги. Возможно, ему действительно нужно что-то ультра-простое и цена вполне соответствует. Спросите, какие у него есть сомнения и возражения помимо цены. Когда вы развеете их, может оказаться, что теперь цена вполне понятна и оправдана. ⠀ 2⃣ Он хочет сэкономить Если вы уверены в себе и знаете, за что берете деньги. То объясните, что качественный продукт не может стоить дешево и покажите примеры работ, которые представляют вас, как высококлассного специалиста. Или объясните на словах, почему вы столько стоите. ⠀ 3⃣ У него нет денег Клиент, возможно, хочет сайт именно у вас — но у него и правда нет таких денег. ⠀ ❓ А что вы отвечаете, когда вам говорят «это дорого»?

Всем привет Как у вас дела? У меня все хорошо, рада солнышку ☀ Сегодня первый день, после длительного перерыва, как я включила в свой режим спорт Потому что после НГ никак не приду в чувство себя. Спорт помогает почувствовать себя намного лучше и энергичнее Заказов пока нет и я решила заняться своим сайтом-портфолио. Потому что сейчас он совершенно не красив. Я делала его так быстро и даже не задумывалась особо о привлекательности. И вот пришел тот момент, когда мне хочется, чтоб было красиво. Ведь это считай мое лицо. Я не дизайнер, никогда не развивала а себе эти навыки. Но я начала и мне нравится то, что получается.

Верстальщик... ⠀ Одна из 100 удаленных специальностей. И по совместительству - одна из моих...основная на данный момент. ⠀ У меня сейчас одна еженедельная газета и одна ежемесячная. ⠀ Когда люди слышат о моей работе впервые, то округляют глаза. А что это? А как это? ⠀ Расскажу вкратце✌. ⠀ Работаю я в 1⃣ Adobe InDesign - это профессиональный векторный редактор именно по верстки полиграфической продукции. ⠀ 2⃣ Photoshop. Этот растровый редактор использую для работы с фото и изображениями. ⠀ Это основные программы, без которых верстальщику не обойтись. ⠀ Так-же для работы надо знать хотя-бы минимум офисных программ. Так как информацию в основном отравляют в Excel и Word. ⠀ Это это все! Из технической части. Не так и много. ⠀ Но сверстать мало, самое страшное правки! Когда бывает, что всю сделанную работу нужно переделывать так как СРОЧНО! ЕЩЕВЧЕРАНАДОБЫЛО! Требуют убрать один материал, заменить его третьим, а на третий поставить вон тот. И все это обычно происходит тогда, когда уже горят все сраки...упппс сроки. ⠀ В принципе, верстка - это увлекательный процесс, когда из кучи информации в папках, выходят страницы -> полосы -> газеты/книги/буклеты и так далее. ⠀ До тех пор, пока не работала в редакции, никогда и не задумывалась о том, как вообще создают ту или иную полиграфическую продукцию. ⠀ А это творческий процесс большой группы людей. Изначально собирается материал, который в последствие украсят пустые полосы. Материал идет от корреспондентов, администраций и прочих городских служб и авторов. ⠀ Вся информация проходит через редактора, корректора и после попадает к верстальщику... после на готовых полосах возвращается к редактору и корректору... идет вычитывание, вносятся корректировки и правки.... И так от верстальщика к корректорам до тех пор... пока зоркий глаз корректора перестанет видеть ошибки . ⠀ Далее газета в виде PDF отправляется в типографию, там снова зоркий корректор просматривает все полосы и дает добро в печать. И далее полосы отправляются в руки работников типографии. ⠀ Так рождается газета.

ИНСТРУМЕНТЫ, КОТОРЫЕ НУЖНЫ ДЛЯ ВЕРСТКИ Когда не хватает фото-контента, начинаешь поднимать все свои архивы. Фотка с бывшего рабочего места, по которому я совершенно не скучаю ⠀ ✅Для начала, конечно же необходимо знать и уметь применять HTML и CSS. ⠀ ✅Также желательно иметь хотя бы минимальные представления о JavaScript, уметь применять JQuery ⠀ ✅IDE, либо текстовый редактор для написания кода (я использую Visual Studio) ⠀ ✅ Дизайн-макет, по которому вы будете верстать ⠀ ✅ Графический редактор, собственно, чтобы открыть макет (я работаю с PSD файлами) ⠀ ✅ Браузер для просмотра вашей верстки Вот и все, что вам нужно, чтобы начать практиковаться. . . . . . . . . . . . . . #фриланс #фрилансер #яфрилансер #жизньфрилансера #буднифрилансера #разработкасайтов #верстальщик #версткасайта #вебразработка #верстка #свобода #фронтенд #developer #webdeveloper #html #css #js #javascript #jq #jquery #php #python #django #wordpress #git #gulp #sass #scss #postcss