| # | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
|---|---|---|---|---|---|
| 1 |
Знакомство
|
без видео |
|||
|
На этом уроке мы познакомимся. Меня зовут Волосатов Евгений Витольдович или «Игромистр». А как зовут тебя? Открой блокнот, напиши там своё имя, фамилию и коротко о себе. Затем сделай скриншот и прикрепи к отчёту за этот урок. Отчёт отправил: 13417. Chip Выполнено за 16 мин. [Показать отчёт] Научился: Решил приступить к изучению web-технологий, расширить свои знания, узнать новое, набраться практики :) |
|||||
| 2 | Каким будет мой сайт |
без видео |
|||
|
На какую тему ты хочешь создать сайт? Что будет на этом сайте? Для кого будет этот сайт? Ответь на вопросы и нарисуй схему первой страницы своего сайта. Отчёт отправил: 13417. Chip Выполнено за 52 мин. [Показать отчёт] Научился: Задание к уроку немного озадачило, сразу со старта придумать тематику сайта, его аудиторию и схему первой страницы. Вопросы мало связаны с программированием. Прикинув варианты, я решил в качестве тематики выбрать изучение языков C/C++, аудитория начинающие программисты. Выбор названия озадачил, сложно подобрать, допустим learngnuc.io. Набросал схему первой страницы, сложно рисовать то, что слабо представляешь :) |
|||||
| 3 | Второй подход к эскизу |
без видео |
|||
|
Чтобы сделать хороший сайт - нужно чётко представлять, как он выглядит. Для этого нужно его нарисовать несколько раз. Сделай ещё ДЕВЯТЬ рисунков своего сайта. Каждую новую схему рисуй не подглядывая в предыдущие. Для отчёта за этот урок нужно приложить фотографию девяти рисунков своего сайта. Отчёт отправил: 13417. Chip Выполнено за 10 мин. [Показать отчёт] Научился: Прикладываю эскиз из прошлого урока, так как при попытке сделать с нуля получается та же самая схема. Новых идей и конкретики нет, в приоритете другие цели. |
|||||
| 4 |
Простейшая HTML страница
|
2 теста |
|||
|
На этом уроке мы создадим простейший HTML документ. И сделаем это несколько раз подряд, чтобы исключить любые сложности при выполнении этого базового действия. Отчёт отправил: 13417. Chip Выполнено за 51 мин. [Показать отчёт] Научился: Повторил как создавать html-страницу, выполнил 10 раз задание по инструкции. Лучшее время 01:05. |
|||||
| 5 |
Термины сайтостроения
|
|
|||
|
На этом уроке мы познакомимся со следующими терминами: WWW, IP-адрес, Доменное имя, DNS, Сервер, Хостинг, VDS/VPS, Прокси, FTP, Браузер, HTTP, SSL, Веб-страница, HTML, CSS, Flash, JavaScript, PHP, MySQL, Куки. На видео я даю простые, понятные, но не очень точные определения каждого термина. Более точные определения доступны в презентации: На русском языке | На литовском языке Отчёт отправил: 13417. Chip Выполнено за 1 час. 18 мин. [Показать отчёт] Научился: HTML - язык разметки документа. Позволяет указать структуру документа: оформить текст в виде таблицы, слоёв, заголовков, списков. В основном используется в www для оформления web-страниц сайтов. CSS - язык оформления документа. Если HTML используется для создания структуры документа, то CSS определяет внешний вид документа. Заменив один файл CSS на другой можно изменить стилистику документа не меняя его структуру. Например, изменить цвет фона, размер шрифта, его начертание. Как и HTML в основном используется в web для создания web-страниц. |
|||||
| 6 |
Контрольная работа
|
без видео 2 теста |
|||
|
Проверим, как вы поняли значение терминов, которые мы рассмотрели на прошлом уроке. 1. Бросьте кубик, чтобы выбрать число от 1 до 4 (если выпало 5 или 6 - перебросьте). 2. Напишите, какой вариант вам выпал. 3. Сформулируйте своими словами значение каждого из 4 терминов выбранного варианта. 4. Выберите ещё один термин из других вариантов, по желанию и опишите его назначение тоже. За каждое определение вы получите от 0 до 2 баллов, максимум - 10 баллов. Отчёт отправил: 13417. Chip Выполнено за 44 мин. [Показать отчёт] Научился: Кубика под рукой нет, для случайного выбора использовал bash и переменную RANDOM. Выпал вариант 1. Скриншот прикрепить нет возможности, вставлю фрагмент из терминала. [14:06:16 chip@z68 ~]$ echo $(($RANDOM % 4 + 1)) 1 [14:06:27 chip@z68 ~]$ HTML - это язык описания структуры документа. Например, текст документа может быть оформлен в виде заголовков, списков. Текст, изображения, видео могут быть размещены в табличном представлении, в виде слоёв. В основном HTML используется для создания web-страниц. CSS - это язык описания стилистики документа. Если HTML определяет каркас, структуру документа, то CSS описывает его внешний вид. Например, цвет фона, шрифтов, отдельных элементов. Если вынести всё оформление документа из HTML-файла в CSS-файл, то можно добиться простой смены внешнего вида документа. JavaScript - это скриптовый язык программирования, в основном используется для создания динамичных web-страниц на стороне клиента. Например, выпадающие меню, анимации, автоматическое переформатирование страницы при определенных действиях пользователя. Таким образом увеличивается интерактивность web-приложения и оно приближается по возможностям к обычным desktop-приложениям. Другим применением JavaScript является направленность на минимизацию обмена данных между клиентом и сервером. Например, простейшую валидацию входных данных можно перенести на клиентскую часть. PHP - скриптовый язык программирования, в основном используется для создания web-сайтов, динамичных web-страниц на серверной стороне. В результате своей работы php-приложение формирует HTML-документ в зависимости от входных данных со стороны клиента, результатов обработки запросов к базе данных. Пятый термин, по желанию. Сервер - 1) серверная часть программного обеспечения, построенного по клиент-серверной модели. 2) компьютер. В уроке рассматривается 2 вариант. Итак, сервер - это компьютер с выделенной для него задачей. Например, web-сервер для web-сайтов. Или прокси-сервер - специальный компьютер, который является своего рода посредником на линии связи между компьютерами. Основным назначением является фильтрация и кеширование данных между внешней и внутренней сетью. |
|||||
| 7 | Красивые стихи |
без видео |
|||
|
На этом уроке мы создадим страницу с красиво оформленным стихотворением. Отчёт отправил: 13417. Chip Выполнено за 28 мин. [Показать отчёт] Научился: Повторил теги h2, br, b, p для оформления текста. Научился указывать кодировку текста с помощью meta charset. |
|||||
| 8 |
1. Расписание уроков
|
без видео 2 теста |
|||
|
На этом уроке мы познакомимся с тегом TABLE для организации таблиц. Самостоятельное задание - создать таблицу с расписанием своих уроков. Для создания страницы рекомендую использовать Online HTML Editor Отчёт отправил: 13417. Chip Выполнено за 33 мин. [Показать отчёт] Научился: Повторил как создавать таблицы с помощью тега table, добавлять строки используя tr и ячейки th td. |
|||||
| 9 |
2. Таблица умножения
|
без видео 2 теста |
|||
|
На этом уроке мы понакомимся с таблицами. Нужно создать 10 таблиц умножения, начиная от размера 1х1, заканчивая 10х10. Необходимо сделать скриншот каждой таблицы, чтобы потом можно было создать анимированный gif. Разместить на экране все таблицы и сделать скриншот. * Если умеешь программировать - напиши программу, * которая создаст таблицу умножения размером NxN. Отчёт отправил: 13417. Chip Выполнено за 1 час. 5 мин. [Показать отчёт] Научился: Создал html-страницу с 10 таблицами умножения, от 1x1 до 10x10. Делал всё вручную, для каждой таблицы свой вывод table. Оценил на этом примере, что ручной вывод довольно утомителен и может легко спровоцировать на ошибки. |
|||||
| 10 |
3. Вкусная таблица
|
без видео 1 тест |
|||
|
Сделать таблицу с ресторанным меню. Для каждого наименования вывести: №, фото, название, цену, форму для количества. Отчёт отправил: 13417. Chip Выполнено за 31 мин. [Показать отчёт] Научился: Повторил как добавлять изображение на html-страницу. Добавил три блюда из меню kfc. Названия, цены и url-изображений взял c сайта kfc.ru. |
|||||
| 11 |
4. Валидатор
|
без видео |
|||
|
Проверить HTML файл с ресторанным меню на корректность, используя валидатор: https://html5.validator.nu/. Исправить все возможные ошибки. Написать в отчёте, какая ошибка была самой сложной. Отчёт отправил: 13417. Chip Выполнено за 32 мин. [Показать отчёт] Научился: Проверил свой html-документ валидатором https://html5.validator.nu/ Выдало 5 ошибок: 1) необходимо было указать в начале файла тег <!DOCTYPE html>. 2) Объявление <table border="1"> устарело, толщину рамки нужно указывать через CSS. В 3, 4, 5 ошибках необходимо добавить атрибут alt для тега img. Сложнее всего было добавить CSS для таблицы, оказалось, что толщину нужно одновременно указывать для тегов th и td. |
|||||
| 12 |
5. Морской бой
|
без видео |
|||
|
На этом уроке мы нарисуем 12 разноцветных квадратов, которые разделены на прямоугольники. Отчёт отправил: 13417. Chip Выполнено за 32 мин. [Показать отчёт] Научился: Научился устанавливать ширину и высоту ячеек, повторил как заливать ячейку цветом. Нарисовал 12 квадратов, разбил их на прямоугольники. |
|||||
| 13 |
6. Стильные Буквы
|
без видео |
|||
|
На этом уроке мы нарисуем большие буквы из кубиков. Для этого нам потребуется таблица, стили, классы. Удобный онлайн HTML редактор Отчёт отправил: 13417. Chip Выполнено за 47 мин. [Показать отчёт] Научился: Повторил как использовать css id, устанавливать цвет фона, высоту и ширину элемента. Нарисовал таблицу, вывел в ней 4 буквы. |
|||||
| 14 |
7. Союз столбцов и строк
|
без видео 2 теста |
|||
|
На этом уроке необходимо создать таблицу 7х7 с объединёнными ячейками на основе любых двух квадратов из задания «Морской Бой». Приложить скриншот HTML-кода и результата для каждого из выбранных квадратов. Используйте онлайн HTML редактор Отчёт отправил: 13417. Chip Выполнено за 1 час. 17 мин. [Показать отчёт] Научился: Повторил как добавлять классы стилей, указывать rowspan, colspan для ячеек таблицы. Узнал про возможность объединения несколько разных стилей в описании одного элемента. Создал html-страницу, где в табличном формате вывел первые два квадрата, нарисованных в уроке Морской бой. |
|||||
| 15 |
8. Табличный аттестат
|
без видео |
|||
|
Используя HTML таблицы создать Аттестат успеваемости по указанному примеру. В аттестат впишите СВОИ данные. Отчёт отправил: 13417. Chip Выполнено за 44 мин. [Показать отчёт] Научился: Повторил как создавать таблицу, указывать стили для цвета фона, текста, выравнивания по центру и по правому краю. |
|||||
| 16 | 5. Kurortavimas |
без видео 1 тест |
|||
|
Кто любит путешествовать? На этом уроке необходимо создать форму туроператора для курортной заявки. Нужно придумать и оформить форму, как полагается. Обязательно использовать следующие теги: form input type="text" input type="radio" select textarea input type="checkbox" input type="submit" Отчёт отправил: 13417. Chip Выполнено за 50 мин. [Показать отчёт] Научился: Вспомнил как использовать теги form, input, select, textarea. Создал простую форму туроператора. |
|||||
| 17 | 6. Raidės iš Varneliu |
без видео |
|||
|
Сформировать таблицу 7х15. В каждой ячейке разместить "checkbox" - галочку. Сделать так, чтобы из галочек были составлены ваши инициалы. Suformuoti 7x15 lentelė. Kiekviename lauke patalpinti „checkbox“ - varnelė. Padaryti taip, kad iš varnelių butų susidėtas jūsų inicialai. Отчёт отправил: 13417. Chip Выполнено за 14 мин. [Показать отчёт] Научился: Повторил как добавлять элемент checkbox, устанавливать в нём галочку. Использовал html-страницу из урока "Стильные буквы". |
|||||
| 18 |
7. Tinklalapio kūrimo etapai
|
без видео 1 тест |
|||
|
1. Paruošti nuotraukas. 2. Sukūrti HTML maketą. 3. Užtikrinti HTML validavimą. 4. Pakrauti failą į serverį per FTP Отчёт отправил: 13417. Chip Выполнено за 29 мин. [Показать отчёт] Научился: Подготовил 4 изображения одинакового размера, разместил их в папке img. Создал файл index.html, добавил таблицу 2 на 2, разместил в ячейках изображения. Проверил html-страницу на сайте https://html5.validator.nu/. |
|||||
| 19 | 8. Landing page |
без видео |
|||
|
Создать простую посадочную страницу, на которой должно быть: 1. Таблица из 2 столбцов и 1 строки. 2. В первом столбце разместить: заголовок и рекламный текст. 3. Во втором столбце разместить: Картинку, форму для отправки данных с кнопкой. Обеспечить валидацию HTML-документа. Загрузить фотографию и HTML на сервер через FTP. Приложить к работе URL-ссылку на вашу страницу. Отчёт отправил: 13417. Chip Выполнено за 29 мин. [Показать отчёт] Научился: Повторил как добавлять таблицу, изображение, форму на html-страницу. |
|||||
| 20 |
1. Запуск JavaScript
|
без видео 1 тест |
|||
|
На этом уроке мы познакомимся со скриптовым языком JavaScript. Необходимо написать три очень маленькие программки. 1. Выводит в окно браузера сообщение. 2. Выводит всплывающее окно с сообщением. 3. Проверка заполненной формы. Отчёт отправил: 13417. Chip Выполнено за 21 мин. [Показать отчёт] Научился: Научился выводить сообщение в окно браузера с помощью document.write, выводить всплывающее окно с помощью alert. Добавил функцию для проверки заполнение поля формы. |
|||||
| 21 |
2. Ввод данных
|
без видео 1 тест |
|||
|
Смысл программирования в обработке данных. В любом языке программирования есть возможность ввода исходных данных. На JavaScript также есть несколько вариантов получения информации от пользователя. На этом уроке мы рассмотрим два способа ввода/вывода информации: 1. Ввод через prompt(), вывод через alert() или document.write(). 2. Ввод и вывод через элементы формы. Задание. Написать программу, которая запросит два числа и найдёт их сумму и максимальное значение. Отчёт отправил: 13417. Chip Выполнено за 15 мин. [Показать отчёт] Научился: Повторил как создавать функцию, выводить информацию с помощью alert и document.write. Научился вводить информацию с помощью prompt. |
|||||
| 22 |
3. яКартинка
|
без видео 2 теста |
|||
|
На этом уроке мы создадим JavaScript, который будет открывать картинки при наведении мышки. Отчёт отправил: 13417. Chip Выполнено за 29 мин. [Показать отчёт] Научился: Научился показывать картинку при наведении мышки с помощью onmouseover и onmouseout. |
|||||
| 23 |
5. Калькулятор
|
без видео |
|||
| На этом уроке мы напишем простой калькулятор на JavaScript. | |||||
| 24 |
1. DIV + CSS = Структура страницы
|
без видео |
|||
|
На этом уроке мы создадим структуру страницы, используя тег div и файл оформления style.css |
|||||
| 25 |
2. Красивое меню
|
без видео 1 тест |
|||
|
На этом уроке мы создадим красивое меню для сайта. * Сделайте 6 файлов, чтобы пункты меню переключались. |
|||||
| 26 |
3. День Космонавтики
|
без видео |
|||
|
На этом уроке мы нарисуем открытку на День Космонавтики (12 апреля). Найдите в интернете картинки на чёрном фоне: 1. Земля. 2. Луна. 3. Ракета. 4. Звёздочки. Разместите их в произвольных местах страницы и напишите сопроводительный текст. |
|||||
| 27 |
4. Две колонки
|
без видео |
|||
|
На этом уроке мы создадим страницу с двумя колонками. Правая - фиксированной ширины, левая - динамическая. |
|||||
| 28 |
5. Меню с Колонками
|
без видео |
|||
|
На этом уроке мы создадим структуру полноценного сайта. У нас будет динамическое меню и три колонки. В каждую колонку поместить реальные тексты. |
|||||
| 29 |
7. Show/Hide Message
|
без видео |
|||
|
На этом уроке мы научимся отображать и скрывать текстовый блок на экране, с использованием JavaScript. |
|||||
| 30 |
JS - Квадратные условия
|
без видео |
|||
|
Написать программу, которая выводит квадрат из #. Далее, перебрать различные условия и проанализировать результат. Сделать скриншот двух самых классных квадратных узоров. * Придумать своё условие для узора. |
|||||
| 31 | Платформа LP |
без видео |
|||
|
На этом уроке мы познакомимся с конструктором первоклассных одностраничников. 1. Открыть страницу gamesharp.info/webinar и просмотреть её. 2. Открыть страницу PlatformaLP.ru и зарегистрироваться. 3. Создать свою страницу, по примеру из пункта 1. 4. Сделать скриншот и приложить отчёт. 5. Приложить ссылку на полученный результат. |
|||||
| Итого: 31 видеоурок |
49 мин. 18 тестов |
5 чел. | |||
| Финалисты: Dmitry Sinitsin, Tekashnik, Andrew, Yaroslav, Tom . | |||||