Jump to content
  • 0

Оцените мою верстку


Shenia132
 Share

Question

Всем привет. Оцените пожалуйста мою верстку http://verstka-primer.esy.es/Zonya/. Первый раз использовал препроцессор less поэтому сильно не ругайтесь. Макет не такой уж сложный, но все равно хотелось бы чтобы люди опытные посмотрели и по критиковали. Скажите пожалуйста может есть какие то элементы которые было бы правильнее сверстать другим образом. Заранее спасибо !

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Я бы меню сделал фиксированным, нет переходов по меню, уменьшите размер браузера до появления горизонтального скрола и прокрутите вправо и посмотрите на бэкграунды. Дальше не смотрел.

Link to comment
Share on other sites

  • 0

Я бы меню сделал фиксированным, нет переходов по меню, уменьшите размер браузера до появления горизонтального скрола и прокрутите вправо и посмотрите на бэкграунды. Дальше не смотрел.

ну а по самому коду нормально ?

Link to comment
Share on other sites

  • 0

В Opera последней на кнопках сбилось центрирование текста

Картинки уменьшающиеся глючит, если мышкой водить по пустому пространству

5 макетов в "FEATURES OF THE PRODUCT" хотелось бы через 3D-трансформации крутить.

Не понял зачем triangle, псевдоэлементы же есть.

Edited by antonKar
Link to comment
Share on other sites

  • 0

При наведение уменьшаться картинки в блоки "Our Awesome Works" - это УЖАСНО со стороны дизайна. Мое личное мнение.
добавил текста в блок "Our Awesome Works" правые миниатюры сместились вниз.

 

для .post добавьте правило vertical-align: top;
без него если добавить побольше текста, остальные блоки вниз съежают.

Edited by raptor-dm
Link to comment
Share on other sites

  • 0

http://take.ms/Ha45S воу, что это за BR? кто ж так будет текст вбивать? в любую строку дописываю текст и все падает. надо ширину задать на .from-the-blog

то есть вместо br ширину блоку просто задать ?

При наведение уменьшаться картинки в блоки "Our Awesome Works" - это УЖАСНО со стороны дизайна. Мое личное мнение.

добавил текста в блок "Our Awesome Works" правые миниатюры сместились вниз.

 

для .post добавьте правило vertical-align: top;

без него если добавить побольше текста, остальные блоки вниз съежают.

я понял, спасибо

Link to comment
Share on other sites

  • 0

а мне лично нравится, как картинки уменьшаются при наведении мышкой. ну это мое имхо, конечно.

 

а вообще из больших и жирных минусов - что на маленьком экране возникает горизонтальная полоса прокрутки. у меня 1024х600, и некоторые элементы подстраиваются под мою ширину экрана, а некоторые вылезают. попробуй http://quirktools.com/screenfly/или что-нибудь в этом роде, посмотри, что получается. менять надо обязательно, ширина экрана как у меня - вовсе не редкость.

 

еще мелочи:

 - непонятно, зачем в каждой section внутри center;

 - валидатор и многие другие дружным хором выдадут, что элементу section обязательно необходим заголовок (немного странный принцип, конечно...)

 - что за дикий triangle и зачем он нужен???))) ну я понимаю, если он просто остался на случай, если ты передумаешь, как оформлять speech bubbles у happy customers, но откуда он на самой верхней полоске меню, рядом с логотипом?

 - если уж использовать осмысленную семантику, то можно было бы конечно и как-то помасштабнее ее поприменять, там, h1, h2, h3, article, все такое...

 

и да, фиксированное меню, либо хотя бы кнопка "наверх".

Link to comment
Share on other sites

  • 0

а мне лично нравится, как картинки уменьшаются при наведении мышкой. ну это мое имхо, конечно.

 

а вообще из больших и жирных минусов - что на маленьком экране возникает горизонтальная полоса прокрутки. у меня 1024х600, и некоторые элементы подстраиваются под мою ширину экрана, а некоторые вылезают. попробуй http://quirktools.com/screenfly/или что-нибудь в этом роде, посмотри, что получается. менять надо обязательно, ширина экрана как у меня - вовсе не редкость.

 

еще мелочи:

 - непонятно, зачем в каждой section внутри center;

 - валидатор и многие другие дружным хором выдадут, что элементу section обязательно необходим заголовок (немного странный принцип, конечно...)

 - что за дикий triangle и зачем он нужен???))) ну я понимаю, если он просто остался на случай, если ты передумаешь, как оформлять speech bubbles у happy customers, но откуда он на самой верхней полоске меню, рядом с логотипом?

 - если уж использовать осмысленную семантику, то можно было бы конечно и как-то помасштабнее ее поприменять, там, h1, h2, h3, article, все такое...

 

и да, фиксированное меню, либо хотя бы кнопка "наверх".

center это для того чтобы выровнять по центру содержимое

Link to comment
Share on other sites

  • 0

1. Нужно добавить padding слева и справа хотя бы 10px, т.к не красиво смотрится http://take.ms/cSYVa

2.  Этот блок не редактируемый http://take.ms/QTbTj

для каждого отзыва у вас задан margin, причем разный, у первого 400px, у 3го 380px.

Нужно все привести к одному виду и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1), чтобы можно было добавить новый отзыв и он без проблем подстроился к общему стилю.

 

3. Вот что будет если картинку добавить большего размера http://take.ms/7xasX

 

 

В целом у сайта очень много общих элементов (кнопки, заголовки, параграфы), а вы в каждом блоке повторяете стили.

Edited by swandev
Link to comment
Share on other sites

  • 0

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

мне вот тоже чайлды нравятся, но ведь их вроде как не понимает Safari? вот я их поэтому вообще избегаю. зря избегаю?

center это для того чтобы выровнять по центру содержимое

почему бы сразу всю section не выравнивать, зачем дополнительный элемент? Надо стараться укорачивать код, особенно когда речь идет о несемантических элементах.

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный:)

Link to comment
Share on other sites

  • 0

 

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

мне вот тоже чайлды нравятся, но ведь их вроде как не понимает Safari? вот я их поэтому вообще избегаю. зря избегаю?

center это для того чтобы выровнять по центру содержимое

почему бы сразу всю section не выравнивать, зачем дополнительный элемент? Надо стараться укорачивать код, особенно когда речь идет о несемантических элементах.

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный :)

 

http://htmlbook.ru/css/nth-of-type

Link to comment
Share on other sites

  • 0

 

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

мне вот тоже чайлды нравятся, но ведь их вроде как не понимает Safari? вот я их поэтому вообще избегаю. зря избегаю?

center это для того чтобы выровнять по центру содержимое

почему бы сразу всю section не выравнивать, зачем дополнительный элемент? Надо стараться укорачивать код, особенно когда речь идет о несемантических элементах.

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный :)

 

спасибо за критику. Без нее никак )

 

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

мне вот тоже чайлды нравятся, но ведь их вроде как не понимает Safari? вот я их поэтому вообще избегаю. зря избегаю?

center это для того чтобы выровнять по центру содержимое

почему бы сразу всю section не выравнивать, зачем дополнительный элемент? Надо стараться укорачивать код, особенно когда речь идет о несемантических элементах.

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный :)

 

почему я не задаю section по центру, потому что не которые из них должны растягиваться на всю ширину.

Edited by Shenia132
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?

    • By dissamen2
      Здравствуйте, столкнулся с такой проблемой, что в десктопной версии сайта все работает нормально, однако при переходе на мобильную, блок становится пустым и занимает гораздо меньше места, в чем проблема?
  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><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 class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy