Anonymous Quiz
7%
<scripting>
5%
<js>
85%
<script>
2%
<javascript>
HTML5 предоставляет нам элемент <audio>, который позволяет встраивать звуковые файлы прямо на веб-страницы. Вот как вы можете начать:
<audio src="file.mp3"></audio>
Добавьте атрибут controls, чтобы предоставить пользователям стандартные кнопки управления воспроизведением:
<audio src="file.mp3" controls></audio>
Если хотите, чтобы аудио начинало воспроизводиться автоматически, добавьте атрибут autoplay:
<audio src="file.mp3" controls autoplay></audio>
С атрибутом preload вы можете указать браузеру, следует ли предварительно загрузить аудио. Это может быть auto, metadata или none.
Вы можете управлять аудио и с помощью JavaScript, создавая динамические аудио-взаимодействия.
При создании своих проектов эксперементируйте и делайте уникальные проекты, чтобы ваше резюме выделялось. Вы можете сделать небольшой аналог Apple Music или Яндекс музыку🎶
#ОбучающийПост #HTML
<audio src="file.mp3"></audio>
Добавьте атрибут controls, чтобы предоставить пользователям стандартные кнопки управления воспроизведением:
<audio src="file.mp3" controls></audio>
Если хотите, чтобы аудио начинало воспроизводиться автоматически, добавьте атрибут autoplay:
<audio src="file.mp3" controls autoplay></audio>
С атрибутом preload вы можете указать браузеру, следует ли предварительно загрузить аудио. Это может быть auto, metadata или none.
Вы можете управлять аудио и с помощью JavaScript, создавая динамические аудио-взаимодействия.
При создании своих проектов эксперементируйте и делайте уникальные проекты, чтобы ваше резюме выделялось. Вы можете сделать небольшой аналог Apple Music или Яндекс музыку🎶
#ОбучающийПост #HTML
👍2❤1
Anonymous Quiz
33%
<dropdown>
54%
<select>
7%
<option>
7%
<list>
Разница между «атрибутом» (attribute) и «свойством« (property)
🔹Атрибуты (Attributes)
Атрибуты — это дополнительные значения, которые вы можете назначить тегам в вашем HTML-коде. Они представлены в исходном коде страницы и первоначально устанавливают свойства элементов.
<input type="text" value="Hello, World!" disabled>
В данном примере type, value и disabled — это атрибуты тега input.
Особенности атрибутов:
1️⃣Строковые значения: Даже если атрибут представляет число или другой тип данных, его значение всегда будет строкой.
2️⃣Нечувствительность к регистру: Имена атрибутов можно записывать любыми буквами — большими или маленькими, это не повлияет на работу.
3️⃣Видны в innerHTML: Если вы посмотрите на свойство innerHTML элемента, то увидите все атрибуты, указанные в разметке.
🔹Свойства (Properties)
Свойства — это характеристики DOM-узлов, которые вы можете читать или изменять с помощью JavaScript. Они представляют текущее состояние элемента в браузере, которое может меняться во время выполнения скрипта.
const inputElement = document.querySelector('input');
inputElement.value = "New Text";
В данном примере мы меняем свойство value у объекта inputElement.
Особенности свойств:
1️⃣Различные типы данных: Свойства могут иметь различные типы данных, не только строки.
2️⃣Чувствительность к регистру: Имена свойств нужно указывать в точном регистре, в отличие от атрибутов.
3️⃣Интерактивность с JavaScript: Свойства представляют собой характеристики объектов JavaScript и могут изменяться в любое время при выполнении скрипта.
#JavaScript #ОбучающийПост #HTML
🔹Атрибуты (Attributes)
Атрибуты — это дополнительные значения, которые вы можете назначить тегам в вашем HTML-коде. Они представлены в исходном коде страницы и первоначально устанавливают свойства элементов.
<input type="text" value="Hello, World!" disabled>
В данном примере type, value и disabled — это атрибуты тега input.
Особенности атрибутов:
1️⃣Строковые значения: Даже если атрибут представляет число или другой тип данных, его значение всегда будет строкой.
2️⃣Нечувствительность к регистру: Имена атрибутов можно записывать любыми буквами — большими или маленькими, это не повлияет на работу.
3️⃣Видны в innerHTML: Если вы посмотрите на свойство innerHTML элемента, то увидите все атрибуты, указанные в разметке.
🔹Свойства (Properties)
Свойства — это характеристики DOM-узлов, которые вы можете читать или изменять с помощью JavaScript. Они представляют текущее состояние элемента в браузере, которое может меняться во время выполнения скрипта.
const inputElement = document.querySelector('input');
inputElement.value = "New Text";
В данном примере мы меняем свойство value у объекта inputElement.
Особенности свойств:
1️⃣Различные типы данных: Свойства могут иметь различные типы данных, не только строки.
2️⃣Чувствительность к регистру: Имена свойств нужно указывать в точном регистре, в отличие от атрибутов.
3️⃣Интерактивность с JavaScript: Свойства представляют собой характеристики объектов JavaScript и могут изменяться в любое время при выполнении скрипта.
#JavaScript #ОбучающийПост #HTML
❤2👍2
Разницу между атрибутами async и defer при подключении внешних скриптов в HTML документе.
🔹async
Когда вы используете атрибут async, браузер продолжает парсить HTML-документ, в то время как скрипт загружается в фоновом режиме. Как только скрипт загрузится, парсинг HTML приостанавливается, чтобы скрипт мог быть выполнен. Это может привести к тому, что скрипты будут выполняться не в том порядке, в котором они указаны в документе, если они зависят друг от друга.
🔹defer
Атрибут defer, с другой стороны, также позволяет браузеру продолжить парсинг HTML-документа во время загрузки скрипта. Однако, в отличие от async, он гарантирует, что скрипты будут выполнены в том порядке, в котором они появляются в документе, и только после полной загрузки HTML-документа, перед событием DOMContentLoaded.
🔍Визуально разницу можно представить так:
1️⃣Без async или defer: HTML → Скрипт загружается и выполняется → HTML продолжает загружаться.
2️⃣С async: HTML и скрипт загружаются параллельно → Скрипт выполняется, как только загрузится (HTML может ещё не быть полностью загружен).
3️⃣С defer: HTML и скрипт загружаются параллельно → Скрипт выполняется только после полной загрузки HTML (и в том порядке, в котором они указаны в документе).
🛠Использование:
Используйте async, когда скрипты независимы друг от друга и могут выполняться в любом порядке.
Используйте defer, когда скрипты зависимы друг от друга и должны выполняться в определенном порядке.
#JavaScript #ОбучающийПост #defer #async #HTML
🔹async
Когда вы используете атрибут async, браузер продолжает парсить HTML-документ, в то время как скрипт загружается в фоновом режиме. Как только скрипт загрузится, парсинг HTML приостанавливается, чтобы скрипт мог быть выполнен. Это может привести к тому, что скрипты будут выполняться не в том порядке, в котором они указаны в документе, если они зависят друг от друга.
🔹defer
Атрибут defer, с другой стороны, также позволяет браузеру продолжить парсинг HTML-документа во время загрузки скрипта. Однако, в отличие от async, он гарантирует, что скрипты будут выполнены в том порядке, в котором они появляются в документе, и только после полной загрузки HTML-документа, перед событием DOMContentLoaded.
🔍Визуально разницу можно представить так:
1️⃣Без async или defer: HTML → Скрипт загружается и выполняется → HTML продолжает загружаться.
2️⃣С async: HTML и скрипт загружаются параллельно → Скрипт выполняется, как только загрузится (HTML может ещё не быть полностью загружен).
3️⃣С defer: HTML и скрипт загружаются параллельно → Скрипт выполняется только после полной загрузки HTML (и в том порядке, в котором они указаны в документе).
🛠Использование:
Используйте async, когда скрипты независимы друг от друга и могут выполняться в любом порядке.
Используйте defer, когда скрипты зависимы друг от друга и должны выполняться в определенном порядке.
#JavaScript #ОбучающийПост #defer #async #HTML
👍4
Media is too big
VIEW IN TELEGRAM
Привет, сделал разбор вопросов к собеседованиям по HTML. Записал небольшое видео. Говорю в пол голоса из-за эхо в комнате, пока ее не заставили мебелью😄
#собеседование #вопросы #html
#собеседование #вопросы #html
👍12
<!DOCTYPE html>
Этот элемент служит для указания типа документа (DTD, Document Type Definition) веб-страницы. Он должен идти первым в HTML-документе, перед тегом <html>. <!DOCTYPE html> не является HTML-тегом; это инструкция для веб-браузера о том, какой версией HTML или XHTML следует интерпретировать веб-страницу.
Если говорить о <!DOCTYPE html>, то он ассоциирован с HTML5. Его наличие гарантирует, что веб-страница будет отображаться в стандартном режиме, а не в квиркс-режиме (quirks mode), который может вызвать некорректное отображение страницы из-за совместимости с устаревшими версиями HTML.
Использование <!DOCTYPE html> улучшает совместимость веб-страницы с различными браузерами и обеспечивает корректное отображение элементов и стилей на странице.
#обучающийПост #html
Этот элемент служит для указания типа документа (DTD, Document Type Definition) веб-страницы. Он должен идти первым в HTML-документе, перед тегом <html>. <!DOCTYPE html> не является HTML-тегом; это инструкция для веб-браузера о том, какой версией HTML или XHTML следует интерпретировать веб-страницу.
Если говорить о <!DOCTYPE html>, то он ассоциирован с HTML5. Его наличие гарантирует, что веб-страница будет отображаться в стандартном режиме, а не в квиркс-режиме (quirks mode), который может вызвать некорректное отображение страницы из-за совместимости с устаревшими версиями HTML.
Использование <!DOCTYPE html> улучшает совместимость веб-страницы с различными браузерами и обеспечивает корректное отображение элементов и стилей на странице.
#обучающийПост #html
👍6🔥1
Подключение CSS и JavaScript в HTML-разметке: практики и исключения
CSS-стили, как правило, помещают в тег
JavaScript-скрипты часто размещают перед закрывающим тегом
Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в
Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом
#обучающийПост #css #html
CSS-стили, как правило, помещают в тег
<head> для того, чтобы браузер мог как можно быстрее загрузить и применить их, обеспечивая тем самым более быструю отрисовку страницы. Если стили будут загружаться после того, как пользователь начнет видеть содержимое страницы, это может привести к "мельканию" стилей, когда содержимое страницы изменится визуально после применения стилей.JavaScript-скрипты часто размещают перед закрывающим тегом
<body>, чтобы они не блокировали отрисовку основного содержимого страницы. Скрипты могут занимать значительное время для загрузки и выполнения, и если разместить их в <head>, пользователь может увидеть пустую или неполностью загруженную страницу.Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в
<head>. Это позволяет скрипту собирать данные с самого начала загрузки страницы.Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом
<script>, что позволяет загружать и выполнять JavaScript асинхронно, минимизируя тем самым влияние скрипта на время загрузки страницы.#обучающийПост #css #html
👍8🔥1👌1
Сброс и Нормализация CSS
Сброс CSS – это техника, при которой мы явно "обнуляем" стили элементов, устанавливая значения отступов, размеров шрифтов, границ и других параметров на 0 или на какое-то другое базовое значение. Это делается для того, чтобы "сбросить" стили, которые браузер применяет автоматически.
Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.
#обучающийПост #css #html
Сброс CSS – это техника, при которой мы явно "обнуляем" стили элементов, устанавливая значения отступов, размеров шрифтов, границ и других параметров на 0 или на какое-то другое базовое значение. Это делается для того, чтобы "сбросить" стили, которые браузер применяет автоматически.
Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.
#обучающийПост #css #html
👍4
Кодировка HTML-страницы
Для корректного отображения текста на нескольких языках на веб-странице, вам следует убедиться, что используется правильная кодировка символов. Это можно сделать, добавив тег <meta charset="UTF-8"> внутрь тега <head> вашего HTML-документа. UTF-8 поддерживает большое количество символов и идеально подходит для многоязычных сайтов.
#html #обучающийПост #кодировка
Для корректного отображения текста на нескольких языках на веб-странице, вам следует убедиться, что используется правильная кодировка символов. Это можно сделать, добавив тег <meta charset="UTF-8"> внутрь тега <head> вашего HTML-документа. UTF-8 поддерживает большое количество символов и идеально подходит для многоязычных сайтов.
#html #обучающийПост #кодировка
👍4❤3🔥1
Data-атрибуты
Используются для хранения пользовательских данных прямо в HTML-тегах. Эти данные можно затем использовать в JavaScript. Это особенно полезно, когда необходимо ассоциировать некоторые данные с конкретным элементом, но не хочется засорять DOM дополнительными тегами или неструктурированными атрибутами.
#html #attribute #data #обучающийПост
Используются для хранения пользовательских данных прямо в HTML-тегах. Эти данные можно затем использовать в JavaScript. Это особенно полезно, когда необходимо ассоциировать некоторые данные с конкретным элементом, но не хочется засорять DOM дополнительными тегами или неструктурированными атрибутами.
#html #attribute #data #обучающийПост
👍4👌2❤1
iFrame в HTML
Это элемент с помощью которого мы можем встраивать на веб страницу другую веб страницу😅
Например, я разрабатываю плагин для Figma. Figma мне предоставляет доступ к своему приложению с помощью iFrame. Ты можешь разрабатывать приложение в приложении. У этого приложения свой body, title, head. Единственное такие приложения ограниченны для безопасности, чтобы разработчик не мог залезть в 'родительское приложение'.
Так же на наш сайт мы можем встраивать карты Google, другие сайты, YouTube видео.
1️⃣ С помощью атрибута src можно указать URL, который будет загружен в <iframe>.
2️⃣ Атрибуты width и height позволяют задать размеры <iframe>, обычно указываемые в пикселях или процентах.
3️⃣ Атрибут allowfullscreen позволяет <iframe> переходить в полноэкранный режим
#обучающийПост #html #iframe
Это элемент с помощью которого мы можем встраивать на веб страницу другую веб страницу😅
Например, я разрабатываю плагин для Figma. Figma мне предоставляет доступ к своему приложению с помощью iFrame. Ты можешь разрабатывать приложение в приложении. У этого приложения свой body, title, head. Единственное такие приложения ограниченны для безопасности, чтобы разработчик не мог залезть в 'родительское приложение'.
Так же на наш сайт мы можем встраивать карты Google, другие сайты, YouTube видео.
1️⃣ С помощью атрибута src можно указать URL, который будет загружен в <iframe>.
2️⃣ Атрибуты width и height позволяют задать размеры <iframe>, обычно указываемые в пикселях или процентах.
3️⃣ Атрибут allowfullscreen позволяет <iframe> переходить в полноэкранный режим
#обучающийПост #html #iframe
👍5🔥2
Создание HTML-разметки в JavaScript
До появления современных фреймворков и библиотек, таких как React, Angular, или Vue.js, процесс создания интерактивных веб-интерфейсов и шаблонов во многом опирался на ручное управление DOM в JavaScript.
Писали функции-шаблоны для создания динамической HTML-разметки, для того чтобы не писать фрагменты HTML в ручную
#обучающийПост #JavaScript #DOM #html
До появления современных фреймворков и библиотек, таких как React, Angular, или Vue.js, процесс создания интерактивных веб-интерфейсов и шаблонов во многом опирался на ручное управление DOM в JavaScript.
Писали функции-шаблоны для создания динамической HTML-разметки, для того чтобы не писать фрагменты HTML в ручную
#обучающийПост #JavaScript #DOM #html
👍16🔥5👌4
Элементы section, aside, и article
Эти элементы имеют различные семантические значения, что делает их важными для структурирования контента веб-страницы. Понимание их различий помогает создавать более доступные и читаемые веб-страницы.
Элемент section:
Этот элемент используется для группирования смыслового содержания на веб-странице. Каждый section должен сосредотачиваться на отдельной теме или группе тем, которые логически связаны между собой.
Пример: На главной странице новостного сайта section может быть использован для группирования новостей по категориям, например, отдельные разделы для мировых новостей, спорта, культуры и т.д.
Элемент aside:
Этот элемент предназначен для контента, который косвенно связан с основным содержимым страницы. Это может быть боковая панель, объявления, группа ссылок на похожие темы и так далее.
Пример: На блоге aside может содержать информацию об авторе, список популярных статей или рекламные блоки, не являющиеся частью основного контента статьи.
Элемент article:
Элемент article используется для обертывания независимого, самодостаточного контента, который можно перенести в другой контекст, не потеряв смысл. Это может быть статья, блог-пост, комментарий, форумное сообщение и т.д.
Пример: В интернет-журнале каждая статья будет обернута в элемент article, так как она самодостаточна и может быть опубликована отдельно от остального содержимого сайта.
#html
Эти элементы имеют различные семантические значения, что делает их важными для структурирования контента веб-страницы. Понимание их различий помогает создавать более доступные и читаемые веб-страницы.
Элемент section:
Этот элемент используется для группирования смыслового содержания на веб-странице. Каждый section должен сосредотачиваться на отдельной теме или группе тем, которые логически связаны между собой.
Пример: На главной странице новостного сайта section может быть использован для группирования новостей по категориям, например, отдельные разделы для мировых новостей, спорта, культуры и т.д.
Элемент aside:
Этот элемент предназначен для контента, который косвенно связан с основным содержимым страницы. Это может быть боковая панель, объявления, группа ссылок на похожие темы и так далее.
Пример: На блоге aside может содержать информацию об авторе, список популярных статей или рекламные блоки, не являющиеся частью основного контента статьи.
Элемент article:
Элемент article используется для обертывания независимого, самодостаточного контента, который можно перенести в другой контекст, не потеряв смысл. Это может быть статья, блог-пост, комментарий, форумное сообщение и т.д.
Пример: В интернет-журнале каждая статья будет обернута в элемент article, так как она самодостаточна и может быть опубликована отдельно от остального содержимого сайта.
#html
👍14✍2🔥2🤔1
Shadow DOM
Shadow DOM позволяет инкапсулировать HTML и CSS в веб-компонентах, скрывая их детали реализации и стили от основного документа, тем самым предотвращая конфликты имен и стилей.
Создание Shadow DOM:
Для добавления Shadow DOM к элементу, используйте метод attachShadow({mode: 'open' | 'closed'}) на целевом элементе. Режим open позволяет доступ к Shadow DOM из основного документа через свойство shadowRoot, в то время как closed делает Shadow DOM полностью инкапсулированным.
Стилизация Shadow DOM:
- Стили внутри Shadow DOM инкапсулированы и не влияют на основной документ, а стили основного документа не влияют на содержимое Shadow DOM.
- Селектор `:host` используется для стилизации корневого элемента Shadow DOM.
- Глобальные стили не проникают в Shadow DOM, но переменные CSS (**`var()`**) и кастомные свойства могут быть использованы для тематизации.
Слоты:
Слоты (<slot>) — это элементы в Shadow DOM, которые определяют места для вставки пользовательского контента из основного DOM. Слоты могут иметь имена (name атрибут), позволяя детально управлять распределением контента.
Взаимодействие с Shadow DOM:
- Доступ к элементам внутри Shadow DOM возможен через `shadowRoot`, если режим установлен в `open`.
- Изоляция Shadow DOM обеспечивает инкапсуляцию, но также требует использования специфичных методов для взаимодействия с ним, особенно в случае `closed` режима.
#shadowdom #html #JavaScript
Shadow DOM позволяет инкапсулировать HTML и CSS в веб-компонентах, скрывая их детали реализации и стили от основного документа, тем самым предотвращая конфликты имен и стилей.
Создание Shadow DOM:
Для добавления Shadow DOM к элементу, используйте метод attachShadow({mode: 'open' | 'closed'}) на целевом элементе. Режим open позволяет доступ к Shadow DOM из основного документа через свойство shadowRoot, в то время как closed делает Shadow DOM полностью инкапсулированным.
let host = document.createElement('div');
let shadowRoot = host.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<style>:host { color: red; }</style><b>I am in shadow dom!</b>';
document.body.appendChild(host);
Стилизация Shadow DOM:
- Стили внутри Shadow DOM инкапсулированы и не влияют на основной документ, а стили основного документа не влияют на содержимое Shadow DOM.
- Селектор `:host` используется для стилизации корневого элемента Shadow DOM.
- Глобальные стили не проникают в Shadow DOM, но переменные CSS (**`var()`**) и кастомные свойства могут быть использованы для тематизации.
Слоты:
Слоты (<slot>) — это элементы в Shadow DOM, которые определяют места для вставки пользовательского контента из основного DOM. Слоты могут иметь имена (name атрибут), позволяя детально управлять распределением контента.
<!-- В Shadow DOM -->
<slot name="title"></slot>
<slot></slot> <!-- default slot -->
<!-- В основном DOM -->
<div slot="title">This goes into the named slot</div>
<div>This goes into the default slot</div>
Взаимодействие с Shadow DOM:
- Доступ к элементам внутри Shadow DOM возможен через `shadowRoot`, если режим установлен в `open`.
- Изоляция Shadow DOM обеспечивает инкапсуляцию, но также требует использования специфичных методов для взаимодействия с ним, особенно в случае `closed` режима.
#shadowdom #html #JavaScript
🔥15❤2👍1💯1🤝1
Forwarded from Айтишница Даша
Media is too big
VIEW IN TELEGRAM
«50 проектов на 50 дней»
В нем 50 мини-проектов на HTML, CSS и JS от легких к более сложным. Внутри можно найти описание и ссылки на демонстрации.
Потом решила поискать в тг и нашла открытый канал с короткими видосиками по реализации каждого проекта - здесь
Как можно его использовать?
#html #css #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤3🔥2
👨💻 План развития Frontend Разработчика (Часть 1)
Этот гайд — пошаговая дорожная карта для изучения фронтенд-разработки, подготовки к собеседованиям и поиска первой работы.
Важно понимать:
- Средний срок обучения с нуля до изучения полного стека — ~6 месяцев.
- Дополнительные 2+ месяца могут потребоваться для практики, подготовки к собесам, изучения в глубину и поиска работы.
- Скорость прогресса зависит от бэкграунда, времени на учебу и умения учиться.
Главный принцип:
Закладываем фундамент → Повторяем → Практикуем → Углубляемся. Важно "забить мозг" технологией, чтобы она стала привычной. Для этого:
- Смотрим одни и те же темы в разных источниках.
- Много пишем код, даже если кажется, что не понимаешь.
🗺 Frontend Roadmap 2024. План + Ресурсы для бесплатного обучения
🖥 HTML (< 2 недель)
Изучать HTML без CSS может показаться скучным, но наша главная цель — разобраться в возможностях языка и понять, какие теги существуют и для чего они нужны. Не стоит заучивать всё подряд — с практикой придёт понимание, когда и какие теги применять.
→ HTML с 0 до Профи. Полный курс + Практика
https://youtu.be/56lpkwhaJhQ?si=yaljlD28fC5ygHt-
→ HTML - Полный Курс HTML Для Начинающих
https://www.youtube.com/watch?v=W4MIiV4nZDY
🖥 CSS (< 4 недель)
Не стоит заучивать все свойства. Лучший способ — практика. Нужно больше верстать и пробовать. Пройдите подряд 2-3 курса и начинайте смотреть, как верстают другие. Видео по верстке в YouTube очень много
→ CSS - Курс по CSS для Начинающих
https://www.youtube.com/watch?v=WpridlBQmdk
→ CSS для Начинающих - Практический Курс
https://www.youtube.com/watch?v=SpCUuyZZTp8
→ Объяснение Вёрстки Простого Сайта
https://www.youtube.com/watch?v=MQTeFDeiRzg
→ Адаптивная верстка сайта на HTML CSS
https://youtu.be/PoJaRi7Ug7Q?si=L30HX2oiLzydfLAb
Далее возьмите 2-4 макета в Figma. Сверстайте их самостоятельно, сверяясь с конспектами.
🖥 Git & GitHub (1 неделя)
Освойте основы: создание репозитория, веток, коммитов и пуша. Цель — загрузить проект на GitHub. Остальное изучите позже.
→ Git и GitHub Курс Для Новичков
https://www.youtube.com/watch?v=zZBiln_2FhM
Дополнительно
После освоения базовой вёрстки вы сможете расширить навыки:
- Препроцессоры (Sass/Less)
- Продвинутые анимации (CSS animations, GSAP)
- CSS-фреймворки (Bootstrap, Tailwind)
Но не задерживайтесь на этом этапе слишком долго! Главное сейчас — закрепить основы и переходить к JavaScript.
С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере🚀 YeaHub.
#гайд #html #css #git
Этот гайд — пошаговая дорожная карта для изучения фронтенд-разработки, подготовки к собеседованиям и поиска первой работы.
Важно понимать:
- Средний срок обучения с нуля до изучения полного стека — ~6 месяцев.
- Дополнительные 2+ месяца могут потребоваться для практики, подготовки к собесам, изучения в глубину и поиска работы.
- Скорость прогресса зависит от бэкграунда, времени на учебу и умения учиться.
Главный принцип:
Закладываем фундамент → Повторяем → Практикуем → Углубляемся. Важно "забить мозг" технологией, чтобы она стала привычной. Для этого:
- Смотрим одни и те же темы в разных источниках.
- Много пишем код, даже если кажется, что не понимаешь.
🗺 Frontend Roadmap 2024. План + Ресурсы для бесплатного обучения
Изучать HTML без CSS может показаться скучным, но наша главная цель — разобраться в возможностях языка и понять, какие теги существуют и для чего они нужны. Не стоит заучивать всё подряд — с практикой придёт понимание, когда и какие теги применять.
→ HTML с 0 до Профи. Полный курс + Практика
https://youtu.be/56lpkwhaJhQ?si=yaljlD28fC5ygHt-
→ HTML - Полный Курс HTML Для Начинающих
https://www.youtube.com/watch?v=W4MIiV4nZDY
Не стоит заучивать все свойства. Лучший способ — практика. Нужно больше верстать и пробовать. Пройдите подряд 2-3 курса и начинайте смотреть, как верстают другие. Видео по верстке в YouTube очень много
→ CSS - Курс по CSS для Начинающих
https://www.youtube.com/watch?v=WpridlBQmdk
→ CSS для Начинающих - Практический Курс
https://www.youtube.com/watch?v=SpCUuyZZTp8
→ Объяснение Вёрстки Простого Сайта
https://www.youtube.com/watch?v=MQTeFDeiRzg
→ Адаптивная верстка сайта на HTML CSS
https://youtu.be/PoJaRi7Ug7Q?si=L30HX2oiLzydfLAb
Далее возьмите 2-4 макета в Figma. Сверстайте их самостоятельно, сверяясь с конспектами.
Освойте основы: создание репозитория, веток, коммитов и пуша. Цель — загрузить проект на GitHub. Остальное изучите позже.
→ Git и GitHub Курс Для Новичков
https://www.youtube.com/watch?v=zZBiln_2FhM
Дополнительно
После освоения базовой вёрстки вы сможете расширить навыки:
- Препроцессоры (Sass/Less)
- Продвинутые анимации (CSS animations, GSAP)
- CSS-фреймворки (Bootstrap, Tailwind)
Но не задерживайтесь на этом этапе слишком долго! Главное сейчас — закрепить основы и переходить к JavaScript.
С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере
#гайд #html #css #git
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28❤5😁4👍2