Обучение html 5
ТОП-50 Лучших Курсов по Вёрстке на HTML и CSS для Начинающих
А ты знал, что, по данным сайта TRUD.COM, верстальщики HTML и CSS зарабатывают 50 тысяч рублей в месяц? Это в полтора раза больше средней зарплаты в России! Даже мой батя, который сутками пашет на заводе и то меньше получает.
То есть, освоив профессию верстальщика, ты сможешь зарабатывать немало денег. Вопрос только в том, как её освоить.
А ответ прост — с помощью платных и бесплатных курсов по HTML и CSS (вдобавок, думаю, можно припихнуть сюда также JavaScript и PHP).
О них я и расскажу в этой статье.
Сначала о бесплатных курсах, потому что знаю, как тебе не хочется тратить лишние деньги. А потом о платных тренингах и программах.
Итак. Без лишних предисловий… Полетели!
Бесплатные курсы по вёрстке на HTML и CSS —ТОП-30 лучших
№1. HTML/CSS от Beonmax
Кто проводит: Beonmax.
Формат: видеоуроки + интерактивные упражнения + домашние задания.
Сколько длится: 31 видеурок = 5 часов.
Что ты узнаешь из курса:
- Какие программы и инструменты надо использовать для вёрстки.
- Какие теги HTML существуют.
- Основы синтаксиса CSS.
- Как создавать меню, хедер, футер, сайдбар и многое другое.
№2. Интерактивный курс создания сайтов HTML и CSS с нуля (с сертификатом об окончании)
Кто проводит: Fructcode.
Формат: видеоуроки + интерактивные упражнения + домашние задания.
Сколько длится: 6 часов.
Стоимость: часть курса бесплатна, другая часть доступна после оформления недорогой подписки.
Что ты узнаешь из курса:
- Как пользоваться html-тегами div, span, p, ul, li и другими.
- Для чего нужен CSS (каскадные таблицы стилей).
- Как использовать css-свойства margin, position, padding, color, background и другие.
- Что такое адаптивная вёрстка.
- Как сделать вёрстку сайта.
- Как пользоваться инструментами разработчика в браузере Google Chrome.
- Что такое viewport и как его использовать.
- Как создать раздел с комментариями на сайте.
- Как встроить видео в html-страницу.
- Как изменить вёрстку сайта в браузере.
- Как связать html-страницы между собой.
- Как сверстать меню на сайте.
№3. Основы HTML и CSS
Кто проводит: онлайн-университет интернет-профессий «Нетология».
Формат: онлайн-вебинары 2 раза в неделю.
Сколько длится: 2 недели.
Что ты узнаешь из курса:
- Как вносить правки в HTML-код страницы и верстать текстовые блоки.
- Как менять оформление и стиль элементов сайта.
- Как профессиональные верстальщики работают над проектами.
№4. Курсы от HTML Academy
Помню сам проходил эти курсы. Целую неделю по 3-4 часа в день сидел за бесплатными уроками от инструктора Кекса.
Кто проводит: HTML Academy, на мой взгляд, её сайт — лучшее место для обучения основам вёрстки.
Формат: интерактивные уроки с практическими заданиями.
Сколько длится: зависит от твоей скорости и мотивации.
Стоимость: большая часть курсов бесплатна.
Что ты узнаешь из курса:
- Основы HTML5.
- Базовое представление о CSS3.
- Основы JavaScript.
- Основы PHP.
№5. Курсы на Udemy
Кто проводит: разные преподаватели со всего мира.
Формат: видеоуроки + практические задания + тесты.
Сколько длится: зависит от курса и программы обучения, которую составил автор.
Стоимость: есть бесплатные курсы, есть платные.
№6. Курсы на CodeAcademy
Кто проводит: разные преподаватели (в основном на английском языке, поэтому, если у тебя с ним туговато, лучше читай дальше).
Формат: интерактивные уроки, результат виден сразу же прямо в браузере.
Сколько длится: в зависимости от твоих способностей и наличия свободного времени.
№7. Бесплатный курс Евгения Попова по HTML для новичков
О нём ходят очень противоречивые слухи. Некоторые говорят, что Евгений обучает людей к чертям устаревшим знаниям. Другие думают, что для ознакомления сойдёт.
Формат: 33 видеоурока.
Сколько длится: всё зависит от твоих сил и скорости.
Что ты узнаешь из курса:
- Понятие тега.
- Как создавать каркас страниц.
- Как создавать параграфы и заголовки.
- Как создавать списки.
- Как создавать атрибуты.
- Как ставить ссылки.
- Как делать красивые таблицы.
- Как красиво оформлять текст.
- Как создавать поля форм, радиокнопки и чекбоксы.
- И т. п.
№8. Бесплатный курс Евгения Попова по CSS
Формат: 45 видеоуроков.
Сколько длится: всё зависит от твоих сил и скорости.
Что ты узнаешь из курса:
- Принципы работы CSS.
- Как подключать 3 базовых селектора.
- Что такое групповые селекторы.
- Что такое селекторы потомков.
- Что такое псевдоселекторы ссылок.
- Какие бывают семейства шрифтов.
- Как выравнивать текст.
- Как задавать высоту строки.
- Как делать сокращенную запись.
- Как делать рамки.
- Как работать со списками.
- Что такое наследование.
- Каскадность и приоритетность.
- Блочная модель, margin и padding.
- Ширина и высота блока, выравнивание.
- Конфликты полей.
- Блочные и встроенные элементы.
- Фоновый цвет и изображение.
- Повтор фонового изображения.
- Позиционирование фонового изображения.
- Фиксация фона.
- Краткая запись фоновых свойств.
- Как делать таблицы.
- Как создавать простой каркас на основе float.
- Что такое чистка обтекания.
- Колонки одной высоты.
- Позиционирование.
- Абсолютное позиционирование.
- Относительное позиционирование.
- Фиксированное позиционирование.
- Z-индексы.
- Видимость элементов.
- Максимальная и минимальная ширина сайта.
- Два способа подключения стилей
- Что такое наследование ненаследуемых свойств.
№9. Курс HTML для начинающих
Кто проводит: Артём Ивашкевич, программист компании Lamoda.
Формат: пошаговые статьи-уроки.
Сколько длится: 55 уроков.
Какие уроки есть в курсе:
- Создаём свою первую HTML-страницу.
- Теги как основа HTML-страницы.
- Тег doctype: указываем версию HTML.
- Из чего должна состоять любая страница в HTML.
- Заголовок HTML-страницы.
- Кодировка HTML-страницы.
- Ключевые слова (кейворды, keywords).
- Тег description: краткое описание страницы.
- Комментарии в HTML.
- Подключение CSS-стилей к HTML.
- Подключение скриптов JavaScript в HTML.
- Итог второго уровня курса по HTML.
- Разметка текста.
- Делаем абзацы в HTML.
- Делаем заголовки в HTML.
- Маркированные списки в HTML.
- Нумерованный список в HTML: тег ol.
- Делаем вложенный список в HTML.
- Выделяем важное жирным шрифтом.
- Курсив в HTML: теги em и i.
- Переносы и разделители в HTML: теги br и hr.
- Используем цитаты в HTML.
- Верхние и нижние индексы: оформляем формулы.
- Выводим текст как есть: тег pre.
- Учимся делать ссылки в HTML.
- Что такое абсолютные и относительные ссылки.
- Делаем ссылку на файл.
- Ссылка с якорем.
- Всплывающая подсказка для ссылок.
- Как вставлять картинки в HTML.
- Делаем картинку ссылкой.
- Описание картинки в HTML.
- Создаём таблицу в HTML: тег table.
- Делаем границы для таблицы в HTML.
- Горизонтальные и вертикальные границы в таблице HTML.
- Отступы в таблицах.
- Название таблицы в HTML.
- Ячейки-заголовки в таблице HTML.
- Объединение ячеек в таблицах.
- Выравниваем текст в таблице HTML.
- Способы выравнивания таблицы по центру в HTML.
- Учимся изменять цвет таблицы в HTML.
- Изменяем размер таблицы в HTML.
- Учимся создавать формы в HTML.
- Как задать значение по умолчанию для поля в форме.
- Как правильно сделать подписи к полям ввода.
- Создаём форму авторизации на HTML.
- Многострочное поле ввода: тег textarea.
- Поле-галочка в HTML.
- Поле-переключатель в форме HTML.
- Делаем раскрывающийся список в HTML.
- Форма для загрузки файлов.
- Используем скрытое поле в форме.
- Табличная вёрстка HTML-страничек. Прототип сайта.
- Как выложить сайт в Интернет: простая инструкция.
№10. Курс HTML и CSS — вёрстка сайтов для начинающих
Кто проводит: PHP-School.
Формат: статьи-уроки + домашние задания.
Сколько уроков: 11.
Продолжительность: 20 часов.
№11. Free HTML and CSS tutorial
Кто проводит: Джереми Томас, американский фронтенд-разработчик и фрилансер, сотрудничающий с такими компаниями, как Microsoft и Sony.
Формат: текстовые уроки (на английском языке).
Сколько уроков: 50 уроков.
Продолжительность: зависит от тебя.
Что ты узнаешь на курсе:
- Синтаксис HTML.
- Его семантические элементы.
- Всё о создании ссылок.
- Основы форматирования текста.
- Как позиционировать элементы в CSS.
- Как менять шрифты.
- Как делать задний фон на сайте.
- И многое другое.
№12. Курсы по HTML от HTML Dog
Кто проводит: англоязычный сайт для обучения программированию.
Формат: текстовые уроки.
Сколько уроков: 3 курса (для начинающих, середнячков и профи) примерно по 10 уроков.
Продолжительность: зависит от тебя.
№13. Курсы по CSS от HTML Dog
Кто проводит: HTML Dog.
Формат: статьи-уроки.
Сколько уроков: также 3 курса 8-15 уроков.
Продолжительность: зависит от тебя.
Уроки HTML5
Уроки по HTML5 для начинающих | #1 — Введение в HTML
Видеоурок
Информация про HTML
Полное название — HyperText Markup Language. Представляет собой язык гипертекстовой разметки, который повсеместно используется во время построения веб-страниц и документов. Путь HTML начался ещё в первой половине 90-х годов. В то время он был крайне примитивным, но уже помогал делать простые страницы для веба. С тех пор язык постоянно развивается, к сегодняшнему дню он уже научился многому. Без HTML, в таком виде как мы привыкли, веб-сайты просто не существовали бы. Все сайты мира используют HTML.
На сегодня актуальный стандарт – HTML5, который официально был выпущен в 2014 году. Это революционный стандарт, который позволил языку выйти на новый уровень.
Нововведения в HTML5:
- Изменился алгоритм парсинга во время разработки DOM-структуры;
- Появились новые теги, вроде audio, video и прочих. Кстати, теперь только силами HTML можно создать веб-проигрыватель. Раньше приходилось использовать Adobe Flash Player;
- Переопределение части правил и семантики использования HTML-элементов.
Если посмотреть глобально, HTML5 стал больше, чем просто новая версией языка. В HTML5 изменился подход ко многим вещам и язык стал полноценной платформой для разработки приложений. Раньше его возможности ограничивались построением структуры, сегодня он намного умнее. С выходом стандарта сильно расширилась сфера использования языка.
Всё пришло к тому, что HTML5 стал применяться в двух ключевых направлениях:
- В качестве обновлённой версии языка HTML;
- В роли функциональной платформы, на которой можно строить веб-приложения различной сложности. Правда, создать полноценное приложение на чистом HTML5 не получится. Для этого ещё используется JavaScript и CSS3.
Кто занимается модернизацией HTML5? Над языком работает W3C или полное название — World Wide Web Consortium – это организация международного уровня, которая сохраняет независимость от конкретных разработчиков. Она же выпускает спецификации, определения и стандарты к HTML5. Оригинальная и полноценная спецификация доступна на официальном сайте по ссылке (доступна на английском). Организация не завершила работу над языком, напротив — всё ещё продолжает его развивать.
Поддержка браузерами
Важно понимать, что спецификация HTML5 и реализация данной технологии в конкретных браузерах – это разные понятия. Многие активно разрабатываемые веб-обозреватели начали понемногу внедрять функции HTML5 ещё до релиза этой версии. К сегодняшнему дню большинство свежих браузеров поддерживают все функции HTML5. Полную поддержку обеспечивают: Chrome, IE 11, Firefox, Edge, Safari, Opera. Относительно старые версии не имеют поддержки новых стандартов, например, IE 8 и младше. В версии IE 9 и 10 уже реализованы стандарты, но только частично.
Часто браузеры могут в целом работать с новым стандартом, но по-разному обрабатывать функции или просто выдавать ошибку. Поэтому при кроссбаузерной разработке нужно учитывать все особенности браузеров. К данному моменту поддержка стандарта со стороны веб-обозревателей уже на неплохом уровне.
Чтобы удостовериться, что текущая версия браузера поддерживает HTML5, можно пройти небольшой тест .
Что нужно для работы?
Что пригодится во время разработки под HTML5? Ключевой инструмент – текстовый редактор, в котором и будет набираться код для будущей веб-страницы. Одним из популярнейших и многофункциональных редакторов является Notepad++. Он доступен на официальном сайте абсолютно бесплатно. Помимо бесплатного распространения, ещё обладает всеми необходимыми функциями, имеет массу полезных плагинов, подсвечивает открытие и закрытие тегов.
Также хорошим редактором с поддержкой большинства операционных систем является Visual Studio Code . Он способен работать в MacOS, Windows и Linux. По возможностям этот программный продукт в разы превосходит Notepad++.
Вторым важным инструментом является веб-обозреватель, он пригодится для тестирования кода. Подойдёт любой современный веб браузер. Если нужно создать кросплатформенное приложение, то придётся установить в систему все популярные веб-обозреватели.
Онлайн редактор кода
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Как быстро выучить HTML и CSS с нуля?
Изучение HTML и CSS – это первый шаг, который необходимо сделать, если вы хотите научиться верстать сайты или работать контент-менеджером. Это относительно простые технологии, которые можно выучить самостоятельно, после чего начать зарабатывать в интернете.
В этой статье мы расскажем, с чего лучше начать изучение HTML и CSS, что необходимо освоить в первую очередь, на каких сайтах можно найти бесплатные самоучители и справочную информацию, практические задания и тесты для проверки знаний.
Что такое HTML и CSS и зачем нужно их знать?
HTML – это язык разметки, который указывает браузерам (Google Chrome, Яндекс.Браузер и другим подобным программам), где и какие элементы выводить на странице сайта. Например, где находится заголовок, основной текст, ссылки на другие страницы, меню, списки, таблицы и так далее.
CSS – это каскадные таблицы стилей. С их помощью задают оформление различных элементов. Например, при помощи CSS можно менять цвет шрифта у текста, задавать фон страницы или отдельных элементов, красиво оформлять списки и таблицы и даже создавать интерактивные элементы (анимацию).
С чего начать самостоятельное изучение HTML?
Язык разметки HTML состоит из тегов. Условно теги – это элементы, которые указывают браузеру, что должно выводиться на странице. Например, есть теги, которые обозначают вставку картинки или фотографии, видео, таблицы. Есть теги, которые обозначают начало и завершение абзаца.
Внутри тегов могут прописываться атрибуты, в которых указываются различные характеристики. Например, внутри тега, обозначающего ссылку, указывается атрибут с адресом страницы или сайта, куда эта ссылка ведет.
Чтобы самостоятельно выучить язык HTML, необходимо:
- Изучить основные теги, которые размечают заголовки (h1-h6), текст и его деление на абзацы, формируют нумерованные и ненумерованные списки (p, br, ul, ol, li), выставляют ссылки (a), изображения и другие объекты (img, object), выделяют фрагменты жирным или курсивом (strong, b, i), размечают таблицы (table, tr, td), вставляют формы (form, input, textarea, select, option), структурные теги (div, span), а также – основные теги (html, head, title, body). Кажется, что команд очень много, но на самом деле их можно выучить самостоятельно за 2-3 дня.
- Выучить атрибуты для популярных тегов. Не обязательно знать все атрибуты наизусть. Есть бесплатные справочники, в которых можно искать эту информацию во время работы.
- Изучить структуру HTML-кода, чтобы понять, как создаются страницы сайтов.
- Прочитать о табличной верстке – это устаревший вид верстки, который на современных сайтах не используется. Однако вам нужно знать, что это такое, чтобы не теряться, если придется работать с версткой старого сайта.
- Научиться блочной верстке при помощи дивов (div). Это современный тип верстки, который нужно хорошо знать.
- Прочитать про валидную верстку. Есть организация, которая определяет стандарты HTML. Она называется W3C. Валидной называется верстка, которая полностью отвечает стандартам W3C. На практике их часто нарушают и не каждая верстка может быть валидной. Но в любом случае про этот стандарт нужно знать.
Разные браузеры по-разному обрабатывают некоторые теги и иные команды. Если вы решили самостоятельно изучать HTML, обязательно прочитайте, что такое кроссбраузерная верстка и как ее делать.
Как видите, выучить HTML с нуля можно и самостоятельно. Примерно за неделю вы сможете изучить азы языка разметки и научиться им пользоваться на уровне, достаточном для добавления текстов на сайты, разметки таблиц, списков, вставке изображений.
Как выучить CSS с нуля?
Осваивать CSS рекомендуется после того, как вы изучили основы языка HTML. Вот что нужно узнать о каскадных таблицах стилей:
- Основы синтаксиса: основные селекторы, их свойства и значения. На словах кажется сложно, но на деле – просто. Например, в CSS вы можете задать оформление заголовка, указав, какой у него должен быть шрифт, размер шрифта, отступы от других элементов на странице, цвет и другие параметры. Чтобы знать CSS, вам нужно изучить, какие параметры вы можете задавать у разных элементов на страницах.
- Изучить, как при помощи CSS задавать позиционирование разных элементов на странице.
- Узнать, что такое псевдоклассы и комбинаторы.
Изучить адаптивную верстку, когда макет страницы подстраивается под размеры экрана пользователя.
Дополнительно рекомендуется выучить:
- Препроцессоры.
- Фреймворки, особенно Bootstrap. Фреймворк – это готовое решение, на базе которого можно быстро создать верстку нового сайта.
- Управление преобразованием, переходами и анимацией.
Как правильно создавать структуру кода, чтобы его можно было поддерживать.
На каких сайтах можно освоить HTML и CSS?
Ниже представлены бесплатные сайты и справочники, которыми можно пользоваться при самостоятельном изучении HTML и CSS с нуля.
Учебник HTML
HTML расшифровывается как Hyper Text Markup Language, т.е. язык гипертекстовой разметки — основной строительный блок веб-страниц, используется для создания и визуального представления веб-станиц.
Язык HTML добавляет разметку в обычный текст. Гипертекст содержит различные ссылки благодаря которым веб-страницы связываются между собой. С помощью HTML каждый может создавать как статические так и динимические сайты. HTML является языком, описывающим структуру и семантику содержимого веб-документа. Содержимое веб-страницы размечается с помощью тегов, представляющих HTML-элементы. Примерами таких элементов являются , ,
HTML был изобретён в 1991 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и изначально предназначался для обмена документами между учёными различных университетов. Своим изобретением Тим Бёрнс-Ли заложил основы современной сети Internet.
Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого — почти каждый год выходит новая версия HTML. Версия «HTML 2.0» была первым стандартом HTML спецификации, которая была опубликована в 1995 году. HTML 4.01 является основной версией HTML, которая была опубликована в конце 1999 года, и широко используется в настоящее время. Сегодня наиболее популярной становится версия HTML-5, которая является расширением HTML 4.01, и опубликована в 2012 году.
HTML-документ или веб-страница — это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в угловые скобки ). Веб-страницу можно набрать как в обычном текстовом редакторе (Блокнот, WordPad, Word и т.д.), так и в специализированном, с подсветкой кода (Notepad++, Sublime Text идр.). Документы HTML хранятся в виде файлов с расширением .htm или .html.
Онлайн-примеры в каждом уроке
В процессе изложения материала в каждом уроке будут приводиться примеры, которые помогут вам детально разобраться в каждом коде и, благодаря практике, наслаждаться обучением. С помощью нашего онлайн-редактора HTML, вы можете отредактировать HTML-документ, а затем нажмите в редакторе оранжевую кнопку «Выполнить», которая расположена над левым окном редактора, чтобы увидеть результат. Если вы пользуетесь специализированным HTML-редактором, то, вы можете скопировать пример и посмотреть результаты своего труда в браузере, установленном на вашем компьютере.
Пример HTML:
Онлайн-примеры HTML
В учебнике HTML для вас подготовлено более 100 онлайн-примеров, благодаря которым вы легко освоите язык разметки. Лучше один раз увидеть, чем сто раз услышать! Теория плюс практика — залог вашего успеха в освоении HTML.
С помощью онлайн-редактора вы сможете редактировать и анализировать каждый пример в учебнике HTML.
Справочник HTML
В справочнике вы найдете полную информацию по любым тегам, атрибутам, событиям, ссылкам, кодам цветов, изображениям и много чего еще.
Как писать на HTML5 и какие у него возможности
Разбираемся, какие возможности есть у HTML5, чем он отличается от предыдущих версий и что почитать по теме HTML для самообучения.
Что такое HTML
HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:
- Сам текст.
- Теги (элементы) для разметки этого текста.
Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документе перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.
Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники. Курс «Frontend-разработчик» поможет не только освоить HTML, но и в разы обойти программистов-самоучек. А сейчас обратимся к самым азам.
Анатолий Ализар
Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.
Набор технологий HTML5
HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, атрибутами и поведением. Под термином HTML5 также подразумевают набор технологий для разработки сайтов и веб-приложений.
Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).
Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.
В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.
Отличия HTML5 от предыдущих версий
Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.
Всё, теперь у нас документ по стандарту HTML5.
В HTML4 было много разных типов, а в HTML5 остался только один . Весь код, который написан на «обычном» HTML (HTML4), будет работать и в HTML5.
Однако здесь добавлено много новых технологий:
- Мультимедиа-контент: HTML5 audio и video.
- Улучшенные формы (API валидации, несколько новых атрибутов, новые значения для атрибута type тега и новый элемент ).
- Новые семантические элементы ( , , , , , ,
и ).
Как редактировать HTML?
Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 — например, Notepad++, Sublime Text.
Справочные ресурсы по HTML
Как научиться писать на HTML
Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.
Можно подсматривать в справочник, гуглить, спрашивать совета на форумах и сайтах с вопросами-ответами. Или найти максимально похожий сайт, открыть его код — и разбираться, как он работает. Можно изменить его для своих нужд, только не забудьте стереть копирайты и комментарии авторов.
Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.
Некоторые разработчики не хотят открывать свой код, они шифруют (обфусцируют) скрипты на сайтах, но их тоже можно разобрать специальными инструментами.
Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.
Погрузившись в обучение, вы научитесь создавать свои собственные
веб-проекты и сможете претендовать на позицию junior-разработчика.