1

Этап 1

Изучение HTML5

2

Этап 2

Изучение CSS

3

Этап 3

Изучение JavaScript

4

Этап 4

Изучение PHP

5

Этап 5

Изучение CMS WordPress (базис)

6

Этап 6

Изучение CMS WordPress (детальный разбор)

1

Этап 1

Изучение HTML5

2

Этап 2

Изучение CSS

3

Этап 3

Изучение JavaScript

4

Этап 4

Изучение PHP

5

Этап 5

Изучение CMS WordPress (базис)

6

Этап 6

Изучение CMS WordPress (детальный разбор)

05 мая 2017

Цель заброшена

Автор не отписывался в цели 4 года 9 месяцев 22 дня

Автор цели

Zzaaf

Россия, Санкт-Петербург

34 года

Общая

Изучить Web-программирование (HTML, CSS, JS, PHP, CMS WordPress)

Всегда нравились IT-технолгии, даже специальность "Техник ПК", но конечно же знания нужно постоянно обновлять и держать мозг в тонусе. Да я об этом знал ещё со времён колледжа, но знания были предельно поверхностные и никак целей я перед собой не ставил. А зря вот не ставил, с целью жить оказалось проще и интереснее! А когда целей много, да ещё у тебя есть поддержка и публичное отслеживание... Это добавляет мотивации и желания изучать!
Наверняка эта цель будет добавляться в виде новых этапов, чего конечно я хочу!

"Я поднимаюсь сам и помаленьку" ©

 Критерий завершения

Лёгкое понимание кода и принципа построения сайтов на современных web-технологиях.

 Личные ресурсы

Мотивация, внимательность, упорство.

  1. Изучение HTML5

    1. Простейший HTML

    2. Структура простого HTML

    3. Создание первой HTML страницы

    4. Тест 1 по пройденным темам

    5. Основы HTML

    6. Параграфы

    7. Формирование текста

    8. Заголовки, линии, комментарии

    9. Элементы

    10. Атрибуты

    11. Изображения

    12. Ссылки

    13. Создание списков

    14. Создание таблиц

    15. Цвет в HTML

    16. Фреймы

    17. Тест 2 по пройденным темам

    18. HTML5

    19. Модели контента

    20. Структура HTML5 страницы

    21. Элементы header, nav, footer

    22. Элементы article, section, aside

    23. Элемент audio

    24. Элемент video

    25. Элемент progress

    26. Web Storage API

    27. API геолокации

    28. API перетаскивания

    29. SVG

    30. Анимация и траектория SVG

    31. Canvas

    32. SVG и Canvas

    33. Трансформации Canvas

    34. Формы HTML5

    35. Тест 3 по пройденным темам

  2. Изучение CSS

    1. Основные понятия CSS

    2. Внешний и внутренней CSS

    3. Правила и селекторы

    4. Комментарии

    5. Каскадирование и наследование

    6. Тест 1 по пройденным темам

    7. Работа с текстом

    8. Font-family

    9. Font-size

    10. Font-style

    11. Font-weight

    12. Font-variant

    13. Color

    14. Расположение текста по горизонтали

    15. Расположение текста по вертикали

    16. Text-decoration

    17. Отступы в тексте

    18. Text-shadow

    19. Text-transform

    20. Letter-spacing

    21. Word-spacing

    22. While-spacing

    23. Тест 2 по пройденным темам

    24. Введение в блочную модель

    25. Понимание блочной модели

    26. Рамки

    27. Ширина и высота

    28. Background-color

    29. Background-image

    30. Background-repeat

    31. Background-attachment

    32. Стилизация списка

    33. Стилизация таблиц

    34. Стилизация ссылок

    35. Кастомизация курсора мыши

    36. Тест 3 по пройденным темам

    37. Позиционирование и разметка

    38. Свойство display

    39. Свойство visibility

    40. Позиционирование

    41. Обтекание

    42. Свойство clear

    43. Свойство overflow

    44. Свойство z-index

    45. Тест 4 по пройденным темам

    46. Основы CSS3

    47. Введение в CSS3

    48. Вендорные префиксы

    49. Закругленные углы

    50. Box-shadow

    51. Техники установки тени

    52. Эффект прозрачности

    53. Text-shadow

    54. Псевдоклассы

    55. Псевдоэлементы

    56. Word-wrap

    57. @font-face

    58. Тест 5 по пройденным темам

    59. Градиенты и фон

    60. Линейный градиент

    61. Радиальный градиент

    62. Background-size

    63. Background-clip

    64. Прозрачные рамки

    65. Множество фоновых изображений

    66. Прозрачность

    67. Тест 6 по пройденным темам

    68. Переходы и трансформация

    69. Переходы

    70. Transform: rotate()

    71. Transform, origin, translate ()

    72. Множество трансформации scale ()

    73. Ключевые кадры и анимация

    74. Свойство анимации

    75. 3D трансформация

    76. Тест 7 по пройденным темам

  3. Изучение JavaScript

    1. Введение в JavaScript

    2. Первый JavaScript

    3. Добавление JavaScript к web-странице

    4. Внешний JavaScript

    5. Комментарии в JavaScript

    6. Тест 1 по пройденным темам

    7. Основные понятия

    8. Переменные

    9. Типы данных

    10. Математические операторы

    11. Операторы присвоения

    12. Операторы сравнения

    13. Логические и булевые операции

    14. Строковые операторы

    15. Тест 2 по пройденным темам

    16. Условия и циклы

    17. Оператор if

    18. Оператор if else

    19. Оператор if else if else

    20. Оператор switch

    21. Цикл for

    22. Цикл while

    23. Цикл do... while

    24. Break и continue

    25. Тест 3 по пройденным темам

    26. Функции

    27. Параметры функций

    28. Использование множества параметров

    29. Оператор return

    30. Alert, prompt, comfirm

    31. Тест 4 по пройденным темам

    32. Объекты

    33. Создание собственных объектов

    34. Инициализация объектов

    35. Добавление методов

    36. Тест 5 по пройденным темам

    37. Предопределённые объекты

    38. Массивы

    39. Свойства массивов и методы

    40. Ассоциациативные массивы

    41. Объекты math

    42. Объект date

    43. Тест 6 по пройденным темам

    44. DOM и события

    45. Что такое DOM?

    46. Выборка элементов

    47. Изменение элементов

    48. Добавление и удаление элементов

    49. Создание анимаций

    50. Обработка событий

    51. Выполнение событий

    52. Создание слайдера изображений

    53. Валидация формы

    54. Тест 7 по пройденным темам

  4. Изучение PHP

    1. Базовый синтаксис

    2. PHP теги

    3. Echo

    4. Комментарии

    5. Тест 1 по пройденным темам

    6. Переменные

    7. Константы

    8. Типы данных

    9. Область видимости переменных

    10. Переменные переменных

    11. Тест 2 по пройденным темам

    12. Операторы

    13. Арифметические операторы

    14. Операторы присваивания

    15. Операторы сравнения

    16. Логические операторы

    17. Тест 3 по пройденным темам

    18. Массивы

    19. Числовые массивы

    20. Ассоциативные массивы

    21. Многомерные массивы

    22. Тест 4 по пройденным темам

    23. Управляющие сттруктуры

    24. Оператор If Else

    25. Оператор Elseif

    26. Цикл While

    27. Цикл Do While

    28. Цикл For

    29. Цикл Foreach

    30. Оператор Switch

    31. Оператор Break

    32. Оператор Continue

    33. Include и Require

    34. Тест 5 по пройденным темам

    35. Функции

    36. Параметры функций

    37. Оператор Return

    38. Тест 6 по пройденным темам

    39. Предопределённые переменные

    40. $_SERVER переменные: Script Name

    41. $_SERVER переменные: Host Name

    42. PHP формы

    43. GET и POST

    44. $_SESSION

    45. $_COOKIE

    46. Тест 7 по пройденным темам

    47. Работа с файлами

    48. Запись в файл

    49. Добавление к файлу

    50. Чтение файла

    51. Тест 8 по пройденным темам

  5. Изучение CMS WordPress (базис)


    1. Установка вёрстки на админ панель WordPress

    2. Изменяемые поля на сайте

    3. Динамический вывод постов

    4. Google Карты, Яндекс Карты на сайте

    5. Контактные формы

    6. Плагины SMTP

  6. Изучение CMS WordPress (детальный разбор)

  • 3697
  • 05 мая 2017, 17:36

Дневник цели

1062день
Zzaaf31 мар. 2020, 20:25

JavaScript вопросы и ответы

1. Что будет в консоли?

functionsayHi() {

console.log(name);

console.log(age);

varname = "Lydia";

letage = 21;

}

sayHi();

  • A: Lydia и undefined
  • B: Lydia и ReferenceError
  • C: ReferenceError и 21
  • D: undefined и ReferenceError

2. Что будет в консоли?

for (var i = 0; i < 3; i++) {

setTimeout(() =>console.log(i), 1);

}

for (let i = 0; i < 3; i++) {

setTimeout(() =>console.log(i), 1);

}

  • A: 0 1 2 и 0 1 2
  • B: 0 1 2 и 3 3 3
  • C: 3 3 3 и 0 1 2

3. Что будет в консоли?

const shape = {

radius: 10,

diameter() {

returnthis.radius * 2;

},

perimeter: () =>2 * Math.PI * this.radius

};

shape.diameter();

shape.perimeter();

  • A: 20 и 62.83185307179586
  • B: 20 и NaN
  • C: 20 и 63
  • D: NaN и 63

4. Что будет в консоли?

+true;

!"Lydia";

  • A: 1 и false
  • B: false и NaN
  • C: false и false

5. Что НЕ является валидным?

const bird = {

size: "small"

};

const mouse = {

name: "Mickey",

small: true

};

  • A: mouse.bird.size
  • B: mouse[bird.size]
  • C: mouse[bird["size"]]
  • D: Все варианты валидны

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

1061день
Zzaaf30 мар. 2020, 19:35

Карантин

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

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

О важных этапах напишу здесь и целях на будущее.

Важные этапы:

  • прошёл аттестацию на работе и получил небольшое повышение по зарплате
  • сделал мини-приложение для внутренних задач по работе
  • мотивировал двух своих товарищей заниматься веб-разработкой

Цели:

  • продолжать изучать JavaScript
  • обновить знания по React
  • начать изучать NodeJS

На счёт NodeJS, так же совместно с товарищем купили курс сегодня, так что погружение начинается...

Всем мотивации и здоровья.

Комментарии

Дмитрий18.07.2019

Ничего себе, ты упорный

796день
Zzaaf9 июля 2019, 18:50

Three.js или немного забытый эффект "wow!"

Хотел с вами поделиться одной интересной библиотекой - three.js.

Как говоритWikiэто легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5, CANVAS, SVG или WebGL.

О её существовании я узнал из просмотра вакансий на hh.ru, её знание и понимание было как одно из требований. И я решил, хммм... нужно хотя бы посмотреть что это такое. В итоге поизучав документацию, решил посмотреть пару уроков. Где и был найден интересный пример реализации довольно реальной грозы и дождя, хотя сам дождь возможно можно реализовать лучше. При этом я добавил ещё что при клике играет музыка.
Эту библиотеку по документации я изучал ровным счётом выходные, на самом деле там куча всего интересного!
Отмечу, что сама библиотека довольно логичная и интересна для ковыряний. По итогу у меня был немного забытый эффект "WOW!", то что на JS можно сделать такие классные вещи...

Выложу весь код который в итоге получился и ссылку на его результат:
https://zzaaf.ru/works/rain/

let scene, camera, renderer, cloudParticles = [], flash, rain, rainGeo, rainCount = 15000;

functioninit() {

scene = newTHREE.Scene();

camera = newTHREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);

camera.position.z = 1;

camera.rotation.x = 1.16;

camera.rotation.y = -0.12;

camera.rotation.z = 0.27;

ambient = newTHREE.AmbientLight(0x55555);

scene.add(ambient);

direсtionalLight = newTHREE.DirectionalLight(0xffeedd);

direсtionalLight.position.set(0,0,1);

scene.add(direсtionalLight);

flash = newTHREE.PointLight(0x062d89, 30, 500, 1.7);

flash.position.set(200, 300, 100);

scene.add(flash);

renderer = newTHREE.WebGLRenderer();

scene.fog = newTHREE.FogExp2(0x1c1c2a, 0.002);

renderer.setClearColor(scene.fog.color);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

rainGeo = newTHREE.Geometry();

for(leti=0; i<rainCount; i++) {

rainDrop = newTHREE.Vector3(

Math.random() * 400 -200,

Math.random() * 500 - 250,

Math.random() * 400 - 200

);

rainDrop.vertices = {};

rainDrop.vertices = 0;

rainGeo.vertices.push(rainDrop);

}

rainMaterial = newTHREE.PointsMaterial({

color:0xaaaaaa,

size:0.1,

transparent:true

});

rain = newTHREE.Points(rainGeo, rainMaterial);

scene.add(rain);

letloader = newTHREE.TextureLoader();

loader.load('img/smoke.png', function(texture){

cloudGeo = newTHREE.PlaneBufferGeometry(500, 500);

cloudMaterial = newTHREE.MeshLambertMaterial({

map:texture,

transparent:true

});

for(letp=0; p<50; p++) {

letcloud = newTHREE.Mesh(cloudGeo, cloudMaterial);

cloud.position.set(

Math.random() * 1000 - 400,

500,

Math.random() * 1000 - 450

);

cloud.rotation.x = 1.16;

cloud.rotation.y = -0.12;

cloud.rotation.z = Math.random() * 360;

cloud.material.opacity = 0.45;

cloudParticles.push(cloud);

scene.add(cloud);

}

animate();

});

}

functionanimate() {

cloudParticles.forEach(p=>{

p.rotation.z -=0.002;

});

rainGeo.vertices.forEach(p=> {

p.vertices -= 0.1 + Math.random() * 0.1;

p.y += p.vertices;

if (p.y < -200) {

p.y = 200;

p.vertices = 0;

}

});

rainGeo.verticesNeedUpdate = true;

rain.rotation.y += 0.002;

if(Math.random() > 0.93 || flash.power > 100) {

if(flash.power < 100)

flash.position.set(

Math.random() * 400,

300 + Math.random() * 200,

100

);

flash.power = 50 + Math.random() * 500;

}

renderer.render(scene, camera);

requestAnimationFrame(animate);

}

init();

document.getElementsByTagName('body')[0].addEventListener('click', function() {

letsound = newAudio('audio/sound.mp3');

sound.play();

});

792день
Zzaaf5 июля 2019, 18:15

"Но я развиваюсь с трудом, будто заштопанный флаг..."

И так, прошёл год и два месяца с последнего сообщения на smartprogress.do, что важного произошло?

  1. Первое что приходит в голову, это то что я сменил работу в начале 2019 года и сейчас работаю в полноценной IT-компании как я и хотел изначально
  2. Продолжаю изучать JavaScript, при этом уже проявляю интерес к набирающим оборотам фрейморкам таким как React и Vue
  3. Так же в начале года прошёл большой курс по React, очень понравилось, для меня было очень много нового. Хочу детально это изучать и дальше
  4. Помимо работы сделал два сайта на фрилансе: https://www.doppelganger-art.com/ - dark-art проект "Doppelganger Art" и http://triokna.karelia.ru/ - лендинг компании "Три Окна", продажа окон в Карелии.
  5. Прошёл мини-курс по CMS OpenCart
  6. Не перегорел и стараюсь держать руку на front-end пульсе

Постараюсь писать сюда почаще, делиться опытом и интересными темами, которые помогли мне... Помогут и Вам!

human06.07.2019

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

366день
Zzaaf5 мая 2018, 10:20

"Год назад я сидел на скамейке в общественном парке..."

Сегодня год моей цели, даже для интереса можно посмотреть с чего всё начиналось... Никогда за год не менялась моя жизнь, как в этот раз. Хммм...

Дальше больше ;)

Всем смелости.

358день
Zzaaf27 апр. 2018, 21:35

Новая справочка.

На самом деле приятно конечно и лишний раз прокачать свои мозги новыми навыками полезно.

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

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

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

Постараюсь отражать все важные моменты здесь и детально заполнить полезной информацией те посты что был раньше, а не просто "JS")

Всем добра.


355день
Zzaaf24 апр. 2018, 20:20

Github Pages

354день
Zzaaf23 апр. 2018, 20:00

Вопросы и ответы связанные с JS при устройстве на работу (мои выдержки из курса).

Вопрос: Что такое всплытие событий?

Ответ: Всплытие событий это когда происходит какое-то событие, обработчик сначала срабатывает на самом вложенном элементе, затем на его родителе, затем выше и выше. И так по цепочке вверх.

Вопрос: Чем рекурсивный setTimeout лучше чем setInterval?

Ответ: Рекурсивный способ вызывает сам себя, по истечнию нужного времени.

Вопрос: Что такое режим стрикт strict?

Ответ: Это более строгий режим написания JS кода, который изменяет его семантику. Если его включить, то допущеные ошибки браузер не будет "прощать". Чтобы активизировать строгий режим для всего скрипта, нужно поместить оператор"use strict"; или 'use strict'; перед всеми остальными операторами скрипта (выдержать приведенный синтаксис буквально).

353день
Zzaaf22 апр. 2018, 21:00

Выходные были выходными. Товарищ мой (Алексей), с кем я прохожу курс далеко продвинулся в сдачи курсовой работы. Рад, что само задание очень интересное с да ещё с острой темой "Выборы президента". Буду делать работу дальше, основываясь его github, если возникнут трудности. Всем интересной недели.

Вы тоже можете
опубликовать свою
цель здесь

Мы поможем вам ее достичь!

309 000

единомышленников

инструменты

для увлекательного достижения

Присоединиться
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?
Александр
sirnet
Mr De
ЛюдМила Фокс
HEISENBERG
Alexey
dariana
Alexey
Ressuscitee
dariana
Zzaaf
Наталья
dariana
Наталья
Ambidexter
dariana
human
Евгения
Наталья
dariana
Andreйка
Alexey
Ressuscitee
Юлия
Ambidexter
Andreйка
Юлия
Andreйка
Aleks
Andreйка
Ratibor
Mary
Andreйка
Alexey