Фотограф Анна Черкесова
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.
История о моем первом fullstack-проекте /// веб-сайт под ключ 殺
Знакомство с миром веб-дизайна и разработки сайтов не на шутку увлекло меня. Начиная выполнять заказы по дизайну сайтов мне захотелось развиваться дальше и воплощать свои работы в код и запускать полноценные сайты. Тем более, что на рынке сейчас больше ценятся дизайнеры, которые умеют кодить.
Для тренировки и проверки своих навыков решил воплотить проект для виртуального заказчика - фотографа. Составил техническое задание, собрал примеры и начал творить дизайн в Figma. С дизайном проблем было меньше всего, так как мы с моим “заказчиком” без особых прений утвердили концепт: сайт должен был быть в темных цветах, акцент должен быть сделан на удобной презентации работ фотографа, типографика должна быть простой, но легко-читаемой. На сайте обязательно должны быть секции портфолио и тарифов на услуги фотосессий, а также форма обратной связи. Набросав мудборд и прототип, я перешел непосредственно к отрисовке дизайна для компьютерной, планшетной и мобильной версии.
После того, как дизайн был готов, его нужно было сверстать. Для этого можно было использовать простые решения, например, Тильду. Но я решил пойти сложным путем, тем более проект тренировочный. Итак, что же я использовал для написания кода сайта.
Редактор кода Microsoft Visual Studio Code с кучей полезных плагинов
💪 HTML с препроцессором Pug для разметки сайта
💣️ CSS c препроцессором SCSS для стилизации сайта
😎 Нативный JavaScript ES6 для интерактива на сайте
Сборщик проекта Webpack
Git и Github для работы с версиями проекта
Систему управления контентом Wordpress
C написанием HTML/CSS особых сложностей не было. Это простые языки, которые при желании и мотивации может освоить каждый. Больше всего времени ушло на написание JS-слайдера фотографий из портфолио. В этом случае можно было воспользоваться готовыми решениями, но я решил написать свой вариант. Немного усилий и запросов в Google и все работает!!!
Финальным этапом была установка сайта на CMS Wordpress, а потом запуск на хостинге. В итоге заказчик получил быстрый сайт с полностью редактируемой информацией и возможностью добавлять новые работы в портфолио.
