HTML, CSS, JavaScript: где и как учиться веб-разработке

Что почитать

HTML и CSS разработка и создание веб-сайтов. Джон Дакетт

JavaScript и jQuery интерактивная веб-разработка. Джон Дакетт

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

freeCodeCamp

Здесь описаны, как базовые концепции так и фреймворки JS. Сайт бесплатный, но только на английском, так что знание языка обязательно. 

JavaScript.ru

Здесь собрана подробная  информация об JS, а также представлены примеры, благодаря которым учиться можно намного быстрее.

htmlbook.ru

Если у вы не знаете или не помните определённые теги, которые вам нужно использовать при верстке, вы всегда можете использовать данный сайт.

Здесь есть все теги и их подробное описание, так что вы точно не запутаетесь. 

Где поучиться

Курсов, где вас могут научить верстке также немало, но я решил подобрать во-первых бесплатные, во-вторых максимально хорошие курсы. Единственное, если вам понадобится сертификат о прохождении курса, то придётся заплатить. 

Coursera

HTML, CSS, and JavaScript for Web Developers

Курс для начинающих, которые знают английский язык и хотят изучить комплексно HTML, JavaScript и CSS. Преподаватели — специалисты из университета Johns Hopkins University в США.

Web Design for Everybody: Basic of Web Development & Coding

Базовый курс от University of Michigan. Подойдёт даже тем, кто раньше никогда не имел дела с разработкой. На английском языке. 

Stepik

Веб-разработка для начинающих: HTML и CSS

Курс на русском языке от РЭУ им. Плеханова. Он также создан для людей, которые никогда раньше не программировали. 

JavaScript for Beginners

Вводный курс на английском языке. Для новичков!

Introduction to JavaScript and React

Тут научат JavaScript и расскажут о библиотеке React. 

Фото на обложке: Unsplash

Frontend разработчик на HTML, CSS и JavaScript

Этот курс направлен на обучение созданию сайтов и программированию на языке JavaScript, весь материал подносится простым языком. Вы получите много полезных материалов и мы вместе будем применять изученное на практике создавая интересные проекты шаг за шагом.

Для кого подойдет этот курс?

• Если вы ничего не знаете про создание сайтов, но хотите начать

• Если вы новичок в html/css, хотите быстро их освоить и начать применять в работе

• Если вы хотите начать зарабатывать в области веб-разработки и вам нужен начальный толчок

Что в этом курсе?

Мы с вами пройдем путь от установки своего первого редактора кода до создания сайтов. Мы будем изучать теоретическую часть и сразу же применять её на практике. Все ссылки на ресурсы, дополнительные материалы, шпаргалки и готовые фрагменты кода будут предоставлены внутри курса.

На все вопросы внутри курса отвечаю лично в разделе «Сообщения». Так же есть телеграм канал для вопросов и обсуждений не только по данному курсу. Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования.

• мы изучим два языка HTML5 и CSS3 которые необходимы для создания любого сайта

• мы научимся работать с графическим редактором Photoshop в контексте верстки

• мы узнаем основы программирования на языке JavaScript и изучим более крутые возможности языка чем базовые

• мы научимся работать с фреймворком Bootstrap 5 и создавать мобильную адаптацию сайтов и приложений

• мы научимся работать с системой контроля версий Git и добавлять свой код в удаленные репозитории на GitHub

• мы изучим фреймворк Vue. js и создадим свою игру используя изученные ранее языки и технологии

• мы научимся автоматизировать процессы при помощи планировщика задач Gulp

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

В виде бонуса будет предоставлен реальный макет для самостоятельного закрепления полученных знаний, а так же шпаргалка по JavaScript и много полезных ссылок на онлайн ресурсы.

Почему стоит начать обучение сейчас?

Создание сайтов (верстка) — очень востребованный навык, который хорошо оплачивается. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках.

Статистика курса:

• 11 глав, в которых вы научитесь работать с HTML, CSS, JavaScript, Git, GitHub, Bootstrap, Vue, Gulp

• всего 163 урока, 32 из которых доступны бесплатно

• общая продолжительность видео уроков 35,5 часов

• тестовых вопросов по изученным темам 71

• 57 ресурсов для скачивания

• много домашних заданий и вся теория закрепляется на практике на наглядных примерах

• этот курс содержит в себе все материалы 6-ти разных курсов

Работа с HTML и CSS с помощью Javascript. Вводное видео.

Это небольшое обзорное видео курса «Javascript. Работа с HTML и CSS.».

Язык Javascript имеет мощные средства для того, чтобы работать с такими технологиями как HTML и CSS. Это становиться возможным благодаря тому, что Javascript взаимодействует с так называем DOM (Document Object Model) деревом веб-страницы.  

Подробнее об этом взаимодействии Javascript и DOM, мы и будем говорить в этом курсе.

Для начала, давайте попробуем ответить на вопрос, а для чего это нам нужно. 

Ответ здесь довольно простой. Главная задача для чего это делается — это автоматизация. 

+ С помощью Javascript мы можем менять содержимое и внешний вид элементов в зависимости от каких-то условий, которые образовались на странице.

Пользователь кликнул по какому-то элементу на веб-странице и этот элемент поменял свое оформление.

Пользователь навел курсор мыши в определенный участок экрана и этот участок поменял свое оформление.

Таких ситуаций может быть очень много и Javascript позволяет решать подобные задачи.

+ С помощью Javascript можно выполнять какие-то действия, определенное количество раз и в определенной последовательности с элементами HTML и CSS. 

+ Мы можем производить какие-то расчеты и. т.д.

Самая главная цель, зачем работать с HTML и CSS с помощью Javascript — это автоматизация.

В видео выше вы можете посмотреть несколько примеров того, как Javascript может взаимодействовать с HTML и CSS. К примеру, это может быть 3D-карусель картинок, калькулятор для сайта, который рассчитывает какие-то параметры, аккордеоны, меню, и.т.д.

Задача этого курса — научиться базовым приемам взаимодействия с HTML и CSS с помощью Javascript. 

Мы будем учиться как выбирать элементы, как добавлять какие-то элементы на веб-страницу с помощью Javascript, как удалять и изменять эти элементы и.т.д.

Напишите в комментариях примеры ситуаций, когда вам может понадобиться работа с DOM в Javascript.

Готовим базу знаний для новой категории навыков, которые нужны веб-программисту. Как это организую я, можно посмотреть здесь

путей к файлам HTML

---

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

---

Примеры путей к файлам

Путь	Описание
	Файл «picture.jpg» находится в той же папке, что и текущая страница
	Файл «picture.jpg» находится в папке images в текущей папке
	Файл «picture.jpg» находится в папке с изображениями в корне текущей сети
	Файл «picture.jpg» находится в папке на один уровень выше текущей папки

---

Пути к файлам HTML

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Пути к файлам используются при ссылке на внешние файлы, например:

• Веб-страницы
• Изображения
• Таблицы стилей
• JavaScripts

---

Абсолютные пути к файлам

Абсолютный путь к файлу — это полный URL-адрес файла:

Пример

w3schools.com/images/picture.jpg» alt=»Гора»>

Попробуйте сами »

Тег описан в главе: HTML-изображения.

---

Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

В следующем примере путь к файлу указывает на файл в папке изображений, расположенной в корне текущей сети:

В следующем примере путь к файлу указывает на файл в папке images, расположенной в текущая папка:

В следующем примере путь к файлу указывает на файл в папке images, расположенной в папка на один уровень выше текущей папки:

---

Передовая практика

Рекомендуется использовать относительные пути к файлам (если это возможно).

При использовании относительных путей к файлам ваши веб-страницы не будут привязаны к вашему текущему базовый URL. Все ссылки будут работать как на вашем собственном компьютере (localhost), так и на ваше текущее общественное достояние и ваши будущие общедоступные домены.

Объяснение HTML, CSS и JavaScript

HTML, CSS и JavaScript — самые важные инструменты в вашем арсенале для всех ваших выходок в веб-дизайне. Вместо того, чтобы конкурировать, они дополняют и усиливают друг друга, и их сила возрастает, когда они объединяются — как Интернет-рейнджеры.

JavaScript оживляет HTML, CSS делает HTML красивым, а HTML дает JavaScript и CSS их структуру на веб-странице. Здесь мы рассмотрим основные различия между HTML, CSS и JavaScript как языками программирования.

Когда они объединяют силы, их невозможно остановить — могучие рейнджеры Интернета.

Что такое HTML, CSS и JavaScript?

Вот TL;DR, смешанный с отсылкой к Франкенштейну, если вам это нравится.

Представьте, что вы строите собственную версию монстра Франкенштейна.

Вам нужны кости (структура), кожа (эстетика) и вам нужно оживить их (интерактивность).

Вот как вы создаете веб-страницу:

HTML

HTML составляет скелет и структуру этой веб-страницы и почти любой другой веб-страницы, которую вы когда-либо посещали. Это язык разметки, который «размечает» и формирует основу для онлайн-контента, создавая структуру сайта для понимания веб-браузером.

HTML, или язык гипертекстовой разметки, был впервые предложен и опубликован в 1993 году, хотя его корни восходят к предложениям сэра Тима Бернерса-Ли в 1989 году для интернет-гипертекстовой системы.Он разработан WHATWG, и в настоящее время используется последняя версия HTML5.

УСБ

В то время как HTML составляет структуру или кости сайта, CSS добавляет скин — эстетику, которую вы видите и перемещаетесь. CSS на веб-странице оформляет ее и делает ее более привлекательной для посетителя, читающего страницу.

CSS, или каскадные таблицы стилей, формируют HTML и влияют на то, как он отображается посетителю веб-сайта. Эти формы стилей включают цвет шрифта, цвет фона, радиус границы (закругленные углы блоков), положение столбцов, оттенок, непрозрачность и разделение.Новые функции CSS даже позволяют использовать анимацию, зазоры flexbox и гораздо более адаптивный дизайн.

JavaScript

JavaScript (JS) — еще один ключевой язык для дизайна веб-страниц, который вставляет динамический текст в HTML на стороне клиента.

Это язык сценариев, а не язык разметки, и он был впервые выпущен через два года после HTML в 1995 году. Он был разработан Бренданом Эйхом из Netscape, ныне несуществующего веб-браузера. JavaScript поддерживается ECMA, и по состоянию на 2021 год активна 12-я версия ECMA.

Три основных языка, используемых при разработке веб-страниц, — это HTML, CSS и JavaScript. Всего:

HTML обеспечивает структуру, CSS обеспечивает представление и форматирование, а JavaScript делает элементы динамичными и управляет их поведением.

HTML, CSS и JavaScript: что они делают?

HTML определяет структуру веб-страниц, используя каждый отдельный элемент, а также может влиять на шрифт, цвет, гиперссылки и изображения. Файлы HTML имеют либо .html или .htm расширения при сохранении.

Вы должны использовать HTML, чтобы сообщить браузеру, какой контент на вашем сайте является заголовком, какие ваши заголовки h3 и h4, а также любые изображения или таблицы, которые есть на вашей веб-странице.

CSS вставляется в HTML с помощью элемента