@flare0n

Критика, критика. Начинающий в сфере front-end разработки. Все-ли я делаю правильно?

Приобрел курс в "Академии верстки", преподаватель (Артем Исламов) все объясняет подробно и вроде бы внятно. Но на домашние задания куратора выделено не было (Таковы условия курса).

И вот я на задании адаптивная верстка. Копался с ней около 3 дней, коротко говоря - костыль на костыле. Очень нуждаюсь в вашей критике кода. Желательно с прямыми вставками моего и кусочками исправленного вашего, с пояснениями. Кому не трудно, буду предельно вам благодарен.

Так же очень интересуюсь, где я не гуглил - находил старые и убитые форумы сообщества веб-разработчиков. Если вы знакомы с живыми экземплярами, могли-бы поделиться ссылкой на них? Именно форумы, где можно общаться между собой.

В моем окружении нет ни единого человека, заинтересованного веб-разработкой. Да что там... направлениями с уклоном на информатику (если можно так выразиться). Хочется иногда с кем-то поговорить о своих маленьких, но успехах. Или же взяться за какой-нибудь мини-проект, для того, чтобы набраться опыта.

Прилагаю ссылку на github, с моим кодом:
  • Вопрос задан
  • 697 просмотров
Решения вопроса 2
Atlanta_Boston
@Atlanta_Boston
1. Логотип должен быть ссылкой и вести на главную страницу.
2.
<label for="phone" class="window-form__label">Введите ваш номер телефона:</label>

у вас нет inputa c id="phone"
3. обычно такие картинки, как на кнопке "заказать звонок" это иконочный шрифт. Вы смотрели на сайтах fontello.com/, https://fontawesome.com/ и другие?
4. не забывайте проверять свой код на валидаторе: https://validator.w3.org/
5. мне кажется надо поставить
.header, .main
 min-width: 285px

на более меньшей ширине всё едет.
6. посмотрите скрин, коробки закрывают input 5bce5d916b11d353790561.png
7. не реализован :active для кнопок
8. мнение одного преподавателя верстки, что писать "@media (max-width: 1200px)" не очень хорошая идея и следует указывать и тип устройства, т.е. так "@media screen and (max-width: 1200px)"
Ответ написан
@be_a_man
1) main-bg.jpg - 890кб, это много, нужно ужимать.
2) Лого не кликабельное (Если это одностраничник можно опустить)
3) Телефоны не кликабельные.
4) Иконки, лого, лучше в SVG.
5) Почему заголовок дивом, а не <h1></h1>?
6) Почему текст под заголовком в диве а не <p></p>?
7) Если используете БЭМ, почитайте о нем побольше
<div class="header-contacts__phone">
   8 (347) <span class="header-contacts__phone__fat">271-54-28</span>
</div>
header-contacts__phone__fat // так никогда не делайте
// header-contacts__phone--fat → block__element--modifier

и зачем вообще номер разбит, если не оформлен по частям?
8) У img пустой alt
9)
.header
	padding: 15px 0
	&__logo
		background: url(../img/header-logo.png) center no-repeat
		background-size: 100%
		width: 191px
		height: 61px
	&-contacts
		display: flex
		justify-content: flex-end
		align-items: center
		&__phone

.header-contacts — у вас отдельный блок, и в sass пишите как отдельный блок, на больших проектах потом охренеете.
.header
	...
	&__logo

.header-contacts
	...
	&__phone


в остальных случаях аналогично.

10)
@media (width: 768px) → @media (min-width: 768px) или @media (max-width: 768px)

11) Лого кстати зачем бэграундом, когда нужно img
12) Ну и выше вам там написали, согласен со всем кроме иконочного шрифта. Не стоит его тянуть ради 2-10 иконок. Лучше юзать SVG спрайты
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы