1

Step 1

Дизайн проекта в Figma

2

Step 2

Согласование дизайна с заказчиком

3

Step 3

Подготовка к вёрстке, инициализация переменных

4

Step 4

Верстаем header

5

Step 5

Верстаем footer

6

Step 6

Прикрепляем доменное имя к своему серверу

7

Step 7

Верстаем main

8

Step 8

Анализируем , пытаемся раскрасить JS'ом )

9

Step 9

Делаем адаптив для ноутбука и планшета

10

Step 10

Адаптируем страницу под альбомную и нормальную ориентацию телефона

11

Step 11

Интегрируем новый сайт в своё портфолио.

12

Step 12

Идём за пивасиком! Подводим итог)

1

Step 1

Дизайн проекта в Figma

2

Step 2

Согласование дизайна с заказчиком

3

Step 3

Подготовка к вёрстке, инициализация переменных

4

Step 4

Верстаем header

5

Step 5

Верстаем footer

6

Step 6

Прикрепляем доменное имя к своему серверу

7

Step 7

Верстаем main

8

Step 8

Анализируем , пытаемся раскрасить JS'ом )

9

Step 9

Делаем адаптив для ноутбука и планшета

10

Step 10

Адаптируем страницу под альбомную и нормальную ориентацию телефона

11

Step 11

Интегрируем новый сайт в своё портфолио.

12

Step 12

Идём за пивасиком! Подводим итог)

20 November 2021 12 December 2021
Goal completed 9 December 2021

Goal author

Dmitry Chizhov

Russia, Химки

37 years old

General

Первый настоящий проект в портфолио!

Бодрого дня коллеги! Открываю смежную с основной целью Устроиться стажером front-end (HTML, CSS, JS) колонку!

Есть у меня заказ от старых друзей. У ребят устаревший сайт находящийся без модификации с 2016го года. Так как я немного в теме, предложил свои услуги. Поехали!

Основная задача. Сделать современный, адаптивный , кросс-браузерный, безопасный (SSL) сайт визитку. Чтоб открывался на всех популярных разрешениях:

Самые важные разрешения экрана, при адаптивной верстке

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

 Goal Accomplishment Criteria

Проект размещен на хостинге.

 Personal resources

Друзья, интернет.

 Goal ecological compatibility

Я очень этого хочу, чесслово!

  1. Дизайн проекта в Figma

    Я не дизайнер, но что то умею. Буду рад адекватной критике)

    Задача: сохранить цвета бренда, серьёзный стиль.

  2. Согласование дизайна с заказчиком

    Да - да, нет так нет )

  3. Подготовка к вёрстке, инициализация переменных

    Подготовка рабочего пространства, занесение основных цветов и размеров в переменные.

  4. Верстаем header

    Голова всему голова!

    1. Лого с описанием

    2. Контакты

    3. Меню

  5. Верстаем footer

  6. Прикрепляем доменное имя к своему серверу

  7. Верстаем main

    Основная часть страницы

    1. Слайдер

    2. О компании

    3. Услуги

    4. Каталог

    5. Форма обратной связи

    6. Контакты

  8. Анализируем , пытаемся раскрасить JS'ом )

    Вот тут пока не ясно, экспериментальный блок. На сайте будет каталог, хочу попробовать использовать Vue.js для товаров. Знаю только основы, но очень хочется поиграться с ним.

    Так же надо будет по тренироваться с формами обратной связи, делал только макеты, будем делать правильно!

  9. Делаем адаптив для ноутбука и планшета

  10. Адаптируем страницу под альбомную и нормальную ориентацию телефона

  11. Интегрируем новый сайт в своё портфолио.

  12. Идём за пивасиком! Подводим итог)

  • 1593
  • 20 November 2021, 10:35
Sign up

Signup

Уже зарегистрированы?
Quick sign-up through social networks.
Sign in

Sign in.
Allowed.

Not registered yet?
 
Log in through social networks
Forgot your password?