Perfect Landing Page, как?

Добрый вечер! Нужен совет опытных людей.
Одна хорошая компания дала сделать тестовое задание. По мокапу сделать небольшой лендинг, UI на свою фантазию. У самого есть год опыта во фронтенде. Лендинг должен быть анимированный, с крутыми ховер эффектами, плюс там каруселька, контактная форма.
Так вот вопрос, какие технологии использовать, что лучше делать и не делать, чтобы их удивить и все же получить эту вакансию?? На что обращают внимание опытные компании?
Верстаю достаточно хорошо, пока использую в данном проекте sass, gulp, bootstrap, flex, es6, jquery.
Надо ли использовать normalize и тому подобное? Какие единицы лучше использовать, шрифты?
Буду благодарен за любые советы, примеры хорошего UI, анимации и hover-ов)
  • Вопрос задан
  • 999 просмотров
Решения вопроса 2
m77x
@m77x
Консультант
Удивить можно:
1) скоростью загрузки
2) знание css - многие анимации сделать в css да и оформление "графики" максимально в css
2б) flex, SVG и пр…
3) микроразметка сайта
4а) минимальный вес сайта
4б) подключение уже готовых скриптов не из файла на сервере, а с https://cdnjs.com/ https://maxcdn.bootstrapcdn.com/bootstrap/…/bootst...
5) максимально использовать знание htaccess
Хотел уже закончить, но вернулся:
САМЫЙ ПЕРВЫЙ) используйте иконки!!! для каждого блока информации своя иконка и в меню тоже должны быть иконки
Сейчас заказчик требовательный пошел, ему важно, чтобы информация была максимально визуализирована, а иконки позволяют надолго записать суть информации в сознание ))
Вам простят единицы измерений, но не простят отсутствие иконок
Ответ написан
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
Использовать bem, ну хотя бы именование классов по БЭМу.
Адаптивность.
seo+meta теги.
Валидность верстки + если есть товары, то тоже разметка для ПС и seo(item-price и т.д.)

+ лучше всего набирать максимум https://developers.google.com/speed/pagespeed/insi...

используйте jade/pugjs для сборки html.

Теперь про то, что написали Вы:
sass, gulp, bootstrap, flex, es6, jquery.
bootstrap и flex?
Серьезно? Зачем? Это как-бы из разных миров. Если используете flex - возьмите просто секту, https://github.com/kristoferjoseph/flexboxgrid, например

>es6, jquery
Тоже выглядит забавно.
Либо уж используйте просто jquery+его плагины.
Либо полностью пишите свои свистелки и перделки на ES6.
Но тут стоит задуматься, что вашему соискателю важнее - умение быстро в продакшн(jquery) или умение писать js код(es6).
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Используйте блоковую сборку через includeHTML
1. Сможете сделать максимально близко для дальнейшего создания шаблона и полноценного SPA.
2. Сможете одной строкой менять местами блоки и скрывать их.
3. Создайте различные представления страницы, используя однократное кодирование блоков (каждый уникальный блок = один HTML-файл)!
4. Без переделки готовый код работает: локально (file:///), как приложение: в phonegap и в nwjs.
5. Просто, быстро, понятно!
Они удивятся однозначно!

PS: отсутствует роутинг из "коробки", потому, что это лишнее для данного функционала и если необходимо - делается за несколько минут.
Ответ написан
Я бы всё таки взял normalize
Единицы, у меня помню при наборе сделали замечание насчёт line-height, оказывается правильнее всего писать в em
Ответ написан
Deodatuss
@Deodatuss
нормально назвать классы в css (по какой-то методологии), сделать так чтобы все нормально выглядело при любом количестве контента, отформатировать код и написать jsdocs. А свистелки самому написать.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы