Jump to content
  • 0

Мой первый макет - критика, советы для улучшения


Ota
 Share

Question

Всем доброго дня,

 

Хочу представить на ваш строгий суд свой первый сверстанный макет. Хотелось бы получить от вас критику и советы, что можно улучшить.

 

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

 

Проверил в Хроме, ФФ и Опере. Когда начал проверять в ИЭ, все развалилось. Потратил целый день на гугл и узнал про хаки и всякое такое. В результате в ИЭ 9+ отображается нормально, только при больших разрешениях получается слишком большой отступ от правой колонки. Как это исправить так и не разобрался. В остальных браузерах такого нет.

 

Проверил код на валидность. В HTML ошибки только в форме поиска, потому что я поставил пустые значения в action, а также я поставил тег <H1> на первую статью (в макете у нее заголовок больше чем у всех остальных статей). CSS изначально был валидным, но после хаков, есть 4 ошибки.

 

Ну и собственно ссылка: http://1001.su/sample1/index.html

 

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

 

Заранее всем спасибо!

Edited by Ota
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Здравствуйте, я особо долго не всматривался но парочку замечаний (которые сразу заметил) всё же озвучу...

 

1. У поля outline убран, у кнопки нет - не аккуратненько как-то;

2. Лично я, всегда кнопкам делаю cursor: pointer, по моему это логично;

3. У button отсутствует type;

4. Валидатор ругается только на пустой action, а если его не указывать вообще то не ругается.

 

Удачи Вам в Ваших начинаниях!

Edited by Морская улиточка
Link to comment
Share on other sites

  • 0

Привет.

1. Логотип. Ширина картинки указана в самом теге. Я думаю, лучше это делать в css. Как-то так

.logo img{width:35px;}

2. Границы между пунктами меню сделаны картинками. Можно сделать так

https://jsfiddle.net/2aw8h9xd/1/

3. Еще заметил, что фон меню сделан картинкой. Зачем? Я так понимаю из-за нежелания (незнания) делать градиент. Если делаем картинкой, то получается еще один лишний запрос. А если заказчик захочет поменять цвет на зеленый, то делать новую картинку?

Link to comment
Share on other sites

  • 0

Здравствуйте, я особо долго не всматривался но парочку замечаний (которые сразу заметил) всё же озвучу...

 

1. У поля outline убран, у кнопки нет - не аккуратненько как-то;

2. Лично я, всегда кнопкам делаю cursor: pointer, по моему это логично;

3. У button отсутствует type;

4. Валидатор ругается только на пустой action, а если его не указывать вообще то не ругается.

 

Удачи Вам в Ваших начинаниях!

 

Спасибо большое за ваш коментарий. Полностью согласен со всеми пунктами, кроме второго. По моему это дело вкуса. В яндексе например сделано так как вы говорите, а в гугл нет. 

Привет.

1. Логотип. Ширина картинки указана в самом теге. Я думаю, лучше это делать в css. Как-то так

.logo img{width:35px;}

2. Границы между пунктами меню сделаны картинками. Можно сделать так

https://jsfiddle.net/2aw8h9xd/1/

3. Еще заметил, что фон меню сделан картинкой. Зачем? Я так понимаю из-за нежелания (незнания) делать градиент. Если делаем картинкой, то получается еще один лишний запрос. А если заказчик захочет поменять цвет на зеленый, то делать новую картинку?

 

Спасибо за подсказки и советы. Хотел бы уточнить для себя несколько моментов:

 

1. Хочу понять почему лучше указывать размер в CSS? Просто я еще многого не знаю и поставил ширину и высоту на все картинки в самих тегах, поскольку в книге, которую я прочитал по html и css говорилось, что надо делать именно так, поскольку браузеры быстрее отрисовывают.

 

2. Да, знаю, что можно сделать так как вы говорите. Просто в макете все эти границы чуть чуть различались между собой. Я не знал как это реализовать с помощью CSS. Поэтому хотел спросить: в реальной жизни заказчики просят, чтобы все было идеально как на макете или же можно делать с помощью CSS, без картинки, но чуть-чуть с отличием от макета?

 

3. Из за незнания как делать градиент. Да я нашел в интернете, что можно сделать градиент с помощью CSS. Но как я не пытался я не мог повторить как это сделано  в макете. Поэтому и сделал картинками. Как делать градиент, который в точности как в макете? Может есть какие-то инструменты? Или подбирается на глаз?

Не используйте отдельный див no-wrap для обнуления float, почитайте про clearfix.

 

Почитал про clearfix. Понял, что я сделал самым старым дедовским методом, который не является лучшим. Теперь буду использовать clearfix. 

 

Спасибо за наводку!

Link to comment
Share on other sites

  • 0

 

Спасибо за подсказки и советы. Хотел бы уточнить для себя несколько моментов:

 

1. Хочу понять почему лучше указывать размер в CSS? Просто я еще многого не знаю и поставил ширину и высоту на все картинки в самих тегах, поскольку в книге, которую я прочитал по html и css говорилось, что надо делать именно так, поскольку браузеры быстрее отрисовывают.

 

2. Да, знаю, что можно сделать так как вы говорите. Просто в макете все эти границы чуть чуть различались между собой. Я не знал как это реализовать с помощью CSS. Поэтому хотел спросить: в реальной жизни заказчики просят, чтобы все было идеально как на макете или же можно делать с помощью CSS, без картинки, но чуть-чуть с отличием от макета?

 

3. Из за незнания как делать градиент. Да я нашел в интернете, что можно сделать градиент с помощью CSS. Но как я не пытался я не мог повторить как это сделано  в макете. Поэтому и сделал картинками. Как делать градиент, который в точности как в макете? Может есть какие-то инструменты? Или подбирается на глаз?

1. По поводу скорости не знал, но я все равно писал бы в css просто потому, что если картинки однотипные придется менять, то в css надо один раз поменять размер, вместо 10 раз в html. Но лучше смогут аргументировать более опытные.

2. Я разницы не заметил. Если разница сильно заметная (одна граница красная, вторая - зеленая, третья - синяя и т.д.), то есть псевдоэлемент :nth-child(). В нем можно задать порядочный номер эелемента. По поводу заказчиков. Я думаю, что все обсуждается и небольшие различия допустимы.

3. Я сам не знаю как делать 100% точно как на макете,сам подбирал на глаз. Хотя, если есть .psd-файл, то можно поискать в настройках градиента, границы наложения цветов - будет легче "угадать" градиент. Думаю, что небольшие различия заказчик не осудит.

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