Как создать простую главную страницу сайта?

Question

[EVIL7]

Здравствуйте. Собственно я совсем начинающий в создании сайтов, за чем следует что просто так взять и написать страницу с нужным видом пока не могу. Зато допёр до разбора страниц по болтикам, ради вырезания нужных мне кусков. Что на деле? Имеется вот такой шаблон сайта в составе cms:

Сначала пытался честно написать собственноручно, но что-то пошло не так (или не пошло как надо), и хрена с два у меня получилось, всё уезжает в стороны и выглядит будто из 2009 года :с
В итоге ctrl+s и перерезал всё что казалось лишним, но все равно во-первых довольно много мусора осталось, во-вторых подход все равно не мой, хочется понимать саму суть, а не только получать "хоть какой-то" результат.

Собственно обращаюсь к вам за помощью, как вообще написать такое? В оригинале, там, кажется бутстрап замешан, но мне ради сетки он кажется явно лишним. Объясните, пожалуйста, как это реализуется, или может есть какой материал по этой теме? Гуглил долго, что-то нашлось, но как надо не заработало... Спасибо :)

Comments

[Одиночка Айс]

То есть с версткой у Вас не ахти пока что? Почитайте книжки что ли для начала, гуглите, изучайте flex, распинаться долго можно, но в первую очередь азы из книг.

[Roman Zhidkov]

https://htmlacademy.ru/

[Павел Корнилов]

Собственно я совсем начинающий в создании сайтов

Вы себе льстите. До со\здания сайтов вам еще далеко, а таких слов, как бутстрап, вам вообще еще знать не положено.
Учите матчасть для начала. А чтобы быть начинающим сайтостроителем, нужно уже в совершенстве знать связку html + css. А не забивать себе голову разными cms и плагинами.

По делу - показанную вами сетку можно сделать как минимум 3-мя способами: table, float:left внутри блочного элемента, display:flex.
. Но для этого нужно знание html и css.

Answer 1

[Mark]

Попробуй выровнять по середине
добавить лого, меню и 3 картинки и ниже ещё 3 картинки, потом под картинками попробуй написать текст и уже сделать ссылками.
Потом все дивы и изображение заменить с высоты и ширины пиксельной в процентную, посмотри ошибки и исправь их, потом загуглишь как добавить эффекты и думаю все получится у тебя :)
Не используй
,   лучше через style или class делай, начни со style потом в class все перепишешь.

Answer 2

[Ankhena]

Интерактивные онлайн курсы - рекомендую. Сколько-то первых курсов бесплатно, их хватит для начального толчка.

Для выравнивания по центру: Центрирование горизонтальное и вертикальное
Для блоков картинки + подписи используются теги figure и figcaption
Для ровных плиточек из картинок c подписями и пунктов меню на данный момент удобнее всего использовать flex

Дальше выкладываете свой код в песочницы типа jsfiddle с конкретными вопросами что не получается.