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

Question

[YellowFellow]

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

Comments

[Ankhena]

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%...

[Ankhena]

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

Answer 1

[ⓒⓢⓢ]

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

В общих чертах:
- мало уделил внимание отступам в адаптиве
- Иконки не выровнены по центру
- Очень плохой получился блок "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
  

Comments

[YellowFellow]

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

[ⓒⓢⓢ]

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

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

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

[YellowFellow]

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

[ⓒⓢⓢ]

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

[YellowFellow]

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

[ⓒⓢⓢ]

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

Answer 2

[arzamas-nick]

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

Answer 3

[Арсений Матыцин]

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

Answer 4

[Bembolat]

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

Answer 5

[lamer350]

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