+ Ответить в теме
Показано с 1 по 9 из 9

Тема: Первая верстка, дайте оценку)

  1. #1
    Новичок IrenKam на пути к лучшему Аватар для IrenKam
    Регистрация
    12.11.2016
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Смущение Первая верстка, дайте оценку)

    Привет, хочется услышать какие то слова напутствия, критики, может похвалите .
    Это моя первая самостоятельная вёрстка. Знания HTML и CSS пока довольно поверхностные. Хочется на начальном этапе понять, что делаю не так, что бы сразу исправить.
    http://cssdeck.com/labs/full/0owliss6
    http://cssdeck.com/labs/0owliss6

  2. #2
    Новичок AlexZanko1992 на пути к лучшему Аватар для AlexZanko1992
    Регистрация
    12.11.2016
    Сообщений
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Действительно, много чего нужно править, что бросилось в глаза.
    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 или погуглите такую вещь как БЭМ.
    Наверное много-чего можно было бы написать, но как-то утомился Если что еще интересует, пиши. Успехов в верстке.
    Последний раз редактировалось AlexZanko1992; 13.11.2016 в 02:36.

  3. #3
    Новичок industan на пути к лучшему Аватар для industan
    Регистрация
    07.01.2017
    Сообщений
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    простота и порядок на сайте)) но цвета желательно подобрать лучше)

  4. #4
    Новичок lordmalfoy на пути к лучшему Аватар для lordmalfoy
    Регистрация
    18.01.2017
    Сообщений
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Мне тоже понравилось, но соглашусь по цветам на сайте

  5. #5
    Пользователь digbadsit на пути к лучшему Аватар для digbadsit
    Регистрация
    15.05.2017
    Сообщений
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    4. Под корректировать цвета

  6. #6
    Новичок EfimGrigoriev на пути к лучшему Аватар для EfimGrigoriev
    Регистрация
    15.06.2017
    Сообщений
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Первый сайт полноценно отказыавется грузиться

  7. #7
    Новичок Mark43 на пути к лучшему Аватар для Mark43
    Регистрация
    16.06.2017
    Сообщений
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Картинки не подгружаются(

  8. #8
    Новичок veravera на пути к лучшему Аватар для veravera
    Регистрация
    18.05.2018
    Сообщений
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    подобрать другие цвета и будет нормально ,мне понравилось

  9. #9
    Новичок jacki на пути к лучшему Аватар для jacki
    Регистрация
    21.04.2019
    Адрес
    Moldova
    Сообщений
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Я бы курсив вообще не использовал)

+ Ответить в теме

Похожие темы

  1. Дайте оценку моему форуму и если хотите зарегьтесь
    от deadlordik в разделе Обзор и оценка ваших работ
    Ответов: 6
    Последнее сообщение: 14.06.2018, 16:36
  2. Дайте оценку сайту www.oxe.by
    от itworker в разделе Обзор и оценка ваших работ
    Ответов: 11
    Последнее сообщение: 18.05.2018, 17:08
  3. Дайте оценку сайту
    от who_made в разделе Обзор и оценка ваших работ
    Ответов: 6
    Последнее сообщение: 01.06.2012, 12:06

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения