Стоит ли на моём этапе изучения приступать к js?

Question

YellowFellow @YellowFellow

Стоит ли на моём этапе изучения приступать к js?

Оцените,пожалуйста,код и укажите на ошибки.
Сайт
Код
Макет
Хочу так же знать ваше мнение по поводу дальнейшего развития.Можно ли мне на данном этапе приступать к изучению
основ js?

Вопрос задан более трёх лет назад
298 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Ankhena @Ankhena Куратор тега CSS
1. Вот этот
код
<p>Etiam ullamcorper et turpis eget hendrerit. Praesent varius risus<br> mi, at elementum magna ultricies accumsan. Cras venenatis<br> lacus sed dolor placerat tempus. Morbi blandit at neque ut<br> imperdiet.</p>
не должен определяться br'ами. Переносы строк должны получаться автоматом за счет ограничения ширины блока.

В аналогичных случаях тоже.

2. Вытекает из предыдущего.
Попробуйте добавить еще текст в любой из блоков. Всё уедет.

3.
<button class="offer__button2">View features</button>
и
<button class="offer__button1">Download now</button>
это ссылки, а не кнопки. Еще у кнопок по умолчанию type submit, это на всякий случай, чтобы вы не удивлялись.

4.
<div class="icon"> <figure><img src="img/Monitor.png" alt="monitor"></figure> </div>

Слишком много оберток ради иконки. И такие иконки это украшения, т.е. фон или фон для псевдоэлемента, но не контентное изображение, не img.

Причем, в блоке с адресом вы делаете правильно.

5. Много лишних оберток в итемах блоке Pricings & Plans.

Хватит пока
Написано более трёх лет назад
Вадим Кот @vadimkot Куратор тега CSS

Ну и к вышесказанному прошу приобщить, что
.overview__icons__item
противоречит BEM методологии https://ru.bem.info/methodology/faq/#%D0%9F%D0%BE%...

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Вадим Кот, БЭМу там слишком много всего противоречит чтобы даже начать думать, что это БЭМ

Написано более трёх лет назад

Решения вопроса 1

6 комментариев

YellowFellow @YellowFellow Автор вопроса

спасибо огромное!Буду исправлять.Но не понял одного момента - чем заменить p?

Написано более трёх лет назад
ⓒⓢⓢ @JRK_DV

YellowFellow, смотря где используется.
Если текст предполагает быть многострочным, то это в большинстве случаев абзац.
Текст в одну строку в большинстве случаев это блок\спан\заголовок

Например:
Смотрим блок "Beautiful on every device"
Явно тут список с иконками

Блок "Pricings & Plans" - Цена
Тут абзацы не нужны и так всё прекрасно можно выстроить

Написано более трёх лет назад
YellowFellow @YellowFellow Автор вопроса

JRK_DV, как я понял,INTRODUCING LUCID THEME , PRODUCT OVERVIEW и в прочих подобных заголовках тоже не следовало использовать p

Написано более трёх лет назад
ⓒⓢⓢ @JRK_DV

YellowFellow, да, всё верно

Написано более трёх лет назад
YellowFellow @YellowFellow Автор вопроса

JRK_DV, а иерархия заголовков будет всегда от h1 к h6 независимо от размера шрифта.Например,PRODUCT OVERVIEW находится сверху над заголовком LIST OF AMAZING FEATURES. Но ему стоит всё равно задать h2,а LIST OF AMAZING FETURES - H3,не смотря на то,что у PRODUCT OVERVIEW меньший размер шрифта?С точки зрения семантики?

Написано более трёх лет назад
ⓒⓢⓢ @JRK_DV

YellowFellow, я бы вообще не делал это заголовком, - это блок с описанием заголовка. Скорее всего сделал бы там "span.subtitle"

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 4

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 10 часов назад
- 26 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 11 часов назад
- 26 просмотров
1

ответ
HTML

+1 ещё

Средний
Как поместить картинку рядом с текстом?
- 1 подписчик
- 14 часов назад
- 60 просмотров
1

ответ
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 18 часов назад
- 71 просмотр
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 22 часа назад
- 627 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- вчера
- 1927 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 202 просмотра
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 180 просмотров
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Создать бота

24 апр. 2024, в 09:32

25000 руб./за проект

Требуется выполнить анимацию в 3D

24 апр. 2024, в 09:27

13000 руб./за проект

Поднять сайт

24 апр. 2024, в 09:20

10000 руб./за проект

1. Вот этот
код
<p>Etiam ullamcorper et turpis eget hendrerit. Praesent varius risus<br> mi, at elementum magna ultricies accumsan. Cras venenatis<br> lacus sed dolor placerat tempus. Morbi blandit at neque ut<br> imperdiet.</p>
не должен определяться br'ами. Переносы строк должны получаться автоматом за счет ограничения ширины блока.

В аналогичных случаях тоже.

2. Вытекает из предыдущего.
Попробуйте добавить еще текст в любой из блоков. Всё уедет.

3.
<button class="offer__button2">View features</button>
и
<button class="offer__button1">Download now</button>
это ссылки, а не кнопки. Еще у кнопок по умолчанию type submit, это на всякий случай, чтобы вы не удивлялись.

4.
<div class="icon"> <figure><img src="img/Monitor.png" alt="monitor"></figure> </div>

Слишком много оберток ради иконки. И такие иконки это украшения, т.е. фон или фон для псевдоэлемента, но не контентное изображение, не img.

Причем, в блоке с адресом вы делаете правильно.

5. Много лишних оберток в итемах блоке Pricings & Plans.

Хватит пока
Ну и к вышесказанному прошу приобщить, что
.overview__icons__item
противоречит BEM методологии https://ru.bem.info/methodology/faq/#%D0%9F%D0%BE%...
Вадим Кот, БЭМу там слишком много всего противоречит чтобы даже начать думать, что это БЭМ

Answer 1 · 2019-02-23 13:25:10

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

В общих чертах:
- мало уделил внимание отступам в адаптиве
- Иконки не выровнены по центру
- Очень плохой получился блок "Pricings & Plans", с непонятными разграничениями классов "card__header1\2\3\4"
- Чрезмерное использование абзацев (тег "p")

Детали

[320пкс] на ios имеется горизонтальный скролл ~5пкс
[375пкс] Текст логотипа - маленький межстрочный интервал, текст "наезжает" друг на друга
футер copyright остался без шрифта
Блок Contact us
- Иконки не выровнены
- От 700 до 1200пкс - форма исчезает, но остаётся от неё отступ
- Поля в форме не имеют по правой стороне отступа, текст упирается в границу блока, тогда как по левой стороне отступ есть.
- Поле message - На вид поле многострочное, но на деле однострочное
Переносы строк в контенте - на практике никто не будет расставлять в контент переносы строк. Для статичного лендинга неприятно, но где-то допускается, а вот стоит изменить абзац и контент поедет. https://yadi.sk/i/zxXqvGx9edOmbA
Тут внутренними отступами конечно переиграл... https://yadi.sk/i/Sl4WX_V19m4feg

Answer 2 · 2019-02-24 19:21:37

Всегда стоит. Я считаю для начала нужно собрать всю информацию про верстку фронтенд как устроена как работает и зачем применяется та или иная библиотека технология. А затем уже можно и точечно начать учить конкретную технологию уже тщепетильней.

Answer 3 · 2019-02-23 13:02:09

JS для верстки учить надо обязательно. Хотя бы для начала на уровне переключения классов и перехвата событий. Я недавно рассуждал на тему фронтендщика\верстальшика и если интересно почитать можно на сайте моей команды (в профиле ссылка). Там есть инфа за пакет знаний, которые лично я считаю обязательными.
Я хоть лично и недолюбливаю JS, все же понимаю, что без него никуда. Хочешь делать крутые сайты нужен js. Хочешь оптимизировать крутые сайты, нужен js. Главное — не лезть в jQuery. Без него трудно найти интеграции, но можно. А в большинстве случаев и не надо.

Answer 4 · 2019-02-23 13:02:24

реали таковы что сейчас работадатель ожидает присутствие хотя бы минимальных знания js у верстальщика. выделяйте хотя бы 1 час на его изучение

Answer 5 · 2019-02-23 13:18:33

Тут важное упущение:
1. Если вы хотите работать в компании, то можете найти без знания JS позицию на баз фиксы
2. Если вы собираетесь фрилансить - то там без JS никак. Но стоит уточнить для статистики что есть успешные люди которые верстают без JS, только html/css и зарабатывают при этом больше 100к в месяц.

Стоит ли на моём этапе изучения приступать к js?

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

Минуточку внимания

Войдите на сайт