vicodin
@vicodin
Имею некоторый опыт

Можно ли соваться на Одеск с таким уровнем работы(фронтэнд)?

Доброй ночи,

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

Поиграться и потыкать можно тут.

Закидывайте меня помидорами как можно сильнее, это мой первый макет.
Верстка не адаптивная, в следующих макетах буду делать с @ media и, возможно, mobile-first.

Если представить ситуацию, что я сдаю такой макет заказчику, он примет работу? Всего ушло 3 вечера, т.е. где то 9-10 часов, половина из которых относилась к js.
Уже сделал профиль на одеске, планирую сверстать еще 3 таких макета и уже идти отправлять заявки.

Кстати, дополнительный вопрос - верстальщик должен делать работоспособными слайдер, портфолио(в этом макете) или нет?
  • Вопрос задан
  • 7148 просмотров
Решения вопроса 1
mr_T
@mr_T
Web-разработчик
Сам верстаю много, так что попробую дать советы, но это чисто мое мнение, поэтому постарайтесь реагировать на это соответствующе :)

Сначала по вопросам непосредственно в этом посте:
1) Заказчик может такое принять, а может и не принять - тут зависит от того, насколько он дотошен, вот и все . В любом случае нужно понимать, что редко бывает так, что заказчик что-то понимает в том, что вы делаете, поэтому его "хотелки" скорее всего будут относится к его субъективному восприятию внешнего вида сайта. Но так же нужно понимать еще и то, что внимание к мелочам дает хороший результат на это восприятие в том числе :)
2) Лично я делаю так, чтобы в шаблоне просто можно было написать что-то вроде
<? foreach ($slide in $slides): ?>

<? endforeach; ?>
и не париться о том, что произойдет дальше (в разумных пределах, конечно - чаще всего слайды должны быть определенных размеров, но об этом нужно говорить).

Теперь по вашему коду:
1) Попробуй использовать sass/less с автопрефиксами, компассами и пр. - очень будет удобно писать стили.
2) Лично я крайне редко пользуюсь сторонними слайдерами, поскольку они часто используют кучу невнятных классов, дивов, врапперов, иннер-врапперов, аутер-врапперов, контейнеров и т.д., хотя чаще всего достаточно несколько строк в js, задача которых просто давать нужные классы нужным слайдам, и анимации в css - в итоге так даже быстрее, чем настраивать под себя какой-нибудь сторонний jquery слайдер. А если один раз сделать заготовку на будущее, то вообще все за пару минут можно сделать.
3) Вместо спрайтов во многих случаях лучше использовать шрифтовые иконки (например, с icomoon.io). Например, для значков соц-сетей. Из приятных бонусов - шрифты можно красить в любой цвет и анимировать, а так же они векторные, что позволяет не париться по поводу дисплеев с высокой четкостью. Можно еще svg, но с ними немного сложнее, зато гибко.
4) Обычно на подобных сайтах лепят фиксированное меню, которое сужается при прокрутке ниже (что, кстати, опять-таки решается css transition'ами и парой строк в js для задания класса типа small).
5) #link-services feature лучше сделать не section, а article или figure - так будет правильнее семантически. А section'ами лучше сделать #link-services, #link-portfolio и т.п. Почитай на любом ресурсе о семантическом значении html5 тегов, там много интересного можешь найти :)
6) Я бы как-то выделил элементы формы при фокусе, сделал их поконтрастнее, а то на некоторых экранах текст может сливаться с фоном инпута.
7) p.section-description лучше сделать без класса вообще, а в css задать общий стиль для всех абзацев, изменяя его в конкретных случаях при необходимости.
8) Раз уж сайт такой весь из себя анимированный, то что ж вы не сделали анимацию ссылок :) ? Хотя бы на работах в портфолио обязательно нужно это сделать, причем недостаточно просто картинок, нужны как минимум еще заголовки, которые могут, например, всплывать по наведению. Очень красиво получаются в таких моментах анимации transform: scale(...) вместе с opacity.
9) header и footer не всегда по одному в одном документе, эти элементы могу вкладываться так же и в article или section. Как следствие лучше дать своим body > header и body > footer внятные классы или айдишники, иллюстрирующие их принадлежность ко всей странице, а не к отдельным блокам.
10) .feature > aside я могу быть не прав, но мне кажется, что это семантически неверно. Aside должен показывать какую-то часть документа, которая помогает ориентироваться в контенте на сайте (например, фильтры, боковое меню). В твоем случае это просто иконка, так что тут лучше обойтись просто div'ом.
11) По js: у вас какой-то странный блок сверху, где задаются глобальные переменные. Вы там используете jQuery, при этом не помещая код в $(document).ready. Весь код jQuery, связанный с селекторами (как минимум) всегда должен быть внутри ready. Да и какие-то странные конструкции там вроде var buttonAll = $('.works-button')[0], которые потом используются снова как $(buttonAll). Лучше в buttonAll записать строки с селекторами тогда уж, а не использовать jQuery 2 раза для одного и того же. Да и конструкции вроде $('.works-button')[0,1,2,3] довольно опасны. Тут лучше дать каждой кнопке какой-нибудь атрибут типа data-category (или вообще в href писать #category-name), и написать один обработчик для всех этих кнопок, который просто фильтрует работы по значению этого атрибута. Так будет проще в будущем что-то поменять, при этом совершенно не затрагивая код js.

В общем, как-то так.
Ответ написан
Пригласить эксперта
Ответы на вопрос 12
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
Лендиги верстать не очень трудно, да и не надо их верстать все уже давно свертано и продается по 5-10$ за штуку, в любом исполнении.

Если бы вы еще помощи на тостере не просили когда делали, вообще было бы отлично :)

Верстка довольно чистая, но много классов, слишком много почти у каждого элемента.

Кстати, дополнительный вопрос - верстальщик должен делать работоспособными слайдер, портфолио(в этом макете) или нет?

Не согласен с автором выше, верстальщик должен уметь сделать полностью рабочий шаблон это все-таки фронтенд, а не бекенд.
Ответ написан
might
@might
javascript developer
Как первая работа - не плохо. Как уже писали выше - классов много.
Кстати, если сузить экран браузере так, чтобы появилась горизонтальная прокрутка, то при при прокрутке появляется баг f5.s.qip.ru/RFrXBkOf.png
Ответ написан
opium
@opium
Просто люблю качественно работать
Начните с небольших работ на одеске и все у вас получится.
Ответ написан
not_ice
@not_ice
А я думал, фронтенд - это такие слова, как requirejs, mvvm, SPA, localstorage, websockets, webgl и т.д. :)
Ответ написан
@psihoz
Может я чего-то понимаю, но это скорее «верстка» чем «фронтэнд»?
Ответ написан
Jazzis
@Jazzis
кодер, геймер, переводчик и ещё кто-то
А это фича такая что кнопка "All" в портфолио не выделяется после того как нажал на остальные?
Ответ написан
Nidora
@Nidora
Бонус 200 руб всем новым клиентам! VDS - 149 руб
Видно что ещё "сыроватенько", но не плохо. Доработать пару мелочей и будет отлично.
Продолжайте в том же духе, делайте ещё примеры и тогда будет что показывать заказчикам.
Только цены не завышайте, ставьте ниже средних и у вас будут заказы.

Если представить ситуацию, что я сдаю такой макет заказчику, он примет работу?

Зависит или ему всё понравится. Заказчики - люди капризные :)
Кстати, дополнительный вопрос - верстальщик должен делать работоспособными слайдер, портфолио(в этом макете) или нет?

Верстальщик нет, это уже программист должен настраивать все нюансы.
Ответ написан
Judixel
@Judixel
Front-end Engineer
Для одеска рановато, сверстайте ещё 30 страниц, что бы чувствовать себя уверенней и не только лендинги, а например е-коммерс.
Ответ написан
GoodProject
@GoodProject
Верстальщик
Блин круто, а как вы сделали всё это, какие знания нужны кроме css и html? JS, Jquery?

Сайт хорошим получился и всё круто. просто я лично ещё не умею делать слайдеры и когда на картинку нажимаешь она появляется в рамочке которую можно закрыть, вот и интересно через что это было сделано ))
Ответ написан
@lkogan
Cумеете заказчика убедить, что справитесь с работой - пойдет) Проекты там разные, и элементарные, и сложные.
Ответ написан
@itrigger
веб-технолог, проектировщик
не пойму, а где кнопка Отправить у формы обратной связи?
Ответ написан
Ваш ответ на вопрос

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

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