Вид для печати
Привет, хочется услышать какие то слова напутствия, критики, может похвалите :0048::0048::0048:.
Это моя первая самостоятельная вёрстка. Знания HTML и CSS пока довольно поверхностные. Хочется на начальном этапе понять, что делаю не так, что бы сразу исправить.
http://cssdeck.com/labs/full/0owliss6
http://cssdeck.com/labs/0owliss6
Действительно, много чего нужно править, что бросилось в глаза.
HTML
1.Чрезмерное использование h1, желательно использование на странице 1 раз, я бы оставил только h1 для верхнего блока("Помощь психолога в жизненных ситуациях"), а остальное замени <span>,<p> с прописанными стилями;
2.От себя, не знаю влияет ли как-то это на семантику, но по глазам бьет адски - не пиши капсом в тегах html(если в теге исключительно капс), используй в CSS свойство text-transform:uppercase;
<h1>ГАРАНТИРОВАННАЯ АНОНИМНОСТЬ!</h1>
3. Используй структурные теги HTML вместо div, т.е. вместо <div class="header> или <div class="footer"> нужно <header>, <footer>. Меню заверни в <nav>, а не в <div>. Подробнее
CSS
4.<div class="menu">
<ul>
<li><a href="#">Психологическая помощь</a></li>
<li><a href="#">Психологические тесты</a></li>
<li><a href="#">Вопрос-ответ</a></li>
<li><a href="#">Лицензии</a></li>
<li><a href="#">Услуги и цены</a></li>
</ul>
</div>
-Излишняя вложенность можно же класс прописать к ul и убрать div. Однако если использовать nav то разметка будет такая;
<nav>
<ul class="menu">
<li><a href="#">Психологическая помощь</a></li>
<li><a href="#">Психологические тесты</a></li>
<li><a href="#">Вопрос-ответ</a></li>
<li><a href="#">Лицензии</a></li>
<li><a href="#">Услуги и цены</a></li>
</ul>
</nav>
5. У вас четрые кнопки одинаковые только текст внутри разный
<div class="knopki">
<button style="border: 0" type="submit" value="Индивидуальные консультации
при встрече">Индивидуальные консультации<br>
при встрече</button>
<button style="border: 0" type="submit" value="Видео-консультации
по Skype">Видео-консультации<br>
по Skype</button>
<button style="border: 0" type="submit" value="Консультации
по e-mail">Консультации<br>
по e-mail</button>
<button style="border: 0" type="submit" value="Бесплатные
экспресс-консультации
на сайте">Бесплатные<br>
экспресс-консультации<br>
на сайте</button>
</div>
Border повторяется из раза в раз с одним и тем же значением. Почему не вынести в стиль ?
И наверняка атрибут value используется не по назначению, на всякий случай почитайте
И еще, button используется по большей части внутри тега <form>, в этом случае я бы заменил на ссылку(если вам нужен переход на другую страницу). В любом случае использование button в данном случае сомнительно.
СSS
1.Использование пустого div
<div class="clear"></div>
<div class="menu ">
<ul>
<li><a href="#">Психологическая помощь</a></li>
<li><a href="#">Психологические тесты</a></li>
<li><a href="#">Вопрос-ответ</a></li>
<li><a href="#">Лицензии</a></li>
<li><a href="#">Услуги и цены</a></li>
</ul>
</div>
Исправить на
<div class="clear menu ">
<ul>
<li><a href="#">Психологическая помощь</a></li>
<li><a href="#">Психологические тесты</a></li>
<li><a href="#">Вопрос-ответ</a></li>
<li><a href="#">Лицензии</a></li>
<li><a href="#">Услуги и цены</a></li>
</ul>
</div>
Нужно будет подкорректировать margin-top у menu после этого.
2.Не совсем понял зачем использовать для меню такую конструкцию:
.menu li:nth-child(1){
width: 235px;
}
.menu li:nth-child(2){
width: 220px;
}
.menu li:nth-child(3){
width: 150px;
}
.menu li:nth-child(4){
width: 135px;
}
.menu li:nth-child(5){
width: 200px;
}
3. Используйте сокращенную запись для margin и padding т.е:
вместо, допустим padding-top: 20px padding-right: 15px padding-left:5px;
лучше padding: 20px 15px 0 5px; Читайте тут
Хотя далее увидел у Вас, но применяется не корректно, монжо лучше
.temy ul {
margin: 35px 0 35px 0;
}
.temy ul{
margin: 35px 0;
}
или например цвета - можно вместо color:#ffffff; писать просто первые три символа color:#fff; Читайте тут
4. Неадаптивная верстка, с мобильного будет все смотрется не ахти. Учи, сейчас без этого никак.
5. Старайтесь использовать более осмысленные названия для классов, поверьте мне, видя в файле названия p1, p2,text2 мозг начинает просто кипеть. Нейминг в целом вещь непрострая, но стоит стараться.
Например у Вас есть footer и 3 секции .p1 .p2 .p3 - название которое ни о чем не говорит. Переименуте хотя бы в .footer-section-left,.footer-section-mid, .footer-section-right хотя бы понятно где находится сей класс. А вообще посмотрите, например https://www.youtube.com/watch?v=G5GeJuH97kE или погуглите такую вещь как БЭМ.
Наверное много-чего можно было бы написать, но как-то утомился:0024: Если что еще интересует, пиши. Успехов в верстке.
простота и порядок на сайте)) но цвета желательно подобрать лучше)
Мне тоже понравилось, но соглашусь по цветам на сайте
4. Под корректировать цвета
Первый сайт полноценно отказыавется грузиться
Картинки не подгружаются(
подобрать другие цвета и будет нормально ,мне понравилось
Я бы курсив вообще не использовал)
Некоторые формы не грузит на сайте и картинки.:1128:
надо доработать