Оцените верстку начинающего верстальщика?

Question

[noname12]

Здравствуйте!
Хочу стать верстальщиком, поэтому тренируюсь в верстке, нужны советы, критика профессионалов.
Верстка проводилась по данному макету
Код
Сайт
Спасибо.

Comments

[Sergey]

окей, осталось выложить макет, код и сайт

[Максим]

noname12: для начала не плохо , но адаптивность желает лучшего, 4 из 10

[Михаил Плюснин]

я хоть и не верстальшик, но могу предложить начать использовать препроцессор(LESS, SASS), а так же сборшик (gulp, webpack). Что касается css, то я бы на вашем месте делал меньше привязок к #- селектору, так же хочу посоветовать присмотреться к бэм

[Максим Калинин]

Михаил Плюснин: для простого одностраничного сайта без сборщика и препроцессора не обойтись, конечно. Там весь проект состоит из одной html, css и картинок. Что там собирать?

[Михаил Плюснин]

Максим Калинин: Я думаю, вы не будете спорить что препроцессором все это сделать аккуратней и читабельней, к тому же занимает это все меньше 1 минуты, если конечно знать сборшики.

[Михаил Плюснин]

Максим Калинин: + у человек хочет стать верстальшиком, я даже не верстальшик, но мне пришлось освоить эти вещи. Думаю стоит сказать ему, как крутые дядьки это делают...

Answer 1

[Ivan Bogachev]

По внешнему виду:
Адаптивность есть, это хорошо. Есть мелкие проблемы, которые портят впечатление (где-то что-то обломалось, где-то что-то не влезло):

и.т.д. Также стрелка снизу кажется не по центру, отступы какие-то странные местами (макет не смотрел, это чисто личное впечатление). Фокус на элементах практически не заметен. Стоит поработать над этим. Обводка синим - бяка.

По коду:
- Отсутствует система в именовании классов. Почитайне про БЭМ или RSCSS.
- Использовать #id в CSS не стоит. Это дурной тон и источник проблем.
- Из-за вышеупомянутого отсутствия системы классов CSS читать невозможно + потенциальные проблемы с перебиванием стилей в неожиданных местах.
- Много магических чисел в CSS (321px, 44.148936%, 381px...). Практически всегда можно избежать этого.
- Нет ресета/нормалайза. Тоже потенциальные проблемы.

Поправьте вышеупомянутые проблемы. После этого приходите к использованию препроцессоров (можно начать с LESS - он самый простой, но в 99% случаев его возможностей достаточно). Ну и JS изучайте, без него верстальщику не выжить.

Comments

[noname12]

Спасибо большое

Answer 2

[Froggyweb]

показывается вот так
слайдер не работает.
селект очень гтранно работает

Answer 3

[Qairat]

Сразу начинай изучать scss, забей на css. Вот маленький пример с твоего кода, как можно написать на scss.

$green: #1abc9c; // можешь потом везде его использовать, и в других файлах scsc.
$green2: #18a68a;
$blue: #3498db;
$blue2: #2e85bf;
.button { // дай общий класс для двух div-ок
	padding: 15px 0px;
	border-radius: 4px;
	border: none;
	color:#fff;
	cursor: pointer;
	font: 14pt SlimSansSerif;
	width: 166px;
}
.btn1{
	background-color: &green;
        &:hover{
	      background-color: &green2;
        }
}
.btn2{
	background-color: $blue;
        &:hover{
          	background-color: &blue2;
        }
}

И еще, пиши в отдельном файле все media стили.

Comments

[noname12]

Спасибо

[Froggyweb]

И еще, пиши в отдельном файле все media стили.
Очень спорный совет

Сразу начинай изучать scss, забей на css. Вот маленький пример с твоего кода, как можно написать на scss.

Еще более спорный совет

Answer 4

[Анастасия Соколова]

Обычный верстальщик
HTML;
CSS
jQuery (всякие плагинчики);
возможно ещё что-то по мелочи.

Веб-мастер
HTML5;
XHTML;
HTML 4.01;
XML;
AJAX;
CSS 2.1;
CSS3;
CSS-фреймворки;
JavaScript ;

Comments

[Astrohas]

очень относится к вопросу

[dkrylov]

начинающая програмистка, очень мило ;)

[Сергей delphinpro]

Анастасия Соколова: у вас оба списка одинаковые =)

Answer 5

[tema_sun]

Он значительно отличается от того, что в psd'шке. Нечего оценивать.

Answer 6

[Дмитрий]

Помимо вышеперечисленных недочётов и отличий от макета, укажу ещё на один момент: адаптивность под широкий экран не реализована, справа возникает пустое пространство.