Создание анимированной кнопки "Поделиться" используя html и css
Приветствую. В этом видео показа демонстрация кнопки "Поделиться", а так же процесс ее создания.
Исходный код можно пощупать по ссылке: https://jsfiddle.net/2pvheqwx/
Приветствую. В этом видео показа демонстрация кнопки "Поделиться", а так же процесс ее создания.
Исходный код можно пощупать по ссылке: https://jsfiddle.net/2pvheqwx/
Хэллоу Ворлд, как говорится. Я учел комментарии своей прошлой публикации, хочу сказать, что мне приятно получать уже на начальном этапе фидбек от людей. В этом видео я сделал не сложный элемент блика при наведении на кнопку. Открыт к любой критике, пишите. Хорошего дня ✌️
Поиграться можно по ссылке: https://jsfiddle.net/wc2oeapv/
Привет пикабушники, возможно кто-то и из разработчиков найдется. Можете судить по полной. Начал вести свой небольшой канал по разработке тех или иных элементов, которые встречались на моем пути Web разработчика. Все видео на канале оснащены исходным кодом, так что, если кто-то интересуется разработкой, прошу жаловать)
Недавно я писала здесь о том, как сменила профессию с маркетинга на вёрстку и фронтенд-разработку, теперь подробнее расскажу, как искала фриланс, как конкурировала с опытными ребятами с кучей отзывов на биржах, какие попадались заказчики.
В целом, меня всегда привлекала идея иметь какие-то дополнительные источники дохода в дополнению к зарплате на основной работе. Плюс то выдастся пара свободных вечеров на неделе, то в офисе на одной из работ изредка была пара-тройка часов без задач.
Мой первый фриланс нашел меня сам, спустя месяц после того, как я устроилась на первую работу верстальщиком, – я сидела в Телеграмм чате для верстальщиков – у них можно было спросить, если что-то не получалось, или просто почитать, чего новенького появилось, у кого какие задачи, зарплата и тд. И однажды один из более менее известных персонажей в чате, то есть не добавившийся 2 дня назад новичок, сказал, что ищет фрилансера на верстку формочек.
Я написала ему в личку, с гордостью трехлетнего ребенка предоставила "портфолио" – 2 или 3 сайта, сверстанных по видео-урокам. Чувак рассказал, что он сам верстальщик / фронтенд на проекте и ищет кого-то на небольшую задачку. Задачка оказалась "сверстать 5 форм" (обычные, в которые вводишь имя-фамилию при оформлении заказа на сайте), по деньгам он попросил оценить меня. В ответ на мое скромное "2 тысячи" сказал "Ну и цены у вас, давайте за косарь". Для меня это было "Ооооо, мой первый фриланс!", конечно, я согласилась.
Далее я 5 дней шарашила эти формочки. Оказалось, что "валидация форм" – это не только прописать атрибут required в верстке, а уж когда я столкнулась с тем, что плейсхолдер – полупрозрачный текст в поле, подсказывающий пользователю, что в это поле надо написать имя – должен уменьшаться и плавно отъезжать вверх, оставаясь подсказкой – это была задачка века. Потом выяснилось, что нужно запретить пользователям вводить буквы в поле телефона. Неожиданно, правда?))
Сейчас все это кажется смешным, но в те 5 дней я чувствовала себя разработчиком последнего суперджета – мне казалось, учесть все невозможно. Заказчик – спасибо ему человеческое – где-то помогал и подсказывал, потом прислал подробный список правок с комментариями в том числе и по организации кода. Оплатил. Помню, я тогда даже несколько раз переходила на их сайт и проверяла, есть ли там мои формочки. Первый косарь потратила на бешбармак – как раз собиралась съездить в Киргизию, люблю не самые туристические места. Цены там очень приятные, еще и на кофе хватило, пробовали киргизский?))
От знакомых слышала, что подобный первый опыт фрилансика был у многих – взял блок работ за копейки, а потом сидел несколько дней над ним. Некоторых это разочаровывает. Но я-то знала, что в будущем меня ждет еще не один подобный фриланс))))
Дальше я не искала фриланс специально, набиралась опыта на работе, потом сменила работу на агентство, а там обычно не до фриланса. Но когда немного освоилась, решила отправить на биржи. Как у меня иногда бывает – могу знать о какой-то возможности, но впервые попробовать только после вдохновляющей речи кого-то из знакомых. Сидела в общей компании, хороший приятель рассказывал, как он зарабатывает на иностранных биржах – иногда параллельно с работой в офисе, иногда делал перерыв между работами и имел свои 1500 в валюте с биржи. Конечно, я понимала, что приятель – программист с 10-летним опытом в Джаве и Питоне, а я – начинающий верстальщик, но кого и когда это останавливало?
Первое разочарование связанное с биржами случилось задолго до первого заказа. Я прошлась по тем, которые он посоветовал – правда, начала с русскоязычных вопреки его рекомендации, страшновато было без особого понимания сути верстки еще и столкнуться с непониманием того, что от меня хотят. И оказалось, что пару месяцев назад многие биржи ввели платные отклики – то есть мало того, что заказчики платно оставляли заказ (или бесплатно, но платили комиссию позже), так еще и для исполнителей отклик на заказ был небесплатным.
Нашла биржу, где первые 25 откликов были бесплатными. Но биржи – есть биржи, там зачастую нормес такая конкуренция исполнителей, копеечные цены и в любой сфере есть мастодонты с 4000 положительных отзывов и 5000 сделанных заказов. Появляется заказ "сверстать страницу и 3 модальных окна к ней", стоимость 20$, в первые 15 минут на него появляется 7 заявок, пара из них от мастодонтов. Заказчик ждет час, видит 40 заявок и выбирает одного из опытных чуваков с кучей отзывов. И это логично, никто не хочет неизвестного PetrGigant1998, зарегившегося 20 минут назад. Даже с учетом того, что это биржа, и у заказчиков обычно есть способы отказаться от оплаты плохо выполненного заказа. Но это время, да и зачем разбираться, если можно сразу повысить шансы на хорошую верстку.
Что остается делать новичкам? Обычно демпинговать, но мне не очень нравится такой подход, да и куда особо демпинговать с 20$ за день работы. В минус 20$?
Однако это мой подход, на практике же демпингуют многие, некоторые успешные фрилансеры вообще рассказывают, что начинают с того, что просят сделать заказ бесплатно, честно говоря заказчикам, что они новички и им нужно для портфолио на этой бирже. Думаю, вполне найдутся те, кто согласится на халявку. Но работать бесплатно демотивирует.
Я откликалась за стоимость чуть меньше указанной заказчиком и делала упор на подробные письма. Никто особо меня не выбирал. Помимо тех, кто предпочитал опытных разработчиков, на биржах не так мало тех, кто просто оставляет заказ и не выбирает никого. Возможно, находят подрядчиков в другом месте. На такие заказы тоже тратились заявки.
На 7-8 заявке из 25 мне первый раз ответил заказчик, что-то спросил, обсудили, но в итоге выбрали не меня. В одном из заказов был готовый сайт, к которому какой-то другой верстальщик сделал неудачно еще одну страницу – в ней коряво работал адаптив и был сломанный слайдер. Заказчик просил переделать. Я полистала сайт, увидела еще наезжающий на картинку заголовок в мобильном варианте. В сопроводительном письме приложила скриншот, написала, что переверстатаю за прошлым сотрудником, заодно и это поправлю.
Заказчик ответил "Хорошо вы написали" и дал мне заказ! Делала как для себя, после чего он спросил, не возьмусь ли я еще за страничку. Я сделала еще одну через биржу, дальше он предложил общаться за пределами биржи – я бы делала страницы, а он просто скидывал на карту. Его можно было понять, биржи берут недешево, но и мне было страшновато, что кинут. Рискнула, не кинул. Так я ему сверстала штук 10 страниц и попутно делала другие мелкие работы, которые знала, например, настроить редиректы и тд. Сотрудничество закончилось, так как закончились новые страницы для сайта, а работать с Wordpress, который ему дальше был нужен, я тогда еще не умела.
Дальше я подключала соцсети, где помимо фоточек в коротких юбках начала изредка выкладывать посты о своей работе – про смену профессии, смешные случаи на работе, перепосты постов про программирование. Мне не нравится открытая реклама "Ищу новых заказчиков, кому нужен сайт – пишите" и даже нативочки типа жизненной истории с фразой в конце "Так, с новым сайтом Илья начал зарабатывать вдвое больше и даже купил себе телефон, поэтому обращайтесь ко мне за сайтами". 21 век же. А вот смешные истории с работы (можно с фотками в коротких юбках) просто дают окружающим представление о сфере деятельности человека. Когда им потребуется сайт-визитка для нового бизнеса, они могут вспомнить о тебе.
Параллельно я делала сайтик маме, тут же поближе познакомилась с Wordpress как разработчик, а не как контент-менеджер. Как часто бывает – стоит освоить что-то новое, тебе тут же это требуется. Позвонил шеф с бывшей работы, поболтали, спросил, смогу ли сверстать сайт и натянуть на Wordpress. Сделала, там оказалось очень несложная и верстка, и разработка потом.
Более-менее серьезные заказы находились через знакомых. Мелкие и несерьезные – где только не попадались, как-то парень подошел ко мне познакомиться в метро, я знакомиться отказалась, но мелкие правки его компании для сайта сделала.
Со временем я начала брать предоплату, к этому заказчики зачастую относились вполне положительно. Кто не соглашался, договаривалась на постраничную оплату и тд.
Были и странные случаи, например, однажды мне написали с незнакомого номера и прислали макеты сайта политической направленности, причем весьма в про-военную сторону. Просили сделать без предоплаты. Там я отказалась из-за тематики сайта, но даже с другой тематикой не взялась бы с незнакомого номера без предоплаты.
Были и другие своеобразные ребята, которые тоже нашли мой телефон и раз в 2-3 месяца предлагают мне что-то написать на пхп. Я каждый раз пишу о том, что беру фриланс только по верстке и фронтенду, но через пару месяцев снова "Анастасия, есть сверстанные макеты, возьметесь за натяжку корпоративного портала?".
Была веселая команда, программист которой просил меня не общаться с их бухгалтером, которая звонила мне по 3-4 раза в день, почему-то выполняя функции менеджера. Периодически просила сделать "Там синюю кнопку", чего категорически просил не делать программист. Когда я пыталась перейти на приницип одного окна, бухгалтер продолжала звонить, но просила не рассказывать об этом программисту. Было немного нервно, но в целом реально веселые ребята.
Дальше я попробовала подключить конференции, но в плане новых заказов мне как интроверту это не дало ничего. Знаю нескольких, кто умеет в нетворкинг, и ни один из них не я. Обычно если на конференциях с кем-то заговариваешь, то реакция самая положительная, но, повторюсь, для этого не надо быть прожженным интровертом.
Знаю еще один путь – некоторые из знакомых приходят на биржи, находят заказчика, работают с ним (через биржу или без нее) продолжительное время, далее после окончания заказа снова идут на биржу и ищут новый длительный заказ. Это небыстро, каждый новый заказчик может оказаться со своими тараканами, но обычно после 5-6 таких итераций на биржу возвращаться не приходится – первый заказчик пишет "А вот еще блок работ, возьметесь, по срокам – надо вчера", и разработчик спокойно (спокойно, ахах) работает с ним, а не ищет нового.
Я пока так и не дошла до бирж, потому что после какого-то этапа подключилось сарафанное радио, в основном от других более успешных и более загруженных разработчиков. "Насть, вот вроде неплохой заказчик, но у меня у самого сейчас завал, хочешь?", "Мне эти ребята предлагают им 20 страниц сверстать, давай ты возьмешься, а на мне мелкая помощь и все взаимодействие с заказчиком за такую-то комиссию", "Мне тут ребята позвонили, им что-то надо в приложении на Vue написать, а у меня Киберпанк в ноябре выходит, я им сказал, что Настюха сейчас быстро все разрулит".
И от таких предложений сложно отказаться. Особенно от последнего)))
Есть у меня одно хобби: люблю делать простые frontend-приложения безо всяких сборщиков, типа Gulp или Webpack. Только HTML&CSS&JS.
Во время разработки я просто открывал index.html в браузере и ни о чем не думал.
Недавно наткнулся на восьмой выпуск Вадима Макеева, где он использует для этих целей browsersync. Я и до этого знал об этом инструменте, но тот факт, что его используют вот так просто в консоли, как-то прошел мимо меня.
Исправляюсь.
---
Установим browsersync глобально:
npm install -g browser-sync
Переходим в папку с проектом:
cd ~/path_to_project
Запускаем:
browser-sync start --server --no-notify --no-ui --files *
Используемые параметры:
--server — запустить локальный сервер;
--no-notify — отключить уведомления;
--no-ui — не запускать «админку»;
--files * — следить за изменениями всех файлов в директории.
---
Команда длинная, писать долго, а запомнить все параметры тяжело, да и не нужно.
Создадим алиас. В файле .bashrc или .zshrc (зависит от того, чем пользуетесь):
alias bs="browser-sync start --server --no-notify --no-ui --files *"
Обновляем окружение:
source ~/.bashrc
// or
source ~/.zshrc
Вот и все, теперь, находясь в корне проекта, локальный сервер можно запустить командой:
bs
---
Более подробно с данным инструментом можно ознакомиться в документации.
Всем привет. Суть истории такова: начал 2 недели назад изучать верстку. Учу азы html и css в htmlacademy(не как студент курса за туеву кучу бабла) а как самоучка за доступ к инфе за 550р. В прошлом, пару месяцев назад, усваивал азы Python, но душа как то не легла в итоге(не знаю важна ли эта инфа).Вернемся в верстке, учу я значит в этой академии азы по главам, сначала прошел основные теги html(все конспектирую). За тем начал изучение основ CSS. Правила, селекторы и т.д. И вот спустя 2 недели плотного обучения, в день примерно уделяю по 4-5 часов, я вдруг задумался что теорию то я учу, и задания прохожу которые даются в конце глав, но по факту я еще ни одной страницы не сверстал. Тогда я взялся за работу думая о том что как бэ азы html в начале курса учил css учу сейчас, сто пудова что то грамотное сверстаю. Набрал основу, тип документа, все эти хед да боди, да еще туда вкатал хидеры и футеры с мэйном, хрустнул пальцами , устроился поудобнее и завис: а что дальше то? я ж учил вроде, задания проходил а в итоге не вспомнил в нужный момент вообще ничего. Начал искать в гугле как практиковаться начинающему верстальщику, гугл послал нахой и выдал кучу видосов ютуба и темы хабра, но близко ничего по теме не нашел. Тогда начал смотреть ютуб, от большинства видео самооценка начинающего верстальщика (то бишь моя) забилась в угол и начала выть. Все эти верстки psd макетов, все быстро четко и качественно. Думаю ну ка сейчас замотивированный сяду еще раз за свой макет. Снова завис вспоминая про блок схемы. Так вот в чем суть всей моей истории. Прошу помощи у знающих и понимающих людей. Подскажите как правильно учить все эти теги и и стилевые таблицы что бы запоминать и применять на практике, хочется все таки из головы все это брать а не по 100 раз сидеть и лекции перелистывать(да и вообще как правильно учить html и css). И кто как вообще верстку учил, поделитесь пожалуйста опытом. Заранее всем благодарен))
В 27 лет я решила уйти из маркетинга и стать верстальщиком, а потом и фронтенд-разработчиком. О том как это происходит – в прошлом посте, в этом – о моих способах обучения, чтобы эффективно и нескучно. Итак, мой рейтинг:
1. Боевой опыт на работе в команде
На мой вкус, эффективнее работы на реальных проектах нет ничего. Адекватные коллеги не дадут идти совсем в говнокод или не в ту степь, кроме того, без коллег бывают случаи, когда один на один сидишь с задачкой 3 дня, когда она запросто решается известной библиотекой за 15 минут, но тебе просто неоткуда о ней узнать, а в коллективе обычно можно как минимум спросить "в какую сторону гуглить". Здесь главное соблюсти грань между "не сидеть 2 дня" и не "спрашивать, не погуглив", но обычно собственная адекватность или уровень терпения коллег помогают найти баланс. Звучит неплохо, но новичку при поиске работы обычно приходится соглашаться не на самые лучшие условия, и это не только про зп.
Плюсы:
+ максимально эффективно
+ обучение в рабочее время, не надо выкраивать дополнительное
+ расширение портфолио с согласия заказчика
+ если повезёт, то можно быстро вырасти в этой компании или перейти в другую на новых условиях
+ дают денег
Минусы:
– денег дают мало
– подрабатывать где-то ещё времени нет
– без опыта не берут
2. Фриланс
В любом случае – как на картинке будет не сразу :) на несложные проекты по верстке обычно довольно большая конкуренция на биржах. Совсем новичкам не советую фриланс вообще, а после 3-6 месяцев работы в офисе, почему бы и не да. Это те же боевые проекты, возможно даже с небольшой обратной связью – заказчик уж постарается протестировать то, что вы написали, перед тем как заплатит. Однако старших коллег рядом нет, спросить зачастую не у кого. Кстати, когда совсем не у кого спросить и не помогает ни Гугл, ни StackOverflow, есть чаты в телеграмме по вёрстке и по разработке, спросить можно там - могут ответить, но могут и посамоутверждаться, тут как повезет. Отдельная специфика фриланса для разработчиков с небольшим опытом – его сложно найти, пока круг знакомств в сфере совсем маленький. Многие ребята идут на биржи, но быстро в них разочаровываются – некоторые такие сайты ещё года полтора назад дружно сделали отклики на задачи платными, да и на отклики новичков заказчики мало обращают внимания. Последних тоже можно понять – у них есть проект, например, на вёрстку одной странички, и они скорее доверят ее Антону с 400-ми положительных отзывов и рейтингом 8000, чем MegaMonstr1997, зарегистрировавшемуся 16 минут назад и, как ни странно, ещё не получившему 400 положительных отзывов. Мой опыт с биржами – нашла ту, где первые 25 откликов бесплатны, писала заказчикам подробные сопроводительные "Посмотрела сайт, с задачей справлюсь, портфолио вот, еще заметила, что у вас немного на мобилке едет верстка, бесплатно поправлю", где-то на 12-15 отклике случился первый заказ. Естественно, "бесплатно поправлю" – это про работы на 5-15 минут. А иногда первым фрилансом становятся сайтики для друзей, знакомых или для мамы. В последнем случае вы вряд ли будете брать с мамы деньги, имейте совесть, но наверняка получите столько тёплых слов и благодарностей, сколько не получите ни от одного заказчика :З
Плюсы
+ боевой опыт
+ расширение портфолио с согласия заказчика
+ денег все ещё дают
Минусы
– нет опытных коллег рядом (здесь и далее)
– денег ещё меньше
– фриланс сложно найти
3. Курсы с ментором на 2-3 месяца
Я и училась, и сама сейчас работаю наставником на таких курсах, и это хороший способ изучения. Плюс составленная изначально программа даёт системность, тогда как ментор не даёт расслабиться. Будьте готовы, что курсы изначально будут троллить вас обещаниями "Зарплата 120 тысяч через три месяца!", "Изучим одновременно Html, Css, React, Php, Java c нуля за полгода!", "Фулл-стек за 12 занятий")) Это почти всегда неправда. Однако хорошие курсы разложат по полочкам, не дадут облегчить себе задачу при выполнении практики и написать откровенной лажи
Плюсы
+ действительно дают знания
+ систематизация
+ ментор
+ код ревью
Минусы
– сложно выбрать хорошие курсы
– сложно выбрать толкового ментора, обычно кот в мешке
– требует времени, некоторые мои студенты даже брали отпуска, чтобы закончить курсы и защитить диплом
– курсы заинтересованы, чтобы вы покупали и дальше, поэтому зачастую многие важные темы "будут рассмотрены только на втором уровне"
– работодателю обычно пофиг на курсы и сертификаты с них
– дорого (в среднем от 20 тыс до 60 тыс) – если вы студент
– дёшево (в среднем 3-7 тыс) – если вы ментор и хотите подзаработать
4. Бесплатные видосы с Ютуба и где найдете
Неожиданно, что выше книг-статей и прочего? А вот так. Для меня видео-уроки стали просто открытием. В зависимости от силы мотивации в конкретный день я выбирала соответствующий по длительности видос по вёрстке с симпатичным результатом в конце. Например, поисковый запрос на Ютубе мог выглядеть как "Верстка лендинга html", далее смотрю, сколько длится видео и что получается в конце. Мое любимое – 2-2,5 часа и небольшой лендосик по путешествиям или вкусняхам. Но был и один курс на 10+ занятий с более серьезным проектом в конце. Суть просмотра – останавливать видео каждые 30 секунд и повторять за автором, делать ту же страничку / приложение. Звучит просто, но уже на 15-ой минуте у тебя начинает отваливаться то, что у ведущего прекрасно работает. Начинаешь искать, выясняется, что забыл пару css свойств, которые автор быстро напечатал на 3-ей минуте. И вот этот поиск – самое ценное, в процессе поиска учишься отладке через DevTools браузера, через консоль и тд.
Плюсы:
+ бесплатно
+ хороший обучающий эффект
+ быстрый результат в виде знаний и сверстанного шаблона
Минусы:
– можно попасть на недалёкого автора и научиться делать неправильно
4. Книги с упражнениями
В некоторых книгах с первой до последней главы читателю предлагается писать с нуля одно приложение, постепенно улучшая его. В других давался ряд не очень связанных друг с другом заданий. Мне способ не очень зашёл, я начала свое включение во фронтенд с книги по JS, потом практически не возвращалась к книгам кроме формата "Почитать в самолёте по дороге в отпуск".
Плюсы:
+ системность
+ недорого по сравнению с курсами
Минусы:
– очень быстро устаревают
– без практики прочитанное усваивается очень слабо
– совсем не похоже на тусу по уровню веселья
5. Статьи
Статей "Советы по отладке JS", "CSS-трюки: режимы наложения цветов", "10 хитростей JavaScript о которых вы не знали" – великое множество, однако если пока для человека весь JavaScript - одна большая хитрость, толку от них будет немного. Зато уже в процессе изучения и работы во фронтенде, одна прочитанная с утра по пути в офис статья может дать не только понимание того, что нового появилось в мире разработке, но и +100 к чсв, а также возможность лёгкого выпендрежа перед коллегами (или начальством, если повезёт).
Плюсы:
+ больше шансов быть всегда в теме происходящего в мире разработки
+ малая трудозатратность
Минусы:
– бессистемно
– дают вишенки на торте, но не сами навыки
6. Игры типа рпг на минималках
В отличие от книг звучит и выглядит весело. За все игрухи не скажу, но мне попалась та, которая стоила 4 доллара в месяц и имела сотни заданий вида "Есть твой персонаж, есть песчаные яки - от них надо уклоняться, но стрелять по ним нельзя, есть скелеты - их бить мечом, есть орки - если слабый, то защищаться щитом и бить мечом, если сильный, то создавать своих клонов, сначала надо всех орков рассортивать по силе". Далее игрок преобразует то, что понял из "ТЗ" в код на JS с описанными методами "защищаться щитом", "рубить мечом", "создавать клонов", обычно в циклов, условий, сортировки. На мой взгляд, такие игры могут быть полезны только для совсем новичков, которым надо попробовать написать первые циклы и условия, для всех остальных толку будет немного. Еще – вы фиг докажете начальству, что таким образом учите JS :)
Способы, которые я сама не пробовала – например, поиск частного ментора, я не описываю.