Модуль портфолио javascript: ia-stepanov/portfolio: Фронтенд проекта «Портфолио» — это персональный сайт, который содержит блоки: «рассказ о себе», «профессиональный опыт и навыки», «портфолио» и «контакты». Stack: HTML5, CSS3, SASS/SCSS/LESS, JavaScript, jQuery, PHPMailer, Gulp, БЭМ, Figma.

06.07.2023 alexxlab

Содержание

JavaScript от Glo Academy

МОДУЛЬ 1
Основы JavaScript
Введение в язык, подключение javascript. Правила написания кода Основы работы с Git.
Типы данных, операторы, методы и свойства.
Динамическая типизация данных в Javascript. Условия, ветвления.
Функции, анонимные функции, callback — функции, чистые функции.
Циклы. Рекурсия.
Функции. Область видимости и замыкание.
Знакомимся с объектами и массивами, методы переборов и псевдомассивы.
Подготовим наш проект для работы со страницей.
Результат: Изучите основы JavaScript, необходимы чтобы двигаться дальше. Узнаете как строится архитектура программы используя объектно ориентированное программирование. Придет понимание как работает JavaScript будете готовы к изучать API браузера и ООП.
МОДУЛЬ 2
ООП, JavaScript на практике
Доступ к элементам на странице DOM (часть 1). Отладка кода.

Работа с DOM, работа с элементами DOM (часть 2).
Загрузка документа, События в JS, обработчики событий и особенности их работы, события мыши и клавиатуры.
Storage. localStorage, sessionStorage, cookie.
Контекст вызова — this.
ООП — Наследование, прототипы, конструкторы и классы.
Особенности современного стандарта ES6 Шаблонные строки,интерполяция, Стрелочные функции, Геттеры, Сеттеры и Классы.
ООП ES6+. Rest, spread, Деструктуризация, Коллекции Map и Set
Способы перебора массивов.
Результат: Изучишь ООП, Написанный и полностью готовый таймер для сайта на JS. Ты сможешь манипулировать содержимым страницы браузера, писать анимации, наконец-то поймешь, что такое этот this.
МОДУЛЬ 3
Углубленное изучение JavaScript. Современные стандарты и дополнительные технологии
Настраиваем сборщик Webpack. Модульный JavaScript.
Скрипты и время выполнения. setTimeout, setInterval и requestAnimationFrame. Объект Date. Пишем таймер.
Параметры документа, окна и работа с ними. Пишем Меню и Модальное окно.
Делегирование. Пишем Табы.
Пишем Слайдер (делегирование).
Практика ООП, гараж с машинами в стиле NFS.
Работа с атрибутами, Дата Атрибуты. Регулярные выражения.
Пишем калькулятор.
Работа с формами и валидация.
Работа с JSON, AJAX. Получение и отправка данных на сервер.

Конкурс лучших работ.
try…catch — перехват ошибок.
Асинхронный JS. Promise. Контекст выполнения, асинхронное выполнение, стек вызовов и event loop.
Подробно про Fetch API.
Результат: Готовый скрипт — обработчик формы обратной связи. Постигнешь асинхронный JavaScript, Promise, Fetch Узнаешь последние тренды JavaScript. Изучишь современные технологии сборки проектов. Научишься делать свой код кроссбраузерным.
Модуль 4
Первые деньги на разработке
Развитие себя как специалиста
Оформление портфолио
План развития на год
Поиск заказчика

Партнёрство
Диплом
Дипломный проект
Напишете интерактивный сайт или веб-приложение. На этом проекте отработаете знания и навыки, полученные на курсе. Готовый проект подойдёт для портфолио и собеседований в компании.

Веб-разработчик с нуля — авторский курс по Frontend-разработке

Автор курса

Привет! Меня зовут Игорь.

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

Более 8 лет я занимаюсь разработкой индивидуальных программ обучения для ИТ-школ, а также проведением онлайн-занятий для веб-разработчиков средних и крупных компаний. Настало время разработать свою уникальную сбалансированную программу обучения по Frontend-разработке, которая проверена временем и имеет ряд неспоримых преимуществ.

Создавая авторский курс по веб-разработке, я использовал весь свой многолетний опыт (работаю с JavaScript уже более 12 лет, с React.js более 6 лет) и опыт преподавания в других ведущих ИТ-школах, в которых я являюсь наставником и ведущим преподавателем.

Инвестиции в себя, свое образование и развитие
— лучшее, что вы можете сделать.
Делайте всё, что делает вас лучше; это то, что никто не может обложить налогом или отнять.
Уоррен Баффет, инвестор, миллиардер

По прогнозам Минцифры, к 2027 году дефицит кадров в IT-сфере может увеличиться до 2 млн человек. Это значит, что сейчас самое время для входа в профессию.

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

Еще немного информации обо мне. У меня техническое высшее образование, степень Мини-МВА Московской Международной Высшей Школы Бизнеса «МИРБИС», а также есть квалификация «Исследователь. Преподаватель-исследователь».

Участвовал в разработке и проведении обучающих вебинаров по Node. js, JavaScript, TypeScript, React.js для сотрудников крупных компаний, среди которых «ВТБ», «Ростелеком», «IBS».

Огромная благодарность преподавателю Игорю Филимонову за проведение обучающих вебинаров и развитие наших веб-разработчиков (уровень Middle+). За несколько месяцев были достигнуты ключевые цели обучения: изучен React.js в связке с TypeScript и Webpack, включая сложные сборки IT-проектов.
Пыжова Ася, начальник Управления по работе с персоналом подразделений поддержки и контроля ПАО «ВТБ»

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

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

Медианная зарплата на IT-рынке: 140 000 в Москве — 180 000
в Санкт-Петербурге — 150 000
в регионах — 120 000
Исследование проводилось сайтом «Хабр Карьера» на основе анализа 12 000 зарплат айтишников в первом полугодии 2022 года

Моя миссия. Я готовлю востребованных и высокооплачиваемых программистов и веб-разработчиков, которые способны изменить наш мир к лучшему.

Запишитесь на бесплатную карьерную консультацию лично со мной, чтобы не упустить свой шанс на изучение новой творческой и высокооплачиваемой профессии!

Как настроить проекты WordPress для модуля фильтруемого портфолио Divi

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

В этом посте мы увидим, как настроить проекты WordPress для модуля Divi Filterable Portfolio.

Начнем!

1 Предварительный просмотр модуля фильтруемого портфолио
- 1.1 Рабочий стол
- 1,2 Телефон
2 Настройка проектов WordPress
- 2.1 Все проекты
- 2.2 Добавить новое
- 2. 3 Категории
- 2,4 Теги
- 2,5 Пример проектов
3 Фильтруемый портфельный модуль Divi
- 3.1 Стилизация фильтруемого модуля портфолио Divi
4 Фильтруемые результаты модуля портфолио
- 4.1 Рабочий стол
- 4.2 Телефон
5 Завершение мыслей о настройке модуля фильтруемого портфолио Divi

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

Во-первых, давайте посмотрим, что мы будем строить в этом уроке.

Рабочий стол

Телефон

Настройка проектов WordPress

Projects — это настраиваемый тип записей, встроенный в WordPress. Он работает как любой тип сообщений, но у него есть собственный редактор, список, категории, теги и т. д. Тип сообщений «Проекты» отлично подходит для создания портфолио для демонстрации вашей работы. Чтобы использовать их правильно, важно знать, как настроить их с помощью правильных категорий и тегов.

Чтобы просмотреть или создать проекты, перейдите в раздел «Проекты» на панели управления WordPress. Вы увидите меню «Все проекты», «Добавить новый», «Категории» и «Теги». Давайте посмотрим на каждый из них.

Все проекты

Меню Проекты включает несколько опций. Все проекты открывается при выборе ссылки «Проекты». На этом экране перечислены все ваши проекты с названием, автором, категориями, тегами, комментариями и датой. Вы можете вносить изменения в каждый проект по отдельности, вносить массовые изменения и создавать новый проект.

Добавить новый

Чтобы создать новый проект, выберите Добавить новый либо на экране «Все проекты», либо в меню панели «Проекты». Это открывает редактор проекта. Он работает так же, как и обычный тип сообщения, и включает в себя заголовок, основное содержание, категории, теги, избранное изображение, выдержку и параметры обсуждения.

Категории

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

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

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

Для своих примеров я создал категории, описывающие типы фотографий, которые предлагает этот сайт. Они отвечают на вопрос «какой тип фотографии?»

Для моих примеров я создал категории:

Свадьбы
Предложения
Годовщина
Променады
Выпускной

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

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

Как и категории, теги работают так же, как и обычные категории сообщений, но они созданы специально для типа сообщений «Проекты». Создайте теги, которые помогут описать элемент в категории. Они могут помочь сузить тему.

В нашем примере «Ремонт дома» вы можете использовать «Бытовая техника» в качестве категории и «Газ и электричество» в качестве тегов. Используйте столько тегов, сколько вам нужно.

Для своих примеров я создал шесть тегов:

Внутри
Снаружи
Средняя школа
Компания
Церковь
Семья

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

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

Пример проектов

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

Фильтруемый модуль портфолио Divi

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

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

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

Модуль фильтруемого портфолио Styling Divi

Теперь давайте посмотрим, как оформить модуль фильтруемого портфеля. В качестве примера я добавляю раздел проектов на целевую страницу в бесплатном пакете макетов для фотостудии, доступном в Divi.

В качестве альтернативы вы можете оформить страницы проекта как шаблон Divi Theme Builder, который можно назначить любому проекту по вашему желанию. Для получения дополнительной информации см. статью Как создать шаблон проекта динамического портфолио с помощью Divi и ACF.

Вот несколько первых разделов макета. Я добавлю портфолио после раздела героев. Я буду использовать дизайнерские подсказки из самого макета.

Добавить раздел

Во-первых, добавьте новый раздел в раздел героев.

Откройте настройки раздела, прокрутите вниз до Background и измените Background Color на черный. Закройте настройки раздела.

Цвет фона: #000000

Добавить строку

Затем добавьте строку с одним столбцом .

Добавить фильтруемый модуль портфеля

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

Фильтруемое содержимое модуля портфолио

Для Post Count введите 4 в поле. Затем выберите категории , которые вы хотите отобразить в модуле фильтруемого портфеля. По умолчанию модуль показывает заголовок, категории и нумерацию страниц. Я оставляю их с настройками по умолчанию.

Количество сообщений: 4
Категории: желаемые категории

Макет фильтруемого модуля портфеля

Далее перейдите на вкладку «Дизайн». Первая часть Макет . По умолчанию модуль отображается во всю ширину, но я хочу отображать проекты в виде сетки. Измените макет на сетку. Мы оставим изображение и наложение по умолчанию.

Компоновка: Сетка

Фильтруемый текст заголовка модуля портфеля

Прокрутите вниз до Текст заголовка . Используйте h3 для уровня заголовка и измените шрифт на Inter, стиль на полужирный, а цвет на #ff5a17.

Уровень заголовка: h3
Шрифт: Inter
Стиль: полужирный
Цвет: #ff5a17

Измените размер на 14 пикселей, интервал между буквами на 1 пиксель и высоту строки на 1,4 em.

Размер: 14 пикселей
Расстояние между буквами 1 пиксель
Высота строки: 1.4em

Фильтруемый модуль портфеля Текст критериев фильтра

Далее прокрутите вниз до Текст критериев фильтрации . Измените шрифт на Inter, стиль на полужирный и измените цвет на черный. Это придает фильтру стиль, который соответствует макету и выделяется из портфолио.

Шрифт: Inter
Стиль: полужирный
Цвет: #000000

Оставьте размер шрифта равным 14, что является настройкой по умолчанию. Измените Line Height на 1.4em.

Размер: 14 пикселей
Высота строки: 1.4em

Фильтруемый модуль портфолио Метатекст

Затем прокрутите вниз до Метатекст . Измените шрифт на Inter и измените цвет на белый.

Шрифт: Inter
Цвет: #ffffff

Измените высоту линии на 1,4 em.

Высота строки: 1,4 em

Фильтруемый модуль портфолио Пагинация

Наконец, прокрутите вниз до Разбивка на страницы . Измените шрифт на Inter и Color на белый. Закройте модуль и сохраните настройки.

Шрифт: Inter
Цвет: #ffffff

Результаты модуля фильтруемого портфеля

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