No video

#8 Верстка сайта для начинающих | Оптимизация, html валидатор, доработки

  Рет қаралды 4,913

Фронтендер

Фронтендер

Күн бұрын

Верстаем макет сайта (лендинга) из Photoshop. В уроке повысим скорость сайта в Google page speed, исправим ошибки через html validator, сделаем доработки по функционалу
/* Материалы урока */
Код: github.com/Dmi...
Макет: drive.google.c...
/* Ссылки урока */
Timeweb: timeweb.com/ru/...
Focus-visible: github.com/WIC...
Google PageSpeed: developers.goo...
TinyPNG: tinypng.com/
LazyLoad: github.com/ver...
Webp Converter: image.online-c...
Can I use: caniuse.com/
Webp js check: stackoverflow....
Html validator: validator.w3.org/
Google fonts URL encode: stackoverflow....
Png pixel: png-pixel.com/
Lambdatest: www.lambdatest...
Meta теги: htmlbook.ru/con...
Open graph: ruogp.me/
Realfavicongenerator: realfavicongen...
Меня зовут Дмитрий Бердников, и я веб-разработчик. На этом канале буду делиться знаниями по веб-разработке.
/* Добавляйся в друзья */
Мой ВК - berdnik...
♫Music By♫
●Kronicle - Another Chill Day
●Soundcloud - / the-chemist-10
#обучение #верстка

Пікірлер: 58
@user-qk4gh8cn6t
@user-qk4gh8cn6t Жыл бұрын
Отличный курс Лучшее что встречал по этой теме! Обязательно надо смотреть после изучения основ в теории
@user-ic5vg6ki4i
@user-ic5vg6ki4i 3 жыл бұрын
Дмитрий, спасибо за годный курс по верстке! Обожаю, когда автор готовиться и преподносит информацию, четко без воды! 🔥 👍👏
@user-by4sz6is2h
@user-by4sz6is2h 4 жыл бұрын
Огромное спасибо за твои уроки, очень помогаешь!
@webdarked
@webdarked 3 жыл бұрын
Спасибо за урок! Надеялся тут увидеть как делать сжатие и сливание css и js через какой - нить gulp.
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
Привет! Посмотри уроки по gulp на канале
@vvkk3423
@vvkk3423 4 жыл бұрын
Спасибо за работу
@user-bm9ep6pe4g
@user-bm9ep6pe4g 4 жыл бұрын
Очень хорошо объясняешь 👍 Молодец!
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Спасибо)
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Таймкоды: 0:38 Добавляем зависимость цен от размеров 4:34 Убираем фокус с кнопок при нажатии мышкой 7:10 Объединяем стили 8:33 Объединяем скрипты 9:29 Оптимизируем изображения 10:42 LazyLoad для изображений 17:24 Конвертируем изображения в webp 31:00 LazyLoad для яндекс карты 42:48: Html validator 48:50 Кроссбраузерность 52:20 Мета теги 54:04 Favicon
@oleksandrilchuck8482
@oleksandrilchuck8482 3 жыл бұрын
Спасибо, уроки огонь!
@Mamikonars
@Mamikonars 4 жыл бұрын
Реально годный контент. Спасибо
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Спасибо
@user-eg7kv2xc9d
@user-eg7kv2xc9d 4 жыл бұрын
Зашёл сказать что узнал о тебе из рекламы твоей группы в вк, подписался, очень хорошие видосы ,спасибо)
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Спасибо)
@dkyshka2436
@dkyshka2436 4 жыл бұрын
Ура!))
@gvitoss
@gvitoss 4 жыл бұрын
Вот это был прям мегаполезный видеоурок! Я некоторых вещей за год обучения нигде не втречал в интернете) молодец! Сам учился или ходил на курсы?
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Спасибо) За все время был только на одном курсе по wordpress, и то он был, по-моему мнению, низкого качества. А так, тонны информации с ютюба, книги, статьи, поиска в гугле, записи курсов
@romankemenchezhi7168
@romankemenchezhi7168 3 жыл бұрын
сколько зарабатываешь сейчас, братюня?
@sweetiebear01
@sweetiebear01 4 жыл бұрын
только попробуй забросить канал!)
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Хаха) Ради таких комментариев хочется продолжать. Дальше больше и лучше
@constvntine5453
@constvntine5453 4 жыл бұрын
Блин, парень круто! Спасибо за уроки, прошу продолжай в том же духе, очень хорошо объясняешь) Знаешь, можно еще 1 или 2 плейлиста по верстке) Кстати нет ли в планах нативного js?
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Спасибо) Планировал еще снимать курсы по верстки и по js есть планы. Сейчас доделал проект на wordpress, и вначале выйдут уроки по нему
@constvntine5453
@constvntine5453 4 жыл бұрын
@@user-up6es3nr6s Блин, респект (за js) Что мне нравится, это то что ты подробнее объясняешь что на практике.
@sauronin2058
@sauronin2058 4 жыл бұрын
Чувак кровь из носа как нужна верстка при помощи сборщика gulp 4 и всех нужных плагинов и препроцессоров!!! Я просто уже наверно 10 макет верстаю для начинающи и никак немогу найти видосы про реальную верстку с gulp или webpack*(((. Но лайк не глядя!
@vvkk3423
@vvkk3423 4 жыл бұрын
еще такой вопрос насколько давно ты начал заниматься всем этим?
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Примерно 3 года назад
@garikminasyan2659
@garikminasyan2659 3 жыл бұрын
Привет , у меня вопрос после 8 лекции когда хочу менять фотки на свои не получается, фотки вообще не отображаются, путь правильно указал , помоги пожалуйста
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
Привет! Выложи код на гитхаб, я посмотрю.
@garikminasyan2659
@garikminasyan2659 3 жыл бұрын
@@user-up6es3nr6s github.com/GarikMinasyan/GMG-Pharm.git , вот вчера я разобрался немного не получился с background ом и фото продукты не очень красиво смотреться и лого тоже когда формат svg совсем маленькая
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
@@garikminasyan2659 Логотипу, изображениям нужно свои значения width и height задать. Для логотипа можешь убрать height. Для товаров тоже убрать width и height. С бэкграундом нужно правильный адрес задать (url(img/section-top/bg_2.jpg) Я предполагаю, что у тебя небольшой опыт в верстке? Больше смотри уроков, читай статей и поймешь почему, что как работает
@hiwop1250
@hiwop1250 4 жыл бұрын
привет, будут уроки по php или django?
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Привет, пока не планирую. Самое близкое это wordpress, но там php на базовом уровне достаточно знать
@constvntine5453
@constvntine5453 4 жыл бұрын
Что то ролика не видно(
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
На днях выложу новые уроки. Мало времени уделял этому, но обязательно продолжу
@constvntine5453
@constvntine5453 4 жыл бұрын
@@user-up6es3nr6s ok
@MaksssHome
@MaksssHome 3 жыл бұрын
Привет!) А как ты сделал анимацию при hover? Может какая-та библиотека или видео есть? Благодарю
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
Привет! Ты про какую аниацию? Если в видео, там код есть на гитхабе
@MaksssHome
@MaksssHome 3 жыл бұрын
@@user-up6es3nr6s Я про анимацию которая при выборе цены , я видел что есть код, но как его понять, может есть видео, где похожее рассматривается или просто про анимацию, как так же научиться) спасибо!)
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
@@MaksssHome Ты имеешь ввиду при выборе размеров? Или про сами кнопки? Попробуй скачать код и поиграться с ним, главное понять механизм
@MaksssHome
@MaksssHome 3 жыл бұрын
@@user-up6es3nr6s При выборе размеров
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
​@@MaksssHome Если не совсем понятно, то просто нужно js подтянуть. Вначале может казаться сложным, потом сам скажешь, что это еще самое начало) В этом файле github.com/DmitryBerdnikov/pizzatime/blob/master/lesson6-animation/js/productChecker.js У меня так всегда, сначала кажется что это не реально самому сделать. Но если продолжать развиваться, то придет время, когда ты это поймешь.
@sauronin2058
@sauronin2058 4 жыл бұрын
И еще добавлю сейчас очень много макетов для начинающих, но как дальше розвиваться? Видосов про реальную верстку практически нет, как научится использовать сборщики для верстки, как научиться использовать css препроцессоры. Я прошел полынй курс верстки на metanitе и прошел половину сайта "learnjavascript . ru" но я вообще не могу понять как верстать сложные макеты с вылезающими навбарами и так д.
@user-up6es3nr6s
@user-up6es3nr6s 4 жыл бұрын
Я свои первые реальные макеты делал по такому принципу как в видео, которые я записал, даже хуже намного. Поэтому для меня это реальный пример заказа когда есть макет и ты его делаешь до загрузку на хостинг с настройкой почты. Сборки проектов всего лишь упрощают работу. Не значит, что реальный проект только со сборкой. Я работал с напарником на проектах, он не использовал сборку и это ему не мешало делать реальные проекты. Можно не знать как что-то делается, для этого нужно гуглить. Если есть базовые знания в html, css, js и на практике получалось делать слайдеры, попапы и тд, то реализовать вылезающий навбар не составит труда. Если идет тупо копирование кода и непонимание что вообще происходит, тогда да, будет очень тяжело. А так принцип в таких вещах почти один и тот же 1. Находишь элементы 2. Навешиваешь слушатели событий (например click) 3. При срабатывании события (например click), что-то делаешь с элементами (добавляешь класс, удаляешь)
@sauronin2058
@sauronin2058 4 жыл бұрын
@@user-up6es3nr6s Спасибо, понял)))
@romankemenchezhi7168
@romankemenchezhi7168 3 жыл бұрын
@@user-up6es3nr6s тут вопрос в другом. Как получить заказ, если на любой бирже на каждый заказ в первую же минуту по 30 предложений от верстальщиков выстреливает, 10 из которых супер гуру с миллиардными рейтингами и выберут естественно именно их. Я просто не верю, что сейчас на рынке верстки новичок может получить заказ.
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
@@romankemenchezhi7168 Привет! Фриланс биржи это один из десятков источников, где ты можешь получить заказ. Если не получается там, надо пробовать еще места. Просто фриланс биржа это самое очевидное, но есть куча всего другого, можно даже самому придумать, где получить заказ
@user-ez6yz9eg2n
@user-ez6yz9eg2n 3 жыл бұрын
Это нормально, что только один css файл? Логичнее же вообще начать с мобилок(он же общий)+общий для десктопа, далее для остальных страниц. Я имею ввиду, что лучше много css фалов, чем один, ведь с одним общим css файлом очень много стилей ненужных грузится во многих случаях
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
Привет! Ты про подход mobile first? Организация файлов решается с препроцессорами, все файлы разбиваем на подфайлы, которые собираются в один файл. Не знаю, чем может быть лучше, если у нас будет много файлов. Раньше, точно было лучше когда один файл, так как много файлов это были дополнительные запросы к серверу. Сейчас как пишут с переходом на http2 множество файлов не должно вызывать такую проблему. Решил проверить по скорости загрузки CSS и html одинаковые 1) Один css файл berdnikovdima.ru/tests/one_css/ 2) Десять css файлов berdnikovdima.ru/tests/test_css/ Там где 10, грузится медленнее. Можно проверить в google page speed. Разница в 1 секунду.
@user-ez6yz9eg2n
@user-ez6yz9eg2n 3 жыл бұрын
@@user-up6es3nr6s я про http2 и имел ввиду. Допустим, если это многостраничник и стили на других страницах частично отличаются от главной(информационный сайт, где страница со статьями заимствует частично стили от главной), получается нам на странице со статьями приходится грузить кучу css кода от главной и наоборот, т.к. css то у нас один на всех
@user-ez6yz9eg2n
@user-ez6yz9eg2n 3 жыл бұрын
@@user-up6es3nr6s по этой же логике и мобайл фёрст, мы заходим с телефона и грузим кучу стилей для десктопа, просто я сейчас верстаю собственный проект и нахожусь в перфекционистских раздумьях)
@user-ez6yz9eg2n
@user-ez6yz9eg2n 3 жыл бұрын
@@user-up6es3nr6s я начал копать в этом направлении и наткнулся на интересную мысль на хабре: "Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее..."
@user-up6es3nr6s
@user-up6es3nr6s 3 жыл бұрын
​@@user-ez6yz9eg2n Если брать два подхода mobile first и desktop first, то я бы выбрал mobile first. А если думать, стоит ли разделять файлы, то я бы не парился и грузил 1 css, так как css кэшируется. Если человек зайдет на одну из страниц и он загрузит css, то на других страницах ему не придется заного грузить. А если будут разные файлы, то придется грузить на каждой страницы свои уникальные стили. Если проект очень большой, то возможно стоит искать какие-то варианты. Если прям хочется оптимизировать, то я бы смотрел в сторону critical css. Но для небольших проектов, один файл не должен навредить.
Blue Food VS Red Food Emoji Mukbang
00:33
MOOMOO STUDIO [무무 스튜디오]
Рет қаралды 17 МЛН
白天使选错惹黑天使生气。#天使 #小丑女
00:31
天使夫妇
Рет қаралды 14 МЛН
SPILLED CHOCKY MILK PRANK ON BROTHER 😂 #shorts
00:12
Savage Vlogs
Рет қаралды 50 МЛН
#5 Gulp сборка проекта | assets, images, svg-sprite
30:35
Фронтендер
Рет қаралды 4,7 М.
#8 Посадка верстки на Wordpress | Корзина на JavaScript
1:15:45
HTML для Начинающих - Практический Курс
1:19:23
Владилен Минин
Рет қаралды 498 М.
КАК РАБОТАЕТ БРАУЗЕР?
45:23
Alek OS
Рет қаралды 138 М.
Натяжка верстки на wordpress
3:42:55
От 0 до 1
Рет қаралды 446 М.
Blue Food VS Red Food Emoji Mukbang
00:33
MOOMOO STUDIO [무무 스튜디오]
Рет қаралды 17 МЛН