Google HTML/CSS Style Guide
This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.
General
General Style Rules
Protocol
Use HTTPS for embedded resources where possible.
Always use HTTPS ( https: ) for images and other media files, style sheets, and scripts, unless the respective files are not available over HTTPS.
General Formatting Rules
Indentation
Indent by 2 spaces at a time.
Don’t use tabs or mix tabs and spaces for indentation.
Capitalization
Use only lowercase.
All code has to be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA ), CSS selectors, properties, and property values (with the exception of strings).
Trailing Whitespace
Remove trailing white spaces.
Trailing white spaces are unnecessary and can complicate diffs.
General Meta Rules
Encoding
Use UTF-8 (no BOM).
Make sure your editor uses UTF-8 as character encoding, without a byte order mark.
Specify the encoding in HTML templates and documents via <meta charset=»utf-8″> . Do not specify the encoding of style sheets as these assume UTF-8.
(More on encodings and when and how to specify them can be found in Handling character encodings in HTML and CSS.)
Comments
Explain code as needed, where possible.
Use comments to explain code: What does it cover, what purpose does it serve, why is respective solution used or preferred?
(This item is optional as it is not deemed a realistic expectation to always demand fully documented code. Mileage may vary heavily for HTML and CSS code and depends on the project’s complexity.)
Action Items
Mark todos and action items with TODO .
Highlight todos by using the keyword TODO only, not other common formats like @@ .
Append a contact (username or mailing list) in parentheses as with the format TODO(contact) .
Append action items after a colon as in TODO: action item .
HTML Style Rules
Document Type
HTML5 (HTML syntax) is preferred for all HTML documents: <!DOCTYPE html> .
(It’s recommended to use HTML, as text/html . Do not use XHTML. XHTML, as application/xhtml+xml , lacks both browser and infrastructure support and offers less room for optimization than HTML.)
HTML Validity
Use valid HTML where possible.
Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size.
Use tools such as the W3C HTML validator to test.
Using valid HTML is a measurable baseline quality attribute that contributes to learning about technical requirements and constraints, and that ensures proper HTML usage.
Semantics
Use HTML according to its purpose.
Use elements (sometimes incorrectly called “tags”) for what they have been created for. For example, use heading elements for headings, p elements for paragraphs, a elements for anchors, etc.
Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.
Multimedia Fallback
Provide alternative contents for multimedia.
For multimedia, such as images, videos, animated objects via canvas , make sure to offer alternative access. For images that means use of meaningful alternative text ( alt ) and for video and audio transcripts and captions, if available.
Providing alternative contents is important for accessibility reasons: A blind user has few cues to tell what an image is about without @alt , and other users may have no way of understanding what video or audio contents are about either.
(For images whose alt attributes would introduce redundancy, and for images whose purpose is purely decorative which you cannot immediately use CSS for, use no alternative text, as in alt=»» .)
Separation of Concerns
Separate structure from presentation from behavior.
Strictly keep structure (markup), presentation (styling), and behavior (scripting) apart, and try to keep the interaction between the three to an absolute minimum.
That is, make sure documents and templates contain only HTML and HTML that is solely serving structural purposes. Move everything presentational into style sheets, and everything behavioral into scripts.
In addition, keep the contact area as small as possible by linking as few style sheets and scripts as possible from documents and templates.
Separating structure from presentation from behavior is important for maintenance reasons. It is always more expensive to change HTML documents and templates than it is to update style sheets and scripts.
Entity References
Do not use entity references.
There is no need to use entity references like — , ” , or ☺ , assuming the same encoding (UTF-8) is used for files and editors as well as among teams.
The only exceptions apply to characters with special meaning in HTML (like < and & ) as well as control or “invisible” characters (like no-break spaces).
Optional Tags
Omit optional tags (optional).
For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.
(This approach may require a grace period to be established as a wider guideline as it’s significantly different from what web developers are typically taught. For consistency and simplicity reasons it’s best served omitting all optional tags, not just a selection.)
type Attributes
Omit type attributes for style sheets and scripts.
Do not use type attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript).
Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.
id Attributes
Avoid unnecessary id attributes.
Prefer class attributes for styling and data attributes for scripting.
Where id attributes are strictly required, always include a hyphen in the value to ensure it does not match the JavaScript identifier syntax, e.g. use user-profile rather than just profile or userProfile .
When an element has an id attribute, browsers will make that available as a named property on the global window prototype, which may cause unexpected behavior. While id attribute values containing a hyphen are still available as property names, these cannot be referenced as global JavaScript variables.
HTML Formatting Rules
General Formatting
Use a new line for every block, list, or table element, and indent every such child element.
Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line.
Also, indent them if they are child elements of a block, list, or table element.
(If you run into issues around whitespace between list items it’s acceptable to put all li elements in one line. A linter is encouraged to throw a warning instead of an error.)
HTML Line-Wrapping
Break long lines (optional).
While there is no column limit recommendation for HTML, you may consider wrapping long lines if it significantly improves readability.
When line-wrapping, each continuation line should be indented to distinguish wrapped attributes from child elements. Lines should be wrapped consistently within a project, ideally enforced by automated code formatting tools.
HTML Quotation Marks
When quoting attributes values, use double quotation marks.
Use double ( «» ) rather than single quotation marks ( » ) around attribute values.
CSS Style Rules
CSS Validity
Use valid CSS where possible.
Unless dealing with CSS validator bugs or requiring proprietary syntax, use valid CSS code.
Use tools such as the W3C CSS validator to test.
Using valid CSS is a measurable baseline quality attribute that allows to spot CSS code that may not have any effect and can be removed, and that ensures proper CSS usage.
Class Naming
Use meaningful or generic class names.
Instead of presentational or cryptic names, always use class names that reflect the purpose of the element in question, or that are otherwise generic.
Names that are specific and reflect the purpose of the element should be preferred as these are most understandable and the least likely to change.
Generic names are simply a fallback for elements that have no particular or no meaning different from their siblings. They are typically needed as “helpers.”
Using functional or generic names reduces the probability of unnecessary document or template changes.
Class Name Style
Use class names that are as short as possible but as long as necessary.
Try to convey what a class is about while being as brief as possible.
Using class names this way contributes to acceptable levels of understandability and code efficiency.
Class Name Delimiters
Separate words in class names by a hyphen.
Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.
Prefixes
Prefix selectors with an application-specific prefix (optional).
In large projects as well as for code that gets embedded in other projects or on external sites use prefixes (as namespaces) for class names. Use short, unique identifiers followed by a dash.
Using namespaces helps preventing naming conflicts and can make maintenance easier, for example in search and replace operations.
Type Selectors
Avoid qualifying class names with type selectors.
Unless necessary (for example with helper classes), do not use element names in conjunction with classes.
Avoiding unnecessary ancestor selectors is useful for performance reasons.
ID Selectors
Avoid ID selectors.
ID attributes are expected to be unique across an entire page, which is difficult to guarantee when a page contains many components worked on by many different engineers. Class selectors should be preferred in all situations.
Shorthand Properties
Use shorthand properties where possible.
CSS offers a variety of shorthand properties (like font ) that should be used whenever possible, even in cases where only one value is explicitly set.
Using shorthand properties is useful for code efficiency and understandability.
0 and Units
Omit unit specification after “0” values, unless required.
Do not use units after 0 values unless they are required.
Leading 0s
Always include leading “0”s in values.
Put 0 s in front of values or lengths between -1 and 1.
Hexadecimal Notation
Use 3 character hexadecimal notation where possible.
For color values that permit it, 3 character hexadecimal notation is shorter and more succinct.
Important Declarations
Avoid using !important declarations.
These declarations break the natural cascade of CSS and make it difficult to reason about and compose styles. Use selector specificity to override properties instead.
Hacks
Avoid user agent detection as well as CSS “hacks”—try a different approach first.
It’s tempting to address styling differences over user agent detection or special CSS filters, workarounds, and hacks. Both approaches should be considered last resort in order to achieve and maintain an efficient and manageable code base. Put another way, giving detection and hacks a free pass will hurt projects in the long run as projects tend to take the way of least resistance. That is, allowing and making it easy to use detection and hacks means using detection and hacks more frequently—and more frequently is too frequently.
CSS Formatting Rules
Declaration Order
Alphabetize declarations (optional).
Sort declarations consistently within a project. In the absence of tooling to automate and enforce a consistent sort order, consider putting declarations in alphabetical order in order to achieve consistent code in a way that is easy to learn, remember, and manually maintain.
Ignore vendor-specific prefixes for sorting purposes. However, multiple vendor-specific prefixes for a certain CSS property should be kept sorted (e.g. -moz prefix comes before -webkit).
Block Content Indentation
Indent all block content.
Indent all block content, that is rules within rules as well as declarations, so to reflect hierarchy and improve understanding.
Declaration Stops
Use a semicolon after every declaration.
End every declaration with a semicolon for consistency and extensibility reasons.
Property Name Stops
Use a space after a property name’s colon.
Always use a single space between property and value (but no space between property and colon) for consistency reasons.
Declaration Block Separation
Use a space between the last selector and the declaration block.
Always use a single space between the last selector and the opening brace that begins the declaration block.
The opening brace should be on the same line as the last selector in a given rule.
Selector and Declaration Separation
Separate selectors and declarations by new lines.
Always start a new line for each selector and declaration.
Rule Separation
Separate rules by new lines.
Always put a blank line (two line breaks) between rules.
CSS Quotation Marks
Use single ( » ) rather than double ( «» ) quotation marks for attribute selectors and property values.
Do not use quotation marks in URI values ( url() ).
Exception: If you do need to use the @charset rule, use double quotation marks—single quotation marks are not permitted.
CSS Meta Rules
Section Comments
Group sections by a section comment (optional).
If possible, group style sheet sections together by using comments. Separate sections with new lines.
Parting Words
If you’re editing code, take a few minutes to look at the code around you and determine its style. If they use spaces around all their arithmetic operators, you should too. If their comments have little boxes of hash marks around them, make your comments have little boxes of hash marks around them too.
The point of having style guidelines is to have a common vocabulary of coding so people can concentrate on what you’re saying rather than on how you’re saying it. We present global style rules here so people know the vocabulary, but local style is also important. If code you add to a file looks drastically different from the existing code around it, it throws readers out of their rhythm when they go to read it. Avoid this.
Руководство по оформлению HTML/CSS кода от Google
С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.
Введение
Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.
Это относится к рабочим версиям файлов использующих HTML , CSS и GSS
Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.
Общие правила оформления
Протокол
Не указывайте протокол при включении ресурсов на страницу.
Опускайте название протокола ( http: , https: ) в ссылках на картинки или другие медиа-ресурсы, файлы стилей или скрипты, конечно, если эти файлы доступны по обоим протоколам.
Отсутствие протокола делает ссылку относительной, что предотвращает смешивание ресурсов из разных протоколов и незначительно уменьшает размер файлов.
Не рекомендуется:
Рекомендуется:
Не рекомендуется:
Рекомендуется:
Общее форматирование
Отступы
Всегда используйте для отступа два пробела.
Не используйте табуляцию и не смешивайте табуляцию с пробелами.
Рекомендуется:
Рекомендуется:
Регистр
Всегда пишите в нижнем регистре.
Весь код должен быть написан в нижнем регистре: Это относится к названиям элементов, названиям атрибутов, значениям атрибутов (кроме текста/ CDATA ), селекторам, свойствам и их значениям (кроме текста).
Не рекомендуется:
Рекомендуется:
Пробелы в конце строки
Убирайте пробелы в конце строки.
Пробелы в конце строк не обязательны и усложняют использование diff.
Не рекомендуется:
Рекомендуется:
Общие мета правила
Кодировка
Используйте UTF-8 (без BOM).
Убедитесь, что ваш редактор использует кодировку UTF-8 без метки порядка байтов (BOM).
Указывайте кодировку в HTML шаблонах и документах с помощью <meta charset="utf-8"> . Опускайте кодировку для сss-файлов: для них UTF-8 задана по умолчанию.
(Вы можете узнать больше о кодировках, и о том, как их использовать, по этой ссылке: Наборы символов и кодировки в XHTML, HTML CSS (англ.).)
Комментарии
По возможности поясняйте свой код, где это необходимо.
Используйте комментарии, чтобы пояснить свой код: что он делает, за что отвечает, и почему используется выбранное решение.
(Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода. )
Задачи
Отмечайте задачи для списка дел с помощью TODO .
Отмечайте задачи с помощью ключевого слова TODO . не используйте другие часто встречающиеся форматы, такие как @@ .
Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: TODO(контакт) .
Описывайте задачу после двоеточия, например: TODO: Задача .
Рекомендуется:
Рекомендуется:
Правила оформления HTML
Тип документа
Используйте HTML5.
HTML5 (HTML синтаксис) рекомендуется для всех html-документов: <!DOCTYPE html> .
(Рекомендуется использовать HTML с типом контента text/html . Не используйте XHTML, так как application/xhtml+xml (англ.), хуже поддерживается браузерами и ограничивает возможность оптимизации. )
Валидность HTML
По возможности используйте валидный HTML.
Используйте валидный HTML код, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности.
Используйте такие инструменты как W3C HTML validator (англ.) чтобы проверить валидность кода.
Валидность — это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML.
Не рекомендуется:
Рекомендуется:
Семантика
Используйте HTML так, как это было задумано.
Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.
Это облегчает чтение, редактирование и поддержку кода.
Не рекомендуется:
Рекомендуется:
Альтернатива для мультимедиа
Всегда указывайте альтернативное содержимое для мультимедиа.
Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas . Для картинок это осмысленный альтернативный текст ( alt ), а для видео и аудио расшифровки текста и подписи если это возможно.
Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан @alt . Другим людям может быть тяжело понять о чем говорится в видео или аудио записи.
(Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="" )
Не рекомендуется:
Рекомендуется:
Разделение ответственности
Разделяйте структуру, оформление и поведение.
Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму.
Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение — в скрипты.
Старайтесь сократить их пересечения к минимуму, включая в шаблоны минимальное количество файлов стилей и скриптов.
Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.
Не рекомендуется:
Рекомендуется:
Ссылки-мнемоники
Не используйте ссылки-мнемоники.
Нет смысла использовать ссылки-мнемоники, такие как — , ” , или ☺ , когда все команды в файлах, редакторах используют одну кодировку (UTF-8)
Единственное исключение из этого правила — служебные символы HTML (например < и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
Не рекомендуется:
Рекомендуется:
Необязательные теги
Не используйте необязательные теги. (не обязательно)
Для уменьшения размера файлов и лучшей читаемости кода можно опускать необязательные теги. В спецификации HTML5 (англ.) есть список необязательных тегов.
(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них).
Не рекомендуется:
Рекомендуется:
Атрибут ‘type’
Не указывайте атрибут type при подключении стилей и скриптов в документ.
Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).
Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.
Не рекомендуется:
Рекомендуется:
Не рекомендуется:
Рекомендуется:
Правила форматирования HTML
Форматирование
Выделяйте новую строку для каждого блочного, табличного или списочного элемента и ставьте отступы для каждого дочернего элемента.
Независимо от стилей заданных для элемента (CSS позволяет изменить поведение элемента с помощью свойства display ), переносите каждый блочный или табличный элемент на новую строку.
Также ставьте отступы для всех элементов вложенных в блочный или табличный элемент.
(Если у вас возникнут сложности из-за пробельных символов между списочными элементами, допускается поместить все li элементы в одну строку. Линту [утилита для проверки качества кода прим. пер.] рекомендуется в данном случае выдавать предупреждение вместо ошибки.
Рекомендуется:
Рекомендуется:
Рекомендуется:
Правила оформления CSS
Валидность CSS
По возможности используйте валидный CSS-код.
Кроме случаев, где необходим браузеро-зависимый код, или ошибок валидатора, используйте валидный CSS код.
Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.
Валидность — это важное и при этом измеряемое качество кода. Написание валидного CSS помогает избавиться от избыточного кода и обеспечивает правильное использование таблиц стилей…
Идентификаторы и названия классов
Используйте шаблонные или имеющие смысл имена классов и идентификаторы.
Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…
рекомендуется выбирать имена, отражающие сущность класса, потому что их проще понять и, скорее всего, не понадобится менять в будущем.
Шаблонные имена — это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников.”
Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.
Не рекомендуется:
Рекомендуется:
Названия идентификаторов и классов
Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно.
Попробуйте сформулировать, что именно должен делать данный элемент, при этом будьте кратки насколько возможно.
Такое использование классов и идентификаторов вносит свой вклад в облегчение понимания и увеличение эффективности кода.
Не рекомендуется:
Рекомендуется:
Селекторы типа
Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента.
Кроме случаев когда это не обходимо (например с классами-помощниками), не используйте названия элементов с именами классов или идентификаторами.
Не рекомендуется:
Рекомендуется:
Сокращенные формы записи свойств
Используйте сокращенные формы записи свойств, где возможно.
CSS предлагает множество различных сокращенных (англ.) форм записи (например font ), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений.
Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.
Не рекомендуется:
Рекомендуется:
0 и единицы измерения
Не указывайте единицы измерения для нулевых значений
Не указывайте единицы измерения для нулевых значений если на это нет причины.
Рекомендуется:
0 в целой части дроби
Не ставьте “0” в целой части дробных чисел.
Не ставьте 0 в целой части в значениях между -1 и 1.
Рекомендуется:
Кавычки в ссылках
Не используйте кавычки в ссылках
Не используйте кавычки ( "" , » ) с url() .
Рекомендуется:
Шестнадцатеричные названия цветов
Используйте трехсимвольную шестнадцатеричную запись где это возможно.
Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.
Не рекомендуется:
Рекомендуется:
Префиксы
Предваряйте селекторы уникальными для текущего приложения префиксами. (не обязательно)
В больших проектах, а так же в коде, который будет использоваться для других проектов или в других сайтах, используйте префиксы (в качестве пространств имен) для идентификаторов и имен классов. Используйте короткие уникальные названия с последующим дефисом.
Использование пространств имен позволяет предотвратить конфликты имен и может облегчить обслуживание сайта. Например при поиске и замене.
Рекомендуется:
Разделители в классах и идентификаторах
Разделяйте слова в идентификаторах и именах классов с помощью дефиса.
Не используйте ничего, кроме дефиса, для соединения слов и сокращений в селекторах, чтобы повысить удобство чтения и легкость понимания кода.
Не рекомендуется:
Рекомендуется:
Избегайте использования информации о версии браузеров, или CSS “хаков”— сперва попробуйте другие способы.
Кажется заманчивым бороться с различиями в работе разных браузеров с помощью CSS-фильтров, хаков или прочих обходных путей. Все эти подходы могут быть рассмотрены лишь в качестве последнего средства, если вы хотите получить эффективную и легко поддерживаемую кодовую базу. Проще говоря, допущение хаков и определения браузера повредит проекту в долгосрочной перспективе, так как это означает, что проект идет по пути наименьшего сопротивления. Что облегчает использование хаков и позволяет использовать их все чаще и чаще, что в результате приведет к слишком частому их использованию.
Правила форматирования CSS
Упорядочивание объявлений
Сортируйте объявления по алфавиту.
Задавайте объявления в алфавитном порядке, чтобы получить согласованный код, с которым легко работать.
При сортировке игнорируйте браузерные префиксы. При этом, если для одного свойства используются несколько браузерных префиксов, они также должны быть отсортированы (например -moz должен быть перед —webkit )
Рекомендуется:
Отступы в блоках.
Всегда ставьте отступы для содержимого блоков.
Всегда ставьте отступы для любого блочного содержимого (англ.), Например для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода.
Рекомендуется:
После объявлений
Ставьте точку с запятой после каждого объявления.
После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств.
Не рекомендуется:
Рекомендуется:
После названий свойств
Используйте пробелы после двоеточий в объявлениях.
Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.
Не рекомендуется:
Рекомендуется:
Отделение селектора и объявления
Отделяйте селекторы и объявления переносом строки.
Начинайте каждый селектор или объявление с новой строки.
Не рекомендуется:
Рекомендуется:
Разделение правил
Разделяйте правила переносом строки.
Всегда ставьте перенос строки между правилами.
Рекомендуется:
Мета правила CSS
Группировка правил
Группируйте правила и обозначайте группы комментарием. (не обязательно)
По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.
Рекомендуется:
Заключение
Если вы редактируете код, потратьте несколько минут, чтобы разобраться в том, как он написан. Если математические операторы обособлены пробелами, делайте то же самое. Если комментарии окружены скобочками или черточками, сделайте то же со своими комментариями.
Идея этого руководства в том, чтобы создать общий словарь, который позволил бы разработчикам сконцентрироваться на том что они хотят выразить, а не на том, как.
Мы предлагаем единые правила оформления позволяющие писать код в одном стиле, но стиль кода, уже используемый в проекте, также важен.
Если ваш код будет сильно отличаться от существующего, это может сбить читающего с ритма и затруднить чтение. Постарайтесь этого избежать.
Примечание от переводчика
Хочется еще отметить, что Google ориентируется в первую очередь на большие высоконагруженные проекты, где каждый байт дорог, поэтому стоит учитывать, что если они рекомендуют начинать каждый селектор с новой строки, или использовать пробелы вместо табов, то это в первую очередь подразумевает, что код будет обязательно минифицирован и сжат до использования на сайте.
A Complete Beginners Guide to Web Development in HTML, CSS, and JavaScript
This article is for people who want to start with web development by learning HTML, CSS, and JavaScript before moving on to more advanced topics such as React and NodeJS.
I will assume you have zero programming knowledge. I will also try to get into the why’s instead of just the how’s of programming web pages. You can learn more on the site of W3Schools if you want even more in-depth knowledge or if something isn’t clearly explained in this article.
At the end of this article, I will give some links if you want to get into more difficult topics.
What is HTML
HTML is an abbreviation for Hypertext Markup Language and it is a standard for creating web pages. HTML describes the structure of the web page where CSS defines the style, or appearance of it and JavaScript adds more interactivity to the web page.
HTML elements tell a web browser what to expect. For example: “This is a paragraph. This is a table, and this is an image”. We do this using tags and attributes.
HTML tags consist of two parts (with some exceptions) and define elements. The start tag and an end tag. Tags are made with words between triangular brackets where the ending tag also has a slash.
In this example, the <p> and </p> are the tags, and This is a paragraph is the content. Please note that the content between tags can also be new elements themselves. We call this nesting.
A very basic HTML document has some boilerplate code. Let’s look at an example and check out what everything is and what to look out for.
The first line is one of those exceptions. <!DOCTYPE html> tells the browser that it is looking at an HTML5 document. It has no end tag.
if you look closely at the document, within our <html> tag that defines the beginning of our page, you might see that we have a <head> and <body> .
The <head> of the HTML document defines the metadata of our web page. Most of the code within the <head> isn’t visible to the user. The <title> , however, is visible to the user. Google Chrome, Microsoft Edge, Firefox, and all other browsers use this title in the tabs.
Next, the <body> element defines every visual element of our page. Within it, we have defines a big header with <h1> along with a simple paragraph using <p> .
Note: everything from the beginning to the end tag and everything in between is the element.
Running the webpage
HTML documents can be made using the simple default notepad, but I prefer using a proper IDE. An Integrated Development Environment. It is essentially a text editor with tools specifically for developers like auto-completion and code highlighting.
Good options for web development are Visual Studio Code and Notepad++. I use WebStorm with a student license at the moment but that might be a bit much for simple projects like this.
Install one of them and create a new file called index.html .
If you copy the code from the snippet above and save the file somewhere, you can simply double-click the HTML file to open it in your preferred web browser.
We can run HTML files without a web server because it serves static content. It doesn’t require a server since it doesn’t have any server-side code to run.
Attributes
As I’ve mentioned earlier, elements can contain tags and attributes. But what are attributes, and how do we add them?
Attributes are extra properties that an element can have. These can be style , href , alt , and many others depending on the element. One of the most common examples of attributes is the anchor tag.
The <a> tag is used for hyperlinks. When you click it, you will be moved to another web page, for example https://google.com . We can add this information using the href attribute.
Add this line of code in your body element and reload the page. You should now see a link that will move you to Google.
You can also add style to elements. This uses the style attribute with some CSS code in between the quotation marks.
These are all the basics of HTML development. You can read more on this website. You can also move on with this article since we are going to move to more advanced topics such as basic CSS and JavaScript along with more HTML.
Inspecting Elements
All major web browsers have tools for developers to use when they encounter unexpected behavior, or, bugs. These tools are called developer tools and they can be accessed by right-clicking on your webpage and clicking on “Inspect Element”, or just “Inspect”. A common shortcut is pressing F12 on your keyboard.
The first tab, “Elements” is useful for developing the front end of a web page. The “console” tab is mostly used for JavaScript and backend development. The other tabs aren’t useful for us yet and have to do with networks and performance.
In the elements tab, we see a representation of our HTML structure. This is called the DOM, or Document Object Model. This topic will come forward more often when talking about JavaScript.
On the right side of the image, we have tools for checking out the styling and CSS of our web page. This is useful for web designing.
You cannot make permanent changes using the developer tools, but you can make temporary changes. Try changing some CSS values or deleting/changing an element in the DOM. If you reload the page, it will turn back to normal again.
Containers
The visual structure of a web page mostly consists of different containers, or area’s in which some elements are placed. Think about a bar at the top with a search function, a sidebar with links, or the main container in which the most important content is placed inside. These are mostly made up of div elements.
On the left, we have a simple layout for a web page.
A top bar, sidebar, and main content square.
These all reside in the same webpage, in our <body> element. But they are different. So we place multiple elements in the <body> , but what element would we add to divide these pieces of content?
The <div> element is for this job. The div element is an invisible element that we can style to make our containers. The div element defines a division or section of a webpage.
This would roughly be our skeleton, our list of containers. We just need to add some basic styling to it to get them in the right order. Because, if you check out the page that this returns, all div elements will be under each other.
A div has a value for its display , we can check this using inspect element. The default value is block which means that it creates a block spanning the whole width of the parent element. Our topbar should have this, but our sidebar and content might be better off by being inline or inline-block .
using the style attribute, we set the display value of our two bottom elements to inline-block so that they can exist next to each other. Our topbar will remain block by default. We also give all elements a background color so they look similar to our image above.
As you might have spotted, the elements don’t exactly align very nicely. They leave gaps. This is due to the default margin and padding values of our <p> elements that reside inside our <div> elements. This means that we might need to get a bit deeper into styling our elements using CSS.
Styling the Web Page using CSS
We have already used some CSS in our code using the style attribute. But as you might see, it can get very ugly very soon if you write all your style “inline” using the style attribute. This is why we might want to move to CSS files.
If you’re using an IDE such as Visual Studio Code, you can add a file in the same folder as your HTML file called style.css . In this file, we can define styles that apply to every element of the same type, or we can make it apply to certain elements using classes and id .
In the head of your HTML file, add the following line.
This connects the two files together so we can use the styles from the stylesheet in our HTML file. Now let’s take a look at some basic CSS and how to use it on your web page.
Note: Instead of a separate CSS file, you can use a style element in your head . You write CSS the same way in a style element and separate file.
Basic CSS syntax
CSS syntax is very easy and there isn’t much variation, though there are some things you need to remember.
CSS uses the shorthand using a dot or hashtag to signify classes or ids. Instead of tags, we use brackets <> to open and close what we want in between.
In between the brackets, we define our styles. This is done using a key-value pair where the key is one of the hundreds of standard names and the values have to be valid. You can read about different values and styles here.
Even I and other web developers still need to check if they’re writing non-sense or if the key is valid. It can be hard to differentiate font and text based styles like size, weight, and color. But it will get better over time.
The lines with /* */ are comments. These don’t affect the style and help with readability. You can comment on what a specific style is used for, for example.
Lastly, you might’ve seen that we end all lines with a semicolon. This is done to let the browser know that it’s the end of the line. You can also keep everything on a single line this way but that’s hardly readable.
Padding, Margin, and Border
Padding and margin, along with border attributes are useful to know but difficult to truly master. If you’re using the developer tools, you might have seen the following square.
The square in the center is the element, in this case, it is one of the <p> tags on which I removed the margin and padding . If there are values, it will show up here.
- Padding is in the element.
- Margin is outside of the element.
- The border is between the padding and margin.
You can check out the different properties of padding, margin, and border by using border-color , background-color , padding , margin along with border-width to see how they react to other elements and themselves.
Positioning
Positioning is arguably one of the most difficult things in web development. Especially when creating a responsive web page. But we will just get in the basics for now.
For positioning, we need to know the position CSS attribute. This can have one of 5 values: static relative fixed absolute sticky where static is the default value.
- Relative is positioned relative to its normal position.
- Fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
- Absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
- Sticky is positioned based on the user’s scroll position. A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it "sticks" in place (like position: fixed ).
This all seems very difficult to remember, but it’ll be clear once you’ve worked with it a few times. Let’s see how we can use them.
This will produce a div in the bottom right corner of the web page. Try and resize the page, it will stay in the corner. It stays there because of position: fixed . We also use bottom and right so it has some space from the corner. We could also use margin for this.
If you change the position to absolute , it will do the same, but why? This has to do with scrolling. A fixed element will remain on the screen if you scroll away, an absolute element will go off-screen. You can check this out if you add height: 1000px; to another element so you can scroll.
Colors
Colors are a big part of every website. Who would recognize Coca-Cola cans if they weren’t so nice bright and red? Probably anyone, but still, colors are a huge part of creating websites.
So far we’ve used colors like red , blue , and so on, but there is a whole list out there that you can find here. But where is the specific Dutch flag red color? It isn’t there. That’s why we have more ways to add our own colors using HEX codes and other values.
The easiest way to add another color is by using hexadecimal codes. Hexadecimal ‘numbers’ go from 0 to F, 16 different values. if we add two next to each other, like FF, we have 255. That’s exactly what colors are made of in the classic RGB hex format. Three values from 0 to 255 in hexadecimal.
Remember: put the CSS code inside the head or your stylesheet!
We’re also using multiple classes to style these elements! Just add more words to the class attribute and add them to your stylesheet. This is a great way to split up the styles into smaller reusable parts.
But this isn’t the only way to add color to a web page. We can also use HSL and full RGBA values. You can read about that on this page. In my time as a developer, I’ve come across hexadecimal notation more often than all the others. It’s also very easy to convert to hexadecimal if necessary.
Adding Interactivity to Your Web Page with JavaScript
Now we are going to get into the hardest part. Interactivity. Our web page might not look proper, but if you’ve followed along nicely, you now have the basics down and you should be able to create something nice. We’ve also taken a look at one of the best resources for web development knowledge: W3Schools.
Interactivity for web pages is done in JavaScript. JavaScript, or JS for short, is a scripting language. It offers much more functionality than HTML and CSS combined such as interacting with buttons and manipulating the DOM.
It will also serve as a very nice step to web development proficiency if you’re planning to go through NodeJS for server-side development. Or any front-end library such as React. But that isn’t important now.
Writing your first code
JavaScript, like CSS, can be done within the HTML file itself, or in another file, a .js file. In HTML, we have the <script> tag. In between the <script> tags you can write JS code.
This line of code will “print”, or write text to the console in the developer tools we’ve seen before. You can “log” anything from specific data types such as objects and arrays to simple strings like this, or numbers.
We call the log function that is inside the console object. We use the dot notation to get to nested data or objects.
We call a function using parenthesis () . Within these parentheses, we put our parameters. We will get into functions later on, but this is just so you know what is happening with console.log .
If you want to run code from an external file instead of inside the HTML, you need to create a JS file and import it into the HTML using the script tag.
This is commonly done at the bottom of the body element to reduce loading times. You can also add it in the head if loading the script soon is beneficial.
Variables
We’ve taken a look at console.log already, now we’re going to get into the real programming. We know that we can log anything with the log function, and that it will show up in the console of our browser that we can access using “Inspect Element”.
Variables are an essential part of programming. They can be anything. They can be changed during the execution of your program. They’re nice to have when you don’t know what the value of something will be. Like the name of a user.
A variable can be any valid data type. In JS, the most basic data types are numbers and strings. Strings are pieces of text surrounded by quotation marks. Numbers do not have to be surrounded by anything.
There are more advanced data types too, but we will get into them later on.
Variables are made using let , var , or const . The difference between let and var is slight, and it is recommended to use let . The difference with const is that it is a value that cannot be changed. It is a constant. But we will only be using let from now on.
The above code will log a greeting to whatever the value of yourName is. If we change the value of yourName , the greeting will also change.
We use something called string concatenation in between the parentheses of the console.log function. This essentially means adding two strings of text together to form a single string.
Conditional Statements
Conditional statements are an essential part of programming. It allows us to map multiple paths which our code can follow. For example:
We declare an age in a variable called age . We check whether or not age is higher or equal to 18 using >= . If it is not higher or equal to 18, we use else to catch all possibilities that aren’t yet caught.
Conditional statements are made up of three parts. Only the first part is required, the if statement. If you need more specific tests, you can chain together multiple statements using else if . Else if statements do a specific check, like if . Else statements simply catch all other possibilities.
You can look at this Gist for a slightly larger explanation of the pitfalls of conditional statements, and what to look out for. Anything from the order of the checks to using multiple checks using else if .
We haven’t talked about what to put in the parentheses of the if statement. What we need to put in it is a statement that resolves to a boolean value, so either true or false .
Above is a list of some possible conditions for an if statement. Keep in mind that any of these can contain variables instead of hard-coded values.
Loops
Now that we are semi-comfortable with conditional statements and boolean logic, we can move on to looping. A loop will execute a part of code repeatedly until a condition has been met.
Depending on the type of loop, this will be once a number of loops have been done, or a variable gets a certain value. Don’t worry if it sounds weird now, we will get into the most basic loops.
The loop that you’ll likely be shown is the while loop. A while loop will execute a block of code until a condition is met. This condition is one you would have to program yourself, otherwise, you’ll get an infinite loop.
A common example is a simple counter. If you want you can add console.log to the loop’s body to see it in action. We define two variables outside of the loop and change them inside it. The loop boolean will remain the same until we change it.
Another loop type is the for loop. The for loop will loop until it has looped a specific number of times. For example, for every item in a list, or for every letter in a string.
The syntax looks more advanced but it isn’t hard to understand. We set a variable, add a condition, and add our increment value. In this case, the condition should be true when the loop has to run. We use “index less than the length of our string”.
Here are a few more valid examples of for and while loops.
This will conclude our chapter about loops. If it’s still a bit weird to you, don’t worry, it takes time and practice to fully understand loops, and most students struggle with it.
Functions
Functions are a way of separating code blocks and reuse them, optionally with variables you can change. The syntax is simple as followed:
A function can be made, after it’s made, it can be called. If a function returns a value, you can also add the value to a variable. Let’s look at some examples.
A function could only use variables from the parameters or modify variables from outside of the function. A function can also call a function within its body. It can even call itself, that is called recursion. We won’t get into recursion in this article, but you should be wary of infinite loops when calling functions inside functions.
More variable types
We’ve taken a look at a lot of code already. And it might seem hard already. It’s about to get even more fun. I almost forgot to include this, but it is every so important to know when you are becoming a JavaScript developer. Arrays, Objects, null, and undefined.
JavaScript works in mysterious ways sometimes. But there are some types of variables that we might encounter by accident. You might’ve seen one of these already. Null and undefined are types of variables that seem similar. The one is the lack of a value, and the other is the lack of a variable altogether. here’s a simple image to show you.
Here is a quick code snippet to show you as well.
An undefined value is something you mostly don’t want to discover. It could mean that your code is in the wrong place and that a variable isn't yet made, or it could mean that you have a typo. We will not get much further into this, but it could be useful to know the difference between null and undefined .
Next up are arrays. Arrays are essentially lists that can contain values. These values can be queried by using an index. An index is a number from 0 to the end of the list. Let’s show you some code
An array is created using square brackets [ . ] . Inside it, we have values separated by commas. The values can be anything, functions, numbers, booleans, strings, objects, and other arrays (called nested arrays).
We get each item using an index between square brackets. If we have multiple arrays within each other, there will also be another set of brackets with another number inside them. We can use loops to log every item in an array.
But what can we do with arrays? Or nested arrays? We can do a lot of things, mostly topics that I will not discuss here such as using them to store elements in React. But we can also make a nice agenda.
We might want to have some better way of getting the days instead of numbers 0 to 6 though. We could use objects for that.
Objects are more advanced lists in a way. They are written in JSON, JavaScript Object Notation. I have written an article about JSON that you can find here but we will still get into the basics in this article.
Objects are key-value pairs written between brackets. The keys must be strings, the values can be anything from numbers to objects themselves. Another case of nesting values.
Here is our agenda in object form instead of a nested array. Using arrays for each day.
You can also use nested objects for the parts of each day.
As seen in this snippet, objects can be called using the dot notation too. This is much easier to write, and also more clean looking. Code readability is important in big projects so using the dot notation can be a big deal.
That’s it for these advanced types, let's continue.
Connecting HTML and JavaScript
Connecting HTML and JavaScript can be done in some ways. We have already taken a look at how to connect the files, but we don’t yet know how to use the JavaScript functions on our web page.
In HTML, we have button elements that can have an onClick attribute. This is probably the easiest way to connect JavaScript functions to your HTML page. You can only call functions this way, but with functions, you can do all sorts of things.
But with this, we cannot manipulate the DOM like we probably want to. We might want to show the results of a function, and we might want to change some variables we want to use inside of our function.
Now it might get a lot more advanced, and you might have a hard time following. Don’t worry and take your time. Try to experiment with everything above if you want to get more comfortable with web development.
In JavaScript, we have the function document.getElementById . This function will return an HTML element if it has the ID that you pass on as a parameter. This is one of the reasons why an ID attribute should always be unique.
This snippet is a simple example of how to use input fields and JavaScript to add interactivity to a web page. You can save this page and open it in your browser to see it working.
We could add safeguards for if one of the fields is empty using if statements, but to remain on topic, we do not do that here. But there is still quite some stuff to unpack here.
Firstly, we define our elements in HTML and give them unique IDs using the id attribute. We create two input fields with type="number" , this way, only numbers can be entered. We also add a button and a paragraph element to show the answer of the sum of both values.
Within the script element, we define our variables so that we can get to our fields. This could also be done within the function. We get the fields using getElementById .
In the add function we make, we get our paragraph element and get our answer. Since the value returns a string, we need to cast the values to numbers.
Lastly, we set the innerHTML of the paragraph to the answer. Since the answer is a number, we need to cast it to a string again.
The innerHTML is the string version of everything in between the element’s tags. This could be more elements, or simply text like we do here.
If you’d put some effort into it, with this knowledge, you can create a working calculator now. You might think you lack the knowledge, but everything is here now.
Another great exercise is to create a to-do app. We know of lists, we can add values using input elements and we can render text from our script.
Note that you need to have the script below the elements, or you need to look for the elements in the function body for it to work. Otherwise, the elements aren’t loaded when it is trying to find them resulting in empty values.
Conclusion
Web development may look difficult to get into, but if you’ve followed along, you are already well on your way to becoming a web developer. I started this way too, by learning the basics of the three “pillars” of web development. Javascript, CSS, and HTML.
There is so much more left to learn though. There are frameworks for styling to learn, responsive web design, backend development, and so much more.
I, in my year and a half on Medium, have written more than a hundred articles related to web development. Articles for beginners, and articles for more advanced programmers. You can check them out on my profile or on my publication: Quick Programming.
If you want to support me, you can become a member on Medium using this link and follow me on Twitter to receive updates on my life and my articles.
Below are some links to help you get into more advanced development topics. I recommend the bold ones more since they are, in my opinion, great ways to improve your development skills or they connect well with your current new skills.
-
, a DOM manipulation library that is easy to use. website for backend development using NodeJS. , an article to learn Python programming if you want to learn more about programming outside the web., the most well-known styling framework for websites.consoleobject in JavaScript. , a framework that uses React. , my favorite framework. . . .
Thank you so, so much for reading if you’ve come this far. Have a great journey with learning how to program, and have a wonderful day.
Базовая структура HTML документа — Основы современной верстки
Как театр начинается с вешалки, так и любой HTML-документ начинается с базовой структуры. Она включает в себя теги, которые есть в любом HTML-файле. Эти теги и служебная информация нужны браузеру для корректного отображения информации.
Взглянем на базовую структуру любого HTML-документа:
Этот набор кажется не очень большим, но браузеру он сообщает множество полезной информации. В этом уроке разберемся с каждой строчкой этой структуры.
DOCTYPE
Первая конструкция в любом HTML-документе — элемент <!DOCTYPE> . Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:
С приходом стандарта HTML5 элемент <!DOCTYPE> немного упростился. Если вы встретитесь с сайтами, созданными пять-десять лет назад, то сможете увидеть совершенно другие записи. Они были больше и напрямую влияли на то, как браузер обработает информацию. Неправильное указание элемента <!DOCTYPE> могло привести к некорректному отображению. Сейчас такой проблемы нет, поэтому вы можете без всяких опасений использовать конструкцию, которая указана в данном уроке. Использование старых значений <!DOCTYPE> необходимо только при разработке с поддержкой очень старых браузеров.
Парный тег html
Тег <html></html> является основой основ. Именно внутри него располагается вся информация. Благодаря этому тегу браузер понимает, где начинается контент, который необходимо обработать как HTML.
Важной частью тега html является наличие атрибута lang . В нем указывается язык, на котором отображается веб-страница. С помощью этого атрибута браузеры могут корректно считать множество специфичных символов, которые присутствуют в разных языках. Помимо этого, атрибут lang начинает использоваться и в CSS, с которым вы познакомитесь в следующих уроках. В новых стандартах CSS появляются свойства, которые опираются на данный атрибут. Например, позволяют корректно переводить слова в тексте.
В качестве значения атрибут lang принимает знакомые всем сокращения языков. Для русского — lang="ru" , для английского — lang="en" , для немецкого — lang="de" .
Парный тег head
Тег <head></head> служит для хранения служебной информации. Здесь возможны самые разные сочетания тегов, которые подсказывают браузеру название страницы, описание, ключевые слова и так далее. Такая информация называется метаинформацией. В современном вебе она отвечает не только за служебную информацию для браузера, но и активно используется при продвижении сайта. Поисковые системы считывают всю эту информацию и на основе множества алгоритмов определяют место сайта при разных поисковых запросах.
Любые данные, которые указаны внутри тега <head> , не видны при отображении страницы в браузере. Это значит, что нет необходимости располагать там информацию, которая предназначена для отображения.
Хоть различной информации внутри <head> может быть множество, в этом уроке разберем несколько основных тегов, которые пригодятся при создании любой веб-страницы:
Метаинформация
Метатег <meta> . Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег <meta> с атрибутом charset . Он позволяет установить кодировку документа.
Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков, является кодировка UTF-8 . Именно ее рекомендуется устанавливать в качестве значения атрибута charset . Теперь браузер будет отображать все символы именно в этой кодировке.
Заголовок страницы
На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной верстки» вкладка в браузере Google Chrome выглядит следующим образом:
Для указания заголовка страницы используется специальный парный тег <title></title> , внутри которого указывается нужная информация.
Тело документа
После тега <head> в документе указывается парный тег <body></body> , который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.
Используем один из примеров прошлого урока и добавим все недостающие теги.
Чтобы полностью соответствовать всем стандартам HTML, добавим необходимую базовую структуру документа.
Хоть данный набор и является основным, но на самом деле браузеры могут обработать HTML-информацию и без базовой структуры документа. Но не стоит отдавать все на откуп браузеру. Он постарается автоматически обернуть контент в <body> , добавит современный <!DOCTYPE> , но при этом нет уверенности в том, что все это он добавит корректно.
Самостоятельная работа
Создайте базовую структуру документа и попробуйте разные варианты текста внутри тега <title> . Можете попробовать добавить туда даже эмодзи и посмотреть, как браузер выведет такой заголовок
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно