Привет, хочется услышать какие то слова напутствия, критики, может похвалите :0048::0048::0048:.
Это моя первая самостоятельная вёрстка. Знания HTML и CSS пока довольно поверхностные. Хочется на начальном этапе понять, что делаю не так, что бы сразу исправить. http://cssdeck.com/labs/full/0owliss6 http://cssdeck.com/labs/0owliss6
13.11.2016, 00:49
AlexZanko1992
Действительно, много чего нужно править, что бросилось в глаза.
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.
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
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: Если что еще интересует, пиши. Успехов в верстке.
08.01.2017, 21:04
industan
простота и порядок на сайте)) но цвета желательно подобрать лучше)
18.01.2017, 20:27
lordmalfoy
Мне тоже понравилось, но соглашусь по цветам на сайте
18.05.2017, 20:06
digbadsit
4. Под корректировать цвета
15.06.2017, 12:11
EfimGrigoriev
Первый сайт полноценно отказыавется грузиться
16.06.2017, 10:30
Mark43
Картинки не подгружаются(
18.05.2018, 17:14
veravera
подобрать другие цвета и будет нормально ,мне понравилось
13.05.2019, 22:47
jacki
Я бы курсив вообще не использовал)
08.07.2019, 09:39
Avtalik
Некоторые формы не грузит на сайте и картинки.:1128: