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

Question

[flare0n]

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

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

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

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

Прилагаю ссылку на github, с моим кодом:

spoiler

https://github.com/Flareonn/goodCardboard.git

Comments

[Атланта]

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

[tyzberd]

https://www.weblancer.net/forum/
https://dou.ua/forums/

[Pavel Kuzyakin]

<link rel="stylesheet" href="css/style.css" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap-grid.min.css" crossorigin="anonymous">

для локальных файлов указывать crossorigin не нужно.

сколько вы уже учитесь?

[flare0n]

Атланта, любые

[flare0n]

Pavel Kuzyakin, недели две, это вроде бы bootstrap подставил тэг

[Александр]

Привет,
Как я понимаю, Артем ИСламов дает самые основы основ на своих курсах - это верстка из PSD макета и тд.
То есть это не отменяет того, что зубрить синтаксис HTML,CSS, JS вам придется самостоятельно отдельно от курса?
Какие сейчас самые перспективные фреймворки по вашему видению?
В целом, что можете сказать о курсаах Исламова - годно? Кто-то смог найти какую-то занятость в сфере после курса с нуля?

[flare0n]

Александр, Да, у меня уже есть первый проект. Курсы годные, но дополнительно учить придется.

Answer 1

[Атланта]

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
7. не реализован :active для кнопок
8. мнение одного преподавателя верстки, что писать "@media (max-width: 1200px)" не очень хорошая идея и следует указывать и тип устройства, т.е. так "@media screen and (max-width: 1200px)"

Comments

[flare0n]

1. Одностраничный проект.
2. Исправлю, спасибо.
3. До этого момента не знал о таком шрифте совсем, есть статейка или может сами имеете свободную минутку рассказать как им пользоваться и... как вставить его в свой документ.
4. Спасибо, добавлю в избранное.
5. Да, действительно.
6. Я с этими коробками и сидел все эти дни. Круг позади них ранее был объявлен псевдоэлементом

&::before
                        content: ''
			top: -165px
			left: 50%
			margin-left: -41%
			/* Выравнивание круга */
			width: 390px
			height: 390px
			/* Фиксированная высота и ширина для круга */
			border-radius: 50%
			border: 1px solid #ffffff
			z-index: 1
			/* Ставим блок поверх другого */
			display: block
			position: absolute

А после просто заменил на блок <div class="main-img__wrap">(Тот же код)</div>
7. Будет сделано
8. Это только для экранов 1200 и более?

[Атланта]

flare0n,
1. насколько мне известно, неважно одностраничный проект или нет. логотип должен быть ссылкой.
<a class="header__logo" href="#">
3. ниже сказали насчет svg спрайтов, согласна, тоже неплохое решение. Мне нравится этот генератор: https://spritegen.website-performance.org/ (не вижу там svg). Вы перетаскиваете туда свои картинки, потом скачиваете картинку, css, html.
Хотя, я понимаю, что это ещё не вся страница. В footer достаточно часто есть иноки соц.сетей, которые тоже вставляются иконочными шрифтами (или как вариант svg спрайтами), но я предпочитаю шрифт.
8. нет это для всех экранов.

БЭМ - это методология.

<span class="header-contacts__phone__fat">271-54-28</span>

И Вы действительно её неправильно используете. Ознакомьтесь - https://ru.bem.info/ (выберите: методология, быстрый старт)

Насчет адаптива, сама с ним сейчас разбираюсь. Смотрю эти серии роликов, может вам подойдет: https://www.youtube.com/watch?v=5mq70LOOxrc (3 видео) и https://www.youtube.com/watch?v=Au6d1d-vFjU&list=P... (7 видео)

Насчет иконочного шрифта посмотрите какое-нибудь видео, как его подключить.
Помню, скачивается архив, потом подключается в css:
@import url(../fonts/fontawesome/css/all.min.css);
затем, когда Вы пишите в html такой код (его вы копируете на странице, где расположена иконка)
<i class="fab fa-linkedin-in"></i>
у вас появляется иконка. Её размеры регулируете также, как размеры обычного шрифта через font-size.

[flare0n]

Атланта, огромное вам спасибо, приду домой буду разбираться

[yakimov_ya]

Атланта, логотип ничего никому не должен=)

Answer 2

[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 спрайты

Comments

[flare0n]

Делал все по макету, предложенному в курсе.

1. Чем можно ужать изображение, не подскажите?
4. Как понял просто разрешения другие поставить?
5. Чтобы было удобнее редактировать блок, по крайней мере, преподаватель делал так.
6. Тоже самое.
7. Не знаю расшифровки БЭМ, да и вообще, что это значит?
10. С этим особая проблема. Когда адаптировал под планшетные (max-width: 768px), все вроде бы шло нормально, но когда я сделал на один пиксель поменьше он тут же все наворачивал. То-есть для 768 отдельные стили пришлось писать, а для того, что меньше 768 - писать max-width. Если объяснил непонятно, у меня в _media.sass видно как это все сделано. Очень нуждаюсь в консультации по адаптивной верстке, как лучше и т.п, может есть статья какая?
11. Лого бэграундом, потому-что преподаватель на курсе сказал: "так нужно для мобильной версии". на <320px лого меняется на упрощенное. Я так понял, есть какая-то более оптимальная альтернатива?
12. Не совсем понимаю что означает иконочный шрифт. Может я с утра по-раньше туплю... Как я и предупреждал в заголовке - я начинающий в этом деле, и еще многого не знаю/понимаю.

[Даниил Маслов]

flare0n, по поводу первого пункта — imageoptim хорошо справляется с задачей

5. h1 также хорошо стилизуется и редактируется, делая заголовок div вы теряете семантическую разметку и это плохо сказывается на SEO в дальнейшем

6. то же самое, что и h1

7. что такое БЭМ

11. для этого используйте тег picture

12. иконочный шрифт это то, что отправили вам ранее, fontawesome. отличие от обычного шрифта в том, что в нём не буквы, а специальные символы-иконки, которые можно использовать.

[flare0n]

s0xzwasd, огромное спасибо за уделённое время

[flare0n]

s0xzwasd, Программа работает только на OC Linux. Для Windows предложена альтернатива - FileOptimizer, скачал его, однако на выходе получаю файл такого же размера с разрешением .jpg.bak

Все никак не могу управиться с тэгом picture

<picture class="header__logo">
							<source srcset="img/header-logo-mobile.png" media="(max-width: 576px)">
							<img src="img/header-logo-mobile.png" alt="Лого">
						</picture>

На сайте отображается криво

[be_a_man]

flare0n, https://tinypng.com/

[Даниил Маслов]

flare0n, у вас должен был сам файл оптимизироваться и создаться бэкап с расширением .jpg.bak

[flare0n]

s0xzwasd, Да, я принялся его сравнивать, по весу - идентичный.

[Даниил Маслов]

flare0n, может он ранее уже был оптимизирован

[be_a_man]

flare0n, picture я бы не рекомендовал юзать, если нужна поддержка старых браузеров: https://caniuse.com/#feat=picture

<!-- Скрываете/показываете нужное медиа запросами -->
<div class="logo">
	<img class="logo__desktop" src="img/header-logo-desktop.png" alt="Лого">
	<img class="logo__mobile" src="img/header-logo-mobile.png" alt="Лого">
</div>

<!-- Ссылкой -->
<a class="logo" href="/">
	<img class="logo__desktop" src="img/header-logo-desktop.png" alt="Лого">
	<img class="logo__mobile" src="img/header-logo-mobile.png" alt="Лого">	
</a>

[flare0n]

be_a_man, Спасибо