Моя первая верстка. Через тернии к звездам

[FilippovAM]

        Добрый день, уважаемые форумчане! Наконец таки я нашел тот форум который искал. Для начала я представлюсь. Меня зовут Андрей, мне 24 года. Я выпускник ИрГТУ, специализация: Информационные системы и технологии. Живу и работаю в Иркутске. Работаю системным администратором, активно занимаюсь спортом
        Сижу я значит, работаю сис.админом и думаю..."А не попробовать ли мне в веб??" Ну значит, встал с печи и пошел. Пошел в веб Долго ли шел, коротко ли, но быстро наткнулся на ресурс https://htmlacademy.ru/ и начал его подгрызать потихоньку, да помаленьку. Для понимая всего и вся, озарила меня мысль чтения "всего и вся" и отправился я бороздить просторы интернета, в поисках различной-полезной информации. За библию был взят http://htmlbook.ru/. Изучаю его и по сей день. Прочитал множество различных статей на хабре, а так же статьи найденные напрямую через поисковые системы. Осилил книжку "HTML5 Недостающее руководство - Мэтью Макдональд"(сейчас на примете CSS 3.0 Недостающее руководство того же автора). Читаю и по сей день различные стать.
        Мои знания веб-разработки далеки от вершин, да и пожалуй далеки пока и от простых пригорков, но я настроен серьезно и готов работать и учиться, совершенствоваться в данной стезе ВЕБ  Так же хочу сказать, что у меня есть сестренка, которая работает в веб-разработке уже 5 лет. На данный момент работает в фирме города Hong-kong, но времени  помогать/наставлять меня на пусть истинный, у нее категорически мало  Но все же иногда есть. Собственно у сестренки то, я и получил свое первое задание, свою первую страницу формата *.psd, которую и хочу представить Вашему вниманию.
        Очень жду ваших комментариев/отзывов/предложений по сделанной мною страничке. Для страницы сделал так же adaptive, под любое разрешение устройства, без break-point'ов. Надеюсь правильно, если не правильно - то не страшно. Переделаем в будущем. Прикладываю страничку. За ранее хочу сказать, что для корректной работы adaptiv'a требуется перезагрузить страничку, после того как изменили размеры окна браузера. Возможно это решается другим путем(без перезагрузки), но я пока его не осилил. Всем заранее спасибо! Ваш ход, форумчане
http://filippovam.github.io/Robinzon/

Edited June 26, 2015 by FilippovAM

[wwt]

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

[FilippovAM]

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

точно! будет.

[Galaxy]

Для первого раза очень хорошо. Бегло глянул и что бросилось в глаза:
1) Для изображений используйте спрайты
2) Както многовато импортов,  брейкпоинтов должно быть  меньше(углубитесь в адаптив)

3) Потратьте время на ознакомление c 
   a) sass или less
    Шаблонизатор (stylus,jade etc)
   c) grunt , gulp etc`

    они упростят вам жизнь в будущем.

Edited June 26, 2015 by Galaxy

[FilippovAM]

Для первого раза очень хорошо. Бегло глянул и что бросилось в глаза:

1) Для изображений используйте спрайты

2) Както многовато импортов,  брейкпоинтов должно быть  меньше(углубитесь в адаптив)

3) Потратьте время на ознакомление c 

   a) sass или less

    Шаблонизатор (stylus,jade etc)

   c) grunt , gulp etc`

    они упростят вам жизнь в будущем.

Большое спасибо  Для мелких изображений использовал спрайты + icon's шрифты. Остальное буду изучать

[hypnocolor]

Чё-то прям круто для первого раза, даже не верится. Сколько у вас времени ушло на эту страницу?

[web-tech]

При ширине экрана 600px и меньше текст читать можно только под лупой и загляните в результаты https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ffilippovam.github.io%2FRobinzon%2F&tab=mobile

и в футере 4 блока в ряд которые идут, нужно при тех же 600px делать хотя бы по два 

bootstrap то зачем?

Edited June 26, 2015 by web-tech

[FilippovAM]

Чё-то прям круто для первого раза, даже не верится. Сколько у вас времени ушло на эту страницу?

Времени ушло много Дело еще в том, что я постоянно отвлекался. То работа, то жизнь внесет свои коррективы(позитивные), поэтому времени ушло много И конечно же я ни раз переделывал страницу, после прочтения каких либо мануалов типо "типичные ошибки начинающего верстальщика" и прочее

При ширине экрана 600px и меньше текст читать можно только под лупой и загляните в результаты https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ffilippovam.github.io%2FRobinzon%2F&tab=mobile

Да, спасибо! Вот буквально пару часов назад на форуме в одной из веток обсуждения нашел эту "службу" и был смущен результатами моей странички. Дело в том, что было задание использовать сетку bootstrap. Сначала сверстал блоками, затем сеткой.

Edited June 27, 2015 by FilippovAM

[swandev]

на osx в chrome и firefox http://take.ms/sg5F8

в safari все хорошо

Edited June 26, 2015 by swandev

[FilippovAM]

на osx в chrome и firefox http://take.ms/sg5F8

в safari все хорошо

Спасибо! с производительностью есть проблемы, будем искать

[antonKar]

когда пишете большие тексты, где-либо, разбивайте на параграфы плиз

+1, на Хабре за такое иногда убивать хочется.

 

1) в фильтре слева заметна подгрузка картинки чекбокса при самом первом клике, это нехорошо;

2) вверху в слайдере такого типа прокрутка на краях не должна блокироваться;

3) на мобильных устройствах работает слайдер свайпом? Планшета просто под рукой нет сейчас проверить;

4) переделайте анимацию синего меню, какая-то замутная немного, проще надо быть;

5) ненавижу слайдеры, как в брендах, новинках и лидерах продаж, когда с одного края на другой край всё летит и мельтешит, я-то ещё ладно, а у некоторых моих знакомых манагеров вестибулярный аппарат слаб;

6) я так и не понял как работает меню в слайдере и товары, когда я кликаю по стрелкам, какой товар к какому пункту меню относится абсолютно не понятно;

7) видео не воспроизводится в средней колонке;

8) под большим видео в средней колонке ссылки на другие страницы? Если да, то картинки тоже должны быть кликабельными. Вы пользовались планшетом когда-нибудь?

9) заказать обратный звонок не работает;

10) тексты надо типографить;

11) в подписке e-mail вида "sdfsdf@sdf" считается почему-то считается валидным;

12) делайте кастомные проверки заполнения форм, браузерные проверки - быстрый и некрасивый способ. И ради бога не алертом, это ещё хуже.

[FilippovAM]

 

когда пишете большие тексты, где-либо, разбивайте на параграфы плиз

+1, на Хабре за такое иногда убивать хочется.

 

1) в фильтре слева заметна подгрузка картинки чекбокса при самом первом клике, это нехорошо;

2) вверху в слайдере такого типа прокрутка на краях не должна блокироваться;

3) на мобильных устройствах работает слайдер свайпом? Планшета просто под рукой нет сейчас проверить;

4) переделайте анимацию синего меню, какая-то замутная немного, проще надо быть;

5) ненавижу слайдеры, как в брендах, новинках и лидерах продаж, когда с одного края на другой край всё летит и мельтешит, я-то ещё ладно, а у некоторых моих знакомых манагеров вестибулярный аппарат слаб;

6) я так и не понял как работает меню в слайдере и товары, когда я кликаю по стрелкам, какой товар к какому пункту меню относится абсолютно не понятно;

7) видео не воспроизводится в средней колонке;

8) под большим видео в средней колонке ссылки на другие страницы? Если да, то картинки тоже должны быть кликабельными. Вы пользовались планшетом когда-нибудь?

9) заказать обратный звонок не работает;

10) тексты надо типографить;

11) в подписке e-mail вида "sdfsdf@sdf" считается почему-то считается валидным;

12) делайте кастомные проверки заполнения форм, браузерные проверки - быстрый и некрасивый способ. И ради бога не алертом, это ещё хуже.

 

Очень емко, большое спасибо!

          Пункт 3. Свайп работает только для слайдера фона. На странице 2 разных вида слайдера, сделано это для ознакомления с разными слайдерами.

          Пункт 6. Я не понял как надо сделать. Мне кажется этот вариант допустимый. Чемоданы одинаковые, поэтому происходит путаница. А вот если бы чемоданы соответствовали заголовку, то думаю смотрелось бы вполне читабельно. Могу ошибаться, конечно.

          Пункт 7. Видео не загружал. Вставлен постер.

          Пункт 11. Проверка ввода хромает) По ней есть вопрос, нужно ли ее вообще верстать? как я понял, проверка ввода должна быть серверной. А такая проверка как представлена тут, это скорее просто проба сил. Или же надо ее довести до конца? 

Буду разбираться  Еще раз спасибо!

Edited June 27, 2015 by FilippovAM

[afdw]

Проверка ввода хромает) По ней есть вопрос, нужно ли ее вообще верстать? как я понял, проверка ввода должна быть серверной. А такая проверка как представлена тут, это скорее просто проба сил. Или же надо ее довести до конца? 

 

Желательно. Иначе, при медленном соединении, пользователь, отправив форму подумает, что всё получилось. А через минуту бац и ошибка. А в половине полей значение не сохранилось.

Edited June 27, 2015 by afdw

[antonKar]

Пункт 6. Я не понял как надо сделать

Как вариант над первым товаром категории делать что-то минизаголовка

 

По ней есть вопрос, нужно ли ее вообще верстать? как я понял, проверка ввода должна быть серверной. А такая проверка как представлена тут, это скорее просто проба сил. Или же надо ее довести до конца? 

Конечно надо. Делаете на клиенте проверку формы, отправляете аяксом на сервер и в зависимости от ответа сервера делаете с формой дальнейшие действия: либо сообщение об ошибке, либо сообщение об успехе и очистку формы. 

[FilippovAM]

 

Пункт 6. Я не понял как надо сделать

Как вариант над первым товаром категории делать что-то минизаголовка

 

 

 

По ней есть вопрос, нужно ли ее вообще верстать? как я понял, проверка ввода должна быть серверной. А такая проверка как представлена тут, это скорее просто проба сил. Или же надо ее довести до конца? 

Конечно надо. Делаете на клиенте проверку формы, отправляете аяксом на сервер и в зависимости от ответа сервера делаете с формой дальнейшие действия: либо сообщение об ошибке, либо сообщение об успехе и очистку формы. 

 

Ок, доделаю проверку ввода на клиенте спасибо! в backend мне пока еще рано, сейчас вот с fronted разбираюсь. Зеленый пока еще совсем. На счет мини-заголовка идея хорошая! Спасибо за помощь! 

[necro]

FilippovAM, День добрый.

А можно ли у вас попросить этот макет, чтобы потренироваться? Выкладывать никуда не буду, ну разве что сюда, для критики. А то в сети маловато хороших макетов, на которых можно тренироваться адаптивной верстке, а этот весьма неплох и интересен) Буду вам очень благодарен. email d9idbka@gmail.com

[FilippovAM]

FilippovAM, День добрый.

А можно ли у вас попросить этот макет, чтобы потренироваться? Выкладывать никуда не буду, ну разве что сюда, для критики. А то в сети маловато хороших макетов, на которых можно тренироваться адаптивной верстке, а этот весьма неплох и интересен) Буду вам очень благодарен. email d9idbka@gmail.com

 

Добрый! Вы уж извините, но гуру не позволяет мне дать Вам макет. извини;(

[FiretrUCK]

 

FilippovAM, День добрый.

А можно ли у вас попросить этот макет, чтобы потренироваться? Выкладывать никуда не буду, ну разве что сюда, для критики. А то в сети маловато хороших макетов, на которых можно тренироваться адаптивной верстке, а этот весьма неплох и интересен) Буду вам очень благодарен. email d9idbka@gmail.com

 

Добрый! Вы уж извините, но гуру не позволяет мне дать Вам макет. извини;(

 

Жаль) Работа понравилась