Ниже приводится резюме всего, что я сделал за последние две недели.
Много прогресса! Создал больше изображений CSS, завершил первый большой проект, узнал о SVG и анимации, работал над проектами Free Code Camp, узнал о дизайне пользовательского интерфейса и пользовательского опыта и начал изучать Node.js.
Проекты
За последние две недели мне удалось завершить два проекта, и я начал планировать следующий. Я смог использовать много вещей, которые я узнал в отношении пользовательского интерфейса и дизайна.
Проект API — MusicalPicks
Этот проект использует API базы данных фильмов для получения информации о мюзиклах. Пользователь проходит короткий тест из пяти вопросов, чтобы определить, какие жанры он предпочитает, а затем ему предоставляется список мюзиклов, основанных на этих жанрах. Пользователи также могут искать мюзиклы по жанру после завершения викторины, если они хотят увидеть больше вариантов.
Для этого проекта я хотел, чтобы приложение выглядело как театр. Я создал несколько иллюстраций в Adobe Illustrator, чтобы создать этот эффект. Иллюстрации включают титульный знак, выполненный в виде афиши театра, иллюстрацию домашней страницы входной двери и кассы театра, иллюстрацию гримерной, иллюстрацию хранилища реквизита или костюмов, а также театральное освещение.
Чтобы показать пользователям их прогресс в викторине, я создал иллюстрацию театральных огней, где каждый свет загорается, чтобы показать вам, какой числовой вопрос у вас есть. Ниже приведен скриншот второго вопроса викторины.
Посмотреть репозиторий Github здесь
Free Code Camp — Генератор случайных цитат
Я также закончил проект случайных цитат Free Code Camp. Я сохранил простой дизайн и решил использовать вдохновляющую женскую тему. Для этого проекта я решил не использовать API и вместо этого перечислил цитаты, которые я выбрал в объекте.
Демонстрация генератора случайных цитат здесь
Посмотреть репозиторий Github здесь
CSS-изображения
Гистограмма покемонов с анимацией наведения для подсказки «гистограмма».
Просмотреть гистограмму покемонов на Codepen
Гистограмма также была представлена в Picked Pens от Codepen!
Железный человек с анимированным дуговым реактором для подсказки «Железный человек».
Посмотреть Железного человека на Codepen
Простая плоская пицца для подсказки «пицца».
SVG-изображения
Я также начал ежедневный вызов изображений SVG. Первой подсказкой было создать Жабу из Марио. Я создал это изображение с помощью Affinity Designer и использовал CSS для анимации.
Что дальше?
- Портфолио планирования. Мне нужно создать портфолио, так как я не планирую использовать созданное мной портфолио Free Code Camp в качестве официального портфолио. Я начну вайрфрейминг и мозговой штурм.
- Узнайте больше о Node.js.
- Посещайте встречи. Я планирую посетить около 9 митапов в марте.
- Продолжайте работать с изображениями CSS, изображениями SVG и изучать UI/UX.
Чтобы увидеть мой ежедневный прогресс, подписывайтесь на меня в Твиттере @musicalwebdev.
Чтобы просмотреть мой 100-дневный репозиторий кода, посетите мой Github.
