​​Свой «парикмахер».
Вижу людей, которые считают, что заказы можно находить только на фриланс биржах и никак иначе. Но это не так! 

Зайдя на ваш профиль в Инстаграм, Фейсбук, ВК можно ли определить, что вы делаете сайты или как-то с этим связаны. Это больше относиться к собеседованию, но заказчик тоже может зайти на ваш профиль в соц сетях. Заказчик ожидает увидеть адекватного человека, который увлечён своим делом, оправдайте его образ о фрилансере

Рассказывайте друзьям, знакомым, всем подряд, чем вы занимаетесь и можете им помочь. Делаете сайты — замечательно, возможно, вашему другу он сейчас нужен, а вы молчите

Будте своим «парикмахером», среди знакомых и друзей

​​Woocommerce.
Плагин позволяющий превратить сайт на Wordpress в полноценный интернет магазин

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

Советую посмотреть ознакомительный урок и покопаться в коде плагина, только так можно понять материал тык

​​Зачем нужен bootstrap?
Я на люблю bootstrap, он мне не понравился с первого же проекта его загруженностью всякими мелочами, единственная полезная вещь — сетка, но ее легко можно заменить/сделать средствами флекса и грид

Если использовать инструмент правильно, то даже на bootstrap можно делать красивые проекты. Я же его использую только для наглядности или когда надо быстро сделать разметку. Bootstrap рассчитан на маленькие проекты и на быстрое создание разметки

Если вам нужно быстро сверстать лендинг, то смело можно использовать bootstrap, а если это большой проект или вы будете его дальше поддерживать и оптимизировать, то лучше используйте старый добрый флекс(гриды тоже можно, но следите за поддержкой)

+1 работа в портфолио.
Сврерсал ещё одну работу в портфолио, макет был напичкан мелкими деталями на которые уходит много времени. Результат можно посмотреть тут, код прикреплю к посту. Делал по марафону LuxTrader, о котором рассказывал в этом посте

​​Платят не за знание тегов, а за решения.
Если верстка не ломается от изменений текста или картинки, то это хорошая верстка, но это не просто наброски тегов и стилей, это решения, принятые верстальщиком и за это ему и платят

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

Как выбирать наилучшие решения? — практикуйся и смотри марафоны. Плюс марафонов, это то, что ты можешь смотреть решения автора в той или иной ситуации. А практики много не бывает

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

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

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


https://teletype.in/@programmerway/lDErRzFy6

Мультиязычность.
Сейчас занимаюсь переводом сайта на английский и подтягиваю верстку, планирую к концу сентября запустить сайт в интернет

Кому интересно, язык изменяю с помощью плагина Polylang, вот хороший урок по нему

404.
Самая распространённая ошибка сервера, это когда он не может найти нужную станицу по запросу. Для этой ошибки в wp даже предусмотрена отдельная страница 404.php

Я уже рассказывал про это в одном из своих постов, но теперь я сделал собственную станицу и подключил ее к wp! Поправил слайдер и пару мелочей по верстке и плагинам

Сейчас стоит вопрос:
«Делать ли отправку форм через плагин или не нагружать сайт и сделать все в ручную?»
Думаю всё-таки сделать самому так как подключать целый плагин для 2 форм бессмысленно, если у вас есть другое мнение — напишите в чате

​​Улучшение верстки №1.
Запускаю новую рубрику, в ней я расскажу про крутые фичи, о которых мало кто знает, начнём!

_ibg.
Многие на курсах говорят, что картинку беграундом лучше не ставить, все дело в том, что при посадке на CMS изменяются пути и поэтому нужно прибегать к костылям. Да и удобнее поменять картинку прямо в HTML, чем лезть в стили. Для этого был придуман ibg(image background), подробности есть по ссылке или в этом видео

PS: родителю картинки не забудь указать:
  &__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

  }
Чтобы отобразилось

8 проектов для того, чтобы стать Full Stack разработчиком.
Давно не было статей, увидел одну английскую статью с крутыми идеями для прокачки навыков

Проекты идут от простого к сложному и в каждом есть что-то интересное тык

​​​​Улучшение верстки №2.
Вторая часть рубрики, сегодня речь пойдет о снипеттах 

Допустим что бы создать структуру документа в html вводим ! + tab. За этим способом вы можете вводить в программу свои "сокращения". Снипетты можно создать не только для html, но и для любых языков программирования. Правильно сделанные снипетты могут ускорить процесс програмивания в решении рутинных задач

Также к этому посту будет прикреплённо видео с подробным разбором снипеттов в vs code

Image Uploader.
Сделал первый проект из недавнего поста о 8 идеях для Full Stack. Получилось даже лучше чем планировал, сделал за все выходные.

Все четко по ТЗ:
•Файлы можно загрузить дропом в область или нажав на кнопку
•Они автоматически(без перезагрузки страницы) летят на сервер
•Во время загрузки срабатывает прелоадер
•По итогу выводиться картинка и ссылка(копируется в буфер обмена по нажатии на кнопку)
•Ссылка ведёт на картинку

Задание выполнено, даже сделал адаптивно. Поиграться с кодом можно тут, скоро куплю домен и хостинг и уже смогу кидать демо с бэкендом

DLE.
Постов не было т. к. трудился над заказом. Пару слов о заказе: сайт с электронными книгами, нужно было сделать редизайн(поменять стили, цвета, шрифты и расположение блоков), бюджет был 50$

Сайт находился на cms DLE, не сильно разбираюсь в рейтингах, но комьюнити маленькое. На сайте не было файлов .php, вместо них были .tpl(что-то типа упрощенного php, встречался с ними, когда брал заказы по opencart), но при открытии файлов все буквы у меня почему-то слетали, потом я загуглил и оказалось что у сайта другая кодировка, файлы соответственно нужно открывать с такой кодировкой, теперь буду внимательней

​​Улучшение для верстки №3.
Правильно выбранная среда разработки значительно ускоряет процесс. Поставь тему с цветами не режущими глаз, например я использую horizon theme

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

Самое первое на что нужно обращать при выборе железа, нет, это не на мощность, а на экран, в идеале лучше купить сразу несколько мониторов

Улучшая среду ты ускоряешь процесс

​​Ещё одна небольшая работа в портфолио. 
Сегодня решил немного поверстать, получилась прикольная работа, из фич: адаптивный слайдер, прикольный бургер и решил поиграться с ховерами в футере

​​Домен и хостинг. 
Теперь я владелец сайта в интернете. Планирую поковыряться в возможностях хостинга и потестить всякие штуки вроде отправки писем на почту и тд. А пока расскажу как все было:

Доменное имя. Домен который я планировал был уже занять, поэтому я просто выбрал tsykunov.com , приобрёл на reg.ru , после оплаты на почту пришло письмо с логином и паролем, а так же подтверждением почты. 

Хостинг. С хостингом все немного посложнее, выбор был большой, да и я не разбираюсь в них. Выбор был между макхостом, beget и hostinger. Изначально планировал купить на hostinger с расположением в Нидерландах, но слишком низкая цена заставила насторожиться(возможно, потом перейду на него), а пока решил выбрать beget

​​I miss you!
Нашёл крутую мини-библиотеку, которая меняет иконку станицы, когда пользователь переключает вкладку. Видел это на некоторых сайтах и мне всегда было интересно как это сделано, теперь ты тоже знаешь. Единственный минус — наличие jQuery, но в остальном хорошее дополнение для сайта

​​Блок Элемент Модификатор.
Методология БЭМ создана в Яндексе для разработки сайтов, которые надо делать быстро, а поддерживать и обновлять долгое время. БЭМ значительно ускоряет верстку, я пробовал писать классы по-разному, но остановился на этой методологии

Основным плюсом БЭМ является возможность использовать блок несколько раз и не путаться 
 во вложенности, ну и конечно модификаторы. Приведу очень частый пример, есть title, но в некоторых блоках он чёрный и можно просто добавить класс title_black и тогда будет понятно зачем он нужен и не будет нагромождения непонятных классов

Хороших уроков по бэму не нашёл, если знаете — поделитесь в чате, но лучше всего познавать на практике, это будет намного эффективнее

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

Лично я решил не брать, хотя https протокол выглядит посолиднее и если у вас интернет магазин или какой-то проект где нужны данные пользователей(вроде кредитных карт или паспортных данных), то лучше переплатить, но получить безопасное соединение и меньший шанс утечки информации

А вообще если тебе интересно, какие ещё есть протоколы и как работает интернет, то советую глянуть это видео тык

Рано или поздно каждый веб программист приходит к необходимости приобрести хостинг, ведь если ты никогда не работал с ним, то на реальном проекте придётся потратить немало времени на понимание

+ 1 к портфолио.
Сверстал небольшой, но красивый лендинг, использовал mobile first и анимацию средствами нативного js. Кому интересно, то прикреплю код, кстати подписывайтесь на github . Итог можно посмотреть тут