Оцените и покритикуйте вёрстку первого сайта. Правильно ли он выполнен?

Question

[Максим Крутов]

Просьба прокомментировать и покритиковать вёрстку моего первого сайта на Bootstrap 4.
Мой сайт - mytest.cc.ua

Comments

[Даниил Сугоняев]

Отметьте решением тех, кто вам помог

[Максим Крутов]

Даниил Сугоняев, Здравствуйте, Даниил! Можно попросить Вас оценить качество моей вёрстки блока с фоном в виде слайдера и верхним меню? Зарнее спасибо Вам за Ваш ответ!

Моя ссылка - https://codepen.io/Krutov/pen/OZeNwq

[Даниил Сугоняев]

Максим Крутов, Да, как вариант, если это подрузумевает макет

Answer 1

[Даниил Сугоняев]

Для первого сайта - хорошо.
Что сразу бросилось в глаза:
1) Дизайн. Ну это лютый треш, если хочешь быть не только верстальщиком, но и дизайнером - изучай современные веяния. (https://ichigarev.ru/veb-dizayn/trendyi-veb-dizayn... посмотри ссылочку, тут даже не на советы обращай внимание, а просто на картинки посмотри как должен выглядеть современный сайт). Также есть куча агрегаторов куда выкладывают свои работы дизайнеры, все это обязательно к ознакомлению.
2) Касательно верстки пощелкал немного, особо грехов нет, у многих опытных верстаков код не лучше. Обрати внимание на ошибки в консоли. И не увлекайся бутстрапом на первых порах, попробуй без него сверстать страницу, не им единым живы, а так привыкнешь ничего хорошего не будет.
3) Оптимизация. Про это тебе уже писали проверяй сайты на https://developers.google.com и исправляй ошибки. Все картинки сжимаются перед тем как выкладывать, вот тебе сервис для этого https://tinypng.com
4) Тренируйся на нормальном макете например . Возьми его и не спеша делай, старайся максимально качественно, это тебе на пару месяцев хватит, думаю.
Удачи в твоих начинаниях, будет нужен еще совет - пиши.

Comments

[Александр]

Как макет забрать? Доступ закрыт, лучше на какой нть гугл драйв залить

[Даниил Сугоняев]

Александр, открыл доступ. Если нужно скачать его, вот ссылка - https://yadi.sk/i/fJRZDc6Q3WRaS6

[Александр]

Даниил Сугоняев,спасибо хочу сам потренироваться)

[Даниил Сугоняев]

Александр, да, приятный шаблон для тренировки. Посмотрел ваш сайт портфолио и работы. Хотел сказать, что сделано классно, но вот прям будто вы пренебрегайте transition) В кнопках, некоторых значках, мне кажется будь изменение чуть плавнее было бы идеально)

[Александр]

Даниил Сугоняев, ого спасибо за отзыв, теперь буду чуть смелее искать работу) а на счет transition думаю тоже с опытом научусь не упускать разные мелочи на которые сейчас не обращаю внимания)

Answer 2

[boga-net]

выровнять меню и лого
придерживать одной ширины внутреннего контейнера (ну или внутренних отступов)
карточки сливаются с фоном и под ними выставить отступы
синий цвет при наведении смотрится с красным вульгарно. Используйте что то помягче, лучше тот же красный
инпуты в форме растянуты, как и сама форма.
меню - лютый треш, особенно цвета
увеличивающийся логотип с border-dashed - колхоз.
Не используйте большое кол-во цветов. Выберите штуки 3 и придерживайтесь одного стиля
Кирпичная стена на фоне ? ) только не в 2018
в футере лого справа без отступа.
Нет эффектов при наведении, кроме тех, что вырвиглаз.
box-shadow не в тему - слкишком его много.
На смартфоне лого слишком большое и создаёт полосу прокрутки по горизонтали. Кнопка меню где-то там, где ей не место

Покопайтесь на tamplatemonster.com, присмотритесь к дизайнам других людей, берите на заметку, развивайте чувство вкуса и стиля.

Я приношу извинения, я критиковал только дизайн, а нужно было вёрстку.. Смотреть чужой код для меня то ещё испытание.. Надеюсь, мой комментарий тоже будет полезен)

Comments

[Максим Крутов]

Спасибо Вам за Ваш комментарий и советы! Для меня это очень важно как для новичка!!!

Answer 3

[Александр Срокин]

Я так понимаю, сам дизайн оценивать смысла нет, да и уже высказались по поводу него предыдущие ораторы.
По CSS Вашему единственное замечание: не используйте !important, ну или хотя бы старайтесь его не использовать.
Поверстайте готовые макеты, потом освойте немного js. После можно переходить на какой нибудь SCSS и разбираться со сборкой проектов (я использую Webpack)

Comments

[Максим Крутов]

Александр, спасибо Вам! Насчёт !important, он мне немного помогает преобразовывать готовые классы из bootstrap. Возможно есть альтернативное решение? Подскажите пожалуйста буду очень рад послушать.

Ещё раз благодарю Вас!

[Александр Срокин]

Чтобы нормально с этим работать, SASS/SCSS нужен. Просто нужные переменные объявляются и все.
Насколько я помню на сайте бутстрапа раньше можно было прям на сайте переопределить все, что нужно и затем скачать результат.. Давно это было. Сейчас посмотрел и с ходу не нашел. Может они отказались от этой фишки.

[Максим Крутов]

Александр Срокин, Сейчас я изучаю и работаю на Bootstrap 4, возможно действительно он изменился в определённом функционале. Saas конечно буду лучше осваивать. Я с ним немного через koala поработал, весьма удобно. Хотя читал что koala профессионалами уже не используется. Вместо неё вроде как gulp нужно применять.

Спасибо Вам за Ваши пояснения!

[Александр Срокин]

Максим Крутов, про koala ничего не слышал. gulp думал глянуть для расширения кругозора, но сейчас вместо него использую webpack.

Answer 4

[sim3x]

нет сасс
нет бем
алерт
нет типографики
https://developers.google.com/speed/pagespeed/insi...

Для ревью верстки сайт размещают на гитхаб пейджес рядом с репой с кодом и сборщиком

Comments

[Максим Крутов]

Спасибо Вам! Открыли для меня возможности о которых я не знал!

[boga-net]

sim3x а зачем здесь, собственно Sass и бэм ?
они тут будут избыточны, к тому же человек новичок. Сасс - дело вкуса. А бэм неактуален для лэндингов.
про алерт и типографику согласен

[Максим Крутов]

Я про Saas мало знаю. Немного через Koala с ним работал. Если правильно понял он сокращает время написания кода и немного ускоряет загрузку страниц, это так?

[Максим Крутов]

Ещё хочу уточнить, насколько обязателен Saas, если я поставил для себя цель научиться делать лэндинги под заказ? Для заказчика это будет важно?

Заранее благодарю за ответ!

[Александр Срокин]

Максим Крутов, ну он важен для ускорения разработки и не более)

[Максим Крутов]

Спасибо Вам! Теперь немного разобрался с Saas!)

[boga-net]

Максим Крутов, SASS не обязателен, это уж как по душе ) Лично я уже не могу без SASS (имеется ввиду и синтаксис SASS ). Дело даже не в ускорении разработки, как писали выше, а в возможности использовать переменные и другие плюшки.

[Максим Крутов]

boga-net, Благодарю Вас! Это современный препроцессор, который мне нужно будет получше освоить!)

[Александр Срокин]

Максим Крутов, он не ускоряет загрузку страниц) Он используется для увеличения скорости и удобства разработки.
Вот например, у нас в разных местах используется цвет какой-то цвет. Вместо того, что бы постоянно помнить код цвета, мы можем просто определить переменную и везде использовать ее. А если нам надо поменять этот цвет, то не придется лазить по всем стилям, поменять будет достаточно только в одном месте - где объявлялась переменная. И это лишь одна фишка препроцессоров)
На загрузку страниц это никак не повлияет, так как весь этот код, что Вы написали компилируется в обычный CSS

[Максим Крутов]

Александр Срокин, Спасибо Вам за разъяснения! Обязательно изучу подробнее Saas!

[sim3x]

Максим Крутов,
без сасс нормальное использование бутстрапа невозможно
без бем нормальное редактирование проекта невозможно
размер проекта неважен