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

Код ревью

11.05.2019, 22:18. Показов 1118. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru