Логотип Валидатор Валидатор Качество создания сайта

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


На выбор сайтов

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

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

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

Учебные сайты Указатель

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

* * *

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

Это, разумеется, "Удалённая работа" (откроется в новом окне).

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

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

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

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

jQuery UI Каталог

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

jQuery Каталог

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

Основы jQuery Каталог

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

jQuery МЕГА-меню Особенно полезное!

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

jQuery РОТАТОР контента Особенно полезное!

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

JavaScript Каталог

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

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

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

Галерея на JavaScript

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

Изучение PHP Каталог

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

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

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

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

Голосование Каталог

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

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

Интернет-магазин Каталог

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

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

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

Продающий сайт Каталог

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

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

PHP-сайт Каталог

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

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

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

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

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

PSD-сайт

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

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

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

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

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

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

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

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

Мини-сайт Каталог

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

SmartResponder Внимание!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2-ой CSS-сайт

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

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

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

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

CSS-сайт

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

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

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

Сайты на CMS Joomla Освоено!

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

Сайты на WordPress Каталог

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

Он-лайн чат

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

Видеосвязь

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

Вставка аудио и видео Каталог

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

Слайд-шоу

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

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

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

Галерея

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

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

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

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

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

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

Ещё Вам пригодится нижний: "Техника спрайт". СМОТРЕТЬ Техника спрайт

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

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


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

Карта ссылок

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

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

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

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

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

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

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

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

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

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

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

Веб-шрифты

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

Амперсанды

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

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

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

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

Шапка сайта

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

Фриланс

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


Заключение

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

* * *

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

ВВЕРХ

На выбор сайтов

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru