Оцените вёрстку?

Question

[Bobr_10]

Увлёкся вёрсткой. Какое-то время читал документацию, смотрел уроки и т.д. Экспериментировал, практиковался. В итоге решил сверстать свой первый небольшой проект. Прошу вас оценить мою работу, указать на недочёты, на то, как лучше делать не стоит, а как нужно. В каком направлении мне дальше стоит развиваться? (Если говорить про Фронт).
Сама работа расположена на GitHub, ссылки ниже:

1. https://github.com/bobr-10/first-work - файлы.
2. https://bobr-10.github.io/first-work/ - сам сайт, адаптив попытался сделать до 320px.

Comments

[Дмитрий]

Ну для моего телефона 4.6 сильно большое

[WapSter]

$('.navigation-item').on('click', function(e) {
        e.preventDefault();
        $(this).toggleClass('navigation-item-active');
        $('.menu').toggleClass('menu-active');
        });

Ради этого подключать jquery очень грустно. Вот на чистом js

const navItem = document.querySelector('.navigation-item')
const menu = document.querySelector('.menu')
navItem.addEventListener('click', function (e) {
   e.preventDefault()
   this.classList.toggle('navigation-item-active')
   menu.classList.toggle('menu-active')
})

Answer 1

[Денис Инешин]

С версткой все норм. Получше чем у многих. А вот CSS сразу насторожил:

* {
    margin: 0;
    padding: 0;
}

Нельзя так делать. Вместо такого топорного сброса отступов для всех элементов. Лучше использовать нормалайзер:
https://necolas.github.io/normalize.css/

И еще, адаптив нужно делать наоборот. Вначале под мобилы, потом под что по больше. Гуглите mobile-first

Comments

[Владислав Бойченко]

И еще, адаптив нужно делать наоборот.

Так говорите, будто это правило. А это просто опция.

[Пашенька]

Владислав Бойченко, это не опция, нужно сделать так, чтобы мобилам нужно было меньше разбирать CSS, а более тяжёлые селекторы - более мощным устройствам.

[Владислав Бойченко]

Пашенька,

а более тяжёлые селекторы - более мощным устройствам.

здравствуйте в 2012 году.
Если структура организована правильно, то никаких проблем не будет. Более того, если у вас какая-то CRM или какой-либо другой сложный и напичканный всем подряд сервис, стоит задуматься о мобильном приложении, а не адаптации.

[Пашенька]

Владислав Бойченко, привет. Я до сих пор вижу огромное количество сайтов, которые не вывезут средние компьютеры. Это проблема будет всегда. Мощность растёт, но растёт и сложность.

Если структура организована правильно

Да, интернет – это как раз такое место, где всё у всех правильно и сделано с привлечением экспертов.

Здесь человек задаёт вопрос, чтобы сложить у себя верное представление на начальном этапе. Если не сложит, любая сложная система будет говном, и приложение будет говном и всё за что он не возьмётся будет говном.
Так что не надо списывать на то, что устройство вывезет, сойдёт.

[Ankhena]

Владислав Бойченко,

Так говорите, будто это правило. А это просто опция.

Это, во-первых, правило хорошего тона.
А во-вторых, посмотрите долю пользователей с мобилок.

[Денис Инешин]

Это хорошая опция:
- Мобильный трафик растет с каждым днем.
- У многих смартфон - единственное устройство доступа в сеть.
- На многих сайтах мобильный трафик уже превышает десктопный.
- Ну и с технической точки зрения гораздо проще думать как расширить контент до десктопа, чем сузить до мобилы.

[Hyubert]

Денис Инешин,

- Мобильный трафик растет с каждым днем.
- У многих смартфон - единственное устройство доступа в сеть.
- На многих сайтах мобильный трафик уже превышает десктопный.

как это относиться к стилю написания медиа запросы? < or >
У вас все равно останется возможность просмотреть контент, тут больше от качества адаптивной версии зависит... а не от того mobile first это или нет

- Ну и с технической точки зрения гораздо проще думать как расширить контент до десктопа, чем сузить до мобилы.

Ну тут кому как удобней...

[Hyubert]

Пашенька,

это не опция, нужно сделать так, чтобы мобилам нужно было меньше разбирать CSS, а более тяжёлые селекторы - более мощным устройствам.

что вы подразумеваете под тяжёлые селекторы, вложенность?

Я до сих пор вижу огромное количество сайтов, которые не вывезут средние компьютеры. Это проблема будет всегда. Мощность растёт, но растёт и сложность.

Это не сфера ответственности разработчика, бизнес должен анализировать своих пользователей и предоставлять лучшее решенные... А если вам поставили уже задачу, красиво desktop, быстро mobile, то вы явно не о mobile first в первую очередь подумаете....

[Пашенька]

Это не сфера ответственности разработчика

Если речь о разработчике, который пляшет под чью-то дудку, то да, вы правы, оно ему не упёрлось.

что вы подразумеваете под тяжёлые селекторы, вложенность?

Что угодно, что усложняет поиск или тригерит перерисовки.

[Hyubert]

Пашенька,

Если речь о разработчике, который пляшет под чью-то дудку, то да, вы правы, оно ему не упёрлось.

Если предприниматель-разработчик, тогда что меняется? Ну проанализировал он свою аудиторию, понял что 70% его клиентов посещают его сайт с мобильного. Поймет что нужно позаботиться о скорости такого сайта - откажется от "милиона" шрифтов в пользу одного загружаемого с cdn, будет использовать webpack на этапе разработки, настроит его (чанки, лезилоадер и т. д.), оптимизирует изображения... Вот и хорошо работает... при чем тут mobile first, я все еще не понимаю (но хочу понять).

Что угодно, что усложняет поиск или тригерит перерисовки.

тригерит перерисовки? статика никогда повторно не вызовет перерисовку, и тут не важен подход написания стилей....

Если вы говорите о разных эффектах и анимациях, которые сильно нагружают устройство, то я не понимаю как это коррелируется с вашим первым утверждения

это не опция, нужно сделать так, чтобы мобилам нужно было меньше разбирать CSS, а более тяжёлые селекторы - более мощным устройствам.

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