УЧЕБНЫЕ САЙТЫ

Сайты, сделанные при обучении

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

Здесь результат обучения, а зачем и, как именно учился, более подробно рассказал, и наглядно показал в разделе "Обучение" (откроется в новом окне).

Короткий обзор и ссылку на страницу разместил в соответствующих главах.
Страницы с примерами часто не снабжены общим навигатором (чтоб "легче" были), а только стрелкой "НАЗАД", то есть обратно сюда, на эту. С неё Вы уже сами решите, что интересует.
Нажав ЛОГОТИП, перейдёте на ГЛАВНУЮ.

* * *

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

Это, разумеется, "Удалённая работа" (откроется в новом окне).
Первая страница 3-ёх страничного раздела.

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

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

*Prim. Подзаголовки, ведущие на страницы, являющиеся "стартовыми" для просмотра самостоятельных сайтов, отметил общепринятым символом папки:

Вход в первые 2 раздела можно совершить и здесь, с их ОБЩЕЙ одноимённой страницы выбора интересующих примеров:  JQUERY.

jQuery UI

Слишком объёмная тема, чтоб показывать её на одной странице.
Ссылка перехода направит Вас на её собственную страницу выбора, позволяющую просмотреть 16 примеров использования этой замечательной современной технологии. СМОТРЕТЬ

jQuery

Аналогично. Ссылка перехода позволит выбрать для просмотра 16 примеров разного интересного применения только "ядра" jQuery.
СМОТРЕТЬ

Основы jQuery

Вспомогательный, 4-ёх страничный справочный сайт-шпаргалка, сделанный мною для личного пользования во время изучения этой технологии. Может быть полезен тем, кто сейчас занимается её освоением. СМОТРЕТЬ

jQuery МЕГА-меню

Давал ссылку на просмотр, и писал такую же фразу в собственном подразделе jQuery, но повторю это и здесь.
Даже, если бы технология jQuery ничего больше не могла бы предоставить, её стоило бы изучать лишь только ради возможности создавать МЕГА-меню. СМОТРЕТЬ

Кстати!  Гораздо более простой, но не менее эффективный аналог этого меню показал на этой же странице ниже.   Смотреть

jQuery РОТАТОР контента

"Слово в слово" можно повторить всё вышесказанное и про её великолепные(!) способности создавать ротаторы контента. СМОТРЕТЬ

JavaScript

Большая промежуточная страница выбора, на которую Вы сможете попасть по ссылке, полностью посвящена языку программирования JavaScript.
Кроме переходов на другие 30 страниц примеров, содержит отзыв об этом языке, а также указал причину по которой, изучив основы языка, не использую его для остальных страниц своего сайта. СМОТРЕТЬ
(P.S. Лучше просматривать примеры с браузерами: Яндекс, Firefox. Так как стандартные настройки Internet Explorer могут не разрешить исполнение скриптов на страницах с примерами сценариев.)

JavaScript Dynamics

7-ми страничный раздел, созданный для изучения и тестирования Dynamics - одной из библиотек JavaScript.
Содержит сведения об основных параметрах этой библиотеки и действующие примеры её использования. СМОТРЕТЬ

Практическое использование jQuery и JavaScript

Одностраничный сайт-визитка.
Назвал его: "Личная страничка с примерами jQuery и JavaScript". Вполне может использоваться, как аналог главной страницы сайта.
Показываю популярное слайд-шоу "карусель" и другие интересные эффекты современных технологий, освоенные во время их изучения.
Основные преимущества и недостатки веб-страниц такого типа. СМОТРЕТЬ

Просмотрщик изображений на JavaScript

Самый простой способ создания лёгких и быстрых средств просмотра изображений на сайте. Всё подробно прокомментировал. СМОТРЕТЬ

Галерея на JavaScript

Как просто сделать удобную фотогалерею на сайте? Есть отличный способ создавать эффективные и интересные галереи для своего сайта. СМОТРЕТЬ

Изучение PHP

Внутренний, 15-ти страничный, действующий тренировочный сайт, созданный во время изучения основ технологии PHP. Благодаря хорошему их освоению, удалось сделать всё, что можно увидеть в этом разделе с использованием PHP.
Содержит самые популярные способы использования PHP на сайтах. СМОТРЕТЬ

Гостевая книга

Гостевая книга сайта - также написана на языке PHP. Создал при повторной, плановой тренировке по курсу "PHP & MySQL".
Это самостоятельный сайт, сделать который стало возможным только после тщательного повторения 5-ого раздела курса.
К тому же, очень(!) пригодилась практическая работа с интернет-магазином, информацию о котором разместил чуть ниже.

Учтите! Попадёте сначала на "буферную" страницу между двумя сайтами.  Коротко описал, как пользоваться книгой, и кнопки для прямого захода. СМОТРЕТЬ

Голосование

Возможность проголосовать - разумеется, тоже реализована с помощью языка PHP. Создавал при повторной, плановой тренировке по курсу "PHP & MySQL".

Сложность создания его (хотя внешне выглядит очень просто) значительно превосходит "Гостевую книгу", поскольку, это уже не просто самостоятельный сайт, а целый сервис голосования. СМОТРЕТЬ

Интернет-магазин

Полностью автоматический интернет-магазин. Написан, естественно, тоже на PHP. Скрипт приобрёл у профессионального программиста.
Хотелось опробовать свои силы в реальной работе над чужими кодами. Результат можете протестировать. Запустил действующий магазин на отдельном сайте.

В главном НАВИГАТОРЕ имеет название: "Магазин находок".

Учтите, что попадёте сначала на "буферную" страницу между двумя сайтами. На ней немного написано, что и как, и кнопки для прямого захода. СМОТРЕТЬ

Продающий сайт

Продающий сайт - также написан с использованием языка PHP. Создавал его для закрепления навыков, полученных при изучении курса "PHP & MySQL".
Тоже самостоятельный, полностью работоспособный сайт. Может принимать тестовые заказы. Представляет из себя шаблон landing page.
Вообще, продающая страница - это же простейший интернет-магазин.

Аналогично. Попадёте сначала на "буферную" страницу. Там написал, в чём между ними разница, и сделал кнопки для прямого захода. СМОТРЕТЬ

PHP-сайт

Простой PHP-сайт. Сделал, тренируясь во время изучения курса "PHP & MySQL".
Это внутренний мини-сайт из 6-ти страниц. Расположил его в своём собственном каталоге моего основного ресурса.
В главном НАВИГАТОРЕ имеет название: "Какой сайт лучше?".

На его страницах постарался разобрать вопрос, какой лучше создать сайт. Сравнил обе технологии: HTML и PHP. Их достоинства и недостатки. СМОТРЕТЬ

Локальный сервер

Тщательное изучение технологии установки, использования и настройки локального сервера - обязательно(!) для любого желающего освоить PHP. Без наличия такого программного комплекса на своём компьютере, научиться создавать сайты на PHP не удастся!

В этом разделе находятся не только два отличных видео-урока о том, как установить и использовать локальный сервер, но и много-много практической информации из моего личного опыта по работе с ним. СМОТРЕТЬ

Электронные книги

Они чрезвычайно популярны в интернете. Поэтому, изучив хорошо навыки блочной и табличной вёрстки, представленные ниже, смог перейти к созданию электронных книг. Решил, при повторной, плановой тренировке по обучающим курсам, выяснить, какой формат электронных книг лучше.

Скомпилировал несколько электронных книг разного формата из одного базового сайта. Большой, 11-ти страничный раздел "Электронные книги" имеет не только описание, но и даёт возможность наглядно сравнить их. СМОТРЕТЬ

PSD-сайт

Сделан (по заказу) в программе "Фотошоп", но поскольку это уже не совсем рисунок, а полноценная табличная HTML вёрстка, решил его и здесь разместить. Сколько таких было сделано во время обучения ... ... !

Интересен он тем, что основная работа была по его дизайну, а вот сверстать из рисунка HTML-страницу помогла та же программа "Фотошоп". СМОТРЕТЬ
(P.S. Действующие ссылки заменил перед публикацией на свои.)

Веб-дизайн блога

Аналогично. Этот сайт сначала создавался в фотошоп по курсу "Веб-дизайн" для последующей блочной вёрстки его в качестве шаблона блога.
Обычно такие сайты создаются для их последующей "посадки" на CMS. На данный момент там находится 2 связанных веб-страницы. СМОТРЕТЬ

Шаблон лендинга

Этот тип сайтов, как бы, объединяет "мини-сайт" и "страницу подписки". Но это только внешний эффект, что достигается уменьшением размеров нового окна.
Шаблон такого сайта сверстал при тренировках по разным обучающим курсам. Состоит из 2-ух веб-страниц. СМОТРЕТЬ

Страница подписки

Наверное, самый популярный в сети тип сайта. Создавал его, как логичное, действующее продолжение мини-сайта.
Для его создания необходимы знания различных веб-технологий, и умение работать с сервисом Smart Responder. В состав входят 3 веб-страницы. СМОТРЕТЬ

Мини-сайт

Одностраничники - тоже один из очень популярных в интернете типов сайтов. В зависимости от целей своего создания, могут называться по-разному: "страница подписки", "целевая", "посадочная страница", и т.д., и т.п..
Свой сверстал при тренировках по разным обучающим курсам, и в качестве переходного для верхнего подраздела. Содержит 4 связанных веб-страницы. СМОТРЕТЬ

SmartResponder

Одностраничный, информационный мини-сайт. Создал его сразу после закрытия рассылочного сервиса "SmartResponder". Содержит кнопки перехода на все, связанные с этим сервисом примеры. СМОТРЕТЬ

Меню для сайта

В этом разделе показываю целых 3 примера, как сделать меню для сайта. Причём, довольно простое, но очень эффективное(!) многоуровневое меню. СМОТРЕТЬ

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

Шаблоны сайтов

Здесь находятся несколько сайтов разной сложности, сделанных во время изучения курсов "CSS+HTML практика вёрстки сайта"  и  "Веб-дизайн".
Использовал для работы шаблоны сайтов, входящих в состав курсов. На данный момент там находится 12 полностью готовых сайтов. СМОТРЕТЬ

Автоматический слайдер CSS

Не случайно отметил этот подраздел "золотой звездой". Он особенный! Написан на CSS только! Это результат изучения CSS, и внесения изменений в чужой код, найденный в интернете, для создания собственных стильных, ярких презентаций. СМОТРЕТЬ

Адаптивная вёрстка

Создал такой сайт, изучая принципы адаптивной вёрстки для разных устройств по мини-курсу "HTML5 и CSS3". Для его создания использовал PSD-макет, приложенный к обучающему курсу. Состав - сайт-визитка. СМОТРЕТЬ

HTML + CSS Вкладки для сайта

Не мог не отметить и этот подраздел учебных сайтов "золотой звездой", т.к. знание, как сделать простые вкладки сайта - особенно полезный(!) навык.
Это позволит великолепно структурировать информацию на его страницах. СМОТРЕТЬ

Блочная вёрстка

Сайт свёрстан по PSD-макету (приложен к обучающему курсу "CSS-практика").
Использовал навыки блочной HTML+CSS вёрстки, полученные в прежних курсах, и превосходно закреплённые в этом.
По составу это корпоративный сайт. И он полностью работоспособен. СМОТРЕТЬ
(*P.S. Усложнил себе задачу, и верстал его: во-первых, из простого JPG-рисунка, и во-вторых, на 50% меньше размера исходного макета.)

Смешанная вёрстка

Также верстал его по PSD-макету, приложенному к обучающему курсу "HTML-сайт".
Применил блочную HTML+CSS вёрстку, и от себя добавил табличную. Получилась смешанная: блочно-табличная вёрстка.
Кроме того, страница "резиновая". Там есть вставка для увеличения объёма представленного.
Состав - сайт услуг. Разумеется, тоже вполне работоспособен. СМОТРЕТЬ

Табличная вёрстка

САЙТ из таблиц! Сверстал такой, изучая различные способы вёрстки сайтов. Решил усложнить вёрстку, и вставить его в уже существующую веб-страницу. СМОТРЕТЬ

Сайт-визитка

Основы CSS. Продолжение тренировки. Этот сайт-визитку сделал, продолжая изучение и тренировку по применению HTML+CSS для создания и веб-дизайна сайтов различного назначения. Добавил активные логотип и навигатор. СМОТРЕТЬ

Результат тренировок по CSS

Здесь представил наглядный результат изучения и тренировок по практическому применению HTML+CSS для веб-дизайна сайтов. Регулярные повторения основ этих базовых технологий интернета позволяют создавать красивые, нарядно оформленные страницы своих веб-ресурсов. СМОТРЕТЬ

CSS + HTML каркас сайта

Полностью готовый к заполнению каркас сайта, сделанный в соответствии с принципами блочной вёрстки. Имеет удобный и работоспособный навигатор. Можно наполнить любым контентом и использовать. СМОТРЕТЬ

2-ой CSS-сайт

Второй сайт. Изготовление и наполнение "каркаса" сайта, оформление "шапки". Опять же, хорошо показывает, как с помощью таблицы стилей заполняется страница.

Сделал всё разного цвета, чтоб было видно - страница состоит из блоков. СМОТРЕТЬ

Позиционирование

Один из самых важных и частых способов использования CSS для работы с контентом веб-страниц.
Позволяет, как угодно обращаться с рисунками и текстом, вне зависимости, где они прописаны в HTML-коде. СМОТРЕТЬ

CSS-сайт

Самый первый сайт.
Делая его, учился вставлять и позиционировать картинки, текст с помощью CSS. Показывает, как можно с помощью таблиц стилей управлять страницей. СМОТРЕТЬ

Конструкторы сайтов

Большой, сдвоенный раздел, на котором представил не только подробные отзывы по использованию нескольких конструкторов, но и возможность проверить 4 действующих сайта, сделанных с их помощью. СМОТРЕТЬ

Сайты на CMS Joomla

Исключительно для того, чтоб иметь возможность оказывать услуги поддержки чужим ресурсам в качестве контент-менеджера и веб-мастера, да и вообще, чтоб "идти в ногу со временем", освоил работу с этой, одной из самых популярных CMS. С её помощью можно делать сайты, ею же и управлять. СМОТРЕТЬ

Сайты на WordPress

Абсолютно с той же целью: предоставлять услуги поддержки сторонним ресурсам, как контент-менеджер и веб-мастер, изучил и эту, самую популярную CMS. Действующий, учебный блог на WordPress из 6-ти страниц подключил сюда. СМОТРЕТЬ

Он-лайн чат

А если точнее, то он-лайн чат для сайта. Узнать в чём разница, и опробовать полностью действующий чат, можете здесь. СМОТРЕТЬ

Видеосвязь

Знание различных программ видеосвязи и умение ими пользоваться имеет огромное практическое значение. Особенно в последнее время. СМОТРЕТЬ

Вставка аудио и видео

Возможность вставлять аудио и видео файлы на страницы сайта - пожалуй, самое популярное занятие веб-мастеров.
Сайт как бы "оживает". Можно прямо со страницы управлять плеерами. СМОТРЕТЬ

Слайд-шоу

Создать слайд-шоу для сайта, и разместить его на страницах ресурса непременно должен уметь каждый веб-мастер.
Сделал страницу, на которой показываю 8(!) видов разных действующих слайдеров, но, что самое главное, - весь процесс их создания подробнейшим образом прокомментировал.
Уверен! Раздел будет интересен и полезен людям, занимающимся изучением современных технологий jQuery. СМОТРЕТЬ

Слайд-шоу на HTML

В этом разделе показал возможность применения только базовых технологий интернета для создания слайд-шоу на сайте.
Отличная возможность сравнить простые методы организации слайд-шоу с теми, что показал в предыдущем разделе. СМОТРЕТЬ

Рисование в HTML

Большой 5-ти страничный раздел, где показываю и подробно объясняю простой способ, используя опять-таки лишь HTML, рисовать на страницах сайта. Множество наглядных примеров и подробное описание, как это можно сделать. СМОТРЕТЬ

Галерея

Как сделать фотогалерею на сайте без использования сложных скриптов? Простые способы создать эффективные и лёгкие галереи для сайта. СМОТРЕТЬ

Индикаторы

Создание индикаторов различных процессов бывает иногда нужно для обеспечения наглядности и удобства пользования сайтом. СМОТРЕТЬ

Кнопки для сайта

Кнопки для сайта - постоянная задача любого веб-мастера. Как сделать, и как добавить кнопку на сайт, каждый решает по-своему. Отличный метод создания красивых, оригинальных кнопок для своего сайта. СМОТРЕТЬ

Формы обратной связи

Полностью рабочая HTML-форма. Есть желание - попробуйте! Все письма попадут ко мне на тестовую почту сайта.
Это как раз тот случай, когда без знания основ PHP не обойтись.
Отвечать Вам, естественно, не буду, а саму почту регулярно очищаю. СМОТРЕТЬ

Полная форма.  Сделал её, чтобы показать возможности создания форм с помощью HTML+CSS.
Позволяет получить максимум сведений от посетителя сайта. Различные вариации её используются для получения: всевозможных отзывов, заказов, файлов и т.д и т.п..
На ней несколько вариантов кнопок, различные поля для ввода.
С помощью PHP подключил только активатор формы. Письмо на почту сайта не пойдёт.
Попробуйте заполнить и отправить - увидите, что она Вам скажет. СМОТРЕТЬ

Интересное подключение анимации

Анимация - ещё одна из самых часто используемых веб-технологий. Создание анимации (движущихся рисунков) в фотошоп занимает первое место среди других способов подачи информации.
Кажется, не существует сайтов, где бы она не применялась. А если ещё соединить возможности программы "Фотошоп" и мощь CSS, то ... ... ... СМОТРЕТЬ

Управляемая анимация

Примеры и подробное описание кодов HTML и CSS для создания и настройки элемента, с помощью которого посетитель может сам регулировать анимацию на странице сайта. СМОТРЕТЬ

Анимация цифр

Интересная возможность создания на сайте цифр, автоматически изменяющихся после клика по ним. Причём, управление и настройка такой анимации делается в коде (в основном) CSS. СМОТРЕТЬ

Слайдер цифр

Простой слайдер выводящий цифры, созданный, практически, только лишь на HTML, использовав новые тэги и всего одну функцию JavaScript. СМОТРЕТЬ

Карта ссылок

Очень интересная возможность превратить в ссылку что угодно: любой рисунок, часть его. Сделать из фотографии красивую ссылку, разные части которой будут вести на нужные страницы. СМОТРЕТЬ

Псевдоселекторы

Их применение в CSS создаёт очень интересные эффекты: одним щелчком можно изменить картинку, цвет элемента и прочее. СМОТРЕТЬ

Техника спрайт

Её использование в CSS встречается гораздо чаще. Она позволяет получить ещё более интересные и практические эффекты. Одно лишь наведение курсора мыши на элемент меняет его цвет, картинку и т.д.. СМОТРЕТЬ

Прозрачность элементов

Отличные возможности таблицы стилей CSS для веб-дизайна сайтов. Создание и вставка различных объектов, управление их видимостью. СМОТРЕТЬ

Работа с фреймами

Применение такой технологии позволяет на одной странице видеть сразу две, три или больше. Иногда это очень удобно. СМОТРЕТЬ (откроется в новом окне)

Текстовые эффекты

Великолепные возможности предоставляет HTML для отображения текста, создания оригинальных реклам, выделения нужной информации. СМОТРЕТЬ

Веб-шрифты

Наглядные примеры и подробное описание способов подключения оригинальных шрифтов к веб-страницам. СМОТРЕТЬ

Амперсанды

Знание, и умение использовать специальные символы ("мнемоники") при разработке, и вёрстке веб-страницы, позволит сделать её интереснее, более понятной. Особенно это важно для вёрстки сложных технических текстов, статей. СМОТРЕТЬ

Работа с таблицами

Создание таблиц HTML+CSS.
Применение этой технологии позволяет один раз(!) задать стиль таблицам, и они на всех страницах, сколько бы их ни было, примут его. СМОТРЕТЬ

Создание таблиц только на HTML. В первом случае работать гораздо удобнее, если у Вас много страниц, где должны быть таблицы одинаковые по виду.
А вот если нужно всего несколько и разных, то удобнее так. СМОТРЕТЬ

Шапка сайта

С помощью каких(?) программ, соблюдая всего лишь несколько самых основных, базовых принципов, можно сделать для своего сайта абсолютно любую, оригинальную шапку. Сравнение разных встроенных программ и он-лайн сервисов фотошопа. Подробные результаты тестирования. СМОТРЕТЬ

Шапка сайта в фотошоп

Это больше относится к "Фотошоп", однако, всё настолько тесно связано, что решил и здесь эту страницу показать. Шапка полностью работоспособна.
Без знания HTML Вы не сможете изменить "под себя" страницу, которую "Фотошоп" создаст автоматически. СМОТРЕТЬ (откроется в новом окне)

Фриланс

Закончу раздел учебных сайтов тем же, чем начал его. Дополнением к удалённой работе, что вполне естественно. Это два больших смежных раздела.
Ведь, изучением всех упомянутых технологий: HTML, CSS, PHP, JavaScript и jQuery занимался ради возможности работать удалённо. Здесь много нового. СМОТРЕТЬ

Заключение

Можно ещё очень много приводить интересных примеров из курсов по обучению, но, думаю, достаточно.
Как и где всему этому смог научиться, главное, у кого, рассказал подробно на странице ССЫЛКИ (откроется в новом окне).

* * *

Отсюда можете пройти на любую интересующую Вас по НАВИГАТОРУ. Он в самом верху.
Либо по нижней стрелке на страницу выбора "САЙТЫ: учебные/действующие".

ВВЕРХ