ekaterina3785

Студентам в начале курса говорила, кто хорошо в детстве играл в лайнс, тетрис и подобное, тот будет хорошо верстать.
Верстка это обычная геометрия средней школы записанная с помощью тегов и раскрашеная/подвинутая стилями. Всё.
Всякие JS и т.д. это просто следующий этап.

План действий может быть таким:
1. Берете/получаете макет
2. Внимательно рассматриваете его, мысленно разбивая на блоки. Думаете что куда может/должно растягиваться или уменьшаться при изменениях экрана и увеличении/уменьшении контента.
3. Если п.2. сразу не осилился, идете гулять или спать.
4. Возвращаетесь к п.2.
5. Верстаете понятные большие блоки, затем их заполняете. Разбивайте задачи более простые.

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

А совсем без проблем не выйдет, потому что экранов много, браузеров много, хотелок у заказчиков еще больше. Хорошо, когда эти хотелки интересные :)

Такое ощущение, что вы учитесь на курсах 10 летней давности.

Якоря через ссылки и атрибут name устарели уже очень давно.

Той секции, к которой нужно перейти задается id.
А в ссылке указывается # и этот id.

Куда:
<section id="monday">содержимое блока</section>
Не обязательно section, это может быть table или p или вообще любой другой элемент, к которому нужно прокрутить страницу.

Ссылка:

<a href="#monday">Перейти к описанию понедельника</a>

p.s. обязательно проверяйте свой код валидатором https://validator.w3.org/nu/
Тот способ, которым вы сейчас вкладываете теги друг в друга принесет вам кучу неприятных сюрпризов.

p.p.s называйте классы и id на английском и так, чтобы другому человеку было понятно, что происходит

p.p.p.s ваш редактор похож на что-то типа Front Page не помню какого года. Если это так или просто если ваш редактор устарел, то рекомендую обновить его или заменить на современный. Дело в том, что хороший редактор подсвечивает ошибки и вам же будут удобнее работать.

Прошу прощения, не смог разобрать код (глаза кровоточат)
Чтобы сделать внутреннюю ссылку, вам надо создать метку там, куда вы хотите переместиться. Например:
<a name="hochu_suda">хочу сюда!!!</a>
Это особая ссылка-"метка".

А на том месте, откуда вы хотите переместиться - создайте обычную ссылку:
<a href="#hochu_suda">ткни меня</a>
Не забудьте поставить знак #.

Пример:

<a href="#ponedelnik">понедельник</a>
<a href="#vtornik">вторник</a>
<a href="#sreda">среда</a>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, ex, dicta. Perspiciatis, unde, explicabo, voluptatem suscipit magnam ipsum omnis cupiditate voluptate velit et accusantium quos iure perferendis atque architecto. Inventore, blanditiis, alias, cupiditate tempora odit esse aliquam quisquam ratione cum officiis nulla magni in saepe eaque excepturi veritatis quae repellendus qui distinctio culpa nobis aliquid accusantium maxime quibusdam dignissimos. Aspernatur, maxime, enim, et impedit sit illo nobis laboriosam placeat obcaecati numquam deleniti amet reprehenderit natus suscipit reiciendis at recusandae expedita culpa sed rem nulla consequatur consectetur tempora! Omnis aperiam vero modi. Ullam, natus laborum omnis eaque vitae numquam dignissimos voluptates ipsam ex dicta ipsum exercitationem commodi aut nemo nostrum at quis? Amet, veniam, nam maiores excepturi repellendus minus facilis repudiandae laboriosam molestiae labore natus facere debitis corporis fuga reiciendis libero nobis magni quia necessitatibus quaerat iure odit a explicabo neque rem officia autem dolores modi mollitia ullam id consequatur earum quidem repellat ab nemo sint ut! Nostrum, quia suscipit fuga itaque ipsam a assumenda officia tempora atque dolorum. Non porro rerum nemo laboriosam quia animi delectus. Perferendis, commodi, debitis, nesciunt qui dolores aliquam nulla cupiditate a ducimus architecto error culpa. Eos, quis, distinctio, ipsam nemo nobis dicta libero voluptates vel odit blanditiis id vitae animi harum illo facere optio nihil aliquid! Inventore, sed ex explicabo sapiente officia placeat tenetur minima. Alias, amet, reiciendis, doloribus architecto quia saepe aliquam sed porro quidem nisi cupiditate omnis cum quaerat. Ut, rem, natus, harum obcaecati amet similique totam odio explicabo dolorem minus blanditiis doloribus eligendi illo iusto reiciendis voluptatum delectus nam aliquid magnam possimus? Eaque, similique, quasi, earum, dolore numquam omnis error ipsa quod quidem aliquid odio accusamus labore magni quo ratione recusandae sed eveniet in autem iure animi. Libero, quam, accusantium voluptatem est obcaecati aperiam delectus maxime saepe vel soluta. Perspiciatis, quasi, sed, animi, nemo consequuntur odit magni provident numquam deleniti molestiae quas ipsam asperiores porro maiores facere voluptas veniam cupiditate sit alias assumenda quaerat dolore corporis eum modi placeat esse dignissimos laboriosam laborum repudiandae dolorum consectetur unde iste voluptate nisi adipisci optio vitae. Consectetur, corporis, soluta, in, architecto non doloribus sapiente cumque id ab amet dignissimos ipsa adipisci eaque velit odit commodi molestias perferendis maxime ratione earum voluptate illum possimus quae odio expedita alias sunt excepturi nemo error fugiat praesentium esse neque debitis magni officiis blanditiis placeat facilis cupiditate voluptas voluptatem eius repudiandae veniam totam dolor aut ea? Minus, accusantium ipsum sunt?</p>
<a name="ponedelnik">понедельник!!!</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, officia, eveniet, maiores aut blanditiis ipsa rerum quo quos vel error odit non mollitia quibusdam quia perferendis inventore unde. Reprehenderit, maiores eum iure odit explicabo vitae aliquam non iste ullam sapiente expedita dolores porro tempora dolorum magnam tempore officiis odio illo facere maxime consequuntur obcaecati assumenda unde voluptates neque consequatur voluptas nemo nostrum quae repellat praesentium ipsa inventore est nulla veritatis nam similique officia. Hic, libero, impedit, enim reprehenderit dolorem consectetur laudantium obcaecati sapiente optio quasi beatae distinctio! Aut, quis, sit, repellendus, nostrum magnam dignissimos earum magni error voluptas fugiat mollitia eos ratione! Assumenda, culpa, est, magnam et velit nam ratione iste repellat delectus pariatur nobis blanditiis at harum officia maxime quisquam commodi dolor praesentium aut impedit. Illum, dignissimos natus soluta nesciunt reiciendis minima rerum quod voluptate exercitationem eligendi sunt quis numquam suscipit id voluptatum ipsum impedit quasi labore dolore harum nostrum sequi beatae est eaque totam esse consequuntur iste in tempora eos perferendis temporibus rem commodi! Ratione, quam, officiis, quaerat ipsam fugiat quae deserunt et modi veniam vero at nesciunt magnam iste obcaecati corporis esse quod iusto laboriosam accusantium cumque soluta nemo officia numquam nobis natus. In, ratione, id maxime nihil corrupti architecto ullam officiis nostrum nisi enim! Obcaecati, reprehenderit, iusto, accusamus autem explicabo deleniti sapiente ratione corrupti blanditiis quam laboriosam dicta unde nemo perspiciatis facilis quis nobis totam animi ea veritatis molestias asperiores voluptates itaque aspernatur quaerat corporis sint delectus iste et a veniam inventore adipisci doloremque. Modi, minus, omnis, eveniet, quasi praesentium sit illum nemo temporibus pariatur error quos quia saepe nostrum! Laboriosam, repellat, debitis, maiores nisi quidem quos unde optio nemo modi suscipit amet possimus facilis qui consectetur quis voluptatem voluptas. Suscipit, tenetur, corporis dolores facere dolorum soluta sequi quam laboriosam tempore nostrum magnam iure eius hic distinctio praesentium sapiente tempora incidunt? Necessitatibus adipisci iusto quos nihil expedita laboriosam esse mollitia iste debitis corrupti. Quos, quas, laudantium iusto nam enim fugit maiores culpa dolorum numquam veniam eveniet atque minus sit sunt distinctio provident praesentium. Sit, maxime, commodi aliquid quos tempora beatae ipsa in asperiores est sequi nostrum nam iusto illo voluptatibus molestias ullam mollitia fuga possimus maiores totam. Magnam, obcaecati, beatae. Ratione ad maiores voluptate dolor hic blanditiis quod! Ipsum, error doloribus distinctio fuga commodi porro odit corrupti eligendi non dolore accusantium quod corporis iste autem recusandae et praesentium illum nostrum perspiciatis tempora? Voluptatem, velit aliquid dolor!</p>
<a name="vtornik">вторник!!!</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, qui, in, aliquid aspernatur eveniet ipsa ex sapiente tempore nisi labore accusamus minus explicabo aperiam. Voluptatum alias inventore laudantium et adipisci nesciunt quia tempora optio. Commodi, dolor, officiis iusto possimus cupiditate aliquid natus dolorum nostrum sunt quos dignissimos doloribus. Amet, aliquid, quas fuga quia minus minima quisquam perspiciatis voluptatibus at mollitia animi quod eos incidunt officia provident autem reprehenderit fugiat inventore! In, iste, perspiciatis explicabo ullam tempora obcaecati laborum delectus optio saepe sint totam quaerat amet vel hic ipsa illo numquam. Veniam, necessitatibus esse dicta placeat optio voluptatem eius a natus quasi minus voluptatum illo ea qui fugit vitae quia sit explicabo magni nihil dignissimos voluptate ad dolorum quae rem temporibus soluta illum alias. Non, sapiente, minima odio deserunt obcaecati a velit asperiores rerum eos porro fugiat quia ut dolorem modi eius perferendis reprehenderit dicta quis consequatur voluptas! Eveniet, quod, voluptatem facere nisi ex unde deleniti iste obcaecati sed dignissimos aliquam deserunt quo nostrum consequuntur veniam commodi omnis quaerat modi ad laboriosam officia animi vitae magni nulla praesentium ratione repudiandae exercitationem libero natus perspiciatis. Recusandae, exercitationem quo temporibus nesciunt voluptatibus repellendus officiis voluptatem magni minima fugiat qui saepe tenetur quod dolorum debitis illo ea maxime ab quis hic labore corporis tempora amet odit molestiae. Iusto, ea, natus, molestias, dignissimos nam error magni suscipit corporis ab tempore voluptatum facere ipsa eius vel delectus ad iste voluptatem id cumque neque doloremque tempora quidem beatae laborum quo aut rem a. Accusantium, consequatur, aperiam illo officiis ullam rerum esse nulla aliquam! Quaerat, minus, quidem, odio voluptatem accusamus illum quam in natus voluptatibus adipisci deleniti cumque optio excepturi est consectetur inventore repellat temporibus similique pariatur dolorum nihil aliquid quo? Dolorem, reiciendis, optio, maxime, quia aut repellendus facere necessitatibus fuga aspernatur accusantium natus et culpa soluta. Ab, atque, qui, ut, quas porro distinctio reiciendis voluptates eius doloremque animi quos quasi at ipsum sapiente ea voluptatem hic natus explicabo debitis tempore illo voluptatum autem minus cumque vel enim quam modi reprehenderit molestiae accusamus dolores maiores error aspernatur laborum magni corporis rem consequuntur excepturi commodi praesentium necessitatibus voluptate dicta inventore magnam dolorem neque! Sit porro laudantium esse est inventore incidunt eaque eum quasi soluta. Consequuntur, natus, facere, suscipit tempora quo et nulla voluptatum nobis perferendis alias quod laborum assumenda optio esse facilis corporis commodi consequatur quia voluptatibus nesciunt provident ipsam veniam voluptates sapiente error distinctio necessitatibus praesentium rem quisquam.</p>
<a name="sreda">среда!!!</a>

P.S: Откуда вы взяли такой ужасный устаревший код? Это с какого-то древнего сайта, созданного при помощи Microsoft Word?