Верстка первого сайта - что сделано неправильно?

Question

Я начинающий веб разработчик, это первая верстка HTML/CSS по макету - https://www.figma.com/file/5D9pDuLtS042hzaoN69Kd7/Free--Landing--Page-Template?node-id=0%3A1 - figma template Это не пиксельная верстка, я старался сделать все максимально похожим к оригиналу. Естественно это мой первый макет - и это далеко не так, но я старался. https://dropmefiles.com/fnRPg - архив с самим сайтом html/css/pics Хотел бы услышать мнение более опытных товарищей в данном направлении. Что я сделал не верно? Ну то есть что с точки зрения более опытного фронтенд разработчика сделано ужасно, криво, неправильно ? Большое спасибо за ваше время!

Answer 1

Не уверен, что затрону все моменты, но все же.

Каждому типу файлов создаем отдельно папку и сортируем их. Например:

В шапке указываем метатеги. В целом шапка должна выглядеть вот так:

<head>
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta property="og:image" content="img/sharing.png"/>
  <meta charset="UTF-8"/>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
  <title>Заголовок сайта</title>
</head>

Каждый тег погуглите за что он отвечает, это будет полезным для Вас.

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

Со временем Вы изучите больше тегов, но советую сразу гуглить семантические теги. Например меню, тексты, заголовки, статьи и т.д. Даже сама страница размечена семантически. Пример:

<header></header>
  <main>
     <section></section>
     <section></section>
     <section></section>
  </main>
<footer></footer>

или меню:

<nav>
 <ul>
  <li><a></li>
  <li><a></li>
  <li><a></li>
 </ul>
</nav>

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

По стилям. Сначала нужно обнулить все дефолтные стили. Кто-то применяет селектор в виде звездочки, он означает, что эти стили будут присвоены всем элементам, но это затормаживает работу.

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

Можно использовать плагин normalize.css или другие, хотя способов сброса достаточно много.

Так же заметил, что для одного элемента Вы применяете margin для каждой стороны, все можно заменить 1 свойством:

 .elem {
       margin: 10px 0 0; /* Отступ 10px сверху*/
       margin: 10px 5px 0; /* Отступ сверху 10px, слева и справа по 5px*/
       margin: 10px 0; /* Отступ сверху и снизу по 10px*/
       margin: 10px 5px 15px; /* Отступ сверху 10px, 5px справа и слева, 15px снизу*/       
 }

Не забывайте задать body стили, на случай, если где-то в стилях ошибка, тогда всему документу присвоятся стили от body.

body {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  font-family: 'Montserrat', 'Arial', sans-serif;
}

font-family указывайте всегда в порядке приоритета шрифта, т.е. в данном случае, если шрифт Montserrat не загрузится, тогда всему документу будет присвоен Arial. Про семейство тоже не забываем.

Абсолютные единицы величин применяем только там, где это необходимо. Т.е. если блок должен быть шириной на всю ширину его родителя и т.п. В основном применяйте чекпоинты @media для самых популярных размеров экранов и применяйте статичные единицы измерения. Я понимаю, что хочется резиновую верстку, но это до первой анимации или абсолютного позиционирования элементов.

В целом все. Если мой ответ будет полезным для Вас - отметьте его полезным! Успехов в начинании!

БЛОГ НА HUSL

Верстка первого сайта - что сделано неправильно?

Ответы (1 шт):