Как сделать чтобы при нажатии

6

Появление и исчезновение картинки при клике по кнопке на Javascript

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

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

Алгоритм программы

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

Последовательность создания программы

1. Создать HTML документ и поместить на него 2 объекта: картинку и кнопку.
2. Создать функцию, которая будет скрывать картинку (или отображать её), если пользователь нажмёт на кнопку.
3. Создать событие для кнопки onClick, которое будет вызывать нашу функцию.

Алгоритм работы программы

1. Нажатие на кнопку.
2. Вызов функции.
3. Если картинка в браузере не отображается, то показать её.
4. Если картинка видна в браузере, то спрятать её.

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

Исчезновение картинки при клике по кнопке

Для начала, сделаем так, чтобы при нажатии на кнопку картинка исчезала.

В данном примере, при загрузке страницы в браузере, мы выводим на экран картинку Clipboard01. Для этой картинки мы указываем атрибуты id и style. С помощью document.getElementById мы получаем ссылку на элемент по его идентификатору (по ID) и меняем атрибут style на display:none. То есть делаем картинку невидимой (скрываем её отображение в браузере).

Отображение картинки при нажатии на кнопку

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

В данном примере, мы просто поменяли местами стиль отображения картинки. То есть, изначально при открытии HTML документа картинка у нас не видна (style=»display:none;»), а когда мы нажимаем на кнопку, то происходит замена display:none на display:block и картинка становится видимой.

Появление и исчезновение картинки при нажатии кнопки

Теперь, поняв как всё работает, мы можем объединить первый и второй вариант кода и написать условие, используя операторы If Then Else:

В этом примере, мы изначально делаем картинку невидимой, указав style=»display:none;».

При нажатии на кнопку, мы получаем ссылку на нашу картинку по ID.

Затем, с помощью getComputedStyle получаем объект, содержащий значения всех CSS-свойств элемента (в данном случае нашей картинки).

После этого происходит проверка, если у картинки свойство display равно none (то есть, если картинка не отображается), то мы меняем его на block и тем самым выводим картинку на экран.

Если же свойство display не равно none (то есть картинка видна), то мы меняем его на none и тем самым скрываем изображение.

Как сделать, чтобы при клике на кнопки появлялся текст? [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 3 года назад .

Как сделать, чтобы при клике на кнопки «web design», «mobile app», «branding» появлялся текст?

Такая штука называется «Tabs» (Вкладки), вариантов реализации вагон, но мне нравится на js\jq.

Вот мой вариант реализации:

Это простые табы. Вот вариант с помощью jQuery:

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43305

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Тег <button> HTML кнопка

Тег <button> в HTML используется для создания кликабельной кнопки.

Кнопка, созданная с помощью тега button , может быть одного из трех типов: submit — кнопка отправки формы, reset — кнопка сброса данных в полях формы, button — кликабельная кнопка, действие по которой определяется скриптом.

HTML кнопка <button> не является ссылкой. Для создания ссылки в виде кнопки используйте тег <a> , стилизованный с помощью таблиц стилей CSS.

Контентом кнопки <button> может быть как текст, так и другие HTML теги, например, используя тег <img> внутри кнопки, можно сделать кнопку-картинку.

Кнопка <button> , как и тег <input> , может быть использована как кнопка отправки HTML форм. Для этого кнопка должна иметь тип submit, находиться внутри HTML кода формы <form> или быть привязанной к форме с помощью атрибута form .

Тег <button> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

Примеры использования кнопки <button>

Стандартная HTML кнопка

HTML код стандартной кнопки <button>

Кнопка button стилизованная с помощью CSS

HTML код стилизованной кнопки <button>

Кнопка — картинка с помощью тега button

В примере показано как будет выглядеть изображение <img> , вставленное внутрь кнопки button без изменения стилей. Вы всегда можете изменить стили с помощью CSS.

HTML код кнопки — картинки

Кнопка <button> в HTML коде страницы

В примере показано использование кнопки <button> в качестве кнопки отправки формы (тип submit).

HTML код примера

Кнопки button и input в чем отличие?

Как тег <button> , так и тег <input> позволяют создавать кликабельные кнопки типа button, submit и reset.

Разница между кнопкой, созданной с помощью тега <button> и кнопкой, созданной тегом input в механизме наполнения кнопки контентом. Внутри тега кнопки button вы можете размещать HTML теги, тем самым расширяется возможность по созданию визуальной составляющей кнопки. В случае с input , придется ограничиться использованием текста через атрибут value или использовать изображение в input с атрибутом type=»image» . Возможности использовать HTML теги внутри в кнопке input нет.

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

Поддержка браузерами

Атрибуты тега button

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку.

Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать).

Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы.

Если кнопка находится внутри тега <form>, то использовать атрибут form не нужно, кнопка по умолчанию привязана к форме, внутри которой находится.

URL адрес документа — обработчика формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега <form>.

Способ кодирования информации. Используется для кнопок с типом submit.

Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.

• application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию;
• multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме);
• text/plain — символы не кодируются, пробелы заменяются символом «+».

Атрибут используется только в случае отправки формы методом POST.

Этот атрибут переопределяет значение, указанное в атрибуте enctype тега <form>.

HTTP метод передачи данных формы.

• GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
• POST — передача данных в теле HTTP запроса.

Используется только для кнопок с типом submit.

Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>.

Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием кнопки, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.

Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>.

Используется для кнопок с типом submit.

Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом:

• _blank — в новой вкладке или окне;
• _parent — в родительском окне;
• _self — в текущем окне (используется по умолчанию);
• _top — на весь экран.

Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>.

Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.

• button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом;
• reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы;
• submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер.

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

Значение кнопки, которое будет отправлено на сервер.

На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте.

К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы.

Дмитрий, кнопка и ссылка в HTML — это разные вещи. Кнопка <button> не является ссылкой. Если вам нужно создать гиперссылку, используйте тег <a>. Вы можете придать тегу <a> любые стили, в том числе и вид кнопки, с помощью CSS.

В каком-то смысле из кнопки <button> с типом type="submit" можно сделать ссылку. Для этого нужно определить атрибут formaction у такой кнопки, вписав как значение целевой URL.

Что касается данных пользователя, введенных в форму, то они передаются на сервер в момент отправки формы. URL по которому сервер получает данные определяется атрибутом action тега <form>, к которому относится кнопка, либо атрибутом formaction самой кнопки. То есть, фактически, при отправке формы происходит переход по указанному URL с передачей серверу введенных пользователем данных.

Никакого сохранения данных или отправки на email HTML форма сама по себе не делает. В свою очередь, это может сделать сервер. Например, в случае с PHP сервером, данные попадут в массивы $_GET и/или $_POST, после чего их можно будет сохранить в базу данных либо отправить на email средствами PHP.

Обработка нажатий по кнопке(Для новичков) ⁠ ⁠

</body>
4. В итоге никому ненужный кусок кода с алёртом, с кнопкой, которая ничего не делает и пустым файлом стилей.

Все бля. Дальше можешь не писать. Это тотальное говно. Ссаными тряпками надо таких «верстальщиков» пиздить.

Во-первых можно через любой адекватный редактор, тот же Notepad++. Во-вторых даже через обычный блокнот можно написать имя файла в кавычках — «style.css» — и никаких левых расширений добавляться не будет.

Самый большой проект на бесплатной cms⁠ ⁠

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

Попробую исправить ситуацию 🙂 Напишу пост сам и забаню кого-нибудь в комментариях 🙂

Насколько нелепо большие проекты вы писали на простых бесплатных cms? В моей практике, присутствует интернет магазин с собственным движком и практически годом разработки на wordpress и крупный проект в сфере телекома ( https://irt24.ru/ ).

Проект в сфере телекома, продажа интернет и ТВ тарифов, по сути сайт посредник(диллер) продающий тарифы Ростелекома/МТС и прочих через свой функционал.

На старте функционал выглядел не очень большим, на пару месяцев работы, подумаешь парочка тарифов и не такое делали. Максимум 6-8 месяцев, хотя сроки я не взялся сразу точно назвать.

На практике оказалось, что количество параметров редактируемых у этих тарифов физически в админке выглядит как простыня 1000px на 9000px, это сотни параметров различающихся в зависимости от группы тарифов и обладающие сложными взаимосвязями между собой.

Там где на сайте скромный каталог из четырех разделов, в админке скрыто ещё 10-к каталогов взаимосвязанных друг с другом. Тарифы телевидения содержат каналы, каналы распределяются по пакетам каналов, делятся по тематикам итд.

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

Один экран, с настройками роутеров(подобные экраны ещё два вверх, несколько вниз):

На самом сайте, разумеется фунционал тоже реализовывался без лишней скромности и с максимальным размахом. Беглый просмотр функционала Ростелекома и МТС по тематике показал крайнюю их узость и отсутствие массы ценных и необходимых пользователю функций.

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

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

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

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

То есть, если безлимитной мобильной связи среди тарифов со скоростью интернета 500 мб/с нет, то данная опция становится недоступной и мы показываем подсказку почему так произошло.

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

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

Так же, никогда нельзя забывать про мобильные устройства, все должно работать на любом смартфоне/планшете/умном холодильнике(кто знает как жизнь повернется?)

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

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

Чистый php, общение с базой данных через базовый функционал WP.

Jquery и парочка простых библиотек.

Файлы в коде изолированы по модулям, модуль сравнение содержит все свои стили, скрипты и файлы php шаблонов. То есть, практически автономен, имеет свой css и свой js, не подгружаемые другими модулями. Заметных сложностей с поиском кода не было 🙂

Как браузер рендерит веб-страницу⁠ ⁠

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

Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:

Затем, чтобы погрузиться в детали — можно прочитать статью:

Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:

Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8

Браузер парсит полученный файл и создаёт DOM (Document Object Model)

Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)

CSSOM не содержит не визуальные элементы: script, meta, title, …

Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS

DOM Tree + CSSOM Tree = Render Tree

Содержит лишь видимые на экране элементы

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

Процесс отрисовки страницы

Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.

Каждый слой может рендериться в отдельном потоке.

Происходит объединение упомянутых выше слоёв

Слои разделены на тайлы, так как композиция слоёв будет происходить при изменении стилей или размеров окна браузера

Все перечисленные выше операции представляют собой Critical Rendering Path (CRP) — последовательность операций, которые необходимо произвести браузеру для отображения страницы пользователю

Парсинг и сторонние ресурсы

Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)

Парсинг HTML происходит в основном потоке исполнения JavaScript

Parser Blocking Scripts

Это скрипты, которые приостанавливают парсинг HTML

Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта

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

Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево

Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.

Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг

Render Blocking CSS

Построение CSSOM происходит в главном потоке

Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS — render blocking ресурс.

В то же время, построение DOM дерева продолжается.

Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.

Так как построение Render Tree приостановлено, следовательно и Critical Render Path застопорился, и контент не обновляется.

Чтобы не блокировать рендеринг, необходимо загружать стили как можно раньше, желательно в секции head

Какие статьи помогли вам понять, как браузер рендерит страницу?

Ответ на пост «CSS и авторские права»⁠ ⁠

Кому интересно — вот код на jQuery, который вставляет мягкие переносы в русские слова и позволяет тексту, выключенному по ширине, быть более плотным и визуально приятным, особенно при малой ширине блока. Легко перепиливается на чистый JS:

Как быстро написать слайдер на JS?⁠ ⁠

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

Как же создать вот такой слайдер?

Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.

1. Пишем структуру

4. Заполняем объект

Пишем структуру

Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».

Пишем стили

Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.

Пишем скрипт

Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.

Заполняем объект

Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ‘ ‘ », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.

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

Будни веб-разработчика⁠ ⁠

Я: *сдвигаю <div > на один пиксель*

У каждого свои страхи⁠ ⁠

Opera блокирует AdBlock и любые средства редактирования вёрстки на сервисах Яндекса! Опера продалась? Сговор?⁠ ⁠

UPD. К посту есть вопросы #comment_226189438

Сегодня зашел на Яндекс.Кью, решил отключить через AdBlock вопросы, которые отображаются сбоку, ибо надоедают. Открываю AdBlock. И что же я вижу? Кнопки «заблокировать элемент» нету! Окей, не беда подумал я. Ведь у меня ещё есть StyleBot. Который позволяет редактировать верстку на любом сайте и что же я вижу? Опера блокирует открытие данного расширения именно на сайтах яндекса! Кинопоиск, Кью, Дзен и тд. Не ожидал такой подставы от любимого браузера((

.neighborhood ⁠ ⁠

Продолжение поста «Генератор градиентов и палитры по картинкам»⁠ ⁠

Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.

Расскажу про изменения и обновления за это время.

Вращение градиента

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

Новый вид страницы градиента

Пользователь может задать размер градиента самостоятельно или выбрать уже готовые размеры. Максимальный размер градиента — 2000 на 2000 px. Изображение градиента скачивается если на него нажать.

Добавление градиента в общую ленту

Зарегистрированные пользователи могут добавить свои градиенты в общую ленту.

Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.

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

Генерация градиентов без грязных переходов

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

Появился инструмент смешивания цветов

Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.

Просто про режимы RGB и HSL:

Смешивая синий и желтый в RGB вы получите серый цвет, а в режиме HSL зеленый. В RGB между синим и желтым на цветовом круге серый цвет поэтому их сложение его и даст, а в HSL получится дуга т.к. цвета на разном уровне.

Появился генератор оттенков

Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.

Набор сочетаний цвета текста и фона

На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.

Можно отсортировать наборы по контрасту, времени и просмотрам.

На подробной странице сочетания добавлен заголовок, абзац текста со всеми буквами алфавита и различные начертания шрифта.

Генерация сочетаний цвета текста и фона

К наборам добавил генерацию и для пользователей.

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

Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.

Буду рад критике и советам.

Этот парень не перестаёт удивлять⁠ ⁠

Добро пожаловать на рынок труда!⁠ ⁠

Ответ на пост «Курсы сварщика от службы занятости»⁠ ⁠

В прошлом году подавал заявку на обучение по программе «Веб-дизайн и разработка».
Через сайт «Труд Всем», в рамках системы WorldSkills Russia, в колледже небольшого подмосковного городка. (Курсы были бесплатные для учеников)
На сайте колледжа было написано, что Доп. образование по этой программе занимает 144 часа.
Но вышло так:
Сначала пару месяцев тишины, ну подал и подал (арт.лебедев.жпг).
Потом стал писать письма и доставать кураторов, которые должны были координировать. Ответили: «да-да, мы в курсе, ждите».
Потом я начал названивать активно, и оказалось, что курс уже идёт, и вот вам «адреса и явки».
Ну, слава богу, почти ничего не пропустил, тем более, что пока ждал, повспоминал, попробовал сам кое что.
Получил несколько записанных лекций-скринкастов по вёрстке. Потом было объявлено, что сроки подрезали и испытания вот-вот через неделю. А ещё через день, что испытания не через неделю, а вот уже послезавтра, по этому давайте разберём на основе заданий прошлых лет. Потом ещё раз поменяли программу.

Испытания были дистанционно, как всё обучение. Ну страничку я сверстал быстро, менюшку, форму, кнопачки, картиночку даже нарисовал в векторе для логотипа.
Даже получил сертификат WorldSkills Russia где вёрстка была 10/10 а программирование 0/0. Потому, что все 144 часа уместились в две с половиной недели и до JS&PHP дело не дошло.

Не могу сказать что это всё было для меня бесполезным, кое что новое узнал, но был бы с нуля, было бы потерянное время на 100%.
А ещё дали корку о прохождении курса в этом колледже.