Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
6 / 6 / 0
Регистрация: 03.08.2016
Сообщений: 152

Код ревью

11.05.2019, 22:18. Показов 1170. Ответов 6
Метки code review, html 5 (Все метки)
Студворк — интернет-сервис помощи студентам
Всем привет. Сверстал лендинг. Выставляю код чтобы узнать мнение общественности правильно ли сверстано семантически. Что скажите об именовании классов, применении тэгов. Хочется узнать мнение со стороны. Выкладываю только HTML, без стилей. Код прошел валидацию. Также привожу графический файл с макетом.

Заранее спасибо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/style.min.css">
    <title>Shopia</title>
</head>
 
<body class="body">
    <h1 hidden>On-line shop "Shopia"</h1>
    <header class="header">
        <section class="user-box">
            <h2 hidden>Bloq for register user</h2>
            <a href="tel:+001555801" class="tel">CAll +001 555 801</a>
            <nav class="navigation-user">
                <ul class="navigation-user__list">
                    <li class="navigation-user__item">
                        <a href="#" class="navigation-user__link">WELCOME MSG!</a>
                    </li>
                    <li class="navigation-user__item">
                        <a href="#" class="navigation-user__link">MY ACCOUNT</a>
                    </li>
                    <li class="navigation-user__item">
                        <a href="#" class="navigation-user__link">MY WHISTLIST</a>
                    </li>
                    <li class="navigation-user__item">
                        <a href="#" class="navigation-user__link">LOGIN</a>
                    </li>
                </ul>
            </nav>
        </section>
        <section class="site-nav">
            <h2 hidden>Main navigation</h2>
            <nav class="site-nav__main-nav">
                <ul class="site-nav__list">
                    <li class="site-nav__item">
                        <a href="#" class="site-nav__link">Home</a>
                    </li>
                    <li class="site-nav__item">
                        <a href="#" class="site-nav__link">Gallery</a>
                    </li>
                    <li class="site-nav__item">
                        <a href="#" class="site-nav__link">Categories</a>
                    </li>
                    <li class="site-nav__item">
                        <a href="#" class="site-nav__link">Pages</a>
                    </li>
                </ul>
            </nav>
            <div class="logo">Shopia</div>
            <section class="social">
                <h2 hidden>Box of social links</h2>
                <nav class="social__nav">
                    <ul class="social__list">
                        <li class="social__item">
                            <a href="#" class="social__link">Facebook</a>
                        </li>
                        <li class="social__item">
                            <a href="#" class="social__link">Twitter</a>
                        </li>
                        <li class="social__item">
                            <a href="#" class="social__link">Pint</a>
                        </li>
                        <li class="social__item">
                            <a href="#" class="social__link">Instagramm</a>
                        </li>
                    </ul>
                </nav>
            </section>
            <button class="button">RUPIAH</button>
        </section>
    </header>
    <main class="main">
        <div class="slider">
 
        </div>
        <div class="support">
            <div class="support__item">
                <span class="support__name-offer">FREE SHIPPING</span>
                <small class="support__price-offer">In Order Min $200</small>
            </div>
            <div class="support__item">
                <span class="support__name-offer">30-DAYS RETURNS</span>
                <small class="support__price-offer">Money Back Guarantee</small>
            </div>
            <div class="support__item">
                <span class="support__name-offer">24/7 SUPPORT</span>
                <small class="support__price-offer">Lifestyme Support</small>
            </div>
        </div>
        <article class="featured">
            <h2 hidden>Featured of shop "Shopia"</h2>
            <div class="featured__column">
                <a href="#" class="featured__link">shoes</a>
                <a href="#" class="featured__shop-now">SHOP NOW</a>
                <a href="#" class="featured__link">jewellery</a>
            </div>
            <div class="column">
                <a href="#" class="featured__link">Paris Hilton</a>
            </div>
            <div class="column">
                <a href="#" class="featured__link">50% off</a>
                <a href="#" class="featured__link">carpet</a>
            </div>
        </article>
        <section class="recent">
            <h2 hidden>Cards of products</h2>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
            <div class="recent__item">
                <button class="recent__add" type="button">+ ADD TO CART</button>
            </div>
        </section>
        <section class="brand">
            <h2 hidden>Brands partners</h2>
        </section>
        <section class="testimonial">
            <h2 hidden>Our clients</h2>
            <div class="testimonail__item">
                <span class="testimonial__text">Sed ut perspiciatis
                    unde omnis iste natus error sit
                    voluptatem accusantium doloremque</span>
                <cite class="testimonial__author">Sandra Dewi</cite>
                <span class="testimonial__job">FASHION STYLISH</span>
            </div>
            <div class="testimonail__item">
                <span class="testimonial__text">Sed ut perspiciatis
                    unde omnis iste natus error sit
                    voluptatem accusantium doloremque</span>
                <cite class="testimonial__author">Shaheer Sheikh</cite>
                <span class="testimonial__job">DESIGNER</span>
            </div>
        </section>
    </main>
    <footer class="footer">
        <section class="information">
            <div class="information__column">
                <h2 class="information__h2">SHOPS</h2>
                <ul class="information__list">
                    <li class="information__item">
                        <a href="#" class="information__link">New In</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Women</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Men</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Shoes</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Bags &amp; Accessories</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Top Brands</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Sales &amp; Special Offers</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Lookbook</a>
                    </li>
                </ul>
            </div>
            <div class="information__column">
                <h2 class="information__h2">INFORMATION</h2>
                <ul class="information__list">
                    <li class="information__item">
                        <a href="#" class="information__link">About Us</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Customer Service</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">New Collection</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Best Sellers</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Manufactures</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Privacy policy</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Terms &amp; Conditions</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Blog</a>
                    </li>
                </ul>
            </div>
            <div class="information__column">
                <h2 class="information__h2">CUSTOMER SERVICE</h2>
                <ul class="information__list">
                    <li class="information__item">
                        <a href="#" class="information__link">Serach Terms</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Advanced Search</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Orders and Returns</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Contact Us</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">RSS</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Help &amp; FAQ's</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Consultant</a>
                    </li>
                    <li class="information__item">
                        <a href="#" class="information__link">Store Locations</a>
                    </li>
                </ul>
            </div>
        </section>
        <section class="social">
            <div class="social__box">
                <h2 class="social__h2">STAY CONNECTED</h2>
                <ul class="social__list">
                    <li class="social__item">
                        <a href="#" class="social__link">Facebook</a>
                    </li>
                    <li class="social__item">
                        <a href="#" class="social__link">Twitter</a>
                    </li>
                    <li class="social__item">
                        <a href="#" class="social__link">Instagram</a>
                    </li>
                    <li class="social__item">
                        <a href="#" class="social__link">Pint</a>
                    </li>
                    <li class="social__item">
                        <a href="#" class="social__link">RSS</a>
                    </li>
                </ul>
            </div>
            <form action="script.php" class="form">
                <label for="mail">SUBSCRIBE in OUR NEWS LETTER</label>
                <input type="email" id="mail" placeholder="Enter Your Email Address">
                <button class="button" type="button">SUBSCRIBE</button>
            </form>
        </section>
        <section class="copyright">
            <h2 hidden>Bloq of copyright</h2>
            <div class="copyright__box">
                <span class="copyright__info">© 2015 Shopia Fashion Store Shopify</span>
                <span class="copyright__info">All Rights Reserved. Ecommerce Software by Shopify.</span>
                <span class="copyright__info">Designed by MoccaLabs.com</span>
            </div>
            <div class="cards">
                <a href="#" class="cards__link">visa</a>
                <a href="#" class="cards__link">master card</a>
                <a href="#" class="cards__link">amercan express</a>
                <a href="#" class="cards__link">discover</a>
            </div>
        </section>
    </footer>
</body>
 
</html>
Миниатюры
Код ревью  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 11.05.2019, 22:18
Ответы с готовыми решениями:

Код-ревью
Всем здрасте, можете посмотреть на мою программку и рассказать как можно сделать лучше и легче? import random leftz =...

Код ревью
В общем препод дал open source проект и дал задание сделать ревью кода какого - то класса... Вот только с java и ООП нашей группе предстоит...

Код ревью
Добрый день. Сделал ajax в ajax и вижу дубляж кода, но не знаю как от него избавиться. Правила форума 5. Запреты и ограничения. ...

6
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
12.05.2019, 01:12
<h2 hidden>Main navigation</h2> - это вы валидатора испугались?
0
6 / 6 / 0
Регистрация: 03.08.2016
Сообщений: 152
12.05.2019, 10:09  [ТС]
В макете заголовков нет, а так да, если говорит поставить, то ставлю.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
12.05.2019, 10:39
visitante2016, валидатор не говорит поставить, он предлагает вам подумать насчет заголовка и выдает не ошибку, а предупреждение. Смысла в этой затее я не вижу. Не хотите предупреждение, замените section на div. Но обманывать валидатор и при этом думать о том, правильно все сделано..
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
12.05.2019, 10:43
Цитата Сообщение от visitante2016 Посмотреть сообщение
В макете заголовков нет, а так да, если говорит поставить, то ставлю.
visitante2016, кто говорит? В принципе, заголовок не обязателен. И если скрывать заголовок, то не display none(погуглите sr-only, visuallyhidden).
0
6 / 6 / 0
Регистрация: 03.08.2016
Сообщений: 152
12.05.2019, 12:16  [ТС]
Цитата Сообщение от mrtoxas Посмотреть сообщение
валидатор не говорит поставить, он предлагает вам подумать насчет заголовка и выдает не ошибку, а предупреждение. Смысла в этой затее я не вижу. Не хотите предупреждение, замените section на div. Но обманывать валидатор и при этом думать о том, правильно все сделано..
Я понял что не обязательно ставить заголовки, но ведь поисковики их принимают во внимание. Не думаю что будет хуже от их наличия.

Добавлено через 3 минуты
Цитата Сообщение от mrtoxas Посмотреть сообщение
Не хотите предупреждение, замените section на div.
Я вот и опубликовал код, чтобы услышать, насколько он семантический. Думаю что дивы точно не вариант. Честно говоря становится не по себе, когда открываю сайты а там дивы и бутсрап.

Добавлено через 8 минут
Цитата Сообщение от shvyrevvg Посмотреть сообщение
И если скрывать заголовок, то не display none(погуглите sr-only, visuallyhidden
А у меня и не display: none, у меня hodden прям в html. А так, да. Об этом Вадим Макеев в шортах рассказывал про то, как прятать.
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
12.05.2019, 12:19
Цитата Сообщение от visitante2016 Посмотреть сообщение
А у меня и не display: none, у меня hidden прям в html
Так это и есть display: none
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 12.05.2019, 12:19
Помогаю со студенческими работами здесь

Код ревью
Доброго времени суток, написал простейшее приложение-калькулятор. Написал ей максимально тупо, просто набор вызывающихся функций. Хотел бы...

небольшой код ревью
вот делаю интерфейс, и уже сейчас у меня чрезмерно много повторяющихся элементов. &lt;Border BorderBrush=&quot;Black&quot;...

На собеседовании попросили сделать код ревью
На собеседовании задали вопрос как такой код можно улучшить, оригинал кода удалось сохранить))) Прошу прокомментировать что можно...

На собеседовании попросили сделать код ревью
На собеседовании задали вопрос: Как такой код можно улучшить, оригинал кода удалось сохранить))) Прошу прокомментировать что...

Нужен код ревью на скрипт модуль
Здравствуйте !!! Идея - это модуль для инпута типа range с разными методами. Задача на данный момент, красить выбранную область,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Автоматическое создание документа при проведении другого документа
Maks 29.03.2026
Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
Настройка движения справочника по регистру сведений
Maks 29.03.2026
Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний.
Hrethgir 26.03.2026
Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа
Maks 26.03.2026
Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .
Команды формы и диалоговое окно
Maks 26.03.2026
1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT?
DevAlt 26.03.2026
Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при создании или изменении элементов справочника
Maks 24.03.2026
Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru