Unlock the secrets to building a visually stunning gaming website with our step-by-step guide using HTML, CSS, and JavaScript. Learn how to create a responsive and interactive gaming website from scratch with our free source code. Perfect for web developers of all levels, this tutorial will help you showcase your game-related content beautifully. Dive into the world of web development and elevate your website today! and also watch below tutorial to understand how to create this wonderful website
Let’s Start Building this Gaming Website
To create this stunning project, we need to write the HTML structure first, then style it with CSS, and finally add interactivity with JavaScript. Therefore, we’ll cover each step one by one, beginning with the HTML foundation.
Step 1: Setting Up the Basic HTML Structure
Start by setting up the basic structure of your HTML document. This includes adding the DOCTYPE
declaration, defining the language attribute, and setting up the head
section with meta tags and links to CSS files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaming-ProCoder</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<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=Oxanium:wght@600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body id="top">
Step 2: Now let’s Create Header Section of this Gaming Website
create the header section of your website, which includes the navigation bar, logo, and navigation links. Use data-aos
attributes for adding animations.
<header class="header">
<div class="header-bottom skewBg" data-header>
<div class="container">
<a href="#" class="logo" data-aos="zoom-in" data-aos-duration="1000">ProCoder</a>
<nav class="navbar" data-navbar>
<ul class="navbar-list">
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"><a href="#home" class="navbar-link skewBg" data-nav-link>Home</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"><a href="#" class="navbar-link skewBg" data-nav-link>Live</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"><a href="#" class="navbar-link skewBg" data-nav-link>Features</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400"><a href="#" class="navbar-link skewBg" data-nav-link>Shop</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500"><a href="#" class="navbar-link skewBg" data-nav-link>Blog</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600"><a href="#" class="navbar-link skewBg" data-nav-link>Contact</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="cart-btn" aria-label="cart" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="700">
<ion-icon name="cart"></ion-icon>
<span class="cart-badge">0</span>
</button>
<button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
<ion-icon name="menu-outline" class="menu"></ion-icon>
<ion-icon name="close-outline" class="close"></ion-icon>
</button>
</div>
</div>
</div>
</header>
Step 3: Adding the Hero Section of this Website
Then, add the hero section which includes a background image, title, subtitle, and a call-to-action button. Enhance it with animations using the data-aos
attributes.
<main>
<article>
<section class="section hero" id="home" aria-label="home" style="background-image:url(hero-bg.jpg);">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle" data-aos="zoom-in-right" data-aos-duration="1000" data-aos-delay="900">Code Runner</p>
<h1 class="hero-title h1" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="1100">Create <span class="span">Manage</span> Matches</h1>
<p class="hero-text" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="1300">
Find technology or people for digital projects in public sector and find an individual specialist to develop your projects.
</p>
<button class="btn skewBg" data-aos="zoom-out" data-aos-duration="1000" data-aos-delay="1500">Read More</button>
</div>
<figure class="hero-banner img-holder">
<img src="hero-banner.png" alt="hero-banner" class="w-100" data-aos="zoom-in-left" data-aos-duration="2500">
</figure>
</div>
</section>
</article>
</main>
Step 4: Adding Animation and also adding Other Javascript Links
Finally, add the necessary JavaScript files at the end of the body tag to enable animations and interactivity on your website.
<script src="script.js" defer></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({offset:0});
</script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Step 5: Full HTML Code of the Website
Here’s the complete HTML code for your gaming website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaming-ProCoder</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<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=Oxanium:wght@600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body id="top">
<header class="header">
<div class="header-bottom skewBg" data-header>
<div class="container">
<a href="#" class="logo" data-aos="zoom-in" data-aos-duration="1000" >ProCoder</a>
<nav class="navbar" data-navbar>
<ul class="navbar-list">
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"><a href="#home" class="navbar-link skewBg" data-nav-link>Home</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"><a href="#" class="navbar-link skewBg" data-nav-link>Live</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"><a href="#" class="navbar-link skewBg" data-nav-link>Features</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400"><a href="#" class="navbar-link skewBg" data-nav-link>Shop</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500"><a href="#" class="navbar-link skewBg" data-nav-link>Blog</a></li>
<li class="navbar-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600"><a href="#" class="navbar-link skewBg" data-nav-link>Contact</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="cart-btn" aria-label="cart" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="700">
<ion-icon name="cart"></ion-icon>
<span class="cart-badge">0</span>
</button>
<button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
<ion-icon name="menu-outline" class="menu"></ion-icon>
<ion-icon name="close-outline" class="close"></ion-icon>
</button>
</div>
</div>
</div>
</header>
<main>
<article>
<section class="section hero" id="home" aria-label="home" style="background-image:url(hero-bg.jpg);">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle" data-aos="zoom-in-right" data-aos-duration="1000" data-aos-delay="900">Code Runner</p>
<h1 class="hero-title h1" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="1100">Create <span class="span">Manage</span> Matches</h1>
<p class="hero-text" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="1300">
Find technology or people for digital projects in public sector and find an indivdual specialist develop researcher.
</p>
<button class="btn skewBg" data-aos="zoom-out" data-aos-duration="1000" data-aos-delay="1500">Read More</button>
</div>
<figure class="hero-banner img-holder" >
<img src="hero-banner.png" alt="hero-banner" class="w-100" data-aos="zoom-in-left" data-aos-duration="2500">
</figure>
</div>
</section>
</article>
</main>
<script src="script.js" defer></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({offset:0});
</script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Now let’s Add Style to the Gaming Website
Now that we have created the structure of our website, it’s time to style the webpage to make the gaming website more attractive and stylish. Therefore, let’s begin by adding the styling. First, create a style.css
file and enter the given code below.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
overflow: hidden;
}
li { list-style: none; }
a {
text-decoration: none;
color: inherit;
}
a,
img,
span,
time,
input,
button,
ion-icon { display: block; }
img { height: auto; }
input,
button {
background: none;
border: none;
font: inherit;
}
input { width: 100%; }
button { cursor: pointer; }
ion-icon { pointer-events: none; }
address { font-style: normal; }
html {
font-family: 'Poppins', sans-serif;
font-size: 10px;
scroll-behavior: smooth;
}
body {
background-color: hsl(280, 11%, 11%);
font-size: 1.6rem;
line-height: 1.5;
}
:focus-visible { outline-offset: 4px; }
.container { padding-inline: 15px; }
.section { padding-block: 120px; }
.h1,
.h2,
.h3 {
color: hsl(0, 0%, 100%);
font-family: 'Oxanium', cursive;
font-weight: 800;
line-height: 1;
}
.h1 {
font-size: 4.5rem;
letter-spacing: -3px;
}
.h2 { font-size: 3.6rem; }
.h3 {
font-size: 2rem;
text-transform: uppercase;
}
:is(.h1, .h2, .h3, .card-price) .span {
display: inline-block;
color: hsl(42, 99%, 46%);
}
.btn {
margin-inline: auto;
color: hsl(277, 25%, 10%);
font-size: 1.5rem;
text-transform: uppercase;
font-weight: 700;
min-height: 55px;
padding-inline: 35px;
}
.skewBg {
position: relative;
z-index: 1;
}
.skewBg::before {
content: "";
position: absolute;
inset: 0;
transform: skewX(var(--skewX, -16deg));
background-color: var(--bg, hsl(42, 99%, 46%));
z-index: -1;
}
.btn::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(100% + 8px);
width: 5px;
transform: skewX(-16deg) translateX(var(--translateX, 0));
background-color: hsl(42, 99%, 46%);
transition: 0.25s ease;
}
.btn:is(:hover, :focus)::after { --translateX: -13px; }
.has-scrollbar {
display: flex;
gap: 30px;
overflow-x: auto;
padding-block-end: 30px;
scroll-snap-type: inline mandatory;
}
.has-scrollbar::-webkit-scrollbar { height: 10px; }
.has-scrollbar::-webkit-scrollbar-track {
outline: 3px solid hsl(42, 99%, 46%); }
.has-scrollbar::-webkit-scrollbar-thumb {
background-color: hsl(42, 99%, 46%); }
.has-scrollbar::-webkit-scrollbar-button {
width: calc(25% - 40px); }
.section-subtitle,
.section-title {
position: relative;
text-align: center;
text-transform: uppercase;
}
.section-subtitle {
color: hsl(0, 0%, 78%);
font-size: 1.4rem;
font-weight: 700;
margin-block-end: 10px;
}
.section-title::after {
content: url("../images/title-underline.png");
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.scrollbar-item {
min-width: 100%;
scroll-snap-align: start;
}
.w-100 { width: 100%; }
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
.cart-btn,
.header-bottom::before,
.navbar-link::before { display: none; }
.header {
position: relative;
min-height: 1px;
}
.header-bottom {
position: absolute;
top: calc(100% - 1px);
left: 0;
width: 100%;
background-color: hsl(236, 17%, 17%);
padding-block: 20px;
z-index: 4;
}
.header-bottom.active {
position: fixed;
top: -85px;
animation: slideIn 0.5s cubic-bezier(0.33, 0.85, 0.4, 0.96) forwards;
}
@keyframes slideIn {
0% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
.header-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: hsl(0, 0%, 100%);
font-family: 'Oxanium', cursive;
font-size: 3rem;
font-weight: 800;
}
.header-actions {
display: flex;
align-items: center;
gap: 20px;
}
.search-btn {
color: hsl(42, 99%, 46%);
padding: 13px;
box-shadow: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.2),
inset 0px 2px 8px 0px hsla(0, 0%, 0%, 0.4);;
border-radius: 4px;
}
.search-btn ion-icon { --ionicon-stroke-width: 80px; }
.nav-toggle-btn {
color: hsl(0, 0%, 100%);
font-size: 30px;
border: 1px solid hsl(0, 0%, 100%);
padding: 4px;
}
.nav-toggle-btn.active .menu,
.nav-toggle-btn .close { display: none; }
.nav-toggle-btn .menu,
.nav-toggle-btn.active .close { display: block; }
.navbar {
background-color: hsl(277, 25%, 10%);
color: hsl(0, 0%, 100%);
position: absolute;
top: 100%;
right: 0;
width: 100%;
max-width: 350px;
visibility: hidden;
max-height: 0;
transition: 0.25s cubic-bezier(0.33, 0.85, 0.4, 0.96);
overflow: hidden;
}
.navbar.active {
visibility: visible;
max-height: 275px;
transition-duration: 0.5s;
}
.navbar-item:not(:last-child) { border-block-end: 1px solid hsla(0, 0%, 100%, 0.15); }
.navbar-link {
padding: 10px 25px;
transition: 0.25s ease;
}
.navbar-link:is(:hover, :focus) { background-color: hsla(0, 0%, 100%, 0.1); }
/*-----------------------------------*\
#SEARCH BOX
\*-----------------------------------*/
.search-container {
background-color: hsla(222, 18%, 11%, 0.95);
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
padding-inline: 40px;
z-index: 6;
visibility: hidden;
opacity: 0;
transition: 0.25s ease;
}
.search-container.active {
visibility: visible;
opacity: 1;
}
.search-container .input-wrapper {
position: relative;
max-width: 560px;
width: 100%;
}
.search-container .search-field {
color: hsl(0, 0%, 100%);
font-size: 2rem;
padding: 20px;
padding-inline-end: 60px;
border-block-end: 3px solid hsla(0, 0%, 100%, 0.1);
outline: none;
transition: 0.25s ease;
}
.search-container .search-field:focus { border-color: hsl(0, 2%, 82%); }
.search-container .search-field::-webkit-search-cancel-button { display: none; }
.search-container .search-submit {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 25px;
color: hsl(42, 99%, 46%);
}
.search-container .search-submit ion-icon { --ionicon-stroke-width: 70px; }
.search-container .search-close {
position: fixed;
inset: 0;
cursor: default;
z-index: -1;
}
/*-----------------------------------*\
#HERO
\*-----------------------------------*/
.hero-banner { display: none; }
.hero {
padding: 60px;
margin-block-start: 84px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
min-height: 100vh;
display: grid;
align-items: center;
}
.hero-subtitle {
color: hsl(42, 99%, 46%);
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
}
.hero-title { margin-block: 15px 12px; }
.hero-text {
color: hsl(0, 2%, 82%);
margin-block-end: 45px;
}
@media (min-width: 576px) {
/**
* REUSED STYLE
*/
.container {
max-width: 540px;
width: 100%;
margin-inline: auto;
}
.h1 {
font-size: 7rem; }
/**
* HEADER
*/
.header-actions { gap: 40px; }
.cart-btn {
display: block;
position: relative;
color: hsl(0, 0%, 100%);
font-size: 20px;
}
.cart-badge {
position: absolute;
top: -6px;
right: -10px;
background-color: hsl(42, 99%, 46%);
color: hsl(277, 25%, 10%);
font-size: 1.2rem;
border-radius: 20px;
padding: 3px 5px;
line-height: 1;
font-weight: 800;
}
/**
* SEARCH BOX
*/
.search-container :is(.search-field, .search-submit) { font-size: 3.6rem; }
}
@media (min-width: 768px) {
/**
* REUSED STYLE
*/
.container { max-width: 720px; }
.scrollbar-item { min-width: calc(50% - 15px); }
/**
* HERO
*/
.hero-text {
max-width: 60ch;
margin-inline: auto;
}
}
@media (min-width: 992px) {
.container { max-width: 960px; }
:is(.header, .hero, .live-match) .container { max-width: unset; }
.scrollbar-item { min-width: calc(33.33% - 20px); }
/**
* HEADER
*/
.header-bottom { outline: 1px solid hsla(0, 0%, 0%, 0.2); }
.header-bottom::before {
display: block;
top: 0;
left: -15px;
right: auto;
width: 170px;
--skewX: 16deg;
}
.nav-toggle-btn { display: none; }
.navbar,
.navbar.active {
all: unset;
margin-inline: auto 15px;
}
.navbar-list { display: flex; }
.navbar-item:not(:last-child) { border-block-end: none; }
.navbar-link {
color: hsl(0, 0%, 100%);
font-family: 'Oxanium', cursive;
font-size: 1.2rem;
text-transform: uppercase;
font-weight: 700;
padding: 10px 20px;
}
.navbar-link::before {
display: block;
opacity: 0;
transition: 0.25s ease;
}
.navbar-link:is(:hover, :focus) {
background-color: transparent;
color: hsl(277, 25%, 10%);
}
.navbar-link:is(:hover, :focus)::before { opacity: 1; }
/**
* HERO
*/
.hero { text-align: left; }
.hero-banner { display: block; }
.hero .container {
display: grid;
grid-template-columns: 1fr 0.9fr;
align-items: center;
gap: 50px;
}
.btn { margin-inline: 0; }
}
@media (min-width: 1200px) {
/**
* REUSED STYLE
*/
.container,
:is(.header, .hero, .live-match) .container { max-width: 1230px; }
.h1 { font-size: 7.5rem; }
.scrollbar-item { min-width: calc(25% - 22.5px); }
/**
* HEADER
*/
.header-bottom::before { width: 270px; }
.navbar-link {
font-size: 1.4rem;
padding-inline: 25px;
}
/**
* HERO
*/
.hero .container { grid-template-columns: 1fr 1fr; }
}
Finally let’s Add javascript
So, after creating and styling the gaming website, we need to add functionality to make it interactive. Therefore, let’s add some JavaScript code for that.
'use strict';
const navbar = document.querySelector("[data-navbar]");
const navbarLinks = document.querySelectorAll("[data-nav-link]");
const navbarToggler = document.querySelector("[data-nav-toggler]");
navbarToggler.addEventListener("click", function() {
navbar.classList.toggle("active");
this.classList.toggle("active")
})
for(let i = 0; i< navbarLinks.length; i++){
navbarLinks[i].addEventListener("click", function(){
navbar.classList.remove("active");
navbarToggler.classList.remove("active");
});
}
Conclusion
In summary, creating an amazing website involves a structured process, from establishing the HTML foundation to incorporating CSS for an appealing design and finally adding interactivity with JavaScript. This guide has walked you through each essential step, ensuring your gaming website is both visually captivating and fully functional. By following these detailed instructions, you can develop a modern, engaging website that stands out in the digital landscape. So, take the time to refine your work, and also watch this Portfolio website and shoes website . This journey not only enhances your skills but also brings your creative vision to life beautifully.