Рекомендации по верстке сайта. Чеклист верстки
Вставка
- Опубліковано 23 сер 2024
- Привет! В этом видео я расскажу о своих рекомендациях по верстке сайта. Это не совсем чеклист, а больше рекомендации, но все же - довольно полезно и важно. Поехали!
Сайт с рекомендациями: recommend.maxg...
Отступы в верстке: • Организация отступов в...
Управляем фокусом на сайте: • Веб доступность №5. Уп...
ARIA: • Веб доступность №3. ARIA
chrome.google.... - расширение Perfect Pixel
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#ityoutubersru #рекомендации #чеклист
Ребят, поставьте себе цель сделать чек-лист. Слепите что-нибудь изначальное, родное вам. Потом по факту текущего проекта дописывайте всё, что там не достаёт. Но лучшая особенность чек-листа, что вы лишаетесь тупняка: когда что-то сделал и сидишь думаешь что делать дальше. Уверяю, через 2 проекта у вас будет такой чек-лист, с которым вы ничего не упустите. Вы реально это оцените, вырастают эффективность и кайф от разработки. Ну, тут главное, критически мыслить и интересоваться рекомендациями старших, чтобы знать, что писать.
С этого видео взял 6 пунктов, спасибо. Свой чек-лист я веду в Evernone, но можете где угодно его вести, лучше, если там будут удобные чек-боксы.
Мой чек-лист (возможно, вам покажется, что здесь нет каких-то важных пунктов: преимущество этого списка - он мой и понятен мне, если я уверен, что я сросся с чем-то и нет псилогической потребности видеть пункт, то я его не добавляю, большой список из всего сразу скорее напугает, чем поможет):
- [ ] получение проекта
- [ ] чтение макета: определить смысловые блоки, подхватить медиа;
- [ ] подключить к системе контроля версий GIT;
- [ ] подготовка папок, установка сборщика;
- [ ] подключить normalize;
- [ ] проектирование проекта (в виде доп. чек-листа):
- [ ] определить блок-сущности: ссылка, текст, кнопка, контейнер;
- [ ] описать технологии и нетривиальные функции;
- [ ] создать дневник разработки.
- [ ] favicon;
- [ ] подготовка шрифтов;
- [ ] написание кода элемента;
- [ ] написание кода стиля;
- [ ] написание кода анимации;
- [ ] написание кода функционала;
- [ ] alt для картинок;
- [ ] управление фокусом;
- [ ] Тестирование:
- [ ] адаптивная вёрстка;
- [ ] тестирование на добавление контента;
- [ ] lazy load;
- [ ] открыть в других браузерах;
- [ ] проверка на валидность html и css;
- [ ] скринридер;
- [ ] типограф + орфограф
- [ ] оформление на ГХ;
- [ ] переместить файлы в архив;
- [ ] убраться на рабочем столе .
Не понимаю почему так мало лайков и просмотров у этого канала. Все чётко!
Благодарю!
Спасибо за полезные рекомендации. Ещё было бы полезно узнать как организовывать JS код при вёрстке многостраничного сайта.
Маским, спасибо за ваш труд.
Спасибо, все четко и по делу. Добавил сайт в закладки сразу!
Спасибо))
Спасибо, добавил себе пару вещей.
спасибо)
Максим, спасибо за ваш труд - системное и чёткое изложение материала. Не хватает здесь (ютуб) ссылки "помочь проекту". 👌
Пока не знаю, что давать за эту "помощь") вот и не ввожу. Спасибо!
Всем Хорошего вечера.
Максим, спасибо за видео (качественно и полезно) 👍
Пожалуйста =)
Вот таких советов всегда не хватает. Как просо блоки раскидывать и раскрашивать полно материала, а нюансы, о которых многие не знают но очень важны всегда пропускются. Не знал за доступность по табам в той же модалке. Надо это дело копать
Есть видео про плагин модельного окна, недавнее
Можете глянуть)
Круто👍
Хороший чек-лист! Хотелось бы ещё увидеть в рамках рубрики ui-компоненты обратную сторону карточки товара при наведении или при нажатии на кнопку "подробнее"
Не вижу пока практического применения) но попробовать можно.
@@maxgraph я могу скинуть картинку пример - только скажи куда. Просто кажется что я недостаточно хорошо объяснил и мы друг друга не поняли)
В телегу, ссылка в описании))
Все по делу, кстати норм музыка в конце ролика.
Спасибо)
Макс, ты, как всегда, молодчина. Хотелось бы, если можно, распространённые названия классов. Я понимаю, что можно и х@ем назвать, но ведь есть определённые (распространённые) правила хорошего тона. Для меня это вечная проблема.
Спасибо)
github.com/yoksel/common-words - тут про распространенные слова можно почитать)
а по какой причине упустили создание critical css? правда эта тема продвигается гуглом и песимизурует в пейджпид, вернее с ним возможно приблизится 90 балам очень тяжёлым проектам, сейчас гугл требует, чтобы страница при загрузке не дергалась поэтому необходимо резервировать место под картинки, аинхронно грузить шрифты(от этого кругом голова), подбирать пары шрифтов чтобы текст не дергался, если на машине нет используемого шрифта вроде пока все
14:51 должна быть ссылка на расширение, но ссылки так и нет.
Учусь на верстальщика, но мне, похоже, надо учиться на тестировщика. Везде замечаю какие-то косяки)))
chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ru - держите :) и под видео добавил
@@maxgraph спасибо
Я не согласен, что любые комментарии лишние в html. Если блок большой, то я помечаю ими закрытие блоков (для удобной навигации; по типу: ...
Спасибо большое за ваши уроки. А у Вас есть на канале прелоадер на js ?
Нет пока)
@@maxgraphпонятно :) буду ждать с нетерпением
А почему в последнее время мало видео?
Компьютер сломан) но уже почти решил этот вопрос
Зачем поддерживать IE, если это не браузер, а программа для установки браузеров?
Не знаю, я не поддерживаю))
Ребят, на вашем сайте на мобилке слово "Рекомендации" не влезает в экран)
Это прямо на видно я сказал :) ещё не успел исправить
Привет, я установил плагин live server, Но не появляется ни иконка Go Live снизу на вкладке, ни при открытии правой кнопки мыши на файле проекта Open With Live Server, с чем это может быть связано? Заранее спасибо
Все, разобрался, надо было создать рабочую область
Я вот верстаю твой макет, самый простой который, и почему-то когда ты добавляешь flex класс, в котором просто указывается Display: flex, а в header.css justify-content:space-between почему не срабатывает? я все перепроверил по 10 раз, названия классов, свойств, но на сервере они не располагаются justify-content. В чем может быть ошибка?
Не люблю вопросы "в чем может быть ошибка")) я не знаю, и не могу никак знать. Лучше кидай в тг или вк, посмотрим
@@maxgraph Извени, я перепрыгнул с папки проекта в папку на рабочем столе) Я наладил
@@user-ly3xb1hl8q ок)