Видеоуроки создание сайтов: Видеоуроки по созданию сайта

Содержание

30 уроков по созданию веб-сайта: от дизайна до верстки

Подробный курс, который расскажет обо всех этапах создания сайта: начиная с дизайна в Photoshop, заканчивая его версткой и внедрением CMS.

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

Урок #1: Скетч

Урок #2: Скетч (Продолжение)

Урок #3: Заканчиваем создание скетча

Урок #4: Дизайн шапки

Урок #5: Дизайн первой секции

Урок #6: Дизайн второй секции

Урок #7: Дизайн третьей секции

Урок #8: Дизайн четвертой секции

Урок #9: Дизайн шестой и седьмой секций

Урок #10: Дизайн секций “Отзывы”, “Контакты” и подвала

Урок #11: Подготовка Front-End окружения. Начинаем верстать макет

Урок #12: Начинаем верстать шапку

Урок #13: Верстка шапки

Урок #14: Верстка. Адаптивная шапка + адаптивное меню

Урок #15: Верстка. Полоса преимуществ

Урок #16: Верстка. Секция “Наш профиль”

Урок #17: Верстка. Плавная pop-up галерея (Magnific-Popup)

Урок #18: Верстка. animateNumber + верстка секции “Направления”

Урок #19: Верстка. Секция “Наши работы” + Pop-up

Урок #20: Верстка. Секция “Поставляемое оборудование”. Карусель

Урок #21: Верстка. Секции “Скидки” и “Менеджеры”

Урок #22: Верстка. Карусель брендов

Урок #23: Верстка. Отзывы

Урок #24: Верстка. Контакты

Урок #25: Обновление Front-End окружения Gulp

Урок #26: Верстка. Футер, всплывающие формы, кнопка «Наверх»

Урок #27. MODx + Gulp: Интеграция и настройка окружения Gulp

Урок #28. Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки

Урок #29. Посадка HTML верстки шапки на MODx

Урок #30. Посадка секции тизеров на MODx

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

Технологии создания сайта

Вопросы:

· Как
менялись веб-сайты в последние десятилетия?

· Технологии
и инструменты создания сайтов, для чего они (сайты или технологии?) нужны?

· Язык
разметки гипертекста HTML.

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

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

Такое качественное изменение сайтов не могло не
отразится на инструментах и технологиях для их создания. Рассмотрим некоторые
из них:

Большинство веб-сайтов в сети «Интернет» содержат
разметку, созданную при помощи языка разметки гипертекста HTML,
сокращённо от «HyperText Markup
Language». Именно при помощи этого языка разметки выделяются различные
блоки на веб-страницах, в которых размещается информация, помимо этого
информация может оформляться каким-либо образом. Изначально для создания сайтов
этого языка было достаточно.

Для создания современных сайтов используется множество
различных технологий, рассмотрим основные. Начнём с каскадных таблиц стилей или
CSS, их использование
расширяет возможности оформления отдельных элементов сайта. А также упрощает
работу со стилями. Теперь информация об оформлении различных элементов
веб-страниц хранится в отдельных файлах и не загромождает
исходный код страницы на HTML.

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

Хранить пользовательскую и другую информацию на сайтах
позволяют различные базы данных. В качестве системы управления базами данных
чаще всего используют «MySQL».

Связать все эти технологии воедино и задать логику
работы сайта помогают различные языки программирования. Из них самым популярным
в плане программирования сайтов считается язык PHP.

Посмотрим, какими же программами и технологиями можно
пользоваться для создания простых сайтов. Для этого можно использовать
визуальные HTML-редакторы, например «Adobe
Dreamweaver» или «Microsoft Frontpage». Также
простую веб-страницу можно создать с помощью некоторых программ, входящих в
пакет «Microsoft office»,
сохранив документ в формате веб-страницы. Простыми и понятными инструментами
для создания сайтов являются различные онлайн конструкторы сайтов. Самыми
распространёнными в русскоязычном сегменте интернета являются «Ucoz»
и «Wix.com», однако возможности
большинства онлайн-конструкторов ограничены выбором деталей оформления из
предложенных. Если же вы хотите детально разработать свой сайт, но ни одного из
визуальных редакторов у вас нет, можно воспользоваться обычным текстовым
редактором «Блокнот», записав в нем код разметки на языке HTML.

Рассмотрим язык разметки гипертекста подробнее. В нём указания
для разметки задаются при помощи тегов и атрибутов. Теги – это указания
для разметки страницы и её отображения, они записываются в угловых скобках.

<тег>

Большинство из тегов парные, то есть состоят из открывающегося
тега и закрывающегося. Закрывающийся тег начинается со знака «/». Так абзац
текста в языке HTML размещается между
тегами:

Для некоторых тегов указываются параметры, которые
называются атрибутами. Так, при размещении картинки указывается
одиночный тег «img», его параметрами
могут быть ссылка на файл с изображением, ширина и высота изображения на
странице.

Рассмотрим структуру простой HTML-страницы.
В начале записывается тег «DOCTYPE
HTML», который указывает, что тип данного
документа – HTML-страница. Весь код
разметки страницы записывается между тегами «HTML»
и «/HTML». Любая HTML-страница
состоит из заголовка и тела страницы. Заголовок
может содержать название страницы, а так же указания к браузеру для её
отображения. Он размещается между тегами «head»
и «/head».
Тело страницы содержит все указания по её разметке, оно размещается между
тегами «body»
и
«/body».

<!DOCTYPE
HTML>

<HTML>

<head>

Заголовок страницы

</head>

<body>

Тело страницы

</body>

</HTML>

Пример
структуры простой HTML-страницы

Название страницы записывается между
тегами «title»
и «/title» .

Создадим простую веб-страницу с текстом при помощи
текстового редактора «Блокнот».

Сохраним нашу веб-страницу в документе с именем
“Моя первая веб-страница” и расширением “HTML”.

Свернем рабочее окно блокнота и найдём
нашу веб-страницу. Откроем её с помощью одного из браузеров, например Интернет
Эксплорера. Мы видим, что наша веб-страница содержит записанный нами текст.

Вернемся к коду нашей веб-страницы.
Добавим на неё еще три абзаца текста. Первый абзац будет содержать текст,
который записан жирным шрифтом. Для этого его содержимое заключается между
тегами “b” и “/b”.
Запишем в нём поясняющее сообщение что этот текст записан жирным шрифтом.

Второй абзац запишем курсивом. Для этого
его содержимое запишем между тегами “i”
и “/i”.
Запишем в нём соответствующее поясняющее сообщение. Сделаем третий абзац подчёркнутым.
Для этого его содержимое нужно заключить между тегами “u”
и “/u”.
Запишем в нем соответствующее поясняющее сообщение.

Сохраним наш документ и перейдем к окну
браузера. Нажмем на кнопку “Обновить страницу”. Теперь наша веб-страница
содержит четыре абзаца текста, которые мы записали.

Добавим картинку на нашу страницу. Для
этого добавим ещё один абзац, внутри которого будет содержаться одиночный тег “img”.
Для одиночного тега закрывающийся тег не требуется. Нам нужно указать адрес
картинки. Для этого нужно дописать к этому тегу атрибут “irc”,
после которого поставить знак равенства и в кавычках записать адрес картинки.
Пусть наша картинка находится в одной папке с веб-страницей, тогда нам остаётся
записать лишь имя файла с расширением «png». Таким
образом, картинка будет добавлена в оригинальном размере на нашу веб-страницу.

Итак, сохраним наш документ. Перейдём к
окну браузера и нажмём на кнопку “Обновить страницу”. Мы видим,
что теперь внизу страницы появилась картинка.

Важно запомнить:

Простые
сайты можно создавать при помощи:

· визуальных
HTML-редакторов;

· некоторых
офисных программ;

· онлайн-конструкторов;

· текстового
редактора «Блокнот», записывая в нём код веб-страницы на языке разметки
гипертекста.

Для
создания современных сайтов могут применятся следующие инструменты:

· Для
разметки веб-страниц – язык разметки гипертекста HTML.

· Для
оформления веб-страниц используют каскадные таблицы стилей или “CSS”.

· Для
создания динамичных элементов веб-страницы используют сценарный язык
программирования “Java-Скрипт”.

· Для
хранения информации используют базы данных ”MySQL”.

· Для
того,
чтобы связать эти технологии воедино,
используют различные языки программирования, например “PHP”.

Научились создавать простые веб-страницы
при помощи языка HTML
в
текстовом редакторе «Блокнот».

Видео уроки по созданию сайтов. HTML, CSS, JavaScript, PHP. Drupal, Joomla, WordPress

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжаем видео блог и продолжаем курс видео уроков SQL и основам реляционных баз данных на примере библиотеки SQLite. В качестве СУБД мы выбрали SQLite и, естественно, чтобы…

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой запись я начинаю публикацию курса видео уроков по SQL и основам реляционных баз данных на примере библиотеки SQLite. Первая тема называется у нас: «Выбираем СУБД…

Привет, посетитель сайта ZametkiNaPolyah.ru! Начинаю публиковать в блоге все, что появилось на YouTube за последнее время, ведь я не сидел сложа руки, а записывал видео. Вот, например, появился целый курс…

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

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Видео блог и теперь здесь будет новый раздел, под названием бесплатные видео уроки по HTML для начинающих. Подписывайтесь на мой YouTube канал, этим вы…

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Видео блог и теперь здесь будет новый раздел, который называется бесплатные видео уроки по JavaScript. Хотел бы немного прорекламировать свой канал!:) Во-первых, обновления на…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Что же, я продолжаю свой Видео блог и его раздел Как создаются шаблоны сайтов HTML и CSS. Мы продолжаем рассматривать вопрос: как создать…

Создание сайтов: видеоуроки

Главная

Разделы

Создание сайтов: видеоуроки

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад
Вперед

Создание сайтов: видеоуроки

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

Ок, начнем с того, нужно ли это вам в принципе. Если почтовый адрес нужен вам для переписки с мамой, девушкой или любимой тетушкой из Канады, то email со своим доменом вам вообще не нужен. Письма будут прекрасно доходить и так, независимо от того, какой почтовик вы используете: gmail, yandex, mail или что-то еще. Поэтому заводить такой email по принципу «чтобы было» смысла никакого.

Частенько при подборе домена можно оказаться в неприятной ситуации: вы долго придумываете, какое бы имя для сайта вам зарегистрировать, наконец придумываете, но оно оказывается уже занято. И все бы ничего, но это имя уже настолько вами выстрадано, настолько хорошо подходит под ваш проект, что «расставаться» с ним (хотя оно ещё и не было вашим) ох как не хочется!

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

После того, как вы определились с тематикой вашего сайта, настает ответственный момент — нужно выбрать и зарегистрировать доменное имя, т.е. адрес, под которым ваш сайт будет доступен в сети для всех желающих. К сожалению, далеко не всегда удается «забронировать» себе именно тот домен, который вы хотите.

В этом видео мы разберем такой момент, как создание плавной прокрутки страницы вверх при клике по ссылке. Очень часто бывает удобно воспользоваться ссылкой «Наверх», когда находишься ближе к нижней части страницы. Можно реализовать эту возможность исключительно средствами HTML и CSS, однако в данном видео я покажу вам, как можно доработать эту функцию и сделать ее более удобной с помощью библиотеки jQuery.

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

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

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

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

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

В этом видеоуроке мы с вами рассмотрим установку на сайт опроса «Smart PHP Poll». Он использует базу данных и технологию Ajax для отображения результатов голосования без перезагрузки страницы.

В этом небольшом видео я покажу вам, как сделать дамп базы данных в программе phpMyAdmin. Создание дампов — довольно распространенная задача, встающая перед каждым веб-разработчиком. Помимо создания и экспорта дампа базы данных вы также увидите, как можно импортировать его содержимое для вставки в другую базу данных.

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

В этом уроке мы разберем с вами установку и настройку скрипта jQZoom. Как понятно из названия, он призван приближать, увеличивать. Скрипт использует JavaScript-библиотеку jQuery и позволяет красиво показывать увеличенные изображения.

Наверх

Видеокурсы по созданию сайтов

Главная

Страницы

Видеокурсы по созданию сайтов

Видеокурсы по созданию сайтов

На этой странице Вы найдете краткое описание созданных мной курсов по созданию сайтов.

В настоящее время очень многие люди интересуются вопросами разработки сайтов.

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

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

1. Бесплатный видеокурс

«Сайт-Визитка За 15 уроков»

Этот видеокурс задуман мной как решение, позволяющее быстро (менее, чем за 4 часа) создать простой сайт-визитку с нуля.

Я прекрасно понимаю тех, кто не хочет сразу лезть в «дебри» сайтостроения, а пытается создать сначала что-то более простое.

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

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

В данный видеокурс вошли следующие уроки:

1. Введение (02 мин. 07 сек.)

2. Подготовка рабочей среды (10 мин. 16 сек.)

3. Поиск шаблона сайта и создание хоста в Денвере (05 мин. 58 сек.)

4. Вносим базовые правки в шаблон (13 мин. 53 сек.)

5. Работаем с главным меню сайта (12 мин. 10 сек.)

6. Занимаемся «каруселью» на главной странице (16 мин. 25 сек.)

7. Правим центральную и нижнюю части шаблона (22 мин. 54 сек.)

8. Правим шаблоны страниц «Кто мы», «Услуги» и «Портфолио» (36 мин. 43 сек.)

9. Работаем со страницей «Контакты» (16 мин. 03 сек.)

10. «Превращаем» HTML-сайт в PHP-сайт. Часть 1 (16 мин. 52 сек.)

11. «Превращаем» HTML-сайт в PHP-сайт. Часть 2 (15 мин. 57 сек.)

12. Вносим правки в подключаемые блоки (16 мин. 22 сек.)

13. Правим отдельные страницы (21 мин. 53 сек.)

14. Реализуем выделение текущей страницы в навигации по новостям (05 мин. 08 сек.)

15. Реализуем выделение текущей страницы в главном меню (17 мин. 44 сек.)

16. Проводим финальную чистку сайта (08 мин. 01 сек.)

Ниже Вы можете видеть скриншоты из некоторых уроков:

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

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

2. Бесплатный видеокурс

«PHP для создания сайтов: введение»

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

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

В процессе тренинга вы узнаете: что такое PHP, и как функционирует этот язык программирования; что такое статические и динамические сайты, и в чем их отличия, какие сайты можно создавать на PHP, какие инструменты необходимы для работы с PHP, и многое другое…

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

В данный видеокурс вошли следующие уроки:

1. Вводный урок (01 мин. 17 сек.)

2. Принцип работы сайтов (06 мин. 45 сек.)

3. Как работает PHP? (08 мин. 40 сек.)

4. Почему PHP так популярен? (09 мин. 03 сек.)

5. Динамические PHP-страницы (10 мин. 35 сек.)

6. Что нужно для работы с PHP? (08 мин. 30 сек.)

7. Ваш «Джентльменский набор» (11 мин. 21 сек.)

8. Осваиваем «Денвер» (28 мин. 02 сек.)

9. Какой редактор кода выбрать? (13 мин. 07 сек.)

10. Ваша первая PHP-страница (16 мин. 09 сек.)

11. PHP в действии: примеры сайтов (22 мин. 10 сек.)

Ниже Вы можете видеть скриншоты из некоторых уроков:

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

Кроме того, вы создадите вашу первую PHP-страницу и увидите, какие возможности для создания сайтов предоставляет язык PHP.

3. Бесплатный видеокурс

«Основы HTML и CSS»

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

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

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

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

И самое главное — Вы заложите фундамент для своего дальнейшего развития в деле веб-разработки..

В данный видеокурс вошли следующие уроки:

1. Общий механизм работы сайтов и суть языка HTML (07 мин. 38 сек.)

2. Структура HTML-документа и первая страница (18 мин. 55 сек.)

3. Особенности работы базовых тэгов и правило вложенности (11 мин. 16 сек.)

4. Комментарии, строчные и блочные элементы. Плагин Firebug (15 мин. 21 сек.)

5. Изучаем спецсимволы, списки и таблицы (14 мин. 56 сек.)

6. Ссылки, url-адреса и понятие атрибута (13 мин. 59 сек.)

7. Работа с изображениями. Навигационная карта (12 мин. 47 сек.)

8. CSS. Введение: селекторы типа и селекторы класса (18 мин. 03 сек.)

9. Селекторы ID и селекторы потомков. Основные CSS-правила (21 мин. 05 сек.)

10. Псевдоэлементы. Типы подключения CSS-стилей к документу (16 мин. 28 сек.)

11. Создаем основу для простого двухколоночного CSS-макета (16 мин. 48 сек.)

12. Дорабатываем двухколоночный CSS-макет (12 мин. 46 сек.)

13. Создаем 3-колоночный макет на основе 2-колоночного (10 мин. 55 сек.)

14. Для завершенности вносим в макет элементы дизайна (17 мин. 40 сек.)

15. Урок по основам работы с Notepad++ (09 мин. 16 сек.)

Ниже Вы можете видеть скриншоты из некоторых уроков:

Изучив данный видеокурс, Вы сможете спокойно смотреть на HTML и CSS код и понимать, что он означает.

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

При желании Вы можете модифицировать эти макеты и доработать их под конкретные задачи т.к. Вы будете знать, как они устроены.

4. Бесплатный видеокурс

«Крэш-Курс по основам работы с JavaScript»

Данный видеокурс я создал специально для тех людей, кто не знает, как подступиться к изучению JavaScript.

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

Изучив курс, Вы будет спокойнее смотреть на JavaScript-код, с которым будете сталкиваться и поймете, что на самом деле изучить все это более, чем реально.

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

В данный видеокурс вошли следующие уроки:

Урок 1. Основы работы с переменными и функциями в JavaScript (22 мин. 45 сек.)

Урок 2. Получение доступа к элементам, глобальные и локальные переменные (15 мин. 16 сек.)

Урок 3. Типы данных в JavaScript и конструкция if-else (23 мин. 57 сек.)

Урок 4. Работа с двойными условиями и циклы в JavaScript (18 мин. 24 сек.)

Урок 5. Работа с элементами массива. Возвращение значения функцией и понятие объекта в JavaScript (11 мин. 13 сек.)

Урок 6. Создаем «голыми руками» функцию для «растворения» элементов страницы (17 мин. 38 сек.)

Урок 7. Создаем функцию для удаления дублирующихся значений из массива (17 мин. 48 сек.)

Ниже Вы можете видеть скриншоты из некоторых уроков:

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

5. Платный видеокурс

«Повелитель PHP: кратчайший путь к мастерству без толстых учебников»

Видеокурс «Повелитель PHP: кратчайший путь к мастерству без толстых учебников» предназначен для тех, кто хочет изучить язык PHP для более эффективной работы при разработке сайтов.

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

Данный курс позволит вам спокойно работать с PHP, значительно упростив вашу работу по созданию и поддержке сайтов (как созданных на базе CMS-систем, так и самописных).

Помните, что фундаментальные знания никогда не бывают лишними.

В данный видеокурс вошли следующие блоки:

1. Рабочие инструменты (5 уроков)

2. Основные понятия и конструкции языка PHP (10 уроков)

3. Циклы и массивы (7 уроков)

4. Введение в функции (7 уроков)

5. Функции работы с массивами (5 уроков)

6. Функции работы со строками (10 уроков)

7. HTTP-запросы, параметры URL и HTML-формы (4 урока)

8. Управление сеансами (cookies и сессии) (3 урока)

9. Дополнительные моменты (9 уроков)

Ниже Вы можете видеть в уменьшенном размере скриншот главного меню курса:

На создание этого видеокурса ушло более полугода кропотливой работы.

Но что еще важнее – более двух с половиной лет потребовалось на то, чтобы точно узнать, что должно войти в этот курс, а что — нет.

6. Платный видеокурс

«Воспламенитель Кода: Сайт-Визитка на CodeIgniter»

Этот видеокурс я создал для тех людей, кто хочет научиться создавать гибкие и функциональные сайты-визитки, а также небольшие «контентные» сайты без изучения тонкостей PHP.

Вам достаточно знать лишь основы HTML и CSS и некоторые базовые понятия из PHP (переменная, функция, цикл, массив и т.п.).

Я могу смело рекомендовать Вам этот видеокурс, если Вы хотите выйти на новый уровень веб-разработки после того, как освоили самые азы создания сайтов.

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

При этом, благодаря возможностям фреймворка CodeIgniter, Вы сможете реализовать на сайте многие полезные функции, сделать которые, зная лишь основы PHP, но не используя CodeIgniter, просто невозможно.

В данный видеокурс вошли следующие подразделы:

1. Разбираемся с HTML-разметкой, CSS и JavaScript (4 урока)

2. Переносим сайт на CodeIgniter и разбираем основные понятия ООП — объектно-ориентированного программирования (2 урока)

3. Концепция MVC (Модель-Вид-Контроллер) и создание первого Контроллера (2 урока)

4. Осваиваем работу с базой данных и phpMyAdmin (3 урока)

5. Выводим информацию из базы данных на страницу (2 урока)

6. Улучшаем URL-адреса сайта (2 урока)

7. Работаем над формой обратной связи (3 урока)

8. Используем сессии и AJAX-запросы (4 урока)

9. Обновление капчи без перезагрузки страницы (2 урока)

10. Панель администратора: добавление страниц (4 урока)

11. Автоматический вывод страниц в навигационном меню (6 уроков)

12. Подключаем визуальный редактор контента для добавления и редактирования страниц (3 урока)

13. Обновление и удаление страниц (2 урока)

14. Дорабатываем сайт и приступаем к защите админки (3 урока)

15. Занимаемся функцией авторизации (4 урока)

16. Управляем настройками из админки (2 урока)

17. Оптимизируем сайт и реализуем выделение текущего пункта меню (4 урока)

18. Переносим сайт на реальный сервер (2 урока)

Ниже Вы можете видеть в уменьшенном размере скриншот главного меню курса:

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

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

Здесь не будет долгих «прелюдий» и раскачек по несколько часов — мы сразу «возьмем быка за рога» и в пошаговом режиме создадим сайт-визитку на CodeIgniter.

7. Платный видеокурс

«JavaScript и jQuery с Нуля»

Видеокурс «JavaScript и jQuery с Нуля» предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

Курс будет полезен тем, кто уже умеет создавать сайты, используя HTML, CSS и PHP. Изучив его, Вы сможете создавать более красивые и функциональные сайты.

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

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

В данный видеокурс вошли следующие подразделы:

1. Понятие и история JavaScript (1 урок)

2. Основы JavaScript (4 урока)

3. Переменные (2 урока)

4. Операторы сравнения и конструкция if-else (3 урока)

5. Функции (3 урока)

6. Массивы (6 уроков)

7. Циклы (2 урока)

8. Работа со строками (7 уроков)

9. Объект Date (4 урока)

10. Работа с числами и объект Math (4 урока)

11. Создание собственного объекта (2 урока)

12. Работа с окнами (2 урока)

13. Объектная модель документа (DOM) (6 уроков)

14. Доступ к элементам страницы (5 уроков)

15. Фильтры в jQuery (3 урока)

16. Выборки в jQuery и цепные функции (2 урока)

17. Работа с элементами выборки (9 уроков)

18. События (9 уроков)

19. Эффекты jQuery (3 урока)

20. Работа с формами (9 уроков)

21. Практические примеры (8 уроков)

Ниже Вы можете видеть в уменьшенном размере скриншот главного меню курса:

На создание этого видеокурса я потратил 5 месяцев, собрав в 105 видеоуроках всю необходимую иноформацию и примеры для создания удобных, красивых и функциональных сайтов.

8. Платный видеокурс

«PHP и CodeIgniter с Нуля: Создание Динамических Web-Сайтов»

Данный видеокурс я создал для тех людей, кто хочет научиться создавать полнофункциональные PHP-сайты, обладая при этом лишь базовыми знаниями языка PHP.

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

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

В данный видеокурс вошли следующие разделы:

1. Основы PHP (27 уроков)

2. Основы SQL и работы с базой данных (7 уроков)

3. Основы Объектно-ориентированного программирования (6 уроков)

4. Изучаем CodeIgniter (17 уроков)

5. Создаем приложение на CodeIgniter (57 уроков)

6. Дополнительные возможности и перенос на реальный сервер (13 уроков)

Ниже Вы можете видеть в уменьшенном размере скриншот главного меню курса:

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

Никаких бесполезных знаний и уроков — только то, что нужно на самом деле для создания профессиональных приложений на PHP с использованием фреймворка CodeIgniter.

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

Наверх

RUSELLER.com — Видеоуроки по созданию сайта для бизнеса

Сайт ruseller.com содержит много полезной информации о создании и продвижении Интернет-ресурсов. Здесь пользователь может изучить основы языка разметки HTML, DHTML. Автором проекта является WEB-программист и дизайнер Евгений Попов. Видеокурсы на Ruseller позволяют пользователю получить представление о правильной технологии разработки сайтов, включая использование инструментов WordPress, Joomla, PHP и др. Любой клиент сайта может начать свое знакомство с WEB-технологиями, изучив предложенные автором уроки. Для этого можно приобрести информационные товары, что целесообразно делать людям, решившим серьезно заняться информационным бизнесом. В каждом разделе сайта есть актуальная информация о наиболее распространенных инструментах по созданию и поддержке WEB-проектов, их оснащению. Все это необходимо для максимально эффективного привлечения посетителей на любой ресурс.

В рубрике «проекты» пользователь получает представление о сгруппированных уроках и файлах по одной теме. Каждый урок на Ruseller предусматривает большую практическую и теоретическую работу. Над уроками работают переводчики, которые излагают пользователю содержание занятия, рассказывают о наиболее существенных проблемах WEB-разработки информационных ресурсов. Большой интерес у клиентов сайта вызовет рубрика «скачать». Здесь они знакомятся с полезными инструментами для обработки WEB-данных. Например, в разделе «программы» пользователь может скачать наиболее востребованные и эффективные программные продукты для развития информационного бизнеса. Рубрика «рекомендую» содержит полезные ресурсы, используя которые можно сделать свой сайт источником хорошего дохода. Для полноценной работы с сайтов руселлер необходима регистрация, но на проект также можно попасть через аккаунты в популярных российских и международных социальных сетях.

публикация тематических материалов по веб-разработке и сайтостроению

Отзывы от наших читателей

Отзыв от Микута Олеси

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Фреймворк CakePHP: с нуля до гуру

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

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Практика верстки под мобильные устройства

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Корпоративный сайт под ключ

Благодаря изучению основных 3-х курсов (Интернет-магазин под ключ, JavaScript&jQuery с нуля до профи и Практика верстки под мобильные устройства) я создала уже более 10 сайтов, причем среди них есть интернет-магазины, сайты компаний, лендинг, многоязычный сайт. Есть сайты на WordPress. Один достаточно успешный сайт — copacabanaclub.kz, который не так давно победил в конкурсе на лучший проект, созданный клиентами Webformyself.com.

Мое знакомство с сайтом webformyself.com началось уже несколько лет назад. Сначала меня просто заинтересовала идея научиться создавать сайты, я начала «ходить» по разным сайтам, искать информацию, купила несколько курсов на других сайтах. Освоила html, css, основы PHP и MySQL. Но как объединить эти знания и создать по-настоящему рабочий, полноценный проект — это осталось не понятно.

Однажды так же случайно наткнулась на сайт webformyself.com. Прочитала некоторые статьи, посмотрела видео-уроки. Мне понравилось как доходчиво объясняют многие непонятные для меня моменты.

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

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

После изучения курса по созданию интернет-магазина я научилась правильно создавать БД для крупных проектов, отделять логику работы сайта от его оформления (по модели MVC), создавать множество полезных функций (авторизация пользователей, корзина), поняла как создается административная панель сайта, а также заполнила многие пробелы в знаниях по PHP.

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

Во всех этих курсах мне понравился подход к созданию сайтов. В них всегда подробно пишется и объясняется каждый участок кода, для чего он нужен и как работает. Причем работа начинается с нуля и постепенно добавляется функционал. «Белых пятен» не остается. Информация настолько подробная и полная, что параллельно можно сразу же создавать свой сайт, применяя логику авторов курса.

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

В настоящее время благодаря этим курсам я уже около года работаю на фирме, которая занимается созданием и продвижением сайтов.

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

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

Отзыв от Фоминова Алексея

Купленные курсы:

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Интернет-магазин под ключ

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

Начал я с полного нуля, до этого посмотрев курс Евгения Попова HTML, СSS.

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

Исключительно Ваша репутация в сети, и рекомендации других таких же именитых гуру интернета) А также все отзывы интернета только хорошие. Ну и сервис на высоте, видно что ориентация на клиента растет с каждым днем!

Теперь знаю куда смотреть при разбирании сайта на косточки. Научился пользоваться такими программами как локальный сервер denwer, php designer, filezilla, notepad, adobe dreamweaver, photoshop, дополнениями браузеров для быстрой проверки сайтов и нахождении необходимой строчки кода, с чего начинать писать сайт, работа с CMS WordPress, работа с шаблонами WordPress и подстраивание их под свои требования, написания структуры сайта, плана сайта добавления функция на сайт, написание кода с верстки…вообщем устал перечислять, еще кучу всего!!!

Даже могу теперь спорить с друзьями программистами,которые оказывается ничего не понимают, это жесть, а учились 5 лет!

Больше всего запомнилось объяснение по полочкам как это не банально звучит. И возможность полностью повторить на практике, причем все действия комментировались с возможными изменениями под свое написание сайта.

Сейчас цели связаны не с сайтостроением. Но при достижении вернусь к изучению остальных курсов. Следующим этапом будет изучение курса от WebFormyself «Верстка: сайта от основ до конкретного результата» и «Практика верстки под мобильные устройства».

Сейчас занят основами маркетинга в интернете Яндекс, Google, соц. сети и тд и попутно продажи оффлайн. Как только немного разгружусь и появится свободное время вернусь к изучению сайтостроения вместе с WebFormyself, придерживаюсь мнения что своя CMS, это все таки лучший вариант, качественно, чистота кода, профессионально и главное УНИКАЛЬНО!

Курс очень объемный требует только время. Мне понадобилось около месяца в день уделял по 3-4 часа. При изучении вопросы которые возникали, удавалось все решить самому.

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

Волшебных пилюль нету, но теперь расклад понятен и суть ясна, как никогда) До этого думал, что это просто нереальнооо) Но нужно, просто соблюдать последовательность. В общем потребность удовлетворена полностью. Перестал искать другие курсы и т.д. в сайтостроении, так как уже нашел целый комплекс Webformyself! Благодарю Вас за открытие глаз на программирование!!!)

Отзыв от Разумовского Максима

Купленные курсы:

Интернет-магазин под ключ

С помощью приобретенного курса я научился разрабатывать сайты по шаблону MVC. До знакомства с курсом я понятия не имел что такое шаблоны проектирования и зачем они нужны. Но понимание разработки сайтов по шаблонам проектирования стало гигантским скачком в моем развитии как программиста и разработчика сайтов. Кроме того именно этот курс научил меня разрабатывать для сайтов собственные CMS и сейчас мне проще написать для любого сайта собственную панель управления чем использовать и каждый раз затачивать под сайт какой-нибудь WordPress или Jooml-у.

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

Начинал я в далекие 2000-е с изучения XHTML. Тогда еще ни кто не готовил видеокурсы и приходилось собирать информацию по книжкам и тематическим сайтам. Было много длительных перерывов в моем развитии как разработчика и о профессиональном занятии созданием сайтов я даже не предполагал. Сейчас разработка сайтов это моя основная деятельность которая меня кормит. Я уже и не представляю что такое каждое утро ходить на работу. Моя жизнь полностью планируется только мной и зависит только от моей занятости.

На самом деле у меня очень долго не могла проявиться полная картинка процесса создания сайта. Я знал HTML и CSS, мог «слепить» несколько страничек связанных между собой гиперссылками. Но сделать по настоящему что-то стоящее я не мог. Кроме того знаний HTML и CSS было явно не достаточно для полноценной работы. Именно видеокурсы, в том числе кусы webformyself, собрали в моей голове картину «процесс создания сайтов» из обрывков знаний и помогли расширить объем знаний и навыков.

Понимание того, что купив курс «Интернет-магазин под ключ» я научусь писать движки для сайтов, зародили в моей голове маниакальное желание приобрести этот курс. Кроме того в программе курса состояли бонусом полные курсы по PHP и MySql. А это профессиональная информационная база для любого веб-программиста. Т.е. я понимал что я не просто изучу PHP и MySql но и напишу свой движок, при чем не просто движок какого-нибудь сайта визитки, а самый что ни есть настоящий движок интернет магазина.

Купив курс «Интернет-магазин под ключ» я не только изучил PHP и MySql, но и научился создавать собственные CMS для сайтов. Создание каталога товаров, ЧПУ, хлебные крошки, авторизация на сайте, постраничная навигация для сайта. Большей части того что я умею сейчас я обязан именно этому видеокурсу.

Больше всего наверно запомнилось, как я никак не мог вникнуть в суть шаблона проектирования MVC. Наверно раз 7 я просматривал этот момент, в итоге осознание пришло только утром следующего дня. До «жираф», но главное что дошло.

Сейчас я все меньше занимаюсь разработкой сайтов под заказ и все больше уделяю внимание собственным развиваемым проектам. У меня уже есть свой интернет-магазин и ряд мелких проектов. В настоящее время я создаю городской портал. И надеюсь что через полгода у меня уже будет ряд проектов которые обеспечат неплохой пассивный доход.

Хотел бы поблагодарить команду WebForMySelf за их нужную и очень полезную работу. Я уверен что, я не единственный для кого WebForMySelf открыли мир веб-разработки, тем самым изменили жизнь, положив начало для нового интересного и прибыльного занятия по жизни. Если сказать прямо то без WebForMySelf не было бы меня как веб-разработчика. Поэтому от Всех нас и от себя лично хочется поблагодарить команду WebForMySelf и пожелать увеличение роста продаж в геометрической прогрессии с каждым новым курсом.

Отзыв от Деникаева Тимура

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Практика монетизации блога: от раскрутки до реальных денег

Фреймворк CakePHP: с нуля до гуру

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Карьера веб-дизайнера. С нуля до первой продажи за 14 дней

Мастер веб-дизайна 2.0

Практика верстки под мобильные устройства

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Практика резиновой верстки

Премиум клуб

WordPress-Ученик

На данный момент я только прослушиваю Ваши курсы с большим интересом. Результат огромный для меня — это самоопределение. Ведь, в моем возрасте начинать с самого начала… это что-то значит.

Я боялся, что у меня ничего не получится. Были большие сомнения стоит ли начинать в таком возрасте???

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

Я многому научился и до сих пор черпаю огромные знания в области Веб-программирования из видео уроков Андрея и….. Андрея ).

Так как я все время говорю не об одном курсе, то хочу сказать, что в каждом из них есть свои запоминающие моменты. Трудно сказать, что запомнилось больше всего. Правильнее будет сказать, что «воды» там совершенно НЕТ. Все четко, лаконично и на профессиональном уровне!!!

Через полгода я планирую уже смело брать заказы. Цель я перед собой поставил. В моих планах со временем создать свою Web студию. И, конечно же, продолжу свою преподавательскую деятельность, но уже в области веб-программирования.

Я безумно рад, что мне очень повезло познакомиться с командой Webformyself. Они действительно, делают неоценимый вклад в область Веб индустрии. Хочу отдельно выразить огромную благодарность Бернацкому Андрею и Андрею Кудлаю. Если один из них Автор с Большой Буквы, то у другого это просто ДАР!!! Ребята, ВЫ МОЛОДЦЫ!!!

30 бесплатных видеоуроков для изучения веб-дизайна

Джереми Х.

Начать заниматься веб-дизайном может быть довольно сложно. Для читателей в Интернете есть масса отличных бесплатных руководств. Однако некоторые люди считают, что визуальные инструкции более эффективны для их стиля обучения.

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

NetTuts

NetTuts — один из лучших поставщиков бесплатного контента, связанного с обучением веб-дизайну. У них есть множество статей и видеоуроков для учащихся всех уровней. Вот несколько примеров для новичков в HTML5, CSS3 и JavaScript.

Полное руководство по созданию дизайна и преобразованию его в HTML и CSS

«Этот скринкаст послужит заключительной записью в серии, состоящей из нескольких частей, на сайтах TUTS, которые демонстрируют, как создать красивую домашнюю страницу для вымышленного бизнеса.Мы узнали, как создать каркас на Vectortuts +; мы добавили цвет, текстуры и эффекты на Psdtuts +; теперь мы возьмем наш готовый PSD и преобразуем его в красиво оформленный веб-сайт на HTML и CSS ».

Как заставить все браузеры правильно отображать разметку HTML5: Screencast

«HTML 5 предоставляет несколько отличных новых функций для веб-дизайнеров, которые хотят кодировать читаемые, семантически значимые макеты. Однако поддержка HTML 5 все еще развивается, и Internet Explorer — последний, кто добавил поддержку.В этом руководстве мы создадим общий макет, используя некоторые новые семантические элементы HTML 5, а затем воспользуемся JavaScript и CSS, чтобы сделать наш дизайн обратно совместимым с Internet Explorer. Да, даже IE 6. »

Как создать меню навигации в стиле лавовой лампы

«Один из наших читателей попросил урок о том, как создать меню в стиле лавовой лампы. К счастью, это довольно простая задача, особенно при использовании библиотеки JavaScript. Сегодня мы построим его с нуля ».

JavaScript от Null: серия видео

«Эта серия скринкастов посвящена исключительно JavaScript и перенесет вас от первого сообщения« Hello, World »к более сложным темам.”

Как преобразовать PSD в XHTML

«Я по-прежнему удивляюсь, насколько хорошо продолжает работать учебник Collis« Создайте изящный сайт-портфолио с нуля ». Прошли месяцы, но каждую неделю он все еще публикует хорошие цифры. Учитывая этот факт, я решил создать скринкаст, который покажет вам, как именно преобразовать PSD в идеальный XHTML / CSS ».

Slice and Dice, PSD

«В сегодняшнем видеоуроке мы будем нарезать PSD, нарезать кубиками для Интернета и подавать на горячей плите.Наш дизайн выполнен в изящном стиле «Web 2.0» и был любезно предоставлен Джофри из ThemeForest.net. Обязательно посетите его профиль, если у вас есть возможность ».

Doctype TV

Ребята из Doctype часто выпускают скринкасты на самые разные темы из области веб-дизайна. Ниже вы найдете видео, которые познакомят вас с Ajax, сеточным дизайном, столбцами CSS3 и созданием вашего первого плагина jQuery.

Грид-дизайн и AJAX 101

«Ник дает обзор дизайна на основе сетки, а Джим разбирает основы AJAX.”

Столбцы CSS3 и плагины jQuery

«Ник разбирает многоколоночные макеты CSS, а Джим шаг за шагом показывает вам, как создать свой собственный плагин jQuery».

ТутВид

TutVid — это обучающий сайт по веб-дизайну, который предлагает бесплатные обучающие видео. Вы также можете купить данное видео, чтобы получить загружаемую версию в более высоком разрешении вместе со всеми связанными файлами проекта. Ниже мы рассмотрим несколько доступных руководств по Dreamweaver.

Dreamweaver CS4: теги стиля с помощью CSS

«Узнайте все о тегах стиля и о том, как писать код CSS в Dreamweaver.К концу этого руководства вы хорошо поймете, как писать CSS, как работает CSS и как вы можете писать свой код CSS в Dreamweaver ».

14 шагов: как использовать Divs

«Мы рассмотрим целый ряд вещей, которые вы хотите знать, когда начинаете использовать Div. Узнайте все о размещении и использовании Div, а также о стилизации их с помощью CSS в Dreamweaver! »

Создать базовый XML-документ

«В этом видео мы быстро рассмотрим XML, что это такое и для чего он используется.Затем мы сядем и напишем наш самый первый XML-документ в виде простого списка из шести человек. Мы будем использовать Dreamweaver, но на самом деле подойдет любой текстовый редактор. Мы рассмотрим создание фактического языка, добавление атрибутов, а также то, как мы создаем наши собственные теги, и только некоторые основы, которые помогут вам написать собственный XML-документ ».

Создание веб-сайта с полным CSS

«В этом видео мы начнем с папки изображений и примерно через 30 минут создадим очень простой макет из двух столбцов, используя CSS для стилизации нашей страницы! Мы узнаем все об использовании div, создании правил CSS, таргетинге на div, создании фона и многом другом! Начните учиться использовать всю мощь каскадных таблиц стилей для создания, компоновки и стилизации ваших веб-страниц уже сегодня! »

Themeforest

Themeforest — это торговая площадка Envato, которая продает шаблоны веб-сайтов различных типов (HTML, WordPress, Joomla и т. Д.)). На сайте также есть блог, в котором время от времени публикуется действительно полезный контент. Посмотрите скринкасты на PHP и jQuery ниже.

Погружение в серию видео о PHP (11 частей)

«Сегодняшний день знаменует собой начало совершенно новой серии статей, которые ТОЧНО покажут вам, как начать работу с PHP. Как и в случае с серией «jQuery для абсолютных новичков», мы начнем с нуля и постепенно перейдем к более сложным темам. ”

jQuery для начинающих

«С сегодняшнего дня я запускаю серию ежедневных видеороликов, которые ТОЧНО научат вас использовать библиотеку jQuery в ваших собственных проектах.Мы начнем с загрузки фреймворка, создания нашей первой функции, изучения синтаксиса и многого другого. Каждый день я буду публиковать пятиминутный «тренировочный режим», который расширяет то, что вы уже узнали. Так что нет причин больше с этим бороться! Изучите эту чертову штуку и начните зарабатывать больше денег на ThemeForest.net, используя свои новые навыки ».

Уловки CSS

Крис Койер из CSS Tricks выпускает непрерывный поток невероятно образовательных видеоуроков. На его сайте сейчас есть 84 бесплатных скринкаста, которые охватывают различные техники и советы по HTML, CSS и JavaScript.Ниже мы рассмотрим шесть, которые будут полезны новичкам.

Преобразование мокапа Photoshop (часть 1 из 3)

«В этом первом видеоподкасте я начинаю процесс преобразования макета веб-сайта Adobe Photoshop в настоящий веб-сайт на основе CSS. Здесь довольно грубо, ребята, я уверен, что со временем они станут более сосредоточенными ».

Форматирование CSS

«Правильная организация и правильное форматирование файлов CSS могут сэкономить вам много времени и сэкономить нервы в процессе разработки и особенно во время устранения неполадок.Многострочный формат упрощает просмотр атрибутов, но делает ваш файл очень длинным по вертикали. Однострочный формат сохраняет ваш файл коротким по вертикали, что удобно для просмотра селекторов, но труднее просматривать атрибуты. Вы также можете выбрать, как вы хотите сгруппировать свои инструкции CSS ».

Преобразование мокапа Photoshop: часть вторая, первый эпизод

«Было ОЧЕНЬ много замечательных отзывов о первой серии« Преобразование мокапа Photoshop в HTML / CSS ». Так что давайте сделаем это снова! Каждый веб-сайт отличается от других и требует различных технологий преобразования, поэтому на этот раз будет много чего узнать, что будет отличаться от предыдущего.”

Проектирование для WordPress: часть первая

«В первой части мы будем загружать и устанавливать WordPress. Затем мы установим тему «Старкеры» Эллиота Джея Стокса, чтобы начать с совершенно свежего листа для нашего нового дизайна. Нет смысла начинать с темы по умолчанию, это больше хлопот, чем пользы! Во второй части мы рассмотрим теорию, лежащую в основе проектирования для WordPress, и то, как это во многом похоже на «модульную работу» и фактически приступим к проектированию. В третьей части мы закончим дизайн и начнем с некоторых более продвинутых функций.”

HTML и CSS — ОЧЕНЬ основы

«Это видео — ОЧЕНЬ основы того, что такое HTML и CSS, для абсолютного новичка. Файлы HTML и CSS — это буквально текстовые файлы. Для их создания не требуется никакого специального программного обеспечения, хотя хороший редактор кода может оказаться полезным. Вы можете создавать эти файлы на любом компьютере и использовать свой веб-браузер для их предварительного просмотра во время разработки. Вы можете рассматривать HTML как содержимое вашего веб-сайта: набор текста и ссылки на изображения, заключенные в теги.CSS — это дизайн вашего сайта. Он нацелен на теги, которые вы написали в своем HTML, и применяет стиль. Разделение этих двух вещей — ключ к качественному веб-дизайну ».

Создание веб-сайта: преобразование HTML / CSS

«Во второй части этой серии статей мы начинаем преобразование HTML / CSS макета Photoshop, который мы создали в первой части. Мы начинаем с очень скелетной структуры проекта. Затем мы рассмотрим организацию слоев файлов в Photoshop. Затем мы начинаем снизу вверх, создавая нужные нам части из файла Photoshop и записывая HTML и CSS, необходимые для выполнения работы.Большая часть работы заключается не в том, чтобы «разрезать» файл Photoshop, а в том, чтобы внимательно посмотреть на него и попытаться имитировать то, что там делается, с помощью правильной разметки и методов CSS ».

Victoria Web

Victoria web — это своего рода онлайн-школа, которая сейчас находится в стадии бета-тестирования. У них есть небольшая горстка бесплатных видеоуроков для веб-разработчиков.

Начало работы с PHP

«Хотите начать изучение и создание приложений PHP? В этом видео демонстрируются инструменты, используемые профессионалами отрасли для быстрого и эффективного развертывания и запуска своих приложений.”

Введение в jQuery

«Введение в структуру jQuery JavaScript. Вы узнаете, как использовать селекторы CSS для изменения объектов DOM, сдвигая их в и из поля зрения, затухая и создавая собственные анимации ».

Весь веб-дизайн

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

ShowMeDo

ShowMeDo — это источник обучающих видеороликов по работе с технологиями и программным обеспечением с открытым исходным кодом.

Основы Javascript

«В этом видео я показываю основы Javascript. Тег