Locksly
@Locksly
Учусь html-верстке!

Оцените первую верстку из psd макета (критика, замечания, недоработки)?

Первая верстка, которая была написана с нуля, поскольку знаний маловато делалась под фиксированную ширину (960), просьба по голове не бить, указать на ошибки, дать рекомендации (выложена на поддомен моего сайта css.mylib4you.com), ссылка на архив css.mylib4you.com/electron.rar
  • Вопрос задан
  • 505 просмотров
Решения вопроса 2
orlov0562
@orlov0562
I'm cool!
В целом, все норм, есть некоторые замечания, которые можно быстро исправить:

1) <html lang="en"> = сайт на русском
2) jquery.min.js = вниз перед </body>
3) <a ..><div class="logo-vk"></div></a> = не хорошо так делать, по спеке <a></a> это инлайн элемент. А инлайн элементы должны содержать только другие инлайн элементы. Т.е. в данном случае надо хотя бы div поменять на span с display:inline-block.
4) во всех ссылках перевод строки:
<a  class="mail-foter" href="mailto:lektron74@mail.ru">
				lektron74@mail.ru<br>
			</a>

как минимум плохой стиль, т.к. всего скорее попадут доп символы в отображение ссылки
5)
<div class="border-2-1"><img src="img/gradient.png" alt=""></div>
= никогда не надо оставлять alt пустым. Советую прочитать недавнюю статью на хабре про слепого программиста.
6) Классы и комментарии должны быть в одном стиле и на одном языке:
<div class="servys">
				<!-- polosochka -->

vs
<div class="wrapper">
		<div class="content">
			<div class="header">

vs
<p class="servys-design-price">от 1000 рублей </p>
						<!-- при наведение -->
						<div class="servys-design-hover">

7) тэг h1 один раз на странице, если он не является частью article или section:
<div class="servys-mobile">
						<h1 class="servys-mobile-name">Разработка<br>Мобильных<br>Приложений</h1>
					 	<div class="servys-mobile-img"><img src="img/phone.png" alt=""> </div>
					 	<p class="servys-mobily-price">от 18000 рублей </p>
					 	<!-- при наведение -->
					 	<div class="servys-mobile-hover">
						 	<div class="servys-mobile-hover-top">
						 	<h1 class="servys-mobile-name">Разработка<br>Мобильных<br>Приложений</h1>
						 	</div>
						 	<div class="servys-mobile-hover-text">
								Android и iOS<br>
								приложения для<br>
								коммерческой<br>
								деятельности
							</div>
							<div class="servys-mobile-hover-bottom"></div>
						</div>
					</div>


8) Не знаю что за требования были, но сейчас уже надо сразу адаптировать под mobile devices.. Гугл официально занижает позиции не mobile friendly сайтам. Тем более это довольно просто.
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Для первой верстки сойдет под пиво. Только:
1. Вместо табов ставьте 4 пробела, это общепринято.
2. Не используйте reset.css, используйте normalize.css
3. В CSS у вас всё намешано, где нормальная лесенка?
4. Улыбнуло: <!-- polosochka -->

P.S. Дизайн конечно ад)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
День добрый!
Вступай в chat room и предлагай свои идеи.

Концепция такая:
Я нахожу скриншот старенького сайта (или несложного) и кидаю его в определённое время в chat room, затем все желающие его верстают и отправляют результат (желательно, приложить разъяснение своих действий, что бы менее опытные участники могли что-то для себя почерпнуть). В итоге все делаем один макет, но по-своему, и сравнивают его с остальными. Самое главное делать это регулярно.

Сейчас людей очень мало и активность слабая, но если добавишься, то активность возрастёт :) Напиши мне любое сообщение https://gitter.im/zueff/ и я добавлю тебя.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы