+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 . Итог можно посмотреть тут

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

1) анимация при наведении 
Это та анимация, которая срабатывает, когда ты наводишь курсором на ссылку, записывается обычными средствами css
@media (min-width: 992px){   
  &:hover{
   }
 }

2) keyframes анимация 
Тут уже больше возможностей и есть где разгуляться фантазии. Благодаря keyframes можно делать покадровую анимацию элемента, задавать задержку, продолжительность, тип... Знаю отличный и понятный урок по keyframes тык

3) анимация при скролле
Это уже более обширный вид анимации, для которого обычно подключают библиотеки вроде wow.js и других. Но я нашёл другую более удобную библиотеку под названием ScrollReveal, библиотека позволяет гибко, а главное быстро настраивать анимацию при прокрутке страницы. Все готово уже с коробки, осталось только пользоваться

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

Самый маленький приоритет имеет обращение к элементу, например 
p {
  color: red;
}

Затем следуют классы
.red{
 color: red;
}

Но классы пересевает id
#blue{
 color: blue;
}

Id перебивает стили внутри тега(в HTML файле)
<p style = "color: green"></p>

А потом идёт легендарный !important
p {
  color: red !important;
}

PS: обращения можно вкладывать друг в друга, так будет расти их приоритет, подробнее тык