Для новичка в веб-разработке создание простого, но адаптивного сайта может оказаться увлекательным и познавательным проектом. Это отличный способ изучить основы HTML и стилей CSS, а также получить практический опыт создания и проектирования сайтов.
В этом видео уроке я проведу вас через процесс создания привлекательного, адаптивного кофейного сайта с использованием HTML и CSS. Мой сайт будет посвящен кофейной теме, но вы можете настроить его по своему вкусу. Создав этот сайт, вы не только научитесь создавать сайты, но также научитесь правильно структурировать веб-контент и применять стили, чтобы он реагировал на различные размеры экрана.
Чтобы создать сайт о кофе, мы будем использовать общие элементы HTML, такие как заголовок, панель навигации (меню), ul, li, a и кнопка, а также некоторые основные свойства CSS для стилизации и сделать наш сайт адаптивным и привлекательным. Поэтому, как новичку, у вас не должно возникнуть проблем с выполнением шагов и пониманием кодов.
Шаги по созданию адаптивного сайта о кофе на HTML и CSS
Чтобы создать адаптивный кофейный сайт с использованием HTML и CSS, следуйте этим простым пошаговым инструкциям:
- Сначала создайте папку с любым именем, которое вам нравится.
- Затем поместите в него необходимые файлы.
- Создайте файл index.html, который будет служить основным файлом.
- Создайте файл style.css для кода CSS.
Для начала добавьте следующий HTML код в файл index.html: Этот код включает в себя необходимую HTML разметку с различными семантическими тегами, такими как заголовок, навигация, h2, a, ul, li, p и кнопка, которые используются для создания макет нашего сайта. Кроме того, этот код включает несколько строк кода JavaScript для переключения мобильного меню на маленьких экранах.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://monstertem.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<title>Coffee Website HTML and CSS</title>
<!-- Google Fonts Links For Icon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0">
<!--Font Awesome -->
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!--Stylesheets-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="navbar">
<a class="logo" href="#">Coffee<span>.</span></a>
<ul class="menu-links">
<span id="close-menu-btn" class="material-symbols-outlined">close</span>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<span id="hamburger-btn" class="material-symbols-outlined">menu</span>
</nav>
</header>
<section class="hero-section">
<div class="content">
<h2>Start Your Day With Fresh Coffee</h2>
<p>
Coffee is a popular and beloved beverage enjoyed by
people around the world.Awaken your senses with a steaming cup of liquid motivation.
</p>
<button>Order Now</button>
</div>
</section>
</body>
</html>
Затем добавьте следующий код CSS в файл style.css, чтобы сделать свой сайт о кофе адаптивным и привлекательным. Не стесняйтесь экспериментировать с различными свойствами CSS, такими как цвета, шрифты и фон, чтобы придать сайту индивидуальность и сделать его еще красивее.
/* Importing Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px;
}
header .navbar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
.navbar .logo {
color: #fff;
font-weight: 600;
font-size: 2.1rem;
text-decoration: none;
}
.navbar .logo span {
color: #C06B3E;
}
.navbar .menu-links {
display: flex;
list-style: none;
gap: 35px;
}
.navbar a {
color: #fff;
text-decoration: none;
transition: 0.2s ease;
}
.navbar a:hover {
color: #C06B3E;
}
.hero-section {
height: 100vh;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-Cilfz0agiqgDCcG-G1-HXscnga0Pd3tbWpyo6jj_4HuTk1Z67lgBhYs0ZfFHpcQdytyACehM34SdM8fH6e-1PV2UYnO3HC-EWaJ0CmYLIcDbMcOaVsQGZyUfIH8rLo8-gTTSilyLzZvhRnZFhVbc5zNnDPjJhH-wMi8lNDrg_yeesNruaXx8WW5r1Y/s1584/bg.jpg");
background-position: center;
background-size: cover;
display: flex;
align-items: center;
padding: 0 20px;
}
.hero-section .content {
max-width: 1200px;
margin: 0 auto;
width: 100%;
color: #fff;
}
.hero-section .content h2 {
font-size: 3rem;
max-width: 600px;
line-height: 70px;
}
.hero-section .content p {
font-weight: 300;
max-width: 600px;
margin-top: 15px;
}
.hero-section .content button {
background: #fff;
padding: 12px 30px;
border: none;
font-size: 1rem;
border-radius: 6px;
margin-top: 38px;
cursor: pointer;
font-weight: 500;
transition: 0.2s ease;
}
.hero-section .content button:hover {
color: #fff;
background: #C06B3E;
}
#close-menu-btn {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
display: none;
}
#hamburger-btn {
color: #fff;
cursor: pointer;
display: none;
}
@media (max-width: 768px) {
header {
padding: 10px;
}
header.show-mobile-menu::before {
content: "";
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(5px);
}
.navbar .logo {
font-size: 1.7rem;
}
#hamburger-btn, #close-menu-btn {
display: block;
}
.navbar .menu-links {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100vh;
background: #fff;
flex-direction: column;
padding: 70px 40px 0;
transition: left 0.2s ease;
}
header.show-mobile-menu .navbar .menu-links {
left: 0;
}
.navbar a {
color: #000;
}
.hero-section .content {
text-align: center;
}
.hero-section .content :is(h2, p) {
max-width: 100%;
}
.hero-section .content h2 {
font-size: 2.3rem;
line-height: 60px;
}
.hero-section .content button {
padding: 9px 18px;
}
}
Несколько строк кода JavaScript для переключения мобильного меню на маленьких экранах.
<script>
const header = document.querySelector("header");
const hamburgerBtn = document.querySelector("#hamburger-btn");
const closeMenuBtn = document.querySelector("#close-menu-btn");
// Toggle mobile menu on hamburger button click
hamburgerBtn.addEventListener("click", () => header.classList.toggle("show-mobile-menu"));
// Close mobile menu on close button click
closeMenuBtn.addEventListener("click", () => hamburgerBtn.click());
</script>
Заключительные слова
В заключение отметим, что создание адаптивного сайта - это ценный и полезный опыт для новичков в мире веб-разработки. Я считаю, что, следуя инструкциям и кодам, приведенным в этом посте, вы успешно создали свой адаптивный кофейный сайт с использованием HTML и CSS.
Чтобы еще больше улучшить ваши навыки HTML и CSS для веб-разработки, я предлагаю воссоздать другие привлекательные дизайны сайтов, доступные на этом сайте. Эта практика поможет вам лучше понять HTML и CSS и повысить вашу уверенность в создании целых сайтов или их компонентов.
Если у вас возникнут какие-либо проблемы при создании сайта, вы можете загрузить файлы исходного кода для этого проекта сайта, нажав кнопку «Скачать».
0 Комментарии