Задать вопрос
  • Где можно черпать вдохновение веб-дизайнеру?

    @aayarushin
    Ответ написан
    Комментировать
  • Что еще изучить верстальщику?

    @BubonicPestilence
    PHP/Ruby & Funny CRMs :D
    Ну вот смотри:

    HTML/CSS - это как математика за 5ый класс, да на неё срать, потому что мы все это умеем.
    Но SCSS/SASS без CSS ничто. А что такое SCSS? -30% CSS кода.
    Согласись, что такое писать в 1000 раз красивее:

    @mixin flatFormBaseColorizer($a, $b, $c, $d) {
      border-color: $a;
      color: $c;
      
      &:focus {
        border-color: $b;
        color: $d;
      }
    }
    
    @mixin flatFormBase() {
      border-width: 1px;
      border-style: solid;
      border-radius: 5px;
      background-color: white;
      font-size: 15px;
      padding: 5px 7px;
      
      @include flatFormBaseColorizer(join($colorsGray, ($fontColor, $fontColor))...);
      
      &.partial {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }
    }
    
    .flatForm {
      input {
        @include flatFormBase();
        
        &[type="text"], &[type="password"] {
          &.blue {
            @include flatFormBaseColorizer(join($colorsBlue, ($fontColor, $fontColor))...);
          }
        }
        
        &[type="checkbox"] {
          margin-right: 8px;
          
          & + label {
            font-size: 14px;
            font-weight: bold;
            text-align: left;
          }
        }
      }
      
      textarea {
        @include flatFormBase();
        
        &.blue {
          @include flatFormBaseColorizer(join($colorsBlue, ($fontColor, $fontColor))...);
        }
        
        &.green {
          @include flatFormBaseColorizer(join($colorsGreen, ($fontColor, $fontColor))...);
        }
      }
      
      select {
        @include flatFormBase();
      }
      
      input[type="submit"], input[type="reset"], button {
        @include flatFormButtonColorizer($colorsGray...);
        
        &.blue {
          @include flatFormButtonColorizer($colorsBlue...);
        }
        
        &.green {
          @include flatFormButtonColorizer($colorsGreen...);
        }
        
        &.red {
          @include flatFormButtonColorizer($colorsRed...);
        }
      }
    }


    То же самое и с JS; Angular, react и т.д. дают тебе большую скорость/удобность, но без JS ты не сможешь реально адаптировать решение для задачи.

    Да, сейчас такой век, когда всем подавай красивые фронты.
    Изучая руби, ты или станеш веб-мастером(мало изучения) или программистом(полностью забудешь о вёрстке).

    Итого мы получаем вывод:
    1. Хочу быть "крутым верстальщиком": css-tricks, фреймворки, типография
    2. Хочу быть "веб-мастером": подучи rails/php, но ВМ часто уходят в создание своих сайтов и бизнеса.
    3. Хочу быть программистом: забиваешь на вёрстку, ныряешь в JS/PHP/Ruby

    ИМХО: Лучше быть профессиональным мего-крутейшим верстальщиком знающим angular, sass, react, все браузеры, и никогда не говорить заказчику "нет". В этом случае, они будут подсиживаться на тебя ;)
    Ответ написан
    Комментировать
  • Скрипт поиска по html странице?

    swipeshot
    @swipeshot
    Учусь на ошибках.
    Код в исходниках.
    Вот

    ЗЫ: я нашел в гугле. А вы искали?
    Ответ написан
    Комментировать
  • Варианты использования clearfix?

    @BelkinVadim
    Frontend разработчик
    Нужному классу просто добавляют те же css параметры что и у clearfix.
    .clearfix:before,
    .clearfix:after {
      content: " ";
      display: table;
    }
    .clearfix:after {
      clear: both;
    }
    
    .header:before,
    .header:after {
      content: " ";
      display: table;
    }
    .header:after {
      clear: both;
    }

    Никто такое не запрещает, в большинстве фреймворках практикуется. При использование препроцессоров можно использовать extend как вам посоветовали выше.
    Ответ написан
    1 комментарий
  • Как заработать знаниями html/css?

    @sarathorn
    php программист, веб-дизайнер, коллекционер
    Изучать не просто html+css, а изучать уже конкретно вёрстку под определённые движки: Joomla, WordPress, Drupal, OpenCart. И на биржах фриланса выставлять себя как верстальщика под определённые движки. Для полноценной визуальной составляющей сайтов хорошо бы выучить основы JS (jQuery)
    Ответ написан
    Комментировать
  • AngularJs для обычных сайтов - портфолио, визиток и т.д. стоит использовать или нет??

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Визиткам, портфолио и магазинам нужна индексация поисковиками. С angular это не то чтобы невозможно, но очень костыльно. Смотрите в сторону Backbone + (React|Ractive).
    Ответ написан
    Комментировать
  • Стоит ли начинать заниматься программированием в 30+ если до этого не программировал?

    opium
    @opium
    Просто люблю качественно работать
    Вы так говорите как будто в 30 лет у вас нет рук и ног и вывалился глаз.
    Берите и делайте и меньше задавайте глупых вопросов на тостере.
    Ответ написан
    5 комментариев
  • Почему использование !important крайне не желательно?

    Symphony
    @Symphony Куратор тега CSS
    Аналог из жизни, после экзамена:
    ----- проходные места (первые пять) -----
    • 1 место: Вася (90 баллов из 100 )
    • 2 место: Катя (85 баллов из 100)
    • 3 место: Сережа (25 баллов из 100) - !important - сын депутата
    • 4 место: Лена (80 баллов из 100)
    • 5 место: Андрей (75 баллов из 100)

    ----- не проходные места -----
    • 6 место: Женя (70 баллов из 100)
    • 7 место: Лера (65 баллов из 100)
    • 8 место: Гриша (60 баллов из 100)

    ...
    Ответ написан
    1 комментарий
  • Почему использование !important крайне не желательно?

    SagePtr
    @SagePtr
    Еда - это святое
    Использование !important говорит о кривой структуре, когда приходится так извращаться, чтобы перебить другой стиль.
    Ответ написан
    Комментировать
  • Сколько Вы зарабатываете (для дизайнеров фрилансеров)?

    Столько вопросов таких. Скажите, а вам зачем такой вопрос? Вы хороший дизайнер? Или начинающий? Вы понимаете, что как вы относитесь к своей работе - так вы и будете зарабатывать? Вы понимаете, что если вы погружаетесь в "решение задачи клиента" - то пусть через тернии, через шишки- но вы будете зарабатывать потом сколько вы сами захотите? Не "вот я нарисовал два варианта", а "я предлагаю вот два варианта, один из которых вот так воспринимается вашей целевой аудитории и по (я для примера) последним исследованиям британских ученых помогает улучшить юзабилити за счет контраста вот этого элемента и этого. А во втором варианте я вот здесь сделал много пустого пространства, потому что последние веяния в дизайне вот такие и такие - вот примеры сайты с минимализмом. Здесь я не стал использовать Lorem Ipsum, а заменил на более менее подходящий текст на кириллице, чтобы потом не было неожиданностью. Посмотрите, пожалуйста два блока." Ну и так далее. А знаете какому фрилансеру я бы больше всего платил? Который вовлекает меня в создание дизайна и обосновывает свою позицию. Не через неделю на готовом уже дизайне "Вот я сделал красный и черный", а "до" этого "Я предлагаю сделать контраст между красным и черным, элементы такие то красным, элементы такие то черным".
    Ответ написан
    Комментировать
  • Можно ли начать изучать JS зная CSS+HTML?

    mrusklon
    @mrusklon
    Не получается? Яростно гугли!
    если ты можешь что то сверстать , ты знаешь html , а если можешь сверстать красивый шаблон то и css знаешь хорошо.
    Js учить нужно только в таком порядке , ты готов.
    Ответ написан
    1 комментарий
  • Можно ли начать изучать JS зная CSS+HTML?

    Не можно, а нужно
    Ответ написан
    Комментировать
  • Какие требования к графике (визитки, папки...)?

    Во-первых, в любом случае надо взять тех.требования для файлов у "печатников". Там уже освещено куча важных моментов.
    Во-вторых, нужно изначально все делать в цветовой моделе CMYK.
    В-третьих, нужно не забывать про границы и расположение информации. Я считаю, что от обрезного края до текста должно быть 3мм минимум, лучше больше.
    В-четвертых, нужно помнить, что на разных бумагах ваше творчество будет смотреться очень по разному.
    В-пятых, как по мне самое важное - ВСЕГДА согласовывайте макеты, цветопробы и пробники материалов у ответственного лица с подписью.

    Недавно была отличная и наглядная статья на эту тему. Там расписаны самые частовстречаемые "узкие" места в подготовке к печати.

    з.ы.: Да и про черный цвет в предыдущем коменте - это тоже очень важно. Расползание черного на составляющие - это одна из самых распространенных проблем и при конвертации файла из RGB в CMYK, поэтому лучше изначально делать все в CMYK.

    з.з.ы.: В векторных редакторах (Иллюстраторе и Кореле) очень удобно при предварительном просмотре перед печатью посмотреть как файл раскладывается на цвета (Колор сепарейшен) - сразу видно все косяки.
    Ответ написан
    Комментировать
  • Как "самоорганизоваться" во времени?

    rockysoul
    @rockysoul
    ruby monkey
    • Бросать работу при первой возможности зарабатывать в веб-разработке.
    • Выбрать в сутках 2 часа пиковой активности мозга и минимальной лени и всегда в это время читать и учится (практики и стековерфлоу мало для саморазвития). У меня это время с полуночи до 3. Я всегда читаю в это время книги и пробую знания на практике
    • Если дома не получается заниматься — засиживайтесь на работе. Если неделя прошла и каждый вечер был занят фигней домашней, то смиритесь с тем, что дома у вас неподходящие условия .
    • joomla — шлак :) Пожалуйста, переходите на что-то посерьезней как можно быстрее, а то всю жизнь будете за 600 рублей с фриланса интернет-магазины за ночь поднимать.
    • Самое главое правило вообще на всю жизнь вам чтобы не впадать в уныние: никогда не переоценивайте то, что можно сделать за месяц и не недооценивайте то, что можно успеть за год. (справедливо и для варианта 1год / 10лет)
    Ответ написан
    6 комментариев
  • Какой язык программирования лучше для high load web проектов?

    index0h
    @index0h
    PHP, Golang. https://github.com/index0h
    С помощью какого прибор быстрее всего можно съесть много еды?)) Вы предположили, что это ложка, но тут вам приносят стейк.

    ЯП выбирается под проект. Если вы ориентированы на сверх хайлод уровня высокочастотного трейдинга - то вам даже железо специальное покупать нужно будет и БД использовать специфические, например kdb+.

    При выборе ЯП на самом деле вы выбираете инфраструктуру, которая должна прежде всего решать бизнес задачи. Например вы таки психанули и написали проект на Erlang, ок рано, или поздно - упретесь в железо, для ХЛ - это вполне норм ситуация. С точки зрения бизнеса прошаренный эрлангист стоит довольно дорого, а команда - тем более, на много дешевле выбрать другой ЯП с большим сообществом + более дешевыми специалистами, даже с несколькими лишними серверами.
    Ответ написан
    5 комментариев
  • Какие инструменты/программы Вы используете при написании сайта?

    dsadasdad
    @dsadasdad
    lol
    Все делаю в ворде, потом просто сохраняю с нужным расширением
    Ответ написан
    2 комментария
  • Какой дизайн сайта сейчас впереди?

    vaux
    @vaux
    Курящий лыжник
    Веб-дизайн, как и любая другая область, развивается. Сейчас основной принцип, которым руководствуются профессиональные веб-дизайнеры и дизайнеры интерфейсов - убрать всё лишнее. На большинстве качественных сайтов вы увидите только нужную информацию и правильные акценты, где нет часиков на флеше, баннера с обменным курсом, полоской новостей, идущей по краю сайта, занимающей четверть страницы и отображающей новости аж годовой давности. Всё это осталось в прошлом. Хорошие мысли по этому поводу я часто встречаю в советах на сайте бюро Артема Горбунова. Вот, кстати, сегодняшний совет, который можно отнести и к вашему вопросу: artgorbunov.ru/bb/soviet/20150216. Вообще, они проповедуют принцип максимизации полезного действия, с которым я крайне согласен. Кстати, этот принцип относится не только к веб-дизайну, но и ко всему дизайну в широком его понимании.
    Ответ написан
    11 комментариев
  • Что интересного есть в вашем стандартном шаблоне?

    @bogomazov_vadim
    Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
    Заменяем длинный текст placeholder многоточием:
    input[placeholder]          {text-overflow:ellipsis;}
    input::-moz-placeholder     {text-overflow:ellipsis;} 
    input:-moz-placeholder      {text-overflow:ellipsis;} 
    input:-ms-input-placeholder {text-overflow:ellipsis;}

    Скрываем placeholder при фокусе:
    :focus::-webkit-input-placeholder {color: transparent}
    :focus::-moz-placeholder          {color: transparent}
    :focus:-moz-placeholder           {color: transparent}
    :focus:-ms-input-placeholder      {color: transparent}

    Курсор для label + отмена раздражающего выделения при клике:
    label {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    Только вертикальный ресайз для textarea (horizontal часто ломает диз):
    textarea {
    	resize: vertical;
    }

    Убираем дефолтный курсив у address:
    address {
    	font-style: normal;
    }

    Убираем подсветку полей:
    input:focus,
    textarea:focus {
    		outline: none;
    }

    Адаптивные img:
    img {
    	height: auto;
    	max-width: 100%;
    	width: auto\9;
    }

    Адаптивные видео:
    .video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video iframe,  
    .video object,  
    .video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    Перенос слов:
    .break-word {
            word-wrap: break-word;
    }

    Обнуляем списки глобально, т.к. часто используется для навигации и проч., в области контента можно задать другие стили.
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }

    Нумерованный список с подпунктами:
    ol {
    	counter-reset: list1;
    
    	li:before {
    		counter-increment: list1;
    		content: counter(list1) '. ';
    	}
    
    	ol {
    		counter-reset: list2;
    
    		li:before {
    			counter-increment: list2;
    			content: counter(list1) '.' counter(list2) '. ';
    		}
    
    		ol {
    			counter-reset: list3;
    
    			li:before {
    				counter-increment: list3;
    				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
    			}
    		}
    	}
    }


    update дополнительно стили для печати

    P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.
    Ответ написан
    5 комментариев
  • Где вы берёте шрифты для сайта?

    SagePtr
    @SagePtr
    Еда - это святое
    Бесплатные коллекции шрифтов:
    www.google.com/fonts
    webfont.ru/category/#all
    Не знаю, обычные ли это или "более дизайнерские"
    Ответ написан
    Комментировать
  • Какой дизайн сайта сейчас впереди?

    @2bastu3
    дизайн для пользователей. а пользователи хотят делать привычные вещи привычным способом. в начале века у пользователей было меньше привычек. они только формировались. в конце концов в Web X.0 все везде будет одинаковым. эффектиков не будет. они будут вызывать панику
    Ответ написан
    Комментировать