Цель заброшена
Автор не отписывался в цели 4 года 9 месяцев 22 дня
Изучить Web-программирование (HTML, CSS, JS, PHP, CMS WordPress)
Всегда нравились IT-технолгии, даже специальность "Техник ПК", но конечно же знания нужно постоянно обновлять и держать мозг в тонусе. Да я об этом знал ещё со времён колледжа, но знания были предельно поверхностные и никак целей я перед собой не ставил. А зря вот не ставил, с целью жить оказалось проще и интереснее! А когда целей много, да ещё у тебя есть поддержка и публичное отслеживание... Это добавляет мотивации и желания изучать!
Наверняка эта цель будет добавляться в виде новых этапов, чего конечно я хочу!
"Я поднимаюсь сам и помаленьку" ©
Критерий завершения
Лёгкое понимание кода и принципа построения сайтов на современных web-технологиях.
Личные ресурсы
Мотивация, внимательность, упорство.
-
Изучение HTML5
-
Простейший HTML
-
Структура простого HTML
-
Создание первой HTML страницы
-
Тест 1 по пройденным темам
-
Основы HTML
-
Параграфы
-
Формирование текста
-
Заголовки, линии, комментарии
-
Элементы
-
Атрибуты
-
Изображения
-
Ссылки
-
Создание списков
-
Создание таблиц
-
Цвет в HTML
-
Фреймы
-
Тест 2 по пройденным темам
-
HTML5
-
Модели контента
-
Структура HTML5 страницы
-
Элементы header, nav, footer
-
Элементы article, section, aside
-
Элемент audio
-
Элемент video
-
Элемент progress
-
Web Storage API
-
API геолокации
-
API перетаскивания
-
SVG
-
Анимация и траектория SVG
-
Canvas
-
SVG и Canvas
-
Трансформации Canvas
-
Формы HTML5
-
Тест 3 по пройденным темам
-
-
Изучение CSS
-
Основные понятия CSS
-
Внешний и внутренней CSS
-
Правила и селекторы
-
Комментарии
-
Каскадирование и наследование
-
Тест 1 по пройденным темам
-
Работа с текстом
-
Font-family
-
Font-size
-
Font-style
-
Font-weight
-
Font-variant
-
Color
-
Расположение текста по горизонтали
-
Расположение текста по вертикали
-
Text-decoration
-
Отступы в тексте
-
Text-shadow
-
Text-transform
-
Letter-spacing
-
Word-spacing
-
While-spacing
-
Тест 2 по пройденным темам
-
Введение в блочную модель
-
Понимание блочной модели
-
Рамки
-
Ширина и высота
-
Background-color
-
Background-image
-
Background-repeat
-
Background-attachment
-
Стилизация списка
-
Стилизация таблиц
-
Стилизация ссылок
-
Кастомизация курсора мыши
-
Тест 3 по пройденным темам
-
Позиционирование и разметка
-
Свойство display
-
Свойство visibility
-
Позиционирование
-
Обтекание
-
Свойство clear
-
Свойство overflow
-
Свойство z-index
-
Тест 4 по пройденным темам
-
Основы CSS3
-
Введение в CSS3
-
Вендорные префиксы
-
Закругленные углы
-
Box-shadow
-
Техники установки тени
-
Эффект прозрачности
-
Text-shadow
-
Псевдоклассы
-
Псевдоэлементы
-
Word-wrap
-
@font-face
-
Тест 5 по пройденным темам
-
Градиенты и фон
-
Линейный градиент
-
Радиальный градиент
-
Background-size
-
Background-clip
-
Прозрачные рамки
-
Множество фоновых изображений
-
Прозрачность
-
Тест 6 по пройденным темам
-
Переходы и трансформация
-
Переходы
-
Transform: rotate()
-
Transform, origin, translate ()
-
Множество трансформации scale ()
-
Ключевые кадры и анимация
-
Свойство анимации
-
3D трансформация
-
Тест 7 по пройденным темам
-
-
Изучение JavaScript
-
Введение в JavaScript
-
Первый JavaScript
-
Добавление JavaScript к web-странице
-
Внешний JavaScript
-
Комментарии в JavaScript
-
Тест 1 по пройденным темам
-
Основные понятия
-
Переменные
-
Типы данных
-
Математические операторы
-
Операторы присвоения
-
Операторы сравнения
-
Логические и булевые операции
-
Строковые операторы
-
Тест 2 по пройденным темам
-
Условия и циклы
-
Оператор if
-
Оператор if else
-
Оператор if else if else
-
Оператор switch
-
Цикл for
-
Цикл while
-
Цикл do... while
-
Break и continue
-
Тест 3 по пройденным темам
-
Функции
-
Параметры функций
-
Использование множества параметров
-
Оператор return
-
Alert, prompt, comfirm
-
Тест 4 по пройденным темам
-
Объекты
-
Создание собственных объектов
-
Инициализация объектов
-
Добавление методов
-
Тест 5 по пройденным темам
-
Предопределённые объекты
-
Массивы
-
Свойства массивов и методы
-
Ассоциациативные массивы
-
Объекты math
-
Объект date
-
Тест 6 по пройденным темам
-
DOM и события
-
Что такое DOM?
-
Выборка элементов
-
Изменение элементов
-
Добавление и удаление элементов
-
Создание анимаций
-
Обработка событий
-
Выполнение событий
-
Создание слайдера изображений
-
Валидация формы
-
Тест 7 по пройденным темам
-
-
Изучение PHP
-
Базовый синтаксис
-
PHP теги
-
Echo
-
Комментарии
-
Тест 1 по пройденным темам
-
Переменные
-
Константы
-
Типы данных
-
Область видимости переменных
-
Переменные переменных
-
Тест 2 по пройденным темам
-
Операторы
-
Арифметические операторы
-
Операторы присваивания
-
Операторы сравнения
-
Логические операторы
-
Тест 3 по пройденным темам
-
Массивы
-
Числовые массивы
-
Ассоциативные массивы
-
Многомерные массивы
-
Тест 4 по пройденным темам
-
Управляющие сттруктуры
-
Оператор If Else
-
Оператор Elseif
-
Цикл While
-
Цикл Do While
-
Цикл For
-
Цикл Foreach
-
Оператор Switch
-
Оператор Break
-
Оператор Continue
-
Include и Require
-
Тест 5 по пройденным темам
-
Функции
-
Параметры функций
-
Оператор Return
-
Тест 6 по пройденным темам
-
Предопределённые переменные
-
$_SERVER переменные: Script Name
-
$_SERVER переменные: Host Name
-
PHP формы
-
GET и POST
-
$_SESSION
-
$_COOKIE
-
Тест 7 по пройденным темам
-
Работа с файлами
-
Запись в файл
-
Добавление к файлу
-
Чтение файла
-
Тест 8 по пройденным темам
-
-
Изучение CMS WordPress (базис)
-
Установка вёрстки на админ панель WordPress
-
Изменяемые поля на сайте
-
Динамический вывод постов
-
Google Карты, Яндекс Карты на сайте
-
Контактные формы
-
Плагины SMTP
-
-
Изучение CMS WordPress (детальный разбор)
- 3697
- 05 мая 2017, 17:36
Дневник цели
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: Все варианты валидны
Пишите, пожалуйста, свои варианты ответов в комментарии обсудим каждый.
Карантин
Городская система оповещения днем 30 марта начала транслировать по всем районам Петербурга сообщения о необходимости самоизоляции. «Соблюдайте режим самоизоляции. Не забывайте проветривать помещения. При признаках недомогания вызывайте врача. В случае нарушения режима самоизоляции предусмотрена ответственность вплоть до уголовной», - разносится по пустынным улицам.
Да, давно я не писал о веб-разработке и различных технологиях.
В первую очередь пишу сам себе и для своей мотивации, за время последнего поста было сделано не мало.
Сейчас я уже с 15 марта полностью работаю на удалённой основе по причине карантина, сегодня 30 марта карантин перешёл в более строгую стадию.
О важных этапах напишу здесь и целях на будущее.
Важные этапы:
- прошёл аттестацию на работе и получил небольшое повышение по зарплате
- сделал мини-приложение для внутренних задач по работе
- мотивировал двух своих товарищей заниматься веб-разработкой
Цели:
- продолжать изучать JavaScript
- обновить знания по React
- начать изучать NodeJS
На счёт NodeJS, так же совместно с товарищем купили курс сегодня, так что погружение начинается...
Всем мотивации и здоровья.
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();
});
"Но я развиваюсь с трудом, будто заштопанный флаг..."
И так, прошёл год и два месяца с последнего сообщения на smartprogress.do, что важного произошло?
- Первое что приходит в голову, это то что я сменил работу в начале 2019 года и сейчас работаю в полноценной IT-компании как я и хотел изначально
- Продолжаю изучать JavaScript, при этом уже проявляю интерес к набирающим оборотам фрейморкам таким как React и Vue
- Так же в начале года прошёл большой курс по React, очень понравилось, для меня было очень много нового. Хочу детально это изучать и дальше
- Помимо работы сделал два сайта на фрилансе: https://www.doppelganger-art.com/ - dark-art проект "Doppelganger Art" и http://triokna.karelia.ru/ - лендинг компании "Три Окна", продажа окон в Карелии.
- Прошёл мини-курс по CMS OpenCart
- Не перегорел и стараюсь держать руку на front-end пульсе
Постараюсь писать сюда почаще, делиться опытом и интересными темами, которые помогли мне... Помогут и Вам!
"Год назад я сидел на скамейке в общественном парке..."
Сегодня год моей цели, даже для интереса можно посмотреть с чего всё начиналось... Никогда за год не менялась моя жизнь, как в этот раз. Хммм...
Дальше больше ;)
Всем смелости.
Новая справочка.
На самом деле приятно конечно и лишний раз прокачать свои мозги новыми навыками полезно.
После окончания курса я пересмотрю все уроки повторно и может быть пройду их по памяти, так как каша в голове всё ещё есть.
Ну и по второму разу становятся более понятны некоторые моменты.
Пока больше курсов не планирую, и дальнейший вектор будет направлен на поиск новой работы, где основаная задача это разработка и применения всех тех знаний что я получил.
Постараюсь отражать все важные моменты здесь и детально заполнить полезной информацией те посты что был раньше, а не просто "JS")
Всем добра.
Вопросы и ответы связанные с JS при устройстве на работу (мои выдержки из курса).
Вопрос: Что такое всплытие событий?
Ответ: Всплытие событий это когда происходит какое-то событие, обработчик сначала срабатывает на самом вложенном элементе, затем на его родителе, затем выше и выше. И так по цепочке вверх.
Вопрос: Чем рекурсивный setTimeout лучше чем setInterval?
Ответ: Рекурсивный способ вызывает сам себя, по истечнию нужного времени.
Вопрос: Что такое режим стрикт strict?
Ответ: Это более строгий режим написания JS кода, который изменяет его семантику. Если его включить, то допущеные ошибки браузер не будет "прощать". Чтобы активизировать строгий режим для всего скрипта, нужно поместить оператор"use strict"; или 'use strict'; перед всеми остальными операторами скрипта (выдержать приведенный синтаксис буквально).
Выходные были выходными. Товарищ мой (Алексей), с кем я прохожу курс далеко продвинулся в сдачи курсовой работы. Рад, что само задание очень интересное с да ещё с острой темой "Выборы президента". Буду делать работу дальше, основываясь его github, если возникнут трудности. Всем интересной недели.
Вы тоже можете
опубликовать свою
цель здесь
Мы поможем вам ее достичь!
309 000
единомышленников
инструменты
для увлекательного достижения