教材を使用しHTMLを勉強してから

ユーデミーにて教材を購入しプログラミングを始めてからいくつかプログラミングを書いてみました。
未だによく理解しているとは言えない状況ですが、教材を基に何とかHTMLで作成しました。
ここに書いたコードを記載しておきます。

HTML
<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta name="description" content="ページの概要・内容などを記述します。">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="HandheldFriendly" content="True">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta property="〇〇" content="▲▲▲▲">
	<title>ECサイトコーディング</title>
	<link rel="icon" href="favicon.ico" type="image/png">
	<link rel="canonical" href="サイトURL">
	<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<!-- header bigin -->
	<header>
		<div class="wrapper">
			<a href="">
				<h1 class="logo">
					<img src="./image/logo.png" alt="PRPGLUS">
				</h1>
			</a>
			<form action="">
				<i class="bi bi-search"></i>
				<input type="text">
			</form>
			<nav>
				<ul>
					<li>
						<a href="#">
							<i class="bi bi-heart"></i>
							お気に入り
						</a>
					</li>
					<li>
						<a href="#">
							<i class="bi bi-box-arrow-in-right"></i>
							ログイン
						</a>
					</li>
					<li>
						<a href="#">
							<i class="bi bi-cart-fill"></i>
							カート
						</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
	<!-- header end -->
	<!-- main bigin -->
	<!-- main end -->
	<main>
		<div class="mv">
			<img src="./image/mv.png" alt="シーズンビジュアル">
		</div>
		<section class="goods">
			<div class="wrapper">
				<h2>Pick Up</h2>
				<ul>
					<li>
						<a href="#"><img src="./image/image1.png" alt="おすすめの服"></a>
						<h3>おすすめの服</h3>
						<p>6,800円</p>
						<li>
						<a href="#"><img src="./image/image2.png" alt="おすすめの服"></a>
						<h3>おすすめの服</h3>
						<p>6,800円</p>
						<li>
						<a href="#"><img src="./image/image3.png" alt="おすすめの服"></a>
						<h3>おすすめの服</h3>
						<p>6,800円</p>
						<li>
						<a href="#"><img src="./image/image4.png" alt="おすすめの服"></a>
						<h3>おすすめの服</h3>
						<p>6,800円</p>
						<li>
						<a href="#"><img src="./image/image5.png" alt="おすすめの服"></a>
						<h3>おすすめの服</h3>
						<p>6,800円</p>
						<li>
						<a href="#"><img src="./image/image6.png" alt="おすすめの服"></a>
						<h3>おすすめの服</h3>
						<p>6,800円</p>
					</li>
				</ul>
				<a href="#" class="btn">もっと見る</a>
			</div>
		</section>
	</main>
	<footer>
		<div class="wrapper">
			<ul class="sns">
				<li>
					<a href="#">
						<i class="bi bi-twitter"></i>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="bi bi-facebook"></i>
					</a>
				</li>
			</ul>
			<p><small>&copy; PROGLUS.jp</small></p>
		</div>
	</footer>
</body>

</html>

CSS

@charset "utf-8";

/*common*/
html {
	font-size: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 16px;
}

a {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.5s;
}

a:hover {
	opacity: 0.7;
}

ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
}

/*headre*/
header .wrapper {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.logo {
	width: 150px;
}

header form {
	padding: 10px 15px;
	width: 400px;
	border: 1px solid #f1f1f1;
	border-radius: 2em;
}

nav ul {
	display: flex;
	gap: 7px;
}

nav li a {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	text-align: center;
}

nav li a i {
	font-size: 20px;
}

/*main visual*/
.mv img {
	width: 100%;
	min-height: 250px;
	object-fit: cover;
}

/*goods*/
.goods {
	padding-top: 50px;

}
.goods ul {
	padding-top: 10px;
	display: grid;
  /*等間隔に並べる*/
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}

.goods ul li h3 {
	margin-top: 5px;
	font-size: 0.9rem;
}

.btn {
	display: block;
	margin: 50px auto;
	width: 100%;
	max-width: 300px;
	background-color: #000;
	line-height: 50px;
	color: #fff;
	text-align: center;
}

footer {
	background-color: #040000;
	color: #FFFFFF;
	text-align: center;
	padding: 30px 0;
}

.sns {
	display: flex;
	justify-content: center;
	gap: 20px;
}

footer p small {
	display: block;
	margin-top: 20px;
}

/*レスポンシブ small screen*/
@media(max-width: 750px){
  header form {
 	 display: none;
 }

 .goods ul {
 	grid-template-columns: 1fr 1fr;
 }
}

イメージ画像!
![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/b5be8b34-72e7-c733-64a2-c99f1520253d.png)
[image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/918ceb84-96c2-be70-a183-b56aac790961.png)
![logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/a594755e-1f8d-4d69-0691-7f63f2b1c20d.png)
![mv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/08efb584-e8ae-ed79-deaa-6e5bd4cd3946.png)
![Something went wrong]()
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/8b19674b-d663-d6ad-fe41-1cf0bb7756e8.png)
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/abfde459-e2f5-4f4a-179f-3c0965a202bc.png)
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/1fa21f6d-5a89-02a7-eafa-ce7f00ec662d.png)
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/eb8879f3-a436-d7c1-edc4-c5f597476479.png)
![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/eadf4ac4-326f-fce5-2871-7cb6a8fef4ac.png)