В этом видео разберем новый формат для изображений WebP. Данный формат позволяет уменьшать вес изображений на вашем сайте, что увеличит скорость загрузки. Вы узнаете как использовать данный формат уже сегодня. Также поработаем со сервисом Squoosh для оптимизации изображений и тегом picture.

// Ссылки =================

Видео про тег picture:
https://www.youtube.com/watch?v=aBTHsXL2WR4

Материалы урока:
https://files.brainscloud.ru/file/webp-novyj-format-dlya-izobrazhenij

Сервис Squoosh:
https://squoosh.app/

// О проекте =================

Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке — HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.

На сайте проекта https://brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.

// Соц. сети =================

Мой ВК — https://vk.com/odimaz
Группа BC — https://vk.com/brainscloud
Мой Instagram: https://www.instagram.com/dmitryvalak/

Всю компьютерную графику можно разделить на две большие части – это растровая и векторная графика. Так же существую несколько видов графики на сайте.
Первый вид — иконки. Как правило — это небольшие простые контурные картинки, которые всячески улучшают восприятие информации. Ими могут сопровождаться текстовые надписи и заголовки, а также элементы управления и навигации. Тут идеально подойдет как раз векторный формат графики.
Второй вид — это фоновые изображения и элементы дизайна веб — приложения. Они могут быть частично прозрачными и даже содержать анимацию. Тут в основном используется растровый формат графика и иногда векторный.
Ну и третий вид — это непосредственно изображения контентной части сайта, то есть картинки которые находятся в статьях, различных фото галереях слайдерах и так далее. Тут у нас только растровые изображения.
Первый и наверное самый известный это формат JPEG/JPG (Joint Photographic Experts Group).
Следующий формат PNG (Portable network graphics) – это тоже растровый формат, но у него есть супер способность – отдельные его части могут быть прозрачными.
Наконец то мы добрались и до векторного формата — это SVG (Scalable Vector Graphics). Ну а сейчас нам достаточно знать файл в таком формате отлично подойдет для иконок нашего сайта.
А мы движемся вперед и сейчас я хочу тебя познакомить с форматом который приходит на замену всем растровым форматам о которых мы говорили ранее. На самом деле их есть несколько это и JPEG 2000 и JPEG XR но самый крутой это WebP!
.ico (favicon.ico) поддерживает прозрачность и используется для указания графической иконки нашего сайта во вкладке браузера. А так же для отображения иконки веб приложений.

�� Онлайн декодер WebP — https://squoosh.app/
�� Сервис создания favicon — https://www.favicon.by/

�� Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
�� Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
�� Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
�� Facebook: https://www.facebook.com/freelancerlifestyle
�� Instagram: https://www.instagram.com/freelancer.lifestyle

�� Меня зовут Женя Андриканич, я IT — специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

�� Живи, а работай в свободное время! ©

Быстрая верстка сайта. Как увеличить скорость в веб-разработке? Почему высокая скорость так важна? Как верстать быстро? Прямо сейчас вы узнаете о том, как научиться верстать очень быстро! Расскажу почему высокая скорость очень важна, а также поделюсь конкретными техническими и программными приёмами, которые сделают из вас супер быстрых специалистов.

Высокий уровень дохода в месяц. Чем быстрее вы выполняете работу, тем больший объем вы можете сделать, скажем, за месяц. В итоге, при регулярных заказах, можно выйти на уровень заработка, который в разы превышает средний по рынку. Так что если вам важны деньги, то скорость увеличит их кол-во. Мой реальный кейс, это более 4000$ в месяц сугубо на верстке макетов. HTML CSS и немного JS.

�� БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr

Конкурентные сроки. Откуда брать такое кол-во заказов спросите вы? И тут, опять же, ответ связан со скоростью. Обладая высокой скоростью, вы можете предложить работодателю более выгодные для него сроки. А заказчики очень не любят долго ждать. Также скорость позволяет вести параллельно множество заказов.
Нет усталости от работы. Конечно же, обладая высокой скоростью, вы не будете сильно уставать от выполнения заказов. Что, в свою очередь, существенно снижает риск эмоционального выгорания.
Управление временем. Ну и самый, на мой взгляд, важный плюс высокой скорости, это меньше времени на работу и больше времени на более приятные и важные вещи, как семья хобби и в целом жизнь.

�� Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц: https://firstvds.ru/s/muckq

Что такое «Чертоги Фрилансера» — https://template.fls.guru/template-docs/dlya-chego-nuzhny-chertogi-frilansera-v3-prezentaciya-shablona-i-ego-vozmozhnostej.html

Полезные видео:
Настройка редактора VS Code — https://www.youtube.com/watch?v=nxCLXMBl4e4
Мое рабочее место — https://www.youtube.com/watch?v=ue3KH88hD20
Gulp 2022 — https://www.youtube.com/watch?v=jU88mLuLWlk
Выгорание на работе — https://www.youtube.com/watch?v=9EZ9D7Fns9g

Плагины VS Code:
eCSStractor — https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port
CSS Navigation — https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation
HtmlTagWrap https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
Google Fonts — https://marketplace.visualstudio.com/items?itemName=lior-chamla.google-fonts
Google Translate — https://marketplace.visualstudio.com/items?itemName=hancel.google-translate
Live Sass Compiler — https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
FTP-Simple — https://marketplace.visualstudio.com/items?itemName=humy2833.ftp-simple

Шпаргалки и онлайн сервисы:
Мои шпаргалки — https://fls.guru/
Сочетания клавиш VS Code — https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Punto Switcher — https://free-software.com.ua/system/punto-switcher/
Emmet — https://medium.com/@sexy_frontend/%D0%BA%D0%B0%D0%BA-%D0%BF%D0%B8%D1%81%D0%B0%D1%82%D1%8C-html-%D0%B8-css-%D0%B1%D1%8B%D1%81%D1%82%D1%80%D0%BE-emmet-9bc1f293a9d0
Генератор CSS Grid сеток — https://grid.layoutit.com/
Генератор CSS-градиентов — https://cssgradient.io/
Генератор CSS-анимаций — https://animista.net/
Генератор CSS border-radius — https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
Слепая печать — https://www.edclub.com/typingclub

�� Карта канала: https://miro.com/app/board/o9J_lZB3YKI=/
�� Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
�� Курс по верстке: https://edu.fls.guru
�� Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
�� Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
�� Facebook: https://www.facebook.com/freelancerlifestyle
�� Instagram: https://www.instagram.com/freelancer.lifestyle

00:00 — В выпуске
00:33 — Преимущества высокой скорости
02:58 — Методы увеличения скорости
03:33 — Мощный ПК
04:44 — Мультимониторная система
06:36 — Редактор кода
10:51 — Программы и сервисы
13:22 — Персональные навыки
15:43 — Заключение

�� @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв’ю з цікавими IT-спеціалістами — https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag
�� @СЛУШАЙ! Канал с интересными историями из жизни.

�� Меня зовут Женя Андриканич, я IT — специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

#обучение #верстка #фрилансерпожизни
�� Живи, а работай в свободное время! ©

Дружище, я помог тебе? Подари мне кофе ➡☕ https://yoomoney.ru/to/4100118065342340

В этом уроке по CSS мы познакомимся с такой важно вещью, как адаптация сайта под любые разрешения экранов (телефоны, планшеты, ноуты, компьютеры, и Smart часы, если потребуется…��).

Но не просто узнаете, но и попрактикуетесь вместе со мной и 100% поймёте суть. Если нет, то у вас проблемы…��

Задавайте вопросы, если есть. Приветствуются даже тупые вопросы. Я на всё отвечу!

#css​​ #курс​​ #урок​​ #web​​ #интернет​​
========================================
https://avis-agency.ru​​ — создание сайтов под ключ
Мой сайт и соц. сети: https://rah-emil.ru