Что не так с данной версткой?

Question

[Hello00]

Доброго времени суток.Важно услышать мнение со стороны.
Вот кусок моей верстки:

Верстка под катом

/* ----------------reset styles --------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

/* ------------------general style-------------- */
* {
  font-family: 'Montserrat', sans-serif; }

a {
  text-decoration: none; }

li {
  list-style-type: none; }

/* ---------------H E A D E R ------------------ */
header {
  width: 100%;
  max-width: 100%;
  height: 600px;
  max-height: 600px;
  background: #E9E9E9; }

.logo-and-menu {
  width: 85%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 10%; }
  .logo-and-menu ul {
    display: flex;
    justify-content: space-between;
    width: 30%;
    margin-left: auto; }
  .logo-and-menu a {
    color: #191919;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase; }
  .logo-and-menu a:hover {
    color: #10c9c3; }

.header-text-general {
  width: 85%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center; }
  .header-text-general h2 {
    color: #1d1d1d;
    font-size: 38px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: 0.38px;
    width: 35%; }
  .header-text-general p {
    font-family: 'Nunito Sans', sans-serif;
    color: #787878;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.09px;
    width: 35%; }

.header-button {
  cursor: pointer;
  padding: 23px 46px;
  background-color: #10c9c3;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase; }
  .header-button:hover {
    transform: translate(2px, 2px); }

/* -----------------------------F I R S T - S E C T I O N ------------------------------ */
/* ------ubout-us------ */
.about-us {
  width: 45%;
  height: 350px;
  max-height: 420px;
  margin: 0 auto;
  text-align: center; }
  .about-us h2 {
    margin-top: 23%;
    color: #191919;
    font-size: 30px;
    font-weight: 500;
    line-height: 60px; }
  .about-us p {
    color: #787878;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 7%; }
  .about-us img {
    margin-top: 6%; }

/* --------Professional Skills---------- */
.container-skills-and-photo {
  width: 100%;
  background: #E9E9E9;
  height: 450px;
  padding-top: 7%; }

.box {
  margin-bottom: 7%; }

.professionsl-skills {
  width: 85%;
  height: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; }

.level-skills {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3% 0 3% 0; }
  .level-skills h1 {
    margin: 8% 0% 2% 0; }

.design-container {
  display: flex;
  width: 100%; }
  .design-container .active-line-desing {
    width: 75%;
    background-color: #10C9C3;
    height: 4px; }
  .design-container .inactive-line-desing {
    width: 25%;
    background-color: #D8D8D8;
    height: 4px; }

.development-container {
  display: flex;
  width: 100%;
  height: 4px; }
  .development-container .active-line-development {
    width: 90%;
    background-color: #10C9C3; }
  .development-container .inactive-line-development {
    width: 10%;
    background-color: #D8D8D8; }

.marketing-container {
  display: flex;
  width: 100%;
  height: 4px; }
  .marketing-container .active-line-marketing {
    width: 65%;
    background-color: #10C9C3; }
  .marketing-container .inactive-line-marketing {
    width: 35%;
    background-color: #D8D8D8; }

.photo {
  width: 48%; }
  .photo .photo-img {
    width: 100%;
    max-width: 100%;
    border-radius: 5px; }

/* -------------------- section-advantages--------------------*/
.wrapper-advantages {
  width: 100%;
  max-width: 100%;
  height: 200px;
  background: #10C9C3; }

.section-advantages {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around; }

.advantages-styles {
  display: flex;
  width: 20%; }
  .advantages-styles img {
    max-height: 40px;
    margin-right: 4%; }
  .advantages-styles ul li {
    color: #ffffffff;
    font-size: 12px;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase; }

Вот Html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>hello</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/adaptive.css">

	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body>
	<header>
		<div class="logo-and-menu">
			<img src="img/logo.png" alt="">
			<ul>
				<li class="menu menu-1"><a href="#">Home</a></li>
				<li class="menu menu-2"><a href="#">About</a></li>
				<li class="menu menu-3"><a href="#">Services</a></li>
				<li class="menu menu-4"><a href="#">Contact</a></li>
			</ul>
		</div>
		<div class="header-text-general">
			<h2>We Design and Develop</h2>
			<p>We are a new design studio based in USA. We have over 
			20 years of combined experience, and know a thing or two 
			about designing websites and mobile apps.
			</p>
			<p><input type="button" value="contact us"class="header-button" ></p>
		</div>
	</header>
	<section>
		<div class="first-section">
			<div class="about-us">
				<h2>About Us</h2>
				<p>Divide have don't man wherein air fourth. Own itself make have night won't make. 
				A you under Seed appear which good give. Own give air without fowl moveth dry first 
				heaven fruit, dominion she'd won't very all.
				</p>
				<img src="img/partners/signature.png" alt="">
			</div>
			<div class="container-skills-and-photo">
			<div class="professionsl-skills">
				<div class="level-skills">
					<div class="Design-skills box">
						<h1>UI/UX Design    75%</h1>
						<div class="design-container line" ><span class="active-line-desing"></span><span class="inactive-line-desing"></span></div>
						
					</div>
					
					<div class="development-skills box">
						<h1>web development    90%</h1>
						<div class="development-container" ><span class="active-line-development"></span><span class="inactive-line-development"></span></div>
						
					</div>
					
					<div class="marketing-skills box">
						<h1>marketing    65%</h1>
						<div class="marketing-container" ><span class="active-line-marketing"></span><span class="inactive-line-marketing"></span></div>
						
					</div>
				</div>
				<div class="photo">
					<img src="img/skills.png" alt="" class="photo-img">
				</div>
			</div>
			</div>
		</div>
	</section>
	<section>
	 <div class="wrapper-advantages">
		<div class="section-advantages">
			<div class="advantages-box-1 advantages-styles">
				<img src="img/partners/pe-7s-portfolio.png" alt="">
				
					<ul>
					<li class="statistics-advanteges">548</li>
					<li class="statistics-advanteges">projects completed</li>
					</ul>
			</div>
			<div class="advantages-box-2 advantages-styles">
				<img src="img/partners/pe-7s-clock.png" alt="">
				
					<ul>
						<li class="statistics-advanteges">1465</li>
						<li class="statistics-advanteges">WORKING HOURS</li>
					</ul>
				
			</div>
			<div class="advantages-box-3 advantages-styles">
				<img src="img/partners/pe-7s-star.png" alt="">
				
				<ul>
					<li class="statistics-advanteges">612</li>
					<li class="statistics-advanteges">POSITIVE FEEDBACKS</li>
				</ul>

			</div>
			<div class="advantages-box-4 advantages-styles">
				<img src="img/partners/pe-7s-like.png" alt="">
				<ul>
					<li class="statistics-advanteges">735</li>
					<li class="statistics-advanteges">HAPPY CLIENTS</li>
				</ul>
				
			</div>
		</div>
	  </div>
	</section>
</body>
</html>

или живой пример на JSFiddle

Прошу дать совет.Например "так не делай" , "много лишнего"," так классы не именуй ". Еще 3 месяца назад ,абсолютно не был знаком с версткой.За это время относительно выучил HTML,CSS (flexBox).И вот сейчас в тупике. В голове каша,с одной стороны сверстать могу, а с другой-понимаю что это все через костыль.
Или подскажите какую можно почить литературу на данном этапе развития.Заранее спасибо за помощь.

P.S извиняюсь что выложил код напрямую.Просто не знаю как добавлять с внешнего сервиса.

Comments

[Андрей]

Первое, что не нужно делать так - это то, что постить код таким образом)
Рекомендую выложить это на jsfiddle или codepen, пока сообщество вас не разорвало

Answer 1

[Araya]

Слишком большая простыня, не все стал смотреть, но что сразу бросается в глаза - нет структуры. Код вперемешку.
https://web-standards.ru/articles/css-architecture/ (первая найденная статья в гугле).
У меня, допустим, сначала идет расположение, потом расстояние между элементами и тд

Answer 2

[Оксана ...]

1. Элементы формы (input в вашем файле) зачем-то обернуты в тег p. Если хотите их стилизировать, то задать им свой class достаточно.
2. Имена классов длинные , на мой взгляд, достаточно и понятно было бы stat-advant, или stat-adv вместо statistic-advantages. Так проще программировать, так как правильное название проще запомнить и т п. Но это если конечно это ваши классы, а не из Бутстрапа.
3. Комменты в html тоже нужны, даже если все понятно, потом, когда будете добавлять что-то, благодаря комментам быстрее будете переходить к нужным «участкам»

Comments

[Hello00]

Спасибо

Answer 3

[HamSter]

Еще:

logo-and-menu
container-skills-and-photo

плохие названия классов, стоит давать более простые имена logo и skills

Если для логотипа шапки будут отличные стили, то обратитесь в стилях header .logo или же добавьте к классу logo модификатор logo-headerили logo_header (зависит какой стиль бэм выберете)

Comments

[Hello00]

Спасибо

Answer 4

[Максим]

h1 только один на страницу допустим