Разбираем верстку лендинга - портфолио. Верстка сайта №3

preview_player
Показать описание
Всем привет в данном видео я произвожу разбор верстки третьей присланной работы! Постарался учесть все моменты, но если что-то забыл - спрашивайте в комментариях!

Плейлисты моего канала, которые также могут быть вам интересны

Не ограничивай себя видеоуроками на YouTube!
Узнавайте еще больше полезной информации!

-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
Рекомендации по теме
Комментарии
Автор

Добрый день, Анатолий! Большое спасибо Вам за разбор, обязательно учту все замечания, указанные в данном видео. Хочу кратко прокомментировать некоторые замечания:

1) В секции featured-articles использовался плагин equelHeights для создания одинаковой высоты текста, в случае если в итемах будет разное количество строк, и margin-top я применил как единственное на мой взгляд решение что-бы текст не ложился на нижние элементы;
2) В слайдере секции clients для правильного отображения итемов при адаптации применение свойства margin: auto; Спасибо за подсказку, решения на тот момент я не нашел;
4)Еще хотел обратить внимание, что в видео не показан плавный скролл при клике на пункт меню в шапке. Т.е. в верстке применен плагин PageScroll2id который позволяет плавно скроллить к определенному якорю;

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

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

anatoliyname
Автор

Отличный разбор! Спасибо Анатолий!
*43:50* в фильтре(mixitUp) нет кнопки ''All", поэтому подумал, что нужно полностью все слайды менять, т.к. получается без перезагрузки страницы невозможно в первоначальное положение вернуть слайдер.
*44:20* В макете задумка, что часть следующего слайда видна, посчитал, что это возможно реализовать на любом разрешении, смотрится и правда не очень здорово.
*39:37* Я уже оставлял свой комментарий о том, что используя *section* нужен заголовок '"h"(иначе валидатор пишет "WARNING"), если его нет в макете, то получается или с валидатором не считаться, или на *div* менять. Проверить это в валидаторе просто; напишите ваш комментарий по этому поводу.
* Классов специально меньше давать старался, по принципу "не захламлять", теперь буду стараться давать класс большинству элементов.
*46:25* У меня общий стиль задан для всех *h2*. в данной секции отличается заголовок и я добавил отдельно стили, но класс доп. не давал(написал выше почему).
* Очень мне хотелось получить ответ, но вы не заострили на этом внимание, спрошу здесь: где div *quote* я взял автора в *h4*, и в секции *blog* все даты в *h5* допустимо ли это? или там нужен *span*? Просто где-то узнал, что *h4* - *h6* можно использовать в таком виде.
* Про отступы, в дальнейшем буду стараться делать правильно.
Мне очень понравилось!

alexandrkazakov
Автор

А подскажите, где ссылка на стартовый шаблон, я все видео пролистал в плейлисте, не нашел.

ihabia