-3

Вкратце, я полный профан в web-разработке, но обстоятельства сложились так, что мне нужно сверстать сайт, который сам же и нарисовал. Мой опыт в вебе, примерно 4 часа.

Суть проблемы:

Я пытаюсь понять, как сделать правильную разметку сайта, что бы сразу сделать её верной, не колхозной и адаптивной.

Вот как это должно быть: введите сюда описание изображения

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

введите сюда описание изображения

Вот что есть сейчас: введите сюда описание изображения

Максимально колхозный код) введите сюда описание изображения

P.S: Если кто то будет править код, пожалуйста, напишите что именно вы изменили, почему, и зачем.

Также просьба к спецам, можете ли подсказать какие-нибудь адекватные и актуальные на 2020 год гайды, книги, вообще, откуда лучше всего черпать знания?

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

Taras Chopyk
  • 1
  • 1
    Вряд ли у вас сразу получится что-то срочное, правильная разметка и вёрстка приходит после миллиона ошибок – Inventor Nov 09 '20 at 02:20
  • @Inventor Это не срочное. Тут наверное дело в энтузиазме. В любом случае, мне кажеться что для того, что бы учиться - нужно задавать много вопросов. Знакомых я бы хотел пощадить) т1001 глупый вопрос вряд ли кто то выдержит, а тут ребята вроде как отвечают по собственной воле – Taras Chopyk Nov 09 '20 at 05:15
  • 2
    Раз уж 1001 вопрос, то лучше по очереди их задавать. 1 маленький шаг за 1 раз. В один пост их категорически нельзя умещать, плюс есть правила. Ознакомьтесь, пожалуйста, с ними, прежде, чем продолжать. Тогда погружение в мир веб-разработки станет максимально продуктивным и комфотным (еще и будет меньше минусов в карму на сайте). По книгам здесь есть существующие вопросы, новые задавать не приветствуется, в интернете полно всего. И не пренебрегайте знакомыми, они отнесутся с пониманием. – mrEvgenX Nov 09 '20 at 05:41
  • @mrEvgenX Принял, благодарю за информацию :) – Taras Chopyk Nov 09 '20 at 08:05

1 Answers1

0

скачать Visual Studio Code — редактор исходного кода

посмотреть и за одно сверстать 2-3 шаблона как минимум

первая ссылка

https://www.youtube.com/watch?v=ltMSrSis9ww&list=PLoq3Accf02PVdUqjqPdWMG4HbEZXlhICW&index=1

в этом курсе в 11 то ли в 12 видео используется jQuery вот с этого момента (мае мнение => хочеш по короткому но плохому пути посмотри и выучи jQuery если же по длинному но хорошему просто повторяй за ним но не вдавайся глубоко в детали а когда сделаешь все то что написано внизу учи javaScript внизу есть ссылка на хороший ресурс ) остальные сам поищи в youtube

для работы с psd можно использовать https://www.markupeasy.ru/ сам пользуюсь

ознакомся с методологией бэм

поищи видео или блог топ полезных плагинов для vscode облегчат жизнь

ознакомься с препроцессорами они нужны для сокращения написанного тобой кода на css я использую scss он древний но синтаксисом похож на css чем и нравится ps scss тоже что и sass отличие в отсутствии ; и {}

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

после этого верстку сделать сможеш

и потом начнется сложная часть а именно javaScript(https://learn.javascript.ru/) , webpack , reack и тогдалие

Armen
  • 1,730
  • по короткому но плохому пути посмотри и выучи jQuery, что плохого?) – De.Minov Nov 16 '20 at 00:21
  • @CbIPoK2513 а что может быть хорошего в обертке? конечно упаковка конфеты красивая но ты же канфету сеш чтобы узнать вкус а не упаковку – Armen Nov 16 '20 at 09:31
  • @Armen Т.е по вашему все кто использует JQ, это плохие практиканты?) Не забываем для чего был придуман JQ, да, он сейчас не так актуален, но 99% что в работе с ним придётся встречаться не раз, и нужно хоть как то уметь с ним работать. К тому же для начинающего верстальщика это идеальный вариант, а с опытом он сам от него откажется в сторону других фреймворков и библиотек. Тем более если будет работать в команде, а если будет один, и только верстать, JQ будет за глаза – Vearodev Nov 16 '20 at 22:59
  • @Vearodev по моему все кто использует jQuery не зная js плохие практиканты... по двум причинам для меня
    1. если столкнутся с не стандартной ситуацией где на jQuery нет готового решения или оно есть но надо кое что переделать тебе каюк

    2.я был на собeседовании давно это было знал jQuery а задания(ооочень легкие задания были на чистом js) как вы думайте какой был результат?)))

     – Armen Nov 16 '20 at 23:07
  • @Vearodev и самое главное по вашему вот библиотек много как легче перейти с одной на другой знаю конкретную или зная то что связывает всех их – Armen Nov 16 '20 at 23:10
  • @Armen Большое спасибо за советы :) BrainsCloude смотрю, один из не многих кто говорит зачем и почему тот или иной тег нужен. Замечаю уже чуть прогрес, это конечно мотивирует, хотя время от времени из-за проблем появляеться желание приложиться чем-нибудь в монитор :> – Taras Chopyk Nov 17 '20 at 09:36
  • @Armen Начинал когда то с JQ, и только набравшись опыта взялся за нативный JS, никак не помешало освоить angular,vue + backend(nest), с опытом смена языка или какого фреймворка не приносит никаких трудностей, даже если ты начинал с JQ, а начать с него, как ни крути проще, особенно верстальщику. Но, сколько людей, столько и мнений как говорится) – Vearodev Nov 17 '20 at 11:26
  • @tarasChopyk незачто был рад помочь да не то что связано конкретно с html,css хороших видео много не зацикливайся именно на нем вот с js и далее такой набор бесполезных кусочек мозаики что черт ногу сломает пока собирал сваю не знаю уже сколько всего пересмотрел – Armen Nov 17 '20 at 13:35