Всем привет! Есть идея добавить на канал чат для обсуждения вопросов, связанных с веб разработкой. Если актуально нажмите на кнопку + под этим сообщением👇
Прикрепила к каналу чат, в котором можно будет обсудить новые посты и любые вопросы по веб-разработке. Чтоб попасть в чат тык тык на кнопку Discuss👇
Привет ребята! Нас собралось уже больше 100 человек и пришло время наполнить этот канал смыслом😀
Я создала карту развития фронтенд-разработчика и буду выкладывать по ней бесплатные материалы для самообучения.
Я придерживаюсь структурного и поэтапного подхода к обучению, от простого к сложному. Считаю, что каждый этап полезно закреплять на практике.
Первый блок теории будет посвящен верстке, языку гипертекстовой разметки HTML и каскадным таблицам стилей CSS.
А его логичным завершением будет челлендж по верстке. Предварительная дата челленджа - конец августа.
Ну что, погнали?)
Я создала карту развития фронтенд-разработчика и буду выкладывать по ней бесплатные материалы для самообучения.
Я придерживаюсь структурного и поэтапного подхода к обучению, от простого к сложному. Считаю, что каждый этап полезно закреплять на практике.
Первый блок теории будет посвящен верстке, языку гипертекстовой разметки HTML и каскадным таблицам стилей CSS.
А его логичным завершением будет челлендж по верстке. Предварительная дата челленджа - конец августа.
Ну что, погнали?)
Google Docs
InkedRoadmap-frontend.jpg
Отличные материалы для изучения HTML есть на сайте MDN.
Предлагаю не торопиться и изучать не больше одной темы в день. К каждой теме я буду делать тест, чтоб вы проверили насколько хорошо усвоили материал.
Изучение темы займет 30-60 минут и будет полезно даже тем, кто уже имеет небольшой опыт в веб-разработке.
Первая статья Начало работы с HTML
Отличные материалы для изучения HTML есть на сайте MDN. #фронтенд_html_урок1
Предлагаю не торопиться и изучать не больше одной темы в день. К каждой теме я буду делать тест, чтоб вы проверили насколько хорошо усвоили материал.
Изучение темы займет 30-60 минут и будет полезно даже тем, кто уже имеет небольшой опыт в веб-разработке.
Первая статья Начало работы с HTML
Отличные материалы для изучения HTML есть на сайте MDN. #фронтенд_html_урок1
MDN Web Docs
Введение в HTML | MDN
По сути, HTML довольно простой язык, состоящий из элементов, которые могут быть применены к частям текста, чтобы придавать им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделять документ на логические секции (есть ли у…
Вопросы можно задать в чате канала https://news.1rj.ru/str/webinsidepro_chat
Пройти тест по статье #фронтенд_html_урок1 можно здесь http://webinsidepro.tilda.ws/
webinsidepro.tilda.ws
Web Inside Project
Душевное IT-сообщество, где растут профессионалы!
Напишите пожалуйста в обсуждении или в личку как вам такой формат?
В уроке #фронтенд_html_урок1 мы изучили базу HTML.
Сегодня предлагаю узнать о тегах подробнее.
Одиночные и парные теги пишутся с атрибутами и без.
Нужно знать типы атрибутов, чтобы правильно задавать им значения. Например для атрибутов, которые обозначают размер задают значения в px или %, иначе будет ошибка.
Ознакомьтесь с правилами применения тегов и атрибутов прежде чем писать разметку.
Теги также делятся по типам.
Рассмотрим подробнее теги верхнего уровня и теги заголовка документа.
Обязательный блок верхнего уровня <head></head> содержит метаданные документа, которые не видят пользователи. Они нужны, чтобы браузер правильно отображал страницы.
Подробная статья о том, что можно и нужно писать в блоке <head></head>.
#фронтенд_html_урок2
Сегодня предлагаю узнать о тегах подробнее.
Одиночные и парные теги пишутся с атрибутами и без.
Нужно знать типы атрибутов, чтобы правильно задавать им значения. Например для атрибутов, которые обозначают размер задают значения в px или %, иначе будет ошибка.
Ознакомьтесь с правилами применения тегов и атрибутов прежде чем писать разметку.
Теги также делятся по типам.
Рассмотрим подробнее теги верхнего уровня и теги заголовка документа.
Обязательный блок верхнего уровня <head></head> содержит метаданные документа, которые не видят пользователи. Они нужны, чтобы браузер правильно отображал страницы.
Подробная статья о том, что можно и нужно писать в блоке <head></head>.
#фронтенд_html_урок2
Думаю, что этого материала хватит на два дня, поэтому следующий тест будет в четверг😉
Ребята я не удержалась и запилила тест к уроку #фронтенд_html_урок2 😊 http://webinsidepro.tilda.ws/test-html-2
Привет ребята! Я сделала небольшую анкету для тех кто хотел бы обучаться со мной как с наставником, заполните пожалуйста кому актуально) https://forms.gle/1ReKLqj7hjCGbjgb6
Google Docs
Анкета веб-разработчика
Заполните анкету, чтобы я могла разработать максимально комфортный формат обучения для вас.
Спасибо что заполнили анкету! Я все учту😉 Сегодня приготовила для вас следующий блок статей👇
Поговорим о том зачем и как правильно использовать теги для разметки текста.
Задача верстальщика сделать разметку семантической, чтобы она несла смысл. Когда мы используем тег <h1> то показываем, что текст внутри это заголовок страницы, а не просто текст, написанный большими буквами.
Для разметки текста часто используют теги: <h1>-<h3>, <p>, <ul><li></li></ul>, <ol><li></li></ol>.
Для создания акцента используют тег <em>, а для выделения важного фрагмента <strong>.
В html также есть теги <b>, <i>, <u>, которые раньше использовали для стилизации текста, потому что браузеры плохо поддерживали CSS. Сейчас их не рекомендуется использовать.
Подробнее о семантической разметке текста читайте в статье.
Иногда в верстке текста нужны верхний и нижний индексы и спецсимволы.
Об остальных тегах, которые используют для форматирования текста, читайте в статье.
#фронтенд_html_урок3
Задача верстальщика сделать разметку семантической, чтобы она несла смысл. Когда мы используем тег <h1> то показываем, что текст внутри это заголовок страницы, а не просто текст, написанный большими буквами.
Для разметки текста часто используют теги: <h1>-<h3>, <p>, <ul><li></li></ul>, <ol><li></li></ol>.
Для создания акцента используют тег <em>, а для выделения важного фрагмента <strong>.
В html также есть теги <b>, <i>, <u>, которые раньше использовали для стилизации текста, потому что браузеры плохо поддерживали CSS. Сейчас их не рекомендуется использовать.
Подробнее о семантической разметке текста читайте в статье.
Иногда в верстке текста нужны верхний и нижний индексы и спецсимволы.
Об остальных тегах, которые используют для форматирования текста, читайте в статье.
#фронтенд_html_урок3
Напишите, пожалуйста, как вам такой формат?👆 Краткое описание в посте со ссылками на подробную информацию.
Сегодня поговорим о гиперссылках, главной фишке, благодаря которой работает Интернет.
Каждый ресурс в сети имеет уникальный адрес, URL, на который указывает ссылка. URL содержится в атрибуте href, <a href=”URL”></a>.
Есть тонкий момент в случае, когда элемент нужно сделать ссылкой.
<div><a><img><p></p></a></div> - верно
<a><video></video></a> - не верно
В старом стандарте HTML4 ссылки были строчными элементами и в них можно было заворачивать только строчные элементы. В новом стандарте HTML5 в ссылки можно заворачивать любые элементы, кроме интерактивных.
Видео о том, как правильно заворачивать блоки в ссылки.
Ссылки бывают абсолютными, ссылаются на другой сайт и относительными, работают в рамках одного сайта.
Также ссылка может быть якорем, указывать на отдельный элемент страницы. Чтобы сделать якорь задайте id элементу, на который укажет ссылка. В атрибут ссылки href добавьте #значение Id.
<div id=”top”></div>
<a href=”#top”>Я указываю на div</a>
Хороший тон использовать относительные адреса везде где возможно, это экономит ресурсы браузера. Делать текст ссылки понятным для пользователя. Ссылки с одинаковым названием не должны указывать на разные ресурсы.
Чтобы создать ссылку для обратной связи по электронной почте в атрибуте href пишут mailto.
<a href=”mailto:test@test.ru”></a> откроет почтовую программу и создаст пустое письмо для адресата test@test.ru.
Читайте подробнее о создании гиперссылок.
#фронтенд_html_урок4
Каждый ресурс в сети имеет уникальный адрес, URL, на который указывает ссылка. URL содержится в атрибуте href, <a href=”URL”></a>.
Есть тонкий момент в случае, когда элемент нужно сделать ссылкой.
<div><a><img><p></p></a></div> - верно
<a><video></video></a> - не верно
В старом стандарте HTML4 ссылки были строчными элементами и в них можно было заворачивать только строчные элементы. В новом стандарте HTML5 в ссылки можно заворачивать любые элементы, кроме интерактивных.
Видео о том, как правильно заворачивать блоки в ссылки.
Ссылки бывают абсолютными, ссылаются на другой сайт и относительными, работают в рамках одного сайта.
Также ссылка может быть якорем, указывать на отдельный элемент страницы. Чтобы сделать якорь задайте id элементу, на который укажет ссылка. В атрибут ссылки href добавьте #значение Id.
<div id=”top”></div>
<a href=”#top”>Я указываю на div</a>
Хороший тон использовать относительные адреса везде где возможно, это экономит ресурсы браузера. Делать текст ссылки понятным для пользователя. Ссылки с одинаковым названием не должны указывать на разные ресурсы.
Чтобы создать ссылку для обратной связи по электронной почте в атрибуте href пишут mailto.
<a href=”mailto:test@test.ru”></a> откроет почтовую программу и создаст пустое письмо для адресата test@test.ru.
Читайте подробнее о создании гиперссылок.
#фронтенд_html_урок4
YouTube
Ссылки вокруг блоков — HTML Шорты
Рассказываем, можно ли оборачивать ссылкой блочные элементы и как правильно писать код по Спецификации.
Запись на курс «HTML и CSS. Профессиональная вёрстка сайтов» — https://tml.io/09xl5
Полезные ссылки:
- Раньше в HTML 4 было нельзя — https://tml.io/5ato9…
Запись на курс «HTML и CSS. Профессиональная вёрстка сайтов» — https://tml.io/09xl5
Полезные ссылки:
- Раньше в HTML 4 было нельзя — https://tml.io/5ato9…
Структура сайта. Валидация html-документов.
Сегодня поговорим о том, как спланировать и проверить на валидность структуру сайта.
На 2012 год доля людей с нарушениями зрения, слабовидящие и люди с дальтонизмом, составляет 12-13% населения. Чтобы эти люди чувствовали себя комфортно на сайте, соблюдайте семантические правила разметки.
Для этого в HTML есть специальные теги:
Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, располагается внутри <main>.
Нижний колонтитул: <footer>.
Теги <div> и <span> не семантические, используйте их только в тех случаях когда семантические теги не уместны. Например, <div> можно использовать для создания корзины на сайте.
Подробнее о семантической разметке читайте в статье.
Писать семантическую и валидную разметку считается хорошим тоном. Но даже если верстальщик не соблюдает общепринятые правила, браузер исправит разметку, чтоб показать контент пользователю. Правда в этом случае результат, который увидит пользователь может сильно отличаться от предполагаемого.
Все иногда делают ошибки, поэтому перед публикацией прогоняйте код через валидатор.
Подробнее о работе с валидатором.
Распространенные ошибки в html-разметке.
Разбор ошибок.
Короткое видео о спецификациях, правилах написания разметки. #фронтенд_html_урок5
Сегодня поговорим о том, как спланировать и проверить на валидность структуру сайта.
На 2012 год доля людей с нарушениями зрения, слабовидящие и люди с дальтонизмом, составляет 12-13% населения. Чтобы эти люди чувствовали себя комфортно на сайте, соблюдайте семантические правила разметки.
Для этого в HTML есть специальные теги:
Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, располагается внутри <main>.
Нижний колонтитул: <footer>.
Теги <div> и <span> не семантические, используйте их только в тех случаях когда семантические теги не уместны. Например, <div> можно использовать для создания корзины на сайте.
Подробнее о семантической разметке читайте в статье.
Писать семантическую и валидную разметку считается хорошим тоном. Но даже если верстальщик не соблюдает общепринятые правила, браузер исправит разметку, чтоб показать контент пользователю. Правда в этом случае результат, который увидит пользователь может сильно отличаться от предполагаемого.
Все иногда делают ошибки, поэтому перед публикацией прогоняйте код через валидатор.
Подробнее о работе с валидатором.
Распространенные ошибки в html-разметке.
Разбор ошибок.
Короткое видео о спецификациях, правилах написания разметки. #фронтенд_html_урок5
MDN Web Docs
Структура документа и веб-сайта - Изучение веб-разработки | MDN
В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка…
Inside Pro | Елизавета К pinned «Привет ребята! Нас собралось уже больше 100 человек и пришло время наполнить этот канал смыслом😀 Я создала карту развития фронтенд-разработчика и буду выкладывать по ней бесплатные материалы для самообучения. Я придерживаюсь структурного и поэтапного подхода…»
Сегодня поговорим о важной составляющей сайтов, изображениях и работе с ними.
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6