Movie Store

Дизайн

Нужно подключить шрифты

Это крайне важно, любой адекватный сайт по дизайну с другими шрифтами полностью полезет. Шрифты в комплекте с дизайном шли, если их удалил — ссылку можно найти в истории переписки со мной в shared media. Шрифты нужно подключать в разных форматах, но для начала подключи хотя бы просто те, которые есть. Для того, чтоб знать как это делать — гугли font-face в css.

Логотип вставлен неверно

Он написан текстом и среди текста вставлена графическая иконка, это неверно. Логотип всегда зарезервирован как графическая единица, независимо от шрифта, которым он написан. Допустим, в шрифте используется некий лицензионный шрифт. Если ты напишешь его где-то скачанным шрифтом (как ты сделал), то есть вероятность, что тебя заставят за это платить штраф, потому что ты публично используешь шрифт без лицензии на коммерческом сайте. Если ты вставишь его изображением — все вопросы идут к обладателю логотипа. Поэтому нужно весь логотип вместе с буквами экспортировать из дизайна как единое целое и вставить изображением.

Верхняя навигация

Красная подсказка всплывает не по центру выбранного пункта (скриншот).
На дизайне выделен пункт "Movies" и подсказка у него, но это не значит, что буквально должна работать только она. Это передан принцип. Это значит, что все иконки должны быть серыми, а при наведении — должны становиться чуть более насыщенными и с неким красным элементом, на манер той, что уже выделена в дизайне, и под ней должна появляться красная подсказка. Так должно работать всё меню.

Правая часть шапки

Размер шрифта не по дизайну, слишком большой.
Иконка с женщиной, текст, и иконка с карандашом - всё это должно быть выровнено относительно друг друга по одной горизонтальной линии.
Скриншоты: дизайн, вёрстка.

Белые дыры по бокам слайдера

Вся область с текущим фильмом должна растягиваться на ширину экрана, у тебя она резко обрывается и по бокам белое пространство (скриншот).

На дизайне у него есть определённая ширина и её такой же и сделал. Но если экран немного шире, чем страница с дизайном, то там появляются дыры. Здесь нужно просто понимать как страница себя должна вести в таких условиях. В данном случае слайдер должен растягиваться на всю ширину, вот так: скриншот. Обрати внимание, что слайдер и белая плашка у него внизу — тянутся на всю ширину, чтобы не было ужасных белых дыр, но весь контент внутри — по-прежнему содержится в центральной области, в соответствии с дизайном.

Навигация слайдера

Её нет (скриншот). По наведению точка должна увеличиваться, в неё фотка актёра. А рядом — появляется его имя.

Инфо о слайдере съехала

Скриншот.

Строка поиска не по дизайну

Скриншоты: дизайн, вёрстка.

Сетка с фильмами

Речь идёт об этой сетке: скриншот.

Она сделана совсем плохо и не так, как должна. Давай упростим задачу: уберём все горизонтальные и вертикальные фильмы, оставим только вот такие, квадратные (скриншот). Пусть они повторяются, но ты из таких квадратных штук сделай сетку, пусть их будет там 3-4 ряда таких фильмов. А дальше уже хотя бы их доведи до ума.

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

Вот смотри: скриншот. статичный фильм (справа) и фильм по наведению на него мыши (слева). При наведении появляется красная обводка и если присмотреться, то картинка становится чётче. Это потому, что на каждом фильме сверху есть просто белый квадрат с прозрачностью в некоторый процент. То есть он не тупо перекрывает фильм белым, а немного его забеляет. И при наведении на фильм, помимо красной обводки также пропадает эта белая прослойка сверху, таким образом акцентируется квадрат с фильмом, на который мы навели мышь. Так должны себя вести все квадраты.

Сайт обрывается

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

Блок с загрузкой

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

***

Общее

Организация файлов

Я об этом уже говорил, это тоже крайне важно. Оставь один файл со страницей: index.html, а всё остальное сложи в соответствующие папки: fonts, images, styles. И удали лишние страницы, такие как play.html, movies.html, у тебя всё одна страница. Во всех ссылках на странице, которые подразумевают переход на другую страницу, можно вставить заглушку, которая выглядит примерно так: <a href="#">Movies</a>. Такая страница никуда не будет вести, но будет кликабельной ссылкой.

***

HTML

Организация кода

В таком коде сложно ориентироваться, в идеале стоит прописывать комментарии в самых важных местах, но конкретно в твоём примере будет достаточно визуального разграничения разных блоков, например: скриншот.

Здесь я комментарием выделил целый глобальный блок на странице. А внутри пустыми строками отделил разные блоки внутри этого блока. Тебе может казаться это мелочью, но это важно, потому что часто приходится работать над чужим кодом и ориентироваться в нём, ведь его мог писать не ты, и его может быть очень много, а тебе нужно быстро найти конкретное место и внести изменения. Организация кода в этом случае важна с самого начала и ценится в командной работе.

Ещё пример. Такая конструкция бегло не читается вообще, потому что это куча символов в ещё большей куче кода. Если его организовать, то даже при беглом чтении кода становится примерно понятно что там происходит, сколько элементов внутри и т.д.

Структура страницы

Она не совсем верная.

Например: логотип у тебя отдельная часть от всего. А верхнее меню — часть первой секции со слайдером (скриншот).

На деле же, по смыслу, структура такая:

Шапка: логотип, навигация, юзерпик.
Слайдер: фотка, инфа о слайде.
Список фильмов: панель навигации (кнопки, поиск), сам список.

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

Doctype

Ты используешь устаревший doctype от HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Уже давным давно используется HTML 5, поэтому нагугли как указать его и исправь.