web-разработка


Справочники


https://webref.ru/

Лучшие сайты 2019

https://color.review/

Наглядно Flexbox: https://tproger.ru/translations/how-css-flexbox-works/

JS документация: https://developer.mozilla.org/ru/docs/Web/JavaScript

Валидатор: https://tools.icoder.uz/javascript-validator.php

Задачник JS: http://old.code.mu/tasks/javascript/base/rabota-s-ciklami-for-i-while-v-javascript.html


Игры


Полезные игры для web-дизайнеров

Разбор ошибок в дизайне

Игры на цветовосприятие

Игра на внимательность!

http://flexboxfroggy.com/#ru Flexbox Froggy. Игра, в которой тебе нужно помочь лягушонку Фроги и его друзьям написанием CSS кода!

https://flukeout.github.io/

https://itvdn.com/ru/blog/article/dev-games игры для изучения программирования


ПО


http://brackets.io/

https://code.visualstudio.com/

https://www.figma.com Figma — многопользовательский векторный редактор, который работает в браузере

https://getbootstrap.com/

https://www.figma.com/file/8qWZnsNBm5XJ927JVLsdHa/trafalgar-landing-page-for-figma?node-id=0%3A1 шаблон

https://geekbrains.ru/events/2187

установка ларавел https://www.youtube.com/watch?v=FCASXqCAhBY&feature=emb_logo

https://laravel.com/docs/7.x


Полезные статьи


Что должен знать веб-разработчик?

Дерево веб-технологий

Сколько тегов h1 может быть на страничке?

Разбираемся в основах типографики за 10 минут

Теория близости: главное правило дизайна, которое помогает перейти от субъективных ощущений к конкретике

Верстка - это не скучно!

Все о кнопках

Об интерфейсах

Дизайн-кабак

О дизайне



Графика

Анимированные иконки

Иконки

Убрать фон->https://www.remove.bg/


Дизайн


Подбор цвета 1

Подбор цвета 2

Базовое знакомство с фотошопом

Анимированные иконки

Онлайн-фотошоп

Скринкаст для начинающих: фотошоп

Основы цветовой теории



Wordpress


CMS Wordpress первый урок

https://underscores.me/ Создание шаблона темы

https://www.free-css.com/ шаблоны

Написание плагина

Шорткоды


jQuery


Материалы для работы: https://drive.google.com/file/d/137F7T16DIgwnMxZQyC7m3bJZWhyL6e_p/view

Подсказка как вытащить текст из input и т.п.

Лабораторная работа №1 (готовый кинозал)


Laravel


PHP Faker (примеры)

Как натянуть верстку на Laravel->https://laracasts.com/series/laravel-6-from-scratch/episodes/15

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

Подробно о Laravel (видеокурс)

Валидация

Документация на русском (бд)


Прототипирование



WorldSkills


ТЕХНИЧЕСКОЕ ОПИСАНИЕ КОМПЕТЕНЦИИ Веб-дизайн и разработка

Создание макета сайта в Photoshop Файлы к заданию

Верстка сайта Файлы к заданию

Задания с регионального этапа Чемпионата


GitHub


https://www.youtube.com/watch?v=w3jLJU7DT5E&feature=youtu.be


Лабораторные работы


https://codepen.io/biver/pen/yEmqNP



Методические материалы


http://www.ompec.ru/upload/iblock/4bc/4bc81a8eac9dac42ad333c022daa2046.pdf


Для группы ИС-2. Тренажеры на htmlacademy


https://htmlacademy.ru/for_schools/join/3e15cc11f979ed25912dff5b0669f2cd

Тренажёр по PHP https://htmlacademy.ru/courses/337?rb_clickid=64735707-1610450815-2090984095&utm_campaign=crs_ret_php1&utm_content=64735707&utm_medium=cpc&utm_source=mt&utm_term=5565_all


ИТ-академия


Конкурс проф. мастерства 2021