• Как оптимизировать прыгающий слайдер?

    iamd503
    @iamd503 Куратор тега CSS
    Верстальщик
    я делаю так: родителю слайдов делаю display: flex; слайдам opacity: 0; когда слик загружается и слайдер инициализируется, то он добавляет родителю класс, через него убираю слайдам opacity и вуаля)

    PS: и вот можно родителю бэкграундом сделать прелоудер
    Ответ написан
    3 комментария
  • Какая почасовая ставка у Front-end разработчика?

    vicodin
    @vicodin
    Имею некоторый опыт
    15-25$/hr junior
    25-40$/hr middle
    40-100$/hr senior
    100+$/hr god

    Ну это по моим наблюдениям, есть боле источники с большей выборкой, например этот по США(в эру фриланса можно не привязываться к конкретной стране) https://www.hellobonsai.com/rates/
    Ответ написан
    22 комментария
  • На каком уровне нужно знать верстку, чтобы получить работу верстальщика?

    Sanes
    @Sanes
    Знать верстку сейчас недостаточно. Учите шаблонизаторы CMS.
    Начните с MODX. Хотя можете и с WP. Верстать под WP то еще удовольствие, однако работа будет всегда.
    Ответ написан
    5 комментариев
  • Есть ли фриланс ближе к 30?

    viktorvsk
    @viktorvsk
    Не учите технологии. Учитесь решать задачи. Особенно с исходными данными и запасом прочности.
    Мне кажется, есть 2 пути успеха в айти сегодня:
    1. Рвение к чему-то конкретному (например, нейронным сетям, компьютерному зрению, машинному обучению, электронной коммерции, визуализации ... ) - тут, судя по последнему абзацу, мимо кассы
    2. Не знание технологий или даже стеков, а умение решать практические задачи. Вот тут очень похоже, что оно.

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

    Посмотрите, какими "модными" средствами это решается и примите участие. Начните с малого. В реальной и интересной задаче будет куда проще влиться во все множество технологий, что сейчас используются.

    На выходе, даже если не сделаете новый супер-хит, то:
    1. Познакомитесь со всеми технологиями и приемами (где-то больше, где-то меньше)
    2. Будет опыт в реальном технологическом процессе

    P.S. Если все же интересует именно только екоммерс и интернет-магазины (не самая привлекательная часть айти, на самом деле), то не рвитесь сразу верстать шаблоны под битрикс. Найдите важные задачи для бизнеса, которые не решаются стандартными методами (их уймы) и попробуйте решить одну из них.
    Ответ написан
    4 комментария
  • Выгодно ли фрилансить(верстая макеты)?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Я тоже как-то начинал фрилансить в итоге не сраслось, не вышло. Да и кидают временами. К счастью у всех свой опыт. У Меня не очень удачный.

    Для начала определите себе цену. Сколько руб/вчас Вы хотите зарабатывать. Теперь возьму эту цифру и умножьте на 1,5 (коэффицент нужно поставить свой, с опытом придумается). Теперь у тебя адекватная цена! С этой ценой ты сможешь скинуть что-то если понадобиться.

    Обязательно бери предоплату. Наплетут тебе в скайпике (любом другом месте) сколько захочешь, ещё в придачу дадут. Как новичку 30%. Дальше 50%. Если с кем-то сработаешь можешь не брать. Если не дают предоплату, ну тут сам решай =)

    Старайся искать заказы в своем городе. Можно разослать свои умения в веб-студии твоего города. Они тебя могут в качестве фриласера и нанять.

    Определи сколько часов в день ты должен работать. Именно должен. Фриланс очень расслабляет. Остальное время трать на поиски работы.

    Пока всё.
    Ответ написан
    6 комментариев
  • Что интересного есть в вашем стандартном шаблоне?

    @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 комментариев
  • Вёрстка плиток с использованием свойства flex. Как сверстать три колонки?

    @BelkinVadim
    Frontend разработчик
    Flexplorer
    Почитайте про flex и его параметры тут или тут например. Примеры там есть, думаю найдёте что нужно.
    Ответ написан
    Комментировать
  • Как сделать такой parallax эффект?

    paradokso
    @paradokso
    Начинающий фронт-эндер
    Я спросил у гугла и он мне ответил следующее
    alvarotrigo.com/fullPage/#secondPage - демо
    alvarotrigo.com/blog/fullpage-jquery-plugin-for-fu... - сайт
    https://github.com/alvarotrigo/fullPage.js
    Ответ написан
    Комментировать
  • Как натянуть свой шаблон на Wordpress движок?

    @LMI
    Лучше всего посмотреть видеоуроки по адаптации чистого HTML/CSS для Wordpress. Вот сам учился на этом уроке: https://www.youtube.com/playlist?list=PLzi5JvpYf_h...

    UPD: текстовая статья на Хабре habrahabr.ru/post/228523
    Ответ написан
    2 комментария
  • Как сверстать такое?

    Satellence
    @Satellence
    Под число и месяц выдели отдельный блок фиксированной ширины с выравниванием текста по правому краю для числа и по левому краю для месяца.
    Ответ написан
    Комментировать