![\"PurpleSchool](\"https:\/\/modenov.ru\/blog\/pictures\/modenov-cert-code-basics-purpleschool.jpg\")
\n![\"PurpleSchool](\"https:\/\/modenov.ru\/blog\/pictures\/modenov-cert-git-purpleschool.jpg\")
\n<\/div>\n<\/div>\nНедавно увлёкся веб-разработкой и решил с самого начала потихонечку идти по собственному роадмапу в этом направлении. В качестве основного источника знаний выбрал школу PurpleSchool<\/a>. В отличие от других российских онлайн-школ, PurpleSchool не тратит деньги на агрессивный маркетинг и бездумный набор учеников, а концентрируется на точечном обучении своих студентов фронтенду и бекенду.<\/p>\n Основатель и преподаватель школы — разработчик Антон Ларичев, и мне очень нравится, как он объясняет материал. Пока закончил два модуля и буду двигаться дальше.<\/p>\n Если вам тоже хочется развиваться в этом направлении — вот ссылка на курс<\/a>, который я сейчас сам прохожу.<\/p>\n",
"summary": "Рассказываю про школу онлайн образования PurpleSchool, в которой я сейчас прохожу курс фронтенд-разработчика.",
"date_published": "2024-08-29T18:39:48+03:00",
"date_modified": "2024-08-31T23:37:53+03:00",
"tags": [
"git",
"образование",
"разработка",
"сервисы",
"фронтенд"
],
"image": "https:\/\/modenov.ru\/blog\/pictures\/modenov-cert-code-basics-purpleschool.jpg",
"_date_published_rfc2822": "Thu, 29 Aug 2024 18:39:48 +0300",
"_rss_guid_is_permalink": "false",
"_rss_guid": "87",
"_e2_data": {
"is_favourite": false,
"links_required": [
"jquery\/jquery.js",
"fotorama\/fotorama.css",
"fotorama\/fotorama.js"
],
"og_images": [
"https:\/\/modenov.ru\/blog\/pictures\/modenov-cert-code-basics-purpleschool.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/modenov-cert-git-purpleschool.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/purpleschool.png",
"https:\/\/modenov.ru\/blog\/pictures\/git-logo.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/education.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/frontend.png",
"https:\/\/modenov.ru\/blog\/pictures\/2024-04-26-00-40-34-Nastroika-Yandeks.Diska.png"
]
}
},
{
"id": "83",
"url": "https:\/\/modenov.ru\/blog\/all\/display-flex\/",
"title": "Display: flex",
"content_html": " Продолжаю разбираться в дебрях CSS<\/a>, а заодно и пытаться пересказывать полученные знания в своём блоге (для себя и для интересующихся читателей).<\/i><\/p>\n Сегодня говорим про свойство display: flex<\/tt> .<\/p>\n display: flex<\/tt> — это свойство CSS, которое позволяет управлять расположением элементов внутри контейнера, превращая его в так называемый «флекс-контейнер». Давайте представим, что у нас есть коробка (контейнер) с игрушками (элементами). Display: flex<\/tt> дает нам инструменты, чтобы упорядочить эти игрушки в ряд, колонку или как-нибудь по-другому, как нам нужно.<\/p>\n Когда вы применяете display: flex<\/tt> к контейнеру, все его непосредственные дочерние элементы становятся flex-элементами. Это означает, что вы можете управлять их размером, порядком и выравниванием с помощью различных свойств Flexbox.<\/p>\n Основные свойства:<\/b><\/p>\n flex-direction<\/tt> — определяет направление, в котором располагаются flex-элементы (по горизонтали или вертикали). Простой пример применения флексбокса:<\/b><\/p>\n Пример с навигационным меню:<\/b><\/p>\n Объясняя читателям одну из самых непростых тем в CSS, я сам лучше закрепляю эти знания. <\/i><\/p>\n Свойство display<\/b> в CSS<\/a> определяет, как элемент отображается на веб-странице. Оно влияет на поведение элемента, его размеры, расположение и взаимодействие с другими элементами.<\/p>\n ✵ Строчным (inline)<\/b> — отображается как часть текста, занимает столько места, сколько нужно для его содержимого. Идеально для коротких фрагментов (слова, аббревиатуры, ссылки) или элементов, которые должны «плыть» в тексте, не создавая новых строк. В современной веб-разработке display<\/b> используется повсеместно:<\/p>\n ✵ структурирование контента: с помощью display: block <\/b> можно создавать разделы, блоки текста, заголовки и другие элементы, которые должны занимать всю ширину родительского элемента. Недавно я решил погрузиться в веб-разработку: хочу узнать о том, как работают интернет и сети, различные протоколы, веб-доступность, HTML, CSS, JavaScript, а также другие базовые инструменты, на которых сегодня работают совершенно все сайты в интернете. Эти знания помогут мне в своих личных проектах и работе.<\/p>\n Чтобы закреплять усвоенное лучше, я решил вести в своём блоге конспекты. Возможно, эти небольшие шпаргалки помогут не только мне, но и другим начинающим разработчикам.<\/p>\n Сегодня говорим о веб-доступности и о том, зачем она нужна.<\/p>\n Веб-доступность <\/b>(или accessibility<\/b>) — это подход к разработке веб-сайтов и приложений, который делает их удобными и доступными для всех пользователей, включая людей с ограниченными возможностями.<\/p>\n Веб-доступность не только улучшает пользовательский опыт для людей с ограниченными возможностями, но и делает сайт более удобным для всех пользователей. Это также может улучшить SEO, так как поисковые системы лучше понимают структурированный и семантически правильный контент.<\/p>\n ✵ Что такое веб-доступность и как научиться делать доступные сайты<\/a> Недавно я решил погрузиться в веб-разработку: хочу узнать о том, как работают интернет и сети, различные протоколы, веб-доступность, HTML, CSS, JavaScript, а также другие базовые инструменты, на которых сегодня работают совершенно все сайты в интернете. Эти знания помогут мне в своих личных проектах и работе.<\/p>\n Чтобы усвоенное закреплялось лучше, я решил писать конспекты в своём блоге. Возможно, эти небольшие шпаргалки помогут не только мне, но и другим начинающим разработчикам. Тексты пишу как сам, так и прибегая к чатам GPT (там, где требуются простые сухие определения либо код).<\/p>\n Начинаем с базы: TCP\/IP.<\/p>\n Протоколы TCP\/IP<\/b> — это основа интернета, которая позволяет компьютерам и другим устройствам обмениваться данными. Давайте разберем это на простом примере.<\/p>\n Представьте себе почтовую службу.<\/p>\n И как это работает вместе?<\/p>\n Представьте, что вы отправляете письмо другу. Вы пишете письмо (данные), кладете его в конверт и пишете адрес (IP). Почтальон (TCP) берет конверт, проверяет адрес и доставляет его вашему другу. Если письмо потеряется, почтальон попросит вас отправить его снова.<\/p>\n Ниже представлен листинг простейшего TCP-соединения на Python. Этот код включает сервер<\/b> и клиент<\/b>, которые могут обмениваться сообщениями.<\/p>\n Код сервера:<\/p>\n Код клиента:<\/p>\n ✺ TCP — Википедия<\/a> Решил пообщаться с ChatGPT и попросил составить для себя подробный план по обучению веб-разработке на русском и английском языках. И вот что у меня получилось.<\/p>\n Практически весь текст ниже — ответы чатбота. Свои промты я оформил курсивом. Активных ссылок на оставленные ресурсы и книги я, понятное дело, не оставляю, но все они без труда гуглятся в сети.<\/p>\n Промт<\/b>: Я хотел бы изучить программирование. Я абсолютный новичок. Моя цель — заниматься в роли frontend-разработчика. Я готов уделять 10 часов в неделю, чтобы освоить новый навык. Я предпочитаю читать и смотреть различные видео на русском и реже английском языках. Составь для меня пошаговую программу курса, включая все учебные ресурсы.<\/i><\/p>\n Конечно, я могу предложить вам пошаговый план для изучения программирования и подготовки к работе в сфере frontend-разработки. Ваше решение оставаться преимущественно на русскоязычных ресурсах облегчит процесс изучения. Вот пошаговая программа для вас:<\/p>\n Начните с освоения основ программирования. Это поможет вам понять базовые концепции, которые в будущем будут полезны при изучении фронтенд-технологий.<\/p>\n Перейдите к изучению основ веб-технологий, таких как HTML и CSS. Эти языки являются фундаментом фронтенд-разработки.<\/p>\n JavaScript является ключевым языком для фронтенд-разработки. Освойте его основы, чтобы начать создавать интерактивные веб-страницы.<\/p>\n Изучите библиотеки и фреймворки, которые используются во фронтенд-разработке для упрощения процесса создания веб-приложений.<\/p>\n Углубитесь в более сложные аспекты JavaScript, изучите ES6 и более новые стандарты.<\/p>\n Научитесь эффективно использовать инструменты разработчика браузера, чтобы отлаживать и оптимизировать свой код.<\/p>\n Изучите Git и GitHub для эффективного управления версиями вашего кода.<\/p>\n Начните создавать свои собственные маленькие проекты, чтобы применить полученные знания на практике.<\/p>\n Изучите более популярные фронтенд-фреймворки, такие как React или Angular.<\/p>\n Продолжайте создавать проекты, расширяя свой опыт, и собирайте свой личный портфолио для демонстрации потенциальным работодателям. Следуйте этому плану, и с течением времени вы сможете стать квалифицированным frontend-разработчиком. Помните, что практика и терпение играют ключевую роль в вашем успехе!<\/p>\n Заметив, что в списке много платных и довольно сомнительных ресурсов (к GeekBrains у меня доверия нет — это оценочное суждение), я попросил чат переписать список, используя только бесплатные ресурсы. Получилось, конечно, мощно. Изучайте официальную документацию, гайз!<\/p>\n Промт<\/b>: В твоём плане есть платные ресурсы, такие как GeekBrains и Udemy. Можешь переписать программу обучения, используя только свободно распространяемые материалы?<\/i><\/p>\n Конечно! Вот пересмотренная программа обучения, используя только свободно распространяемые ресурсы:<\/p>\n Изучение базовых концепций программирования.<\/p>\n Освоение HTML и CSS.<\/p>\n Освоение основ JavaScript.<\/p>\n Освоение более сложных аспектов JavaScript.<\/p>\n Изучение инструментов разработчика.<\/p>\n Освоение Git и GitHub.<\/p>\n Практика создания маленьких проектов: ваши собственные идеи и задачи, чтобы применять полученные знания.<\/p>\n Ознакомление с React.<\/p>\n Продолжайте создавать проекты и развивать свой личный портфолио.<\/p>\n Этот план обучения использует бесплатные ресурсы, которые позволят вам освоить необходимые навыки для работы в роли frontend-разработчика. Не забывайте практиковаться и создавать свои собственные проекты, чтобы закрепить знания на практике.<\/p>\n Ну и какое же изучение программирования без хороших книг? Отвечает ChatGPT.<\/p>\n Промт<\/b>: Можешь также написать список из самых полезных книг по веб-разработке?<\/i><\/p>\n Конечно, вот список нескольких полезных книг по веб-разработке, которые могут быть вам полезны:<\/p>\n Обратите внимание, что мир веб-разработки постоянно меняется, поэтому рекомендуется также следить за актуальными онлайн ресурсами и блогами, чтобы быть в курсе последних тенденций и технологий.<\/p>\n Вот такой диалог с чатом у меня получился. Сейчас я сам постигаю дебри веб-разработки и пишу свой собственный сайт самостоятельно и постоянно нахожусь в режиме обучения новым навыкам и поисках нужной мне информации. Лишним такой план точно не будет.<\/p>\n",
"summary": "Решил пообщаться с ChatGPT и попросил составить для себя подробный план по обучению веб-разработке на русском и английском языках. И вот что у меня получилось.",
"date_published": "2023-08-09T15:50:11+03:00",
"date_modified": "2024-08-29T18:40:28+03:00",
"tags": [
"chatgpt",
"образование",
"разработка",
"фронтенд"
],
"image": "https:\/\/modenov.ru\/blog\/pictures\/recursosprogramadores.png.jpg",
"_date_published_rfc2822": "Wed, 09 Aug 2023 15:50:11 +0300",
"_rss_guid_is_permalink": "false",
"_rss_guid": "40",
"_e2_data": {
"is_favourite": true,
"links_required": [],
"og_images": [
"https:\/\/modenov.ru\/blog\/pictures\/recursosprogramadores.png.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/razrabotka.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/luchshie-knigi-po-programmirovaniyu.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/education.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/frontend.png"
]
}
}
],
"_e2_version": 4199,
"_e2_ua_string": "Aegea 11.5 (v4199)"
}Мои области развития потихонечку, но ползут вперёд:<\/h2>\n
![\"PurpleSchool](\"https:\/\/modenov.ru\/blog\/pictures\/purpleschool.png\")
\n<\/div>\n![\"Display:](\"https:\/\/modenov.ru\/blog\/pictures\/Flex-justify-content.png\")
\n<\/div>\nГде применяется?<\/h2>\n
\n
Как это работает?<\/h2>\n
\nrow<\/tt> (по умолчанию) — элементы располагаются в строку.
\ncolumn<\/tt> — элементы располагаются в столбик.
\njustify-content<\/tt> — определяет, как элементы распределяются по основной оси (горизонтально или вертикально).
\nflex-start<\/tt> — элементы выравниваются по началу.
\nflex-end<\/tt> — элементы выравниваются по концу.
\ncenter<\/tt> — элементы выравниваются по центру.
\nspace-between<\/tt> — элементы распределяются с равными промежутками между ними.
\nspace-around<\/tt> — элементы распределяются с равными промежутками вокруг них.
\nalign-items<\/tt> — определяет, как элементы выравниваются по поперечной оси (перпендикулярно основной оси).
\nflex-start<\/tt> — элементы выравниваются по началу.
\nflex-end<\/tt> — элементы выравниваются по концу.
\ncenter<\/tt> — элементы выравниваются по центру.
\nbaseline<\/tt> — элементы выравниваются по базовой линии текста.
\nstretch<\/tt> — элементы растягиваются, чтобы заполнить контейнер.<\/p>\nПримеры кода:<\/h2>\n
<!DOCTYPE html>\n<html lang="ru">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Flexbox Пример<\/title>\n <style>\n .container {\n display: flex; \/* Включаем Flexbox *\/\n flex-direction: row; \/* Элементы располагаются в строку *\/\n justify-content: space-between; \/* Равные промежутки между элементами *\/\n align-items: center; \/* Выравнивание по центру по вертикали *\/\n height: 100px; \/* Высота контейнера *\/\n background-color: #f0f0f0; \/* Цвет фона контейнера *\/\n padding: 10px; \/* Отступы внутри контейнера *\/\n }\n\n .item {\n background-color: #4CAF50; \/* Цвет фона элементов *\/\n color: white; \/* Цвет текста *\/\n padding: 20px; \/* Отступы внутри элементов *\/\n border-radius: 5px; \/* Закругленные углы *\/\n }\n <\/style>\n<\/head>\n<body>\n\n<div class="container">\n <div class="item">Элемент 1<\/div>\n <div class="item">Элемент 2<\/div>\n <div class="item">Элемент 3<\/div>\n<\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n
<!DOCTYPE html>\n<html lang="ru">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Flexbox Menu<\/title>\n <style>\n .menu {\n display: flex; \/* Включаем flexbox *\/\n list-style-type: none;\n padding: 0;\n margin: 0;\n }\n .menu li {\n margin-right: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <nav>\n <ul class="menu">\n <li>Главная<\/li>\n <li>О нас<\/li>\n <li>Услуги<\/li>\n <li>Контакты<\/li>\n <\/ul>\n <\/nav>\n<\/body>\n<\/html><\/code><\/pre>\n
![\"Свойство](\"https:\/\/modenov.ru\/blog\/pictures\/css-display-block-vs-inline-block-2588544921.png\")
\n<\/div>\nВ зависимости от значения, элемент может быть:<\/h2>\n
\n✵ Блочным (block)<\/b> — отображается как отдельный блок, занимает всю ширину родительского элемента, имеет отступ сверху и снизу. Данное свойство балансирует макет, формирует блоки контента (заголовки, параграфы, кнопки) и позволяет применять фиксированную ширину и высоту.
\n✵ Строчно-блочным (inline-block)<\/b> — сочетает в себе свойства inline<\/b> и block<\/b>, отображается как часть текста, но может иметь ширину и высоту, а также отступы. Например, идеально подходит для вёрстки навигационных меню, карточек, элементов с фиксированной формой внутри динамичного контента.<\/p>\nПрименение<\/h2>\n
\n✵ оформление элементов: display: inline-block<\/b> позволяет размещать элементы в строке, но при этом задавать им ширину и высоту, что позволяет создавать более сложные макеты.
\n✵ скрытие элементов: с помощью display: none<\/b> можно скрывать элементы с страницы, что удобно для управления отображением контента.
\n✵ создание гибких макетов: display<\/b> в сочетании с другими свойствами CSS позволяет создавать сложные макеты с адаптивным отображением элементов на разных устройствах.<\/p>\nПримеры:<\/h2>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Пример display<\/title>\n <style>\n .inline {\n display: inline;\n background-color: lightblue;\n padding: 10px;\n }\n\n .block {\n display: block;\n background-color: lightgreen;\n padding: 10px;\n margin-bottom: 10px;\n }\n\n .inline-block {\n display: inline-block;\n background-color: lightcoral;\n padding: 10px;\n width: 100px;\n height: 50px;\n }\n <\/style>\n<\/head>\n<body>\n <div class="inline">Inline элемент<\/div>\n <div class="inline">Inline элемент<\/div>\n <div class="block">Block элемент<\/div>\n <div class="block">Block элемент<\/div>\n <div class="inline-block">Inline-block элемент<\/div>\n <div class="inline-block">Inline-block элемент<\/div>\n<\/body>\n<\/html><\/code><\/pre>",
"summary": "Рассказываю про важное CSS свойство display и его значения — inline, block, inline-block. Блог Владимира Моденова. Всё про фронтенд-разработку и не только.",
"date_published": "2024-08-24T23:09:12+03:00",
"date_modified": "2024-08-26T23:40:59+03:00",
"tags": [
"css",
"образование",
"разработка",
"фронтенд"
],
"image": "https:\/\/modenov.ru\/blog\/pictures\/css-display-block-vs-inline-block-2588544921.png",
"_date_published_rfc2822": "Sat, 24 Aug 2024 23:09:12 +0300",
"_rss_guid_is_permalink": "false",
"_rss_guid": "82",
"_e2_data": {
"is_favourite": false,
"links_required": [
"highlight\/highlight.js",
"highlight\/highlight.css"
],
"og_images": [
"https:\/\/modenov.ru\/blog\/pictures\/css-display-block-vs-inline-block-2588544921.png",
"https:\/\/modenov.ru\/blog\/pictures\/CSS-Logo.png",
"https:\/\/modenov.ru\/blog\/pictures\/education.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/frontend.png"
]
}
},
{
"id": "79",
"url": "https:\/\/modenov.ru\/blog\/all\/chto-takoe-veb-dostupnost\/",
"title": "Что такое веб-доступность?",
"content_html": "![\"Что](\"https:\/\/modenov.ru\/blog\/pictures\/web-accessibility.jpg\")
\n<\/div>\nОсновные понятия веб-доступности:<\/h2>\n
\n
\n
\n
\n
Основные задачи веб-доступности:<\/h2>\n
\n
\n
\n
\n
\n
Почему это важно?<\/h2>\n
Дополнительные материалы для изучения:<\/h2>\n
\n✵ Доступность — Doka Guide<\/a>
\n✵ Доступность — Result School<\/a>
\n✵ Доступность от Google<\/a>
\n✵ ТОП-5 проблем с доступностью, которые чаще всего игнорируют<\/a>
\n✵ Основы веба, которые должен знать начинающий разработчик<\/a>
\n✵ Веб-разработчик: кто это, что делает, сколько зарабатывает и как им стать<\/a>
\n✵ Веб-технологии для разработчиков | MDN<\/a><\/p>\n",
"summary": "Веб-доступность — это подход к разработке веб-сайтов и приложений, который делает их удобными и доступными для всех пользователей. Сегодня говорим о веб-доступности подробнее.",
"date_published": "2024-08-17T15:37:59+03:00",
"date_modified": "2024-08-26T23:41:46+03:00",
"tags": [
"css",
"html",
"образование",
"разработка",
"фронтенд"
],
"image": "https:\/\/modenov.ru\/blog\/pictures\/web-accessibility.jpg",
"_date_published_rfc2822": "Sat, 17 Aug 2024 15:37:59 +0300",
"_rss_guid_is_permalink": "false",
"_rss_guid": "79",
"_e2_data": {
"is_favourite": true,
"links_required": [],
"og_images": [
"https:\/\/modenov.ru\/blog\/pictures\/web-accessibility.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/CSS-Logo.png",
"https:\/\/modenov.ru\/blog\/pictures\/html5-logo.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/education.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/frontend.png"
]
}
},
{
"id": "78",
"url": "https:\/\/modenov.ru\/blog\/all\/kak-rabotayut-protokoly-tcp-ip\/",
"title": "Как работают протоколы TCP\/IP? Если совсем по-простому",
"content_html": "![\"Как](\"https:\/\/modenov.ru\/blog\/pictures\/TCP-IP-Modenov-Blog.jpg\")
\n<\/div>\nБаза TCP\/IP<\/h2>\n
\n
\n
\n
Пример простейшего TCP-соединения<\/h2>\n
import socket\n\n# Настройки сервера\nHOST = '127.0.0.1' # Локальный хост\nPORT = 65432 # Порт для прослушивания\n\nwith socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:\n s.bind((HOST, PORT))\n s.listen()\n print(f"Сервер запущен на {HOST}:{PORT}")\n conn, addr = s.accept()\n with conn:\n print(f"Подключение от {addr}")\n while True:\n data = conn.recv(1024)\n if not data:\n break\n print(f"Получено: {data.decode()}")\n conn.sendall(data)<\/code><\/pre>import socket\n\n# Настройки клиента\nHOST = '127.0.0.1' # Серверный хост\nPORT = 65432 # Порт сервера\n\nwith socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:\n s.connect((HOST, PORT))\n s.sendall(b'Привет, сервер!')\n data = s.recv(1024)\n\nprint(f"Получено от сервера: {data.decode()}")<\/code><\/pre>Как работает этот код?<\/h3>\n
\n
Дополнительный материал для изучения темы:<\/h2>\n
\n✺ Что такое TCP\/IP и как работает этот протокол<\/a>
\n✺ Что такое TCP\/IP — как работает, как настроить на Windows, MacOS<\/a>
\n✺ Что такое TCP\/IP: Объясняем на пальцах — видео<\/a>
\n✺ TCP\/IP: что это и зачем нужно — видео<\/a>
\n✺ Стек протоколов TCP\/IP. Особенности технологии и многоуровневая модель — видео<\/a>
\n✺ Как настроить протокол TCP\/IP: пошаговая инструкция для начинающих<\/a>
\n✺ Протоколы семейства TCP\/IP. Теория и практика \/ Хабр<\/a>
\n✺ TCP: Transmission Control Protocol<\/a>
\n✺ Модель TCP\/IP: что такое уровни и протоколы? Стек TCP\/IP<\/a><\/p>\n",
"summary": "Протоколы TCP\/IP — это основа интернета, которая позволяет компьютерам и другим устройствам обмениваться данными. В этой статье мы разберём работу этих протоколов на простом примере.",
"date_published": "2024-08-17T15:15:47+03:00",
"date_modified": "2024-08-17T15:15:22+03:00",
"tags": [
"образование",
"разработка",
"фронтенд"
],
"image": "https:\/\/modenov.ru\/blog\/pictures\/TCP-IP-Modenov-Blog.jpg",
"_date_published_rfc2822": "Sat, 17 Aug 2024 15:15:47 +0300",
"_rss_guid_is_permalink": "false",
"_rss_guid": "78",
"_e2_data": {
"is_favourite": true,
"links_required": [
"highlight\/highlight.js",
"highlight\/highlight.css"
],
"og_images": [
"https:\/\/modenov.ru\/blog\/pictures\/TCP-IP-Modenov-Blog.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/education.jpg",
"https:\/\/modenov.ru\/blog\/pictures\/frontend.png"
]
}
},
{
"id": "40",
"url": "https:\/\/modenov.ru\/blog\/all\/kak-obuchitsya-frontendu-s-nulya-otvechaet-chatgpt\/",
"title": "Как обучиться фронтенду с нуля? Отвечает ChatGPT",
"content_html": "![\"Как](\"https:\/\/modenov.ru\/blog\/pictures\/recursosprogramadores.png.jpg\")
\n<\/div>\nВерсия с платными ресурсами<\/h2>\n
Шаг 1: Основы программирования<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 2: Введение в веб-технологии<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 3: Основы JavaScript<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 4: Работа с библиотеками и фреймворками<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 5: Глубже в JavaScript и современные стандарты<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 6: Работа с инструментами разработчика и отладка<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 7: Работа с системами контроля версий<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 8: Создание своих проектов<\/h2>\n
Шаг 9: Углубление в фреймворки<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 10: Практика и портфолио<\/h2>\n
***<\/h2>\n
![\"\"](\"https:\/\/modenov.ru\/blog\/pictures\/razrabotka.jpg\")
\n<\/div>\nВерсия с бесплатными ресурсами<\/h2>\n
Шаг 1: Основы программирования<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 2: Введение в веб-технологии<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 3: Основы JavaScript<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 4: Работа с библиотеками и фреймворками<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 5: Глубже в JavaScript и современные стандарты<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 6: Работа с инструментами разработчика и отладка<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 7: Работа с системами контроля версий<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 8: Создание своих проектов<\/h2>\n
Шаг 9: Углубление в фреймворки<\/h2>\n
Ресурсы:<\/h3>\n
\n
Шаг 10: Практика и портфолио<\/h2>\n
***<\/h2>\n
![\"\"](\"https:\/\/modenov.ru\/blog\/pictures\/luchshie-knigi-po-programmirovaniyu.jpg\")
\n<\/div>\nКниги<\/h2>\n
\n
\nЭта книга предоставляет хороший вводный уровень знаний о HTML и CSS, основы дизайна и верстки веб-сайтов.<\/li>\n<\/ul>\n\n
\nЭта книга более глубоко рассматривает JavaScript, его принципы и концепции. Отлично подойдет для углубленного изучения языка.<\/li>\n<\/ul>\n\n
\nЕсли вы хотите улучшить свои навыки в CSS, эта книга предоставляет множество техник и советов для более эффективной и продвинутой работы с каскадными таблицами стилей.<\/li>\n<\/ul>\n\n
\nЕсли вы хотите погрузиться в мир React, данная книга предоставляет вводный уровень знаний и практические примеры.<\/li>\n<\/ul>\n\n
\nЭта книга доступна онлайн и предоставляет уникальный подход к изучению JavaScript через интересные проекты и задачи.<\/li>\n<\/ul>\n\n
\nЭто отличное руководство для начинающих веб-разработчиков, покрывающее все аспекты веб-дизайна и разработки.<\/li>\n<\/ul>\n\n
\nСерия книг, которая углубленно рассматривает различные аспекты JavaScript, помогая вам освоить язык более глубоко.<\/li>\n<\/ul>\n\n
\nЭта книга поможет вам понять, как создавать веб-сайты, соблюдая современные стандарты и методы, которые улучшают доступность и производительность.<\/li>\n<\/ul>\n\n
\nХотя эта книга не напрямую связана с веб-разработкой, она предоставляет множество ценных советов и практик, которые могут помочь вам стать более эффективным разработчиком.<\/li>\n<\/ul>\n\n
\nЭта книга рассматривает методы создания адаптивных веб-сайтов, которые хорошо выглядят на разных устройствах и разрешениях экрана.<\/li>\n<\/ul>\n***<\/h2>\n