40+ лучших psd мокапов и инструментов для веб-сайтов 2020

CSS-фреймворки

Если вы немного ленивы

Если у вас нет времени возиться с кодом при CSS верстке, можно использовать один из CSS-фреймворков. В нашем примере мы используем Bootstrap. Для этого нужно скачать его и подключить в HTML-файле.

Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

Вот пример:

<div class="row">
    <div class="col-md-6">
        <!--some content-->
    </div>
    <div class="col-md-6">
        <!--some more content-->
    </div>
</div>

В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов.

Далее мы создаем раздел «Скоро в прокате«. Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.

HTML-код:

<div id="coming-soon">
    <h2>Coming Soon:</h2>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_01.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_02.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_03.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_04.jpg">
            </div>
        </div>
    </div>
</div>

Я также добавил класс thumbnail, чтобы сделать постеры красивее. Он также содержится в Bootstrap.

И вот, что я получил:

Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS. Но вы не видите, что происходит внутри.

Приобретение PSD макетов напрямую у дизайнера

Хороший вариант для получения настоящих, “боевых” макетов. Если дизайнер опытный, у него будут неплохие шаблоны, при работе с которыми можно получить много опыта.

Проще всего купить макет за деньги. Если убедить его автора что он будет использоваться только для учебных целей, то цена, скорее всего, будет очень низкой.  Но есть и варианты получить в свое распоряжение PSD макет бесплатно

• Предложить дизайнеру какой-либо бартер. Например, вы верстаете ему сайт, он отдает вам макет взамен;
• Попросить что-нибудь из тех вариантов, что дизайнер сам использовал в учебных целях. И что в дальнейшем не пошло в продажу;
• Искренне рассказать о том, откуда вы, что вы пока новичок, что хотите попрактиковаться в верстке, добавить макет в портфолио. Есть хороший шанс, что дизайнер сам пойдет вам навстречу и отдаст макет бесплатно.

Огромным преимуществом такого подхода является то, что макет, по сути, становится индивидуальным. Можно даже попросить дизайнера его немного усложнить или упростить. Добавить элементы, которые вам особенно интересны. И уж точно такого дизайна ни у кого больше не будет. 

Еще одно преимущество этого способа — дополнительные контакты. Возможно тот дизайнер, к которому вы обратились, станет хорошим партнером для дальнейшей работы.

Настраиваем логотип

Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}

Логотип вставлен ровно по размеру.

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

  <div id="logo">
		<h1><a href="#">Имя сайта</a></h1>
		<h2><a href="№" id="metamorph">Слоган сайта</a></h2>
	  </div>

Текст появился, но его тоже нужно оформлять.

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

#logo a {
	text-decoration: none;
	text-transform: lowercase;
	font-style: italic;
	font-size: 36px;
	color: #FFFFFF;
}
#logo h2 a
{
font-size: 24px;
}

Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right
{
float: right;
width: 500px;
padding-right: 10px;
}

#right h4
{
	margin: 0;
	padding: 0px;
	font-size: 12px;
	color: #D72020;
}

#right a
{
color: #D72020;
text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right h2 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #D72020;
}

Так как мы зафиксировали только ширину блока, видимых изменений наблюдаться не будет до тех пор, пока мы не наполним его контентом — высота страницы будет меняться в зависимости от содержимого.

Заполним контейнер right. Изображения поместим в простую таблицу.

<h2>Галерея</h2><br />
		<h2>Кухни</h2><br />
		<table cellspacing = 40>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		</table>

Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.

Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

5 инструментов для создания макетов веб-сайтов

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

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

Вот 5 лучших инструментов для создания макетов веб-сайтов.

Framer

Цена: 12 долларов в месяц

Framer – это универсальный инструмент для создания макетов для Mac, который можно использовать для создания всех типов макетов, включая макеты веб-сайтов, пользовательские интерфейсы приложений и интерфейсы веб-приложений. Редактор макетов Framer очень интерактивен и автоматически адаптируется к вносимым вами изменениям. Framer также имеет уникальный инструмент рисования для создания пользовательских значков. И больше.

Бальзамик

Цена: 9 долларов в месяц

Balsamiq – это мощный «инструмент быстрого создания каркасов», который работает в облаке и как настольное приложение. Этот инструмент идеально подходит для создания быстрого наброскового макета вашего веб-сайта или дизайна приложения и создания макета каркаса для вашего дизайна. Он также позволяет вам выбирать между двумя стилями дизайна. Вы можете создавать каркасы в стиле рисованного эскиза или использовать чистый каркасный дизайн.

Wireframe.cc

Цена: бесплатно или 16 долларов в месяц.

Wireframe.cc – это инструмент для создания каркасов с минимальным пользовательским интерфейсом, позволяющий дизайнерам сосредоточиться на создании макетов, не отвлекаясь. В инструменте есть редактор перетаскивания для создания макетов для мобильных телефонов, планшетов и Интернета. Вы также можете добавлять аннотации к своим макетам.

Мокапы

Цена: 13 долларов в месяц

Moqups – это онлайн-приложение для создания пользовательского интерфейса мобильных приложений и макетов веб-сайтов. Этот инструмент не только позволяет создавать каркасы и макеты дизайна, но также позволяет создавать интерактивные прототипы проектов, чтобы показать вашим клиентам, как будет выглядеть окончательный дизайн.

Mockplus

Цена: 199 долларов в год

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

Минимальный список требований для макетов любого сайта, даже лендинга и даже на один экран:

1. Сетка в макете

Зачем это нужно? Макет с сеткой своим эстетическим видом уже вызывает еле слышное удовлетворённое мурлыканье верстальщика. Также сетка даёт возможность без особых усилий и временных затрат собирать каркас страницы и располагать (позиционировать) элементы на той же странице максимально приближённо к тому, что изображено на макете. От направляющих не составит труда точно измерить расстояние и записать его в пиксельном эквиваленте в таблицу стилей.

2. Градиент к слою

Для сайта градиент в некоторых случаях выглядит эффектно, применять его крайне рекомендуется в обычном режиме наложения ( blend mode: normal). Использоваться должны его реальные цвета, никаких симпатичных полупрозрачностей и сложных режимов наложения, таких как multiply, screen, overlay и тому подобное.

Также режим blend mode: normal относится к любым свойствам слоя, таких как inner shadow, drop shadow…

3. “Слой на слое”

Верстальщик не поприветствует градиенты и другие различные эффекты, созданные путём “слоя на слое”. Слой должен быть один, как ты в 3 часа ночи на кухне у холодильника.

4. No to gradient borders!

Или никаких рамок и stroke с использованием градиента.

5. Шрифты в макете

При использовании нестандартных шрифтов настоятельно рекомендуется их наличие у верстальщика в формате .ttf или .otf. Далее они будут конвертироваться в определённые форматы для веб-страницы. Желательно использовать не более 2-х нестандартных шрифтов, так как их количество влияет на рендеринг страницы в браузере: чем их больше, тем дольше будет отрисовываться контент.

В идеале нестандартные платные шрифты должны быть куплены и иметь лицензию на их использование в вебе. Конечно, многие не станут переживать по этому поводу, шрифт будет использован и всё! Но если проект коммерческий, масштабный или будет привлекать инвесторов, миллион пользователей в день, дементоров и госнаркоконтроль, то лучше заранее позаботиться о легальном использовании всех платных шрифтов.

6. Стандартные элементы типографики

Наличие одного макета со стандартными элементами веб-страницы возносит крутость дизайнера до небес. На таком макете должны быть представлены заголовки, параграфы, таблицы, списки, блоки с цитатами и другие стандартные моменты.

7. Состояние наведения

Иными словами — :hover. Любой сайт будет содержать ссылки, кнопки или другие элементы, которые будут иметь состояние наведения или нажатия. Набор потенциально “наводимых” элементов:

1. Ссылка.
2. Кнопка (иногда может иметь состояние неактивности — disabled).
3. Стрелка слайдера.
4. Поле формы.
5. Иконка социальной сети.

И еще целое множество элементов, на которые будут наводить и получать какой-либо эффект. Показать изменённые состояния можно следующими способами:

1. На элементе будет присутствовать курсор в виде руки (figure 1)и будет показан наводимый эффект.
2. Макет может содержать скрытый слой с элементами в состоянии наведения, нажатия.
3. Отдельный макет с набором элементов, которые будут иметь эффекты наведения, нажатия. Могут входить в макет со стандартными элементами типографики.

figure 1

8. Каждому блоку — по папке

А также и по человекочитаемому названию. Конечно, если верстать будет робот, к названию из символов и цифр вопросов нет, но для лучшего понимания верстальщиком его местонахождения на макете логичное название блока, например, “Шапка” даст 100%-ную информацию о локации.

Дизайнеры-сверхлюди умудряются располагать папки с блоками согласно их порядку на макете — шапка, сайдбар, контент, подвал.

9. Скрытые слои

Если в макете предусмотрены скрытые слои/папки с жизненно важным содержимым, таким как модальные окна, выпадающие панели, выпадающие n-уровневые меню, то их стоит выделять цветом и давать схожее по функциональности блоков название.

10. Название макетов

Ну и наконец — здравое название макетов. Открывая папку или архив хочется видеть осмысленные названия макетов, такие как “Главная”, “Контакты”, “О нас” и тому подобную красоту.

Воплотить в реальность указанные выше пункты — дело пары часов. Но на выходе дизайнер получит логически структурированные слои в макетах, осмысленные названия папок с блоками, а верстальщик в свою очередь потратит на реализацию макетов в несколько раз меньше времени и хорошего настроения.

Также все вышеупомянутые манипуляции помогут избежать следующих недугов:

1. Несоответствие макета и готовой вёрстки.
2. Проблем с утверждением вёрстки заказчиком.
3. Проблем с кроссбраузерностью и работой вёрстки в целом.

Как создать макет сайта онлайн или в программе

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

Wilda

Онлайн-конструктор Wilda для создания макета сайта

Русскоязычный онлайн-конструктор, где можно создать макет сайта, документа, буклета, баннера и так далее. Пользователь выбирает один из шаблонов (для сайтов их 16) или работает с нуля.

В сервисе очень простой редактор: макеты строятся всего из шести типов элементов. Здесь картинка, фоновый блок, фигура произвольной формы, логотип, текст, линия. К редактору подключен фотобанк с бесплатными изображениями, так что картинки можно загружать напрямую при создании макета.

Цена: макеты создаются бесплатно. Платить нужно за скачивание — от 150 рублей за одно скачивание, либо за публикацию в онлайн — 50 рублей. При покупке пакетного тарифа будет дешевле.

Mockflow

Mockflow — онлайн-сервис для прототипирования сайтов

Инструмент для быстрого прототипирования сайтов, предназначен для UI/UX дизайна. Макет сайта составляется из готовых блоков — например, хедера, карточки товара, баннера или блока «Эти товары недавно искали…». Эти блоки можно лишь изменять по размеру, отредактировать их цвет или содержимое не получится. Перед созданием макета нужно выбрать, для какого интерфейса вы будете составлять прототип, это повлияет на набор блоков.

Цена: есть бесплатный тариф на один проект объемом не более трех страниц. Далее от 15 долларов в месяц.

iPlotz

Конструктор iPlotz для создания макета сайта онлайн

Удобный, хотя и немного устаревший онлайн-конструктор макетов сайтов. Работает на Flash Player, поэтому может притормаживать, особенно на слабых компьютерах.

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

Здесь также есть два обширных набора иконок, растровый и векторный, и набор курсоров в виде «показывающих пальцев» — видимо, он предназначен для создания подсказок верстальщику и программисту, как должен нажиматься или двигаться определенный элемент.

Цена: бесплатно за один пятистраничный проект, далее от 15 долларов в месяц.

Moqups

Онлайн-конструктор макетов сайта Moqups

В этом онлайн-конструкторе макетов можно сделать сайт, диаграмму или график, подготовить бизнес-отчет.

Здесь 24 шаблона макетов сайтов и возможность создать макет с нуля. Пользователю предлагается собрать свой сайт из готовых блоков: текст, кнопка, ссылка, радиопереключатель, поле для ввода текста, прокрутка страницы, баннер и так далее. Все элементы можно настраивать: менять цвет, размер и текст на них. Если создаете проект из нескольких страниц, то можно линковать их между собой, чтобы сайт был более реалистичным.

Цена: бесплатно доступен один проект из максимум 200 элементов, далее от 16 долларов в месяц.

Marvel

Создание макета сайта онлайн в сервисе Marvel

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

А еще Marvel поможет сымитировать работающий сайт еще до верстки. Как это работает: вы загружаете готовые макеты страниц в сервис и настраиваете их связи — например, выделяете область кнопки на одной странице и выбираете другую страницу, куда нужно перейти по клику на эту кнопку. В итоге получаете симуляцию сайта или приложения, в которой можно «потыкать» и оценить удобство и логику связи страниц.

Цена: бесплатно для одного проекта без возможности скачивать созданные файлы. Далее от 12 долларов в месяц.

Justinmind

Бесплатная программа для макетирования сайтов

Десктопная программа с обширными возможностями. В начале работы пользователь выбирает, для какого интерфейса будет создавать дизайн: мобильного на Android или iPhone, десктопа, планшета. Затем миксует страницу из готовых компонентов, которые можно гибко настроить под себя: изменить цвет, размер, текст и картинки.

Программа выгодно отличается от схожих онлайн-сервисов количеством функций, даже на бесплатной версии. Можно посмотреть симуляцию того, как страница будет выглядеть на устройстве, и экспортировать результат в формате HTML. Интерфейс напоминает Photoshop — дизайнерам будет легко разобраться. Программа принимает на вход файлы из Photoshop, Sketch и Adobe XD.

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

Какой из способов выбрать?

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

Но они могут быть полезны, если речь идет о верстке электронных писем. Насчитывается не так уж много браузеров, которые люди используют в наше время, зато почтовых агентов просто огромное количество. Стационарные, онлайн и мобильные приложения используют различные движки отображения. HTML-таблицы выглядят одинаково во всех из них. Вот почему это отличный вариант для верстки электронных писем.

Float. Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear. Этого достаточно для начала.

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

CSS-фреймворки. Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.

Флексбокс. Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.

Но, как я уже сказал, это относительно новая функция CSS. Поэтому нужно учитывать ее поддержку браузерами. Вот подборка ошибок, которые мне удалось найти, и возможные пути их решения.

Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!

Делаем ноги

Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

#footer {
	height: 44px;
	clear: both;
	padding-top: 20px;
	background: url(images/footer.gif) repeat-x;
	border-top: 5px solid #A6640E;
}

#footer p {
	margin: 0;
	font-size: 10px;
	text-align: center;
	color: #ffffff;
}

#footer a {
	color: #ffffff;
}

Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

<p>Copyright  2016. <a href="http://test1.ru/" title="Адрес сайта">Адрес сайта</a> | <a href="#">Слоган сайта</a></p>
	<p>+7-(777)-777-77-77 | <a href="#">Москва</a></p>

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

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

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки

Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки

Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

А как же мобильные?

Быстрое развитие веба и наличие разных устройств, на которых можно открыть сайт, побуждает к созданию адаптивных сайтов. Это значит, что мобильная или планшетная версия сайта может отличаться по внешнему виду, редко — по содержанию, от десктопной версии. Что мы получаем в папке с макетами? Еще пару папок с дизайном, заточенным под определённые разрешения. Например, для планшетов это может быть 780px по ширине, а для мобильных — 320px (цифры взяты неспроста — http://mydevice.io/devices/). Но стоит учесть следующее:

1. Ширина окна браузера на планшетах может находиться в пределах от 600px до 1024px.
2. У мобильных — от 320px до 504px.

О чём это говорит? Правильно, как верстать сайт, если ширина макета отличается от медиа-запроса под планшеты или мобильные телефоны. Ответ прост — если сайт предусмотрен с fluid (резиновой) вёрсткой, то проблем быть не должно; если используются фиксированные по ширине блоки под определённые устройства и их переходное состояние от дексктопа к планшетной версии не учтено и не согласовано с заказчиком в техническом задании, то этим стоит заняться до начала вёрстки, иначе проблем не избежать.

Как может выглядеть боль и отчаяние на примере (figure 2)

figure 2

Если заказчика устраивает тот факт, что блоки перестроятся на указанных break-points согласно дизайну, но в промежуточных вариантах что-то будет выглядеть не так, как на макете, то приступаем к работе. Если же он не согласен, можно предложить верстать на своё усмотрение или сразу определить внешний вид явных несоответствий.

Первый уровень — начинающий

Собственно, здесь изучаем лишь основы, самые основы. Что такое теги, как начать верстать страницу, и т.д. Писать что-то свое, по крайней мере на первом уровне, не имеет смысла, а вот посоветовать ссылки — запросто:)

По большому счету, из всех тегов на первом уровне вам нужны лишь: html, head, body, meta, title, заголовки h1-h6, p, a, strong, b, ul, ol, li, button, div, img, table, span и внутренние табличные теги. Остальное — на среднем уровне 🙂

Ну и конечно, стоит выбрать себе хороший и удобный Вам редактор кода 🙂

Ну и по сути — это все, что нужно на первом уровне. Верстка простой страницы + дополнение ее картинками, таблицами и т.д.