Для создания современной веб-страницы нам потребуется много знаний, часть которых мы получим в процессе чтения этого руководства. Также в самом конце я расскажу как выложить итоговый проект на бесплатном хостинге, для того чтобы любой человек на земле смог посмотреть на созданную вами веб страницу.
Сегодня мы рассмотрим частичный цикл создания веб-страницы. *Важно, что в современной веб разработке используются дополнительные инструменты, которые мы не будем затрагивать в этой статье, например: webpack, препроцессоры, js.
Идея и Макет
Важной частью разработки веб-страниц, является создание макета с помощью специальных инструментов: figma, adobe xd, photoshop. В нашем сегодняшнем уроке мы будем использовать макет, но не будем рассматривать процесс его создания. В одном из дальнейших уроков мы обязательно раскроем эту тему. Ну а если вам не терпится познакомиться с процессом создания веб-страниц на более детальном уровне, то у нас есть отличный курс веб дизайна в школе программирования для детей КИД КОД. С промо-кодом "дзен" вы получите 25% скидку на первый месяц обучения.
Создание HTML структуры
Далее нам необходимо будет создать базовую структуру и наполнить нашу веб-страницу контентом. Для этого нам потребуется подготовить нужные шрифты и изображения.
Нам потребуется любое изображения для заднего фона. Кстати его можно сгенерировать с помощью нейросети midjourney. Если вам интересно полное руководство как это сделать, напишите в комментариях к этой статье.
Скачать изображение можно прямо от сюда.
Для шрифтов нам нужно будет перейти в специальный сервис fonts.google и найти нужный нам шрифт. В данном примере мы используем шрифт Amatic SC. *Далее вы можете: либо самостоятельно загрузить и установить этот шрифт на компьютер либо позже добавить его в создаваемый файл.
Теперь мы готовы начать создавать веб-страницу, для этого в любимом редакторе кода создайте новый файл - index.html (Данное название index не является обязательным и вы можете использовать любое другое. Главное применить расширение html или htm для файла). В этот файл добавим следующую структуру:
Скопировать нужный шрифт вы можете далее:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
Или перейдите по ссылке и скопируйте нужные ссылки напрямую из fonts.google.com
На следующем уроке мы добавим и разберем всю структуру для этой веб-страницы.