О проекте
Это мой самый первый коммерческий проект. Через моих знакомых на меня вышел владелец компании, который занимается установкой вентиляционного оборудования. Попросил задизайнить и сверстать для компании веб-страничку и оформить его организацию как бизнес в Google, чтобы выходила в выдаче результатов поиска Google и на картах. Заказ был платным, я тогда получил 100 долларов за проект.
Это мой первый опыт фронтенд-разработки - не знал ни грамма про то, как правильно создают сайты, поэтому писал HTML-код напрямую, прописывал CSS-стили прям внутри тегов. В то время ещё не слышал даже, что такое Bootstrap, Tailwind и почему-то боялся прикасаться к JavaScript с его React, опасаясь, что не осилю эти технологии. Перед вёрсткой я сам себе нарисовал макет в Figma - чтобы чётко понимать, как вообще будет изначально выглядеть веб-страничка. Узнал про методологию БЭМ, мне посоветовали его изучить как первые шаги для удобной стилизации и разметки компонентов.
По-моему даже хостингом не пользовались: приобрели домен, привязали к самому дешёвому VPS (Timeweb 188р/мес на 2021) и закинул статику в nginx.
Работа с клиентом
Всё общение с заказчиком проходило на звонке, мы с заказчиком так ни разу и не встретились лично. Он сразу заявил, что полностью доверяет мне и дизайн и всю реализацию лендинга. Он присылал фотографии для сайта, я их добавлял как портфолио компании. По сути, никакого ТЗ не было - правки и пожелания приходили на лету по ходу работы.
Google Business
Отдельной задачей было оформить компанию в Google: заполнить карточку организации, добавить фото, описание, часы работы — чтобы Lux Vent появлялась в выдаче и на Google Maps. Запомнился один момент: мы вместе собрались на звонок с представителем Google, чтобы пройти верификацию и официально открыть компанию в Google Business, заказчик показывал свой офис, подтверждал, что действительно занимается установкой вентиляции в зданиях.
Сложности
Сложностей было сразу несколько, и все — одновременно. Я параллельно осваивал множество вещей, с которыми раньше не работал: рисование интерфейсов в Figma, вёрстку на HTML/CSS и деплой на сервер. Опыта не было ни в одном из этих направлений — разбирался по ходу.
С технической стороны больше всего мучился с вёрсткой: правильно организовать иерархию элементов, разобраться с отступами, понять как работает CSS. А когда узнал про адаптивную вёрстку, то осознал, что переделывать всю страницу под мобильные экраны - я не осилю :) А не осилю, потому что было уже так лень всё переписывать. В итоге страничка так и осталась под десктопный формат экранов.
Как бы я сделал сейчас
Главное чего не хватало — компонентного подхода. Одни и те же блоки я копировал руками, стили дублировались, и при правках приходилось менять одно и то же в нескольких местах. Сейчас я бы взял Astro: компоненты, переиспользуемые блоки, встроенная адаптивность через Tailwind — и на выходе та же статика, которую так же закидываешь в nginx. Только разработка в разы быстрее.