Первый опыт в верстке: что не так?

Question

[Viktormare1974]

Добрый день, уважаемым специалистам!

spoiler

В продолжение своего вопроса 44 года можно ли еще стать востребованным специалистом в IT? привожу свой первый "блин-комом" по опыту в верстке. Прекрасно понимаю, что это полный говнокод, и у профессионалов будет шок и ужас от увиденного, но я был бы благодарен за конструктивную критику, поскольку посоветоваться или получить учительской линейкой по голове не от кого, а свои ошибки чаще всего не замечаешь, хотя к концу "работы" над своим творением, я уже понимал сколь много я их понаделал.

Хотелось сделать что-нибудь хоть немного напоминающее вот это https://nikoskoulis.gr/ имеющимися средствами (HTML5 CSS3 Bootstrap3) и при полном незнании jQuery.

Меня в первую очередь интересовала адаптивность странички. Буду благодарен за любую критику, особенно что больше всего раздражает, вызывает праведный гнев и т.п. Не смог решить проблему в корректным отображением странички в IE и всплывающего меню слева при разрешении монитора 500px и ниже.
Страничка: pervyopyt123.ucoz.net/index.html
Файлы, кому интересно: https://cloud.mail.ru/public/NDQU/roqTmhPKJ
Заранее благодарю всех ответивших.

Comments

[Froggyweb]

Молодцом!

В мобилке меню бы полное сделать как на сайте оригинале.
Ну и с неймингом классов надо додумывать на большом сайте так не прокатит.
В целом - отлично.

[Viktormare1974]

Froggyweb, Спасибо большое за поддержку. Да, вот с полным меню проблема, уже настолько нерационально сверстал, что придется либо меню для мобильной версии отдельным блоком дописывать, либо через jQuery проблему решать.

[sim3x]

0. Никогда не выкладывайте код архивами
1. Не выкладывайте код в облачные диски
2. Не используйте укоз

Используйте гитхаб и гитхаб-пейджес

spoiler

ваша предистория никому не интересна и не удалена только из-за того что на нее никто не пожаловался

[Viktormare1974]

sim3x, спасибо за комментарий. Да, меня уже просклоняли за юкоз )), клянусь, больше не буду, честно признаться я не знал, где и как можно показать код и верстку страницы. Теперь благодаря Вам и другим написавшим буду знать - для того и писал вопрос. Еще раз спасибо.

Answer 1

[TheRevan]

1. Забейте на бутсрап, используйте flexbox-ы
2. Используйте swiper-slider - для слайдеров
3. Прочитайте про сборщики проектов и препроцессоры, типа gulp и scss Тык
4. Взяли слишком сложный сайт для начала я даже такой точь в точь не сверстаю, хотя опыта 3 года, лучше найти готовые psd макеты в инете и тупо их сделать и наполните обязательно контентом нестандартным(ибо шаблонные текста в портфолио отшиваются)
5. Не используйте иконочные шрифты, сейчас все используют svg спрайты, вот сервис если что для генерации: тык
6. Для хоста используйте beget - он бесплатный
7. Для любого наводимого элемента должно быть изменено состояние(у вас в футере пункты без ховера, то же самое с соц иконками, шапкой и логотипами)
8. Ну код у вас вполне чистый, не переживайте, бывает и хуже... часто хуже

Comments

[Viktormare1974]

Спасибо большое за конструктив! Я просто довольно старыми обучающими курсами пользовался, отсюда и bootstrap3 и про шрифты, да и все остальное по пунктам не знал, для меня очень полезно, спасибо.

[TheRevan]

Viktormare1974, незачто, если будут вопросы, пиши тык, помогу чем смогу.(только чур не надаедать, если не отвечаю значит не могу ответить сейчас)

[deeppines]

1) Не стоит забивать, если устроитесь на работу в компанию где уже работали и верстали проекты до вас, то велика вероятность нарваться на Bootstrap 3, по этому знать нужно, хотя бы в общих чертах и как оно все работает.
2) Используйте те инструменты которые лучше всего решают вашу задачу.
3) К сборщикам и препроцессорам неплохо бы добавить БЭМ

[Алексей]

Viktormare1974,
1. Используйте bootstrap 4 он на flexbox. (В пункте 3 в сборщике как раз он и есть.) Верстка по сетке хороший тон, проще согласовывать макеты с дизайнером.
2. Бред - использовать надо только то, что нравиться и удобно только Вам и ни как иначе.
С остальными пунктами согласен.
На счет сборщика и flex посмотрите канал WebDesignMaster и Sorax. Как первоисточник информации очень доступно.

[TheRevan]

Алексей, bootstrap намного замедляет скорость разработки если в макете есть нестандартные элементы, а как меня раздражает постоянные - col-lg, col-md

[Programmir]

Вместо font awesome использовать svg?

[sim3x]

TheRevan, почему замедляет?

[xfg]

TheRevan, можно использовать миксины чтобы не писать col-lg, col-md и т.д. https://gist.github.com/anschaef/d7552885c0e1f127c...

Также если погуглить англоязычные ресурсы, то можно узнать, что уже несколько лет проекты собирают обычными npm скриптами, а не сборщиками. Разработчики наигрались в полурабочие/заброшенные плагины, когда инструмент для решения проблем сам превращается в проблему. Давно пора отказаться от лишней прослойки и не предлагать её к изучению.

Answer 2

[l4m3r]

Не могу посмотреть файлы (на работе ucoz и mail заблокированы).
Но вы ОЧЕНЬ неудачный пример для копирования выбрали. Попробуйте что-нибудь стандартное: да тот же тостер, хотя бы!

PS: забудьте про ucoz. Одно название сразу с говнокодом ассоциируется. Куча бесплатных или дешевых хостингов.

Answer 3

[Евгений]

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

Comments

[Vladimir]

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

[Евгений]

Bigata, для начинания лучше самому вникнуть в суть верстки, а не использовать готовые решения. Потому что, когда придет время что то поменять, начинается ступор и куча вопросов на Тостере). Как учебный материал - бутстрап и похожие фреймворки - хорошие помощники.

[TheRevan]

Bigata, вообще бутстрап создает кучу лишнего кода, он обычно лучше всего подходит только для бекенд админок или набросать компоненты побыстрому

[deeppines]

Bigata, Bootstrap это фреймворк для прототипирования, а не верстки. Как писали выше, это больше инструмент для Back-endщиков - накидать админку по быстренькому или собрать страничку чтоб показать промежуточный результат заказчику.

Answer 4

[Максим Тимофеев]

Я не совсем понял каким боком https://nikoskoulis.gr/ похож на Ваш сайт. Тоже про часы? Для первой пробы не плохо конечно. Но к оригиналу вообще никакого отношения не имеет, как по дизайну, так и по верстке, даже идейно, концептуально - это другой сайт. Хотите набить руку в верстке? Найдите дизайн сайта (картинку) и сверстайте 1 в 1.

<div class="container-fluide"> - Я так понимаю это описка, container-fluid, удивительно что ничего не съезжает.

Совет: никогда, ни для чего, не используйте ucoz и аналогичные проекты. Купите дешевый хостинг, а лучше vds, есть куча бесплатных доменных зон (например .cf), есть github, есть еще куча проектов, но не ucoz. 99 рублей в месяц (пачка сигарет, 2 банки пива плохого).

Comments

[Viktormare1974]

Максим, спасибо за ответ. действительно описался, спасибо, исправил. По поводу https://nikoskoulis.gr/ я потому и написал "немного напоминающее", поскольку понимаю, что "сильно напоминающее" мне еще долго не удастся сверстать. За совет отдельное спасибо, поскольку долго метался и не знал, на каком хостинге выложить свою пробу пера, а поскольку я человек 90-х, то ucoz и narod единственное, что я знал понаслышке.

[Максим Тимофеев]

Viktormare1974, Пожалуйста, так как я сам из 90-х. То не понаслышке, знаю чем они чреваты )))