Изучаем JavaScript

Устанавливаем WordPress Заходим на сайт https://ru.wordpress.org/ скачиваем WordPress Распаковываем скачанный архив Заходим в папку blog.log , созданную на прошлом занятии. Внутри неё создаём папку template и в неё переносим все наши файлы. В папке blog.log создаём ещё одну папку - www . Это будет рабочая директория для нашего хоста Открываем скачанную и распакованную папку WordPress и все файлы из неё копируем в папку www Теперь нам нужно обновить информацию о нашем хосте Запускаем OpenSerwer --- Настройки --- Домены --- Удаляем blog.log --- Находим папку www и в окне Имя домена пишем blog.log Создаём базу данных для WordPress Для этого используем программу Navicat Устанавливаем и настраиваем программу. Нажимаем Connection => MySQL  --- Ок Клик правой кнопкой NewConnection --- New Database --- blog Закрываем программу Navicat. Больше мы с базой данных напрямую работать не будем. Запускаем установку WordPress Заходим по адресу...

Скачиваем и устанавливаем OpenServer https://ospanel.io/ Проблем с этим нет, кроме того, что OpenServer занимает на диске 7 ГБ  Редактор кода у меня Brackets, на нём и остановлюсь. Автор рекомендует PHPStorm Создаём директорию, в которой будет размещаться наш сайт. Для этого переходим по адресу C:\OSPanel\domains и создаём там папку blog.loc Создаём host для нашей директории. Для этого идём в OpenServer --- Настройки --- Находим нашу папку --- Добавить --- Сохранить  Проверим работоспособность хоста. Для этого лик правой кнопкой по значку сервера в панели задач, Запустить, и переходим по адресу http://blog.loc Вот такая картинка говорит, что всё в порядке В папке проекта blog.loc создаём файл index.html Переходим по адресу http://getbootstrap.com/ и скачиваем bootstrap из всего перечня, который там предлагают, нас интересует только один файл bootstrap.min.css, который находится в папке dist/css Копируем его и помещаем в папку libs (библиотеки), кото...

Год выпуска : 2015 Автор : Борис Заболотских Продолжительность : Около 3 часов Раздача на рутрекере: https://rutracker.org/ Канал на ю тубе  https://www.youtube.com/ Язык : Русский Очень небольшой видеокурс - всего шесть видеоуроков от 20 до 40 минут каждый в которых автор показывает и рассказывает как создать сайт на WordPress  Список видео     Создание html шаблона для будущей WordPress темы     Установка и знакомство с WordPress     Создание собственной темы WordPress         Создание своих шорткодов     Установка и обзор популярных плагинов     Написание собственного плагина Мне курс понравился.Он небольшой, т.е. пройти его реально за неделю. Он практически направлен, к о гда объясняют и сразу делают. Он относительно новый, 2015 года выпуска. Объясняет автор достаточно подробно, доступно, понятно. Радует внимание, с которым автор отнёсся к ...

— предполагаю, что аккаунт на гитхабе уже есть — справа вверху, там где аватарка пользователя, нажимаем на плюс слева от аватарки и выбираем New organisation — теперь нужно указать имя организации — любое слово на английском и свой е–mail и внизу нажать Create organisation а затем Finish — теперь нажимаем на зелёную кнопку Create a new repository — здесь важно. имя репозитория должно повторить имя организации плюс .github.io. Например, если организация называлась js3023, то репозиторий будет называться js3023.github.io — и ещё важно поставить галочку в строке Initialize this repository with a README — затем нажимаем Create repository — в репозитории справа вверху есть кнопка Upload files — нажимаем на эту кнопку и перетаскиваем все файлы сайта: index.html,.js,.css, папки с шрифтами, картинками, музыкой и т.д. Для загрузки файлов лучше подходит Хром, Firefox папки с файлами принимает не всегда. И загружаемые файлы не должны весить больше 35Мб — нажимаем Cоmmit c...

Вопросы о том как указать язык репозитория на github время от времени появляются в сети, например Как сменить язык git-репозитория?, Как изменить язык программирования у репозитория GitHub?, Гитхаб неверно определяет язык репозитория По первым двум ссылкам вместо ответов почему-то рассказывают, что менять язык не нужно, даже если он определяется неверно, а по третьей рабочий способ описывается запутанно и не особо понятно. На самом деле язык меняется в несколько кликов. Приведу пример для JavaScript, остальные меняются аналогично. Открываем Блокнот, копируем в него две строки: * linguist-vendored *.js linguist-vendored=false Сохраняем с именем .gitattributes (точка вначале нужна) Загружаем файл в репозиторий, в котором нужно сменить язык Результат. Обратите внимание что язык репозитория JavaScript 30 определяется как HTML из-за того, что js-код лежит внутри файла index-html Было  Стало Решение нашла здесь stackoverflow.com

На гитхабе есть репозиторий https://github.com/irinainina/codewars На компьютере папка codewars Задача: связать папку и репозиторий, чтобы изменения в папке (добавление или удаление файлов) отображались в репозитории Решение 0. Открываем Git Bash 1. Склонировать репозиторий $ git clone https://github.com/irinainina/codewars Клонирование В результате на рабочем столе появилась папка codewars 2. Перейти в эту папку $ cd learn.javascript.ru Или зайти в папку кликнув по ней мышкой и внутри папки открыть Git Bash 3. Проверить текущий статус $ git status 4. Добавляем в папку нужные файлы, удаляем ненужные 5. Отследить изменения (точка в конце обязательна) $ git add .   5. Закоммитить изменения $ git commit -m .  или  $ git commit -m "пишем, что изменили, чтобы не запутаться"  6. Залить изменения на гитхаб $ git push -u origin master Результат Было  Стало  

Демо: https://js3032.github.io/ Код: https://github.com/js3032/js3032.github.io Мне кажется важным подводить итог сделанному, чтобы иметь возможность показать себе и другим чем занимался, чему научился, на что потратил время. И для самого себя делать такие отчёты важнее, чем для других. Сайт мне нравится. Несколько слов о задачах, которые возникали и их решениях. 1) В качестве прототипа взяла это портфолио https://chippd.github.io/ Мне оно понравилось.  В целом заметила, что wow-эффекты на сайтах привлекают внимание только при первом просмотре, а потом начинают утомлять. Поэтому современные сайты делают максимально спокойными Цветовую гамму подбирала здесь https://www.pantone.com/color-of-the-year-2017 и здесь https://colorganize.com/ В итоге остановилась на цветах, выбранных в исходном сайте. Но сайты с сочетаниями цветов заслуживают внимания и могут быть полезными в будущем. 2) Переключение языков на сайте реализовала в html , где для каждого абзаца делала две...

Это был замечательный опыт, я узнала много интересного, научилась делать забавные вещи, попробовала использовать ES6. Курс позволил прикоснуться ко многим новым возможностям  JavaScript и применить их в проектах. Очень важно, что это был не теоретический курс, что он включал в себя практические задания Автор любит  JavaScript и передаёт свою любовь тем, кто у него учится. Автор оптимист и своим оптимизмом заражает других. Автор профессионал. У него хороший, красивый, лаконичный, новый современный код. Это крайне важно учиться у профессионалов, чтобы сразу прививать вкус и любовь к хорошему и красивому коду Ура, что проект завершён. И очень хочется, чтобы он был не последним, чтобы были и другие подобные курсы

Демо: https://js3030.github.io/ Код: https://github.com/js3030/js3030.github.io Это последнее задание курса и в нём мы поиграем в классическую игру Whack-A-Mole wiki . Но вначале её напишем, потому что играть в свою собственную игру в разы забавнее. Разметка <span class="score">0</span></h1> <button onClick="startGame()">Start!</button> <div class="hole hole1">     <div class="mole"></div> </div> Элемент span , в котором будут показаны набранные баллы, кнопка начала игры и шесть div с классом hole , внутри каждого из них div с классом mole Стили В CSS есть класс «.up», который изменяет верхнюю позицию мола от 100% до 0%. .hole.up .mole {     top: 0; } Добавление этого класса приводит к тому, что цель становится видимой Код Находим элементы разметки var holes = document.querySelectorAll(".hole"); var scoreBoard = document.querySelector(".sc...

Демо: https://js30291.github.io/ Код: https://github.com/js30291/js30291.github.io Задание сделать таймер обратного отсчета. Какие-то значения времени пользователь может выбирать, а также есть поле ввода, чтобы ввести другое количество времени в минутах. Таймер также выводит время окончания заданного временного промежутка. Разметка <div class="timer">     <div class="timer__controls">         <button data-time="20" class="timer__button">20 Secs</button>         <button data-time="300" class="timer__button">Work 5</button>         <button data-time="900" class="timer__button">Quick 15</button>         <button data-time="1200" class="timer__button">Snack 20</button>         <button data-time="3600" class="timer__button">Lunch ...

Демо: https://js3028.github.io/ Код: https://github.com/js3028/js3028.github.io В этом проекте мы создаем инструмент, который изменяет скорость воспроизведения видео. Разметка:         <div class="wrapper">             <video class="flex" width="765" height="430" src="video.mp4" loop controls></video>             <div class="speed">                 <div class="speed-bar">1×</div>             </div>         </div> В HTML у нас есть элемент видео, div для регулятора скорости, и контейнер div. Ничего нового в CSS Код Javascript. var speed = document.querySelector(".speed"); var bar = speed.querySelector(".speed-bar");...

Демо: https://js3027.github.io/ Код: https://github.com/js3027/js3027.github.io В результате должен получиться горизонтальный слайдер, который можно передвигать мышкой. Пример эффекта, там, где его увидел автор,  можно посмотреть здесь: http://hoverstat.es/features/maxime-guyon , а здесь он же изменённый в соответствии с инструкциями данного задания: http://murphscode.getforge.io/ вкладка Projects Код слайдера предусматривает наличие нескольких слушателей событий и получение позиции слайдов на странице. Разметка HTML -код включает в себя контейнер div и несколько div внутри, которые представляют слайды. <div class="items">     <div class="item item1">01</div>     <div class="item item2">02</div>     <div class="item item3">03</div>     ...     <div class="item item25">25</div>   </div> Стили В CSS есть несколько св...