X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Первая верстка, дайте оценку)
IrenKam
IrenKam
Topic Starter сообщение 12.11.2016, 22:06; Ответить: IrenKam
Сообщение #1


Привет, хочется услышать какие то слова напутствия, критики, может похвалите :rolleyes::rolleyes::rolleyes:.
Это моя первая самостоятельная вёрстка. Знания HTML и CSS пока довольно поверхностные. Хочется на начальном этапе понять, что делаю не так, что бы сразу исправить.
http://cssdeck.com/labs/full/0owliss6
http://cssdeck.com/labs/0owliss6
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZanko
AlexZanko
сообщение 13.11.2016, 2:49; Ответить: AlexZanko
Сообщение #2


Действительно, много чего нужно править, что бросилось в глаза.
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.Не совсем понял зачем использовать для меню такую конструкцию:
[CSS].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;
}[/CSS]
3. Используйте сокращенную запись для margin и padding т.е:
вместо, допустим padding-top: 20px padding-right: 15px padding-left:5px;
лучше padding: 20px 15px 0 5px; Читайте тут
Хотя далее увидел у Вас, но применяется не корректно, монжо лучше
[CSS].temy ul {
margin: 35px 0 35px 0;
}
.temy ul{
margin: 35px 0;
}[/CSS]
или например цвета - можно вместо 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 или погуглите такую вещь как БЭМ.
Наверное много-чего можно было бы написать, но как-то утомился:rolleyes: Если что еще интересует, пиши. Успехов в верстке.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
angelbro
angelbro
сообщение 8.1.2017, 23:04; Ответить: angelbro
Сообщение #3


простота и порядок на сайте)) но цвета желательно подобрать лучше)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lordmalfoy
lordmalfoy
сообщение 18.1.2017, 22:27; Ответить: lordmalfoy
Сообщение #4


Мне тоже понравилось, но соглашусь по цветам на сайте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
digbadsit
digbadsit
сообщение 18.5.2017, 22:06; Ответить: digbadsit
Сообщение #5


4. Под корректировать цвета
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
EfimGrigoriev
EfimGrigoriev
сообщение 15.6.2017, 14:11; Ответить: EfimGrigoriev
Сообщение #6


Первый сайт полноценно отказыавется грузиться
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Mark43
Mark43
сообщение 16.6.2017, 12:30; Ответить: Mark43
Сообщение #7


Картинки не подгружаются(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
veravera
veravera
сообщение 18.5.2018, 19:14; Ответить: veravera
Сообщение #8


подобрать другие цвета и будет нормально ,мне понравилось
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jacki
jacki
сообщение 14.5.2019, 0:47; Ответить: jacki
Сообщение #9


Я бы курсив вообще не использовал)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Avtalik
Avtalik
сообщение 8.7.2019, 11:39; Ответить: Avtalik
Сообщение #10


Некоторые формы не грузит на сайте и картинки.:wacko:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91402 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Англоязычный SEO-копирайтинг от $3/100 слов от NeedmyLink | Первая статья бесплатно
1 Needmylink1 777 11.3.2024, 15:28
автор: Needmylink1
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
26 zaiko 17105 30.1.2024, 18:10
автор: zaiko
Горячая тема (нет новых ответов) Дайте советы по направлениям для заработка
38 Suagaring 4640 16.1.2024, 12:16
автор: Antarez
Открытая тема (нет новых ответов) Дайте бесплатного контента! :)
2 Tia2 971 22.12.2023, 18:53
автор: zyzy


 



RSS Текстовая версия Сейчас: 19.3.2024, 12:10
Дизайн