Первый настоящий проект в портфолио!
Бодрого дня коллеги! Открываю смежную с основной целью Устроиться стажером front-end (HTML, CSS, JS) колонку!
Есть у меня заказ от старых друзей. У ребят устаревший сайт находящийся без модификации с 2016го года. Так как я немного в теме, предложил свои услуги. Поехали!
Основная задача. Сделать современный, адаптивный , кросс-браузерный, безопасный (SSL) сайт визитку. Чтоб открывался на всех популярных разрешениях:
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Критерий завершения
Проект размещен на хостинге.
Личные ресурсы
Друзья, интернет.
Экологичность цели
Я очень этого хочу, чесслово!
-
Дизайн проекта в Figma
Я не дизайнер, но что то умею. Буду рад адекватной критике)
Задача: сохранить цвета бренда, серьёзный стиль.
-
Согласование дизайна с заказчиком
Да - да, нет так нет )
-
Подготовка к вёрстке, инициализация переменных
Подготовка рабочего пространства, занесение основных цветов и размеров в переменные.
-
Верстаем header
Голова всему голова!
-
Лого с описанием
-
Контакты
-
Меню
-
-
Верстаем footer
-
Прикрепляем доменное имя к своему серверу
-
Верстаем main
Основная часть страницы
-
Слайдер
-
О компании
-
Услуги
-
Каталог
-
Форма обратной связи
-
Контакты
-
-
Анализируем , пытаемся раскрасить JS'ом )
Вот тут пока не ясно, экспериментальный блок. На сайте будет каталог, хочу попробовать использовать Vue.js для товаров. Знаю только основы, но очень хочется поиграться с ним.
Так же надо будет по тренироваться с формами обратной связи, делал только макеты, будем делать правильно!
-
Делаем адаптив для ноутбука и планшета
-
Адаптируем страницу под альбомную и нормальную ориентацию телефона
-
Интегрируем новый сайт в своё портфолио.
-
Идём за пивасиком! Подводим итог)
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
