Типичный Верстальщик

tpverstak Нравится 2

Советы от автора по созданию сайтов, книги для скачивания, подборка сервисов для работы. Вся годнота в одном месте!
Обратная связь: @annblok
ВК: https://vk.com/tpverstak
Ютуб: https://www.youtube.com/channel/UCn5wduCq2Mus0v85QZn9IaA
Язык канала
Русский

Категория
Технологии

Написать автору
Язык канала
Русский
Категория
Технологии
Добавлен в индекс
03.12.2017 15:52
Последнее обновление
27.05.2018 14:13
@TGStat_Bot
Бот для получения статистики каналов не выходя из Telegram
Telegram Analytics
Самые свежие новости сервиса TGStat. Подписаться →
Telegram Info
Последние новости о Telegram. Читать →
1 563
подписчиков
~1.3k
охват 1 публикации
~1.4k
дневной охват
~6
постов / нед.
80.4%
ERR %
1 + 6
репосты+упоминания
Последние публикации
И вот как всё встало на свои места, когда подключила файлы локально. Правда Roboto, подключённый через Google Fonts не стала извлекать, т.к. на ноутбуке уже есть поддержка этого шрифта.
Вот Вам видео того, что стало с сайтом в дороге при подключённых CDN.
Про CDN ссылки. Реальная ситуация.

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

Но вот Вам реальная история.

Сейчас я еду в поезде. Дорога длинная и в пути буду 2,5 дня. Отпуск отпуском, но если пообещали доделать сайт — делайте. Запускаю компилятор, открываю сайт и понимаю, что он развалился. Сказать, что «вёрстка поехала» не уместно. Не понимая в чем дело, открываю предыдущие версии и там то же самое. И тут я осознаю: CDN в дороге — это зло.

P.S. Если Вы читаете этот пост, значит у меня уже появился интернет и телефон сейчас в роли модема. Скачаю локальные файлы всех своих CDN ссылок и продолжу работать.
Книга «JavaScript для чайников» — Крис Минник, Ева Холланд (ru, 2016)

JavaScript — ключевой инструмент создания современных сайтов, и благодаря данному руководству, ориентированному на новичков, вы сможете изучить язык в короткие сроки и с минимумом усилий. Узнайте, какова структура языка, как правильно записывать его инструкции, как применять CSS, работать с онлайн-графикой и подключать программные интерфейсы HTML5. Все темы можно закрепить практическими упражнениями.

Скачать — https://goo.gl/sXZBF3

#javascript
Подборка готовых градиентов

Создать удачный градиент, приятный глазу, под силу не каждому, поэтому на помощь приходят сервисы с готовыми подборками. Остается только брать и пользоваться.

Смотреть — https://webkul.github.io/coolhue/
Ищу верстальщика, который дружит с Wordpress

В очередной раз мне требуется помощь от Вас в работе над одним проектом.

Я сделала первую часть работы — редизайн текущего сайта заказчика, но совсем нет времени заняться второй частью проекта, а именно — сверстать его и посадить на Wordpress.

Традиционно я набросала основные моменты по сайту в единый гугл док. Там лежит и сам макет для ознакомления.

Читать — https://docs.google.com/document/d/1z1-hOE_c8e864oiKj5VZK2UAWVLCCuaMvsLlfHCfK30/edit?usp=sharing

Если Вы видите себя в этом проекте, то пишите мне @annblok.

В сообщении ответьте всего на 3 вопроса:
1) За какой срок смогли бы выполнить заказ?
2) За какую сумму?
3) Оставьте примеры сайтов, которые максимально похожи на этот заказ.
Attached file
Про веб-дизайн

Не устану повторять, что верстальщик должен не только отлично верстать, но и уметь создавать макеты для себя.
Рано или поздно Вы придете к тому, что за сайты «под ключ» платят больше. Значительно больше.
Так Вы сможете взять один заказ как минимум на месяц и забыть о поиске очередного клиента.

Достаточно часто заказчики хотят сайт с нуля. Как правило, это включает в себя следующий этапы:

1) Веб-дизайн;

2) Вёрстка;

3) Натяжка вёрстки на CMS (чтобы у заказчика была возможность управлять им).

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

Чтобы научиться этому, Вы можете начать читать книги, изучать статьи или смотреть на макеты веб-дизайнеров, с которыми Вам приходилось работать или ещё придётся. Старайтесь работать только с теми, чьи макеты Вам нравятся на визуальном уровне. Макеты хороших веб-дизайнеров — это лучшие учителя. Верстая их, Вы в живую прикоснётесь ко всему, что можно изучить в теории по книгам.

Если решитесь на отрисовку простого лендинга (а начинать лучше с него), то помните о простых истинах, которые я почерпнула из хороших макетов:

1) Используйте 2-3-4 размера шрифта. Например, важный заголовок h1 — 50px, заголовок уровня h2, который будет дублироваться в каждом блоке — 30px, заголовок уровня h3 — 25px, простой текст — 18px;

2) Используйте одно (максимум два) шрифтовое семейство. Например, Open Sans — основной и Marck Script — для отдельных элементов. Если нет нужды во втором семействе шрифта, то лучше откажитесь от него;

3) Используйте 1-2-3 оттенка. Например, черный — основной (для шрифтов), синий — акцентный (для ссылок и элементов, которыми будет управлять пользователь), серый — добавочный (для фонов блока);

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

Читать — http://tilda.education/design-mistakes

Она помогла исправить моменты, которые могут забыться во время процесса. Последовав рекомендациям макет стал лучше в разы. Проверено.

К сожалению, я до сих пор не могу утверждать, что я хороший веб-дизайнер (наверно, у всех так, кто занимается творческой деятельностью), но я учусь и постоянно совершенствуюсь. Самое прекрасное время — утро. Именно утром, взглянув на свой макет Вы увидите все свои ошибки. Поэтому не старайтесь сразу скидывать своё творение заказчику. Лучше дождитесь утра, чтобы на свежую голову еще раз всё обдумать и поправить все недостатки.
👍 61
👎 1
Ловите ультрагодный сайт для интерактивного изучения git команд.

Ссылка — https://try.github.io/levels/1/challenges/1
Про ревью Вашего сайта

Каждому новичку важно, чтобы его сайт оценили и указали на ошибки, если таковые имеются.

Именно поэтому я запускаю тег #обзор, которым Вы можете воспользоваться в чате, чтобы Ваш сайт оценили другие верстальщики. И не обязательно это буду я. В нашем чате не мало опытных мастеров своего дела. 👨‍💻

Ваше сообщение должно выглядеть примерно так:
#обзор плиз, оцените мою верстку на сайте www.exaple.com и если не трудно подскажите как исправить первый блок.

Наш чат: https://t.me/tpverstakchat

Го помогать друг другу. Вместе мы сила! 💪
Репост из: TemplateMonster
Вжиик! Ищешь интересные дизайны под клиентские проекты? На @TemplateMonsterRU есть тысячи шаблонов под любую нишу.

Адаптивные макеты, продуманное сочетание цветов, современные фичи внутри и бесплатная поддержка 24/7.

Зацени масштаб предложений: WordPress шаблоны со скидкой 30%, на остальные продукты цены снижены аж до 70%. Мега-распродажа продлится до 16 мая, не упусти классный шанс сэкономить, переходи по ссылке - https://clck.ru/DND2N
Attached file
Давно я стикерами не делалась. Ловите скрепочку Windows.
Что должен уметь фронтенд-разработчик по меркам США?

Пока в России потенциальные работодатели не видят разницы между верстаком и фронтенд-разработчиком, американцы ушли далеко вперед и под ФРОНТЕНДОМ понимают целый ряд навыков: от умения проектировать UI интерфейсы до владения JS фреймворками.

Интересно, много таких специалистов?

Если нужны пруфы, то Вам сюда — https://www.monster.de/en/search/?q=frontend&where=&intcid=swoop_EN_HeroSearch_us&cy=us&rad=20
👍 37
👎 2
Какая зарплата у начинающего верстальщика?

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

Ни для кого не секрет, что ЗП (заработная плата) зависит от региона, в котором Вы находитесь. Бесспорный лидер в этом плане — Москва. Средний показатель — от 50 000 в месяц.

Все вакансии по запросу «Верстальщик» в Москве можно посмотреть тут — https://hh.ru/search/vacancy?text=%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA&clusters=true&enable_snippets=true&area=1&from=cluster_area

Но не все хотят и могут перебрать в столицу поэтому смотрим дальше.

Санкт-Петербург. В среднем от 40 000 в месяц, но есть не мало вакансий и с более высокими ЗП. Но и знать Вам потребуется больше, чтобы столько получать.

Все вакансии по запросу «Верстальщик» в Санкт-Петербурге можно посмотреть тут — https://hh.ru/search/vacancy?text=%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA&clusters=true&enable_snippets=true&area=2&from=cluster_area

Екатеринбург. Это город, в котором я живу. В 2015 году на момент стажировки (первые 2 месяца) получала 20 000 руб., после — 25 000 руб. Сейчас этот показатель в среднем от 30 000 в месяц. Вакансий по городу не так много, если смотреть по сайту hh, но есть региональные, в которых любят размещаться работодатели из-за более лояльных условий.

Все вакансии по запросу «Верстальщик» в Екатеринбург можно посмотреть тут — https://ekaterinburg.hh.ru/search/vacancy?text=%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA&clusters=true&enable_snippets=true&area=1261&from=cluster_area

В целом в остальных городах, которые считаются областными центрами ситуация схожа с Екатеринбургом. Почти везде заработная плата верстальщиков начинается от +- 30 000 руб. в месяц. Искать вакансии советую не только на известном hh, но и региональных. К тому же выделить свое резюме лучше всего получится именно там.
👍 39
👎 1
А теперь к действительно важным новостям

Всем причастных поздравляю! Снова что-то новое коснулось фронтенда.

Вчера вышла 6-я версия Angular — https://github.com/angular/angular/blob/master/CHANGELOG.md
Замена жесткого диска на SSD Samsung Evo 860

Возможно, кому-то покажется что эта тема мало относится к вёрстке сайтов, но это не так.

Во-первых, все мы работаем на технике, которая со временем имеет свойство тормозить, особенно если у Вас стоит жесткий диск.
Во-вторых, сложно отделить тему сайтов и техники как таковой, поэтому на моем канале можно увидеть обзоры и на девайсы.

Записала этот ролик для тех, кто не готов расставаться со своим ноутбуком и хотел бы оживить его, особенно если характеристики девайса более чем чудесные.
Замена HDD на SSD будет верным решением. Всё делается за считанные секунды. Если бы знала об этом раньше, возможно, не стала бы покупать Macbook Air в своё время. Но это уже совсем другая история…

Смотреть — https://youtu.be/VlQbK9UI_iY
Читать — http://tpverstak.ru/hdd-ssd-samsung-evo-860/
Последний день скидки за курс по вёрстке сайтов

Напоминаю, что сегодня последний день, когда можно приобрести курс со скидкой.
Полный тариф — 4000 рублей
Самостоятельный тариф — 2200 рублей.

С завтрашнего дня цены повысятся. Прайс будет следующим;
Полный тариф — 4500 рублей
Самостоятельный тариф — 2500 рублей.

Старт курса: 7 мая 17:00 по мск.

С программами курсов можно ознакомиться тут:
Программа базового уровня: https://goo.gl/fvB8zC
Программа продвинутого уровня: https://goo.gl/58v3yg

Для записи, пишите мне — @annblok
Attached file
Сайт-портфолио для верстальщика

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

а) Мои вкусы могут отличаться от ваших. Это субъективное «красиво» для каждого означает разное. Допустим, мне могут нравится сайты с тёмным бэкграундом, а вы бы хотели для себя светлый с няшным розовым;

б) В бесплатном доступе практически невозможно найти макеты, отвечающие всем трендам веб-дизайна текущего года. Вероятнее всего, вы найдете что-то в стиле 2014-го года.

Но не стоит расстраиваться. Я убеждена, что каждый верстальщик должен уметь мыслить творчески, поэтому пофантазируйте, посмотрите чужие макеты, выберите понравившиеся сайты и начните создавать нечто новое, своё.

Источником вдохновения для дизайна могут послужить сайты, которые продают шаблоны. Обычно, я начинаю свой поиск с https://themeforest.net/, потому что этот портал поистине огромен. Но если этого мало, то захожу еще и на https://www.templatemonster.com/

Иногда использую https://ru.pinterest.com/, работает лучше гугла в этом направлении.

Помните, Вы НИКОГДА не найдете шаблон, который полностью бы удовлетворял Ваши запросам. Если бы это так работало, веб-дизайнеры были не нужны. Это всего лишь шаблоны и ориентированы они под типичные задачи.

Сайт-портфолио — это нечто творческое. Это рассказ о Вас и он может быть любым. Дизайн тоже может быть скорректирован под Ваши вкусы.

Разбавьте будущий сайт интересными или забавными фактами о Вас. Может Вы в тайне поклоняетесь мастеру Джедаев Йоде? Напишите об этом! Почему нет?

В этом плане, мне безумно нравится сайт http://www.adhamdannaway.com/ (пример взят отсюда из раздела «рандомные факты»)

Если вы не знаете какую цветовую гамму подобрать для сайта, то рекомендую 2 сервиса:
https://colorscheme.ru/ (позволяет подобрать и сгенерировать любую цветовую схему)
— palettable.io (инструмент для подбора цвета, основан на принципе «Нравится — Не нравится»)

Если этого мало и Вы бы хотели чтобы Ваш сайт-портфолио или макет покритиковали и дали дельные советы, то можете писать мне @annblok, постараюсь помочь.
1 мая - день труда, а мы отдыхаем. Вроде бы всё логично, но что-то здесь не так...
Книга «PHP7 для начинающих с пошаговыми инструкциями» — Майк МакГрат (ru, 2018)

Посвященная самому популярному на сегодняшний день языку программирования, эта книга помогает освоить азы РНР7 даже тем новичкам, которые не знакомы с этим языком, а также с программированием вообще. Благодаря традиционно доступному изложению, присущему всем книгам серии «Программирование для начинающих», обилию иллюстраций и примеров, а также множеству полезных советов, эта книга – лучшее пособие для начинающих программистов.

И да, верстальщикам тоже не помешает немного узнать о PHP :)

Скачать — https://goo.gl/cDB3nS

#php