Сайт портфолио с админкой — Продвинутый курс по веб-разработке

Автор Vera Abramova
Сайт портфолио с админкой — Продвинутый курс по веб-разработке

Всем привет.

Меня зовут. Ковальчук Дмитрий. Вы смотрите лофтскул и сейчас я покажу один из выпускных проектов которые выполняет студенты на продвинутом курсы по веб-разработке портфолио момент первой загрузки вы увидите загрузчик подтянулись все картинки сервер и мы видим красивые горы при перемещении курсора мыши горы будут двигаться мы видим вдохновляющие.

Параллакс эффект дали, что мы видим ещё посередине плашка фотография имя подпись социальные сети всё — это нужно будет заполнить настоящими данными нажимаю на кнопку авторизоваться флажка будет переворачиваться и мы увидим поля для ввода логина пароля и небольшой блок импровизированная капча надо поставить галочку.

Я человек и да точно я не робот, но пробок. Нет мы поговорим попозже сначала. Давайте встретимся на фронтенде пока на область вокруг. Мы возвращаемся в исходную точку дали. Давайте пройдемся по страничка. Первая страничка которая предлагает смотреть — это мои работы на этой странице тоже срабатывает загрузчик и загружается вот такой всё очень похожа на предыдущую страничку, но здесь уже иной эффект здесь parallax Scroll. А когда мы скоро люменис. Винница перемещаются в горы без тормозов сегодня план, что мы видим есть ещё социальные гоночки ушли вверх, а справа мы видим меню три параллельные линии превращается в крест и появляются пункты меню. Обратите внимание, что пункта меню выравнивание по середине страницы я загнал скриншот снимание вот так они появляются ребята всего будет четыре варианта этой домашние работы каждый вариант будет фраза — это будет пустыня будет ночь и лес с водой всё будет очень-очень красиво везде свои интересные факты и так по клику на эту стрелочку мы переместимся ровно на один экран. Обратите внимание, что в зависимости от того какой размер экрана у пользователя который зашёл на сайт выведем, что этот блок выравнивается по всей его высоты минимальная высота 650 пикселей. У меня достаточно широк и я показываю на нём. Давайте пойдем дальше по клику на стрелочку выключились ниже. По моим работам — это очень интересный и важный элемент этого. Давайте смотреть как он работает увидим блок он также тянется на всю высоту здесь слева мы видим описание проекта — это описание будет меняться при переходе на следующий слайд название проекта по технологии которые использовались на проекте и кнопочка которая поможет нам перейти на сайт смотри. Сюда Здесь текущий проект вот он самый супер keeppower портфолио помогает нам синтезироваться понять как должен работать свадьбы. Разумеется студенты должны будут наполнены слайдер своими реальными работами. Давайте перейдем к работе нажимаем. Обратите внимание на анимации изменилась описание слева изменились картинки. Как проверить, что всё идёт правила. Мы видим здесь картина 4234 переходим назад 1 2 3 вперёд 2 3 4 дальше 41 естественно после четырёх букв найти. Один потому, что у нас всего четыре картинки. Я думаю, что здесь всё понятно идём дальше чтобы мне говорят — это очень простой блок здесь у нас будет интересовать форма обратной связи мы будем рисовать она в. ПТС, но здесь есть интересный элемент. Давайте нажмем. Ява 12В переменный режим устройств. Обратите внимание на Blur меня программа меняется положение фона и меняется в. Леруа формы также. Обратите внимание на то, что сайт. Наш активные все студенты получат макеты для разных устройств для мобильника планшета ноутбука и широкого монитора увеличила размер экрана меняется также и вот этот угол. Я рекомендую делать его при помощи не смогли хорошо. Пока мы перейдем к следующей странице следующая страница обо мне здесь всё очень похоже. Обратите внимание на технологии они появляются в этот уже сделано при помощи svg карта карта также тянется на высоту всего экрана карта мы можем перемещать. Если вы хотите можете добавить болят отметку на карте которая будет показывать где вы находитесь и фото переходим на страницу блок сразу хочу сказать, что мы не пытались сделать какой-то аналог. Фейсбука блок — это достаточно большой функционал и в рамках данного курса мы реализуем такую мини версию блога очень простое, но интересно. Давайте посмотрим здесь справа будут идти статьи1 с другой слева оглавление и пока мы с когда экран доходит до очередной статьи переходит дорогу палочка подсветка текущего элемента текущий статьи. Обратите внимание, что при уменьшении экрана левое меню прячется и преобразуется вот такую в этой подушке точно также просвечивается текущий контроль по части фронтенда — это всё. Давайте теперь рассмотрим. Как работает backend прежде всего перейдём на страницу моей работы здесь внизу есть форма это. Форма должна отправлять письмо ящик пользователя. ТСП разработчика чей этот сайт. Например я хочу отправить письмо мне нужен сайт нажимаю допустим если онемела email нажимаю отправить мне все не заполнены все поля. А, тогда я безмолвных отправить OK ваше сообщение отправлено мужем очистить папку пойдем наверх теперь авторизацию здесь мне нужно ввести пароль и логин допустим я не ввёл пароль. Нажимаю войти роботы невеста говорит сразу же на тему, что проверил как теперь допустим я нанимал пароль и пусть меня подтвердить, что я не робот. Нажимаю войти и ругается на неправильно введенные логины и теперь я попробую вести всё правильно и я зашёл хорошо начнем со страницы у мне сейчас я выставлю все свои скилы на 50% вот так выглядит наш админка она очень простая — это упрощенный вариант потому, что может сможет сделать каждый студент нажимаем сохранить гуляем теперь выставим всё надеюсь.

0 комментариев
0

Читайте также