Что должен из HTML (4 + 5) знать профессионал Front-End-а?

Question

[Poirg]

Искал в нете книги по HTML. Нашел вот эту - "HTML и XHTML. Подробное руководство, 6-е издание". Да в ней аж 750 страниц! Неужели все оттуда нужно знать WEBеру? В общем, какие основные моменты из HTML по вашему мнению должен знать каждый?

Comments

[Толстый Лорри]

Да в ней аж 750 страниц! Неужели все оттуда нужно знать WEBеру?

Что случится, когда вы узнаете, что книжек такого объема нужно минимум 4-5?)

Answer 1

[Сергей Горностаев]

Хахаха! Если вы хотите связать свою жизнь с ИТ, то готовьтесь к тому, что нужно будет в месяц по 500-1000 страниц техдокументации осваивать.

Comments

[Stalker_RED]

Или научиться использовать документацию как справочник. Тогда эти сотни страниц доков можно заменить на книги.

[Poirg]

Я понимаю. Дело в том, что эта книга, во-первых, 11 года издания. А, во -вторых, я даже не представляю, что там про HTML современный можно на 700 страниц расписать. Что уж говорить, в книге по именно языку программирования JavaScript столько же страниц.

[Сергей Горностаев]

Stalker_RED, я техлитературу тоже приравниваю к документации.

[Poirg]

Т.е вы посоветуете читать напрямую спецификации и пр. документы официальные? Ок, стоит мне вообще искать на русском по HTML специф. ?

[Сергей Горностаев]

Poirg, я советую не бояться количества страниц и читать всё - и учебники, и документацию и спеки.

[archelon]

Poirg, в упомянутой вами книге много "воды" - там просто все очень подробно разжевано.

[tema_sun]

Poirg, я бы еще рекомендовал забыть про поиск чего-либо на русском. Язык разработки - английский. Если с ним сложности, то в первую очередь надо подтянуть именно его, а не изучать html/css/js/whatever...

Answer 2

[Roman]

знать профессионал

Если не знаете английский начните с него, если знаете, то непонятно где Вы ищите. (в китайском интернете?)

Все доступно (но это только верхушка айсберга)

CSS: The Definitive Guide, 4th Edition
Author: Eric A. Meyer, Estelle Weyl
ISBN-10: 1449393195
Year: 2017 Pages: 1090
Language: English

CSS Pocket Reference, 5th Edition
Author: Eric A. Meyer
ISBN-10: 978-1492033394
Year: 2018
Pages: 208
Language: English

CSS in Depth
Author: Keith J. Grant
ISBN-10: 1617293458
Year: 2018
Pages: 472
Language: English

CSS Refactoring
Author: Steve Lindstrom
ISBN-10: 1491906421
Year: 2016
Pages: 160

New Perspectives HTML5 and CSS3, 7th Edition
Author: Patrick M. Carey
ISBN-10: 1305503937
Year: 2017 Pages: 872
Language: English

Responsive Web Design by Example
Author: Frahaan Hussain
ISBN-10: 1787287068
Year: 2018 Pages: 292
Language: English

Pro HTML5 with CSS, JavaScript, and Multimedia
Author: Mark J. Collins
ISBN-10: 1484224620
Year: 2017
Pages: 560

HTML5 and JavaScript Projects, 2nd Edition
Author: Jeanine Meyer
ISBN-10: 148423863X
Year: 2018
Pages: 425
Language: English

Web Design with HTML5 & CSS3: Comprehensive, Eighth Edition
Год издания: 2017
Автор: Minnick J.
Издательство: Cengage Learning
ISBN: 978-1305578166
Серия: Shelly Cashman Series
Язык: Английский

Answer 3

[Александр Александров]

В семантике нужно отлично шарить, посмотрите доку по бэмУ
https://ru.bem.info/methodology/

Comments

[Максим Тимофеев]

Человек html еще не освоил, а Вы ему бэм подсовываете. Да и как бэм поможет в освоении html?

[snap44]

А какое отношение бэм имеет к семантике? >_>

[Толстый Лорри]

snap44, на самом деле самое непосредственное) БЭМ - это про деление страницы на семантические блоки.

[Игорь Воротнёв]

Толстый Лорри, Не совсем. Тем более что понятие "семантики" в самом HTML имеет абсолютно автономное и полноценное значение и к БЭМ никаким боком не тулится.

[Толстый Лорри]

Игорь Воротнёв, идеология БЭМ близка к веб-компонентам и прочему светлому будущему. Но формально вы правы (=

[Игорь Воротнёв]

Толстый Лорри, опять же, какое такое прямое отношение веб-компоненты имеют к семантике HTML? Семантика разметки - это совершенно другое, тут дело не в формальном определении.

Простой тест. Вопрос - может ли быть семантическая верстка без БЭМ? Ответ - да, может. Вывод - это разные вещи.

[Толстый Лорри]

Игорь Воротнёв,

какое такое прямое отношение веб-компоненты имеют к семантике HTML?

Смотря что вы понимаете под семантикой HTML (= Тут не все так однозначно.

Если смотреть со стороны браузера (некая имплементация парсера по стандарту HTML), то БЭМ-структура ему ничего не скажет, в отличии от веб-компонентов (на основе информации о которых он будет определенным способом заниматься рендером, обрабатывать события и прочее).

С другой стороны у нас есть поисковый механизм гугла, который умеет читать микроразметку (позволяющую отображать виджеты, превьюшки и другой контент сайтов прямо в поисковой выдаче), которая не несет семантики с точки зрения стандарта HTML, но при том семантична для самого гугла.

С третьей стороны - веб-зазработчик, который может почитать доку про БЭМ и отличать блоки, элементы и их модификаторы, что сильно помогает ему в процессе разработки и тестирования. То есть эти структуры разметки обретают семантику.

Вопрос - может ли быть семантическая верстка без БЭМ? Ответ - да, может. Вывод - это разные вещи.

Тут закралась коварная логическая ошибка) "Рубли - это деньги? Могут ли быть деньги, но не рубли? Да, значит, рубли - это не деньги".

А "семантической версткой" принято называть специальные теги и ряд правил их использования, внесенные стандартами HTML5. БЭМ не требует их использования и не включена в стандарт, никто, кроме веб-разработчиков и ряда инструментов не обращает внимание на семантику БЭМ. Поэтому с формальной точки зрения (стандарта) вы действительно правы.

[Игорь Воротнёв]

Толстый Лорри,

Смотря что вы понимаете под семантикой HTML (= Тут не все так однозначно.

Вы наверное шутите? Это превращается в какой-то фарс. ТС спрашивает про HTML. HTML - это язык разметки, у которого существует очень четкая и предельно ясная спецификация. В HTML существует четкое понятие семантики. Точка. БЭМ, веб-компоненты - это все из другой оперы. От словам совсем.

Тут закралась коварная логическая ошибка) "Рубли - это деньги? Могут ли быть деньги, но не рубли? Да, значит, рубли - это не деньги".

Логическая ошибка действительно есть в вашем примере про деньги. В моем примере про семантику логической ошибки нет.

А "семантической версткой" принято называть специальные теги и ряд правил их использования, внесенные стандартами HTML5

Ура, истина начинает всплывать на поверхность! :)
Только "семантическая верстка" это уже вторичный термин, первичный - семантические теги. Семантика в основе самого языка. Именно об этом речь.

БЭМ не требует их использования и не включена в стандарт

И не будет БЭМ включен в стандарт. И слава богам. Ибо это opinionated методология, не более.

[Толстый Лорри]

Игорь Воротнёв,

ТС спрашивает про HTML.

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

В моем примере про семантику логической ошибки нет.

Это печально. Материал первого курса любого технического вузика)

[Игорь Воротнёв]

Толстый Лорри,

Вы обратили внимание, что это комментарий не к вопросу?

В ответе там запятая, я предположил что это 2 разные вещи (что логично) - семантика отдельно, БЭМ отдельно. А вы смешали. ХЗ кто прав :)

Это печально. Материал первого курса любого технического вузика)

Совершенно нет, вы либо не вчитались и не вдумались, либо в логику не умеете. Повторю:

Вопрос - может ли быть семантическая верстка без БЭМ? Ответ - да, может. Вывод - это разные вещи.

А теперь внимательнее: Если одно не может без другого, то это одно целое. Если одно может без другого, значит это не одно целое, а значит разные вещи. Что и требовалось доказать. Логической ошибки нет.

А теперь ваш пример:

"Рубли - это деньги? Могут ли быть деньги, но не рубли? Да, значит, рубли - это не деньги".

Ответы: да, да, нет. Тут логическая ошибка заложена в самом вопросе. И технический вуз не нужен, здесь и филолог объяснит почему ошибка.

[Толстый Лорри]

А вы смешали.

Семантика разметки - это несколько более широкое понятие, чем семантические теги. Из-за этого все тут и поехало. Я пытаюсь на этой разнице подловить комментатора выше, а вы - меня вернуть в русло вопроса (=

Answer 4

[Mikhail Kupriyanov]

Доброго дня.

Во-первых, не делите HTML на разные версии: сейчас doctype html без версии.
Во-вторых, так же относитесь и к CSS.
В-третих, изучайте JavaScript. Особое внимание уделите поддержке новых возможностей языка в старых браузерах и полифилам (polyfills)
В-четвёртых, посвятите какое-то время, чтобы познакомиться с UI/UX

И, на сладкое, вот вам карта Современный фронтенд-разработчик (на англ.)

Answer 5

[snap44]

Это лишь малая часть того, что нужно уметь.

Comments

[alex-1917]

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

Answer 6

[alex-1917]

Это не учебник, а справочник, если говорить начистоту.
Справочники не учат, а держат рядом с собой.
Это все, что нужно знать про справочники.
После пары-тройки проектов руки уже сами будут находить нужную страницу.

Это конечно все образно, гугл не вчера запустили так-то.

Answer 7

[Евгений]

Эм, мне кажется вы просто должны знать какие новинки появились в html5 по сравнению с 4 версией. Основное, что нужно знать фронт-ендщику css3, препроцессоры(необязательно) , и javascript.

Вот javascript нужно хорошо знать.

Comments

[Stalker_RED]

Вы исходите из предположения, что html4 он уже знает.

Answer 8

[Leevz]

увы, но веб это далеко не один HTML