Learn how to create a user-friendly and visually appealing landing page using HTML, CSS, and JavaScript. Discover tips and tricks for optimizing conversion rates and website performance.
Table of Contents
A landing page is the first thing that a user sees when they visit your website, and it is crucial that it makes a great first impression. A well-designed landing page can increase conversion rates, improve user experience, and boost website performance. In this post, we will be discussing the best practices for landing page design, as well as how to use HTML, CSS, and JavaScript to optimize your landing page for maximum results.
#1: Use a clear and simple layout
One of the most important elements of any landing page is its layout. The layout should be clear and simple, making it easy for visitors to understand what the page is about and where to find the information they need. This can be achieved by using a grid-based layout, which organizes content into rows and columns. This makes it easy for visitors to scan the page and find the information they need.
#2: Use a consistent color scheme
Another important element of landing page design is color. The colors you use on your landing page should be consistent and complement each other. This creates a sense of unity and makes it easy for visitors to navigate the page. It's also important to use colors that are easy on the eyes, as this will help keep visitors engaged.
#3: Use typography that is easy to read
The typography you use on your landing page is also important. It should be easy to read, and the size should be large enough to be easily readable on all devices. This is especially important for mobile users, as small text can be difficult to read on small screens. Additionally, using a font that is easy to read will help keep visitors engaged and on the page for longer.
#4: Use images and videos to enhance the design
Images and videos are a great way to enhance the design of your landing page. They can be used to break up text, add visual interest, and showcase your product or service. However, it's important to use images and videos that are high-quality and relevant to the content of your page. This will help keep visitors engaged and on the page for longer.
#5: Use JavaScript to add interactivity
JavaScript is a powerful tool that can be used to add interactivity to your landing page. This can include things like forms, pop-ups, and more. However, it's important to use JavaScript sparingly, as it can slow down the page load time and make it difficult for visitors to navigate the page. Additionally, it's important to test your JavaScript to make sure it works properly on all devices.
Let's start making an amazing landing page using HTML, CSS and JavaScript step by step.
Design by: Andrej Sharapov
Join My Telegram Channel to Download the Project: Click Here
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our landing page.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the landing page is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our landing page. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
str-style,
section#one .title text,
section#one .title path {
stroke-dasharray: 700;
stroke-dashoffset: 1000;
animation: dash 4s linear forwards;
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 4px;
height: 100vh;
overflow: hidden;
line-height: 1.5;
font-family: 'Inconsolata', sans-serif;
font-size: 62.5%;
color: #fff;
background-color: #1d1e22;
}
::-webkit-scrollbar {
width: 8px;
height: 6px;
}
::-webkit-scrollbar-track {
background-color: #1d1e22;
}
::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: #312d3c;
}
::-webkit-scrollbar-thumb:hover {
background-color: #df2359;
}
a {
text-decoration: none;
color: #fff;
}
a:hover,
a.leadlink {
color: #df2359;
}
h1,
h2,
header a {
text-transform: uppercase;
}
.smooth {
margin: 0 auto;
padding: 0 4px;
padding-left: 8px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
header,
footer {
position: relative;
padding: 2em 3em;
display: flex;
align-items: center;
font-size: 1rem;
}
header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
height: 10vh;
background-color: #1d1e22;
}
header h3 {
position: relative;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
color: #df2359;
}
header ul {
list-style-type: none;
padding: 0;
margin: 1em 0;
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
}
header ul li {
position: relative;
margin: 0 1em;
transition: all 0.2s linear;
}
header ul li a {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
color: #fff;
}
header ul li::before {
position: absolute;
content: '';
top: calc(100% + 4px);
left: 0;
width: 20px;
height: 2px;
background-color: #fff;
transform-origin: 0 100%;
transform: rotate(-5deg);
transition: all 0.2s ease-out;
}
header ul li:hover::before {
width: 100%;
background-color: #df2359;
}
.grid {
display: grid;
grid-gap: 2em;
}
.grid.g_two {
grid-template-columns: 1fr minmax(300px, auto);
}
.flex {
display: flex;
width: 100%;
align-items: center;
}
.flex.column {
flex-flow: column wrap;
justify-content: space-between;
}
.jcsb {
justify-content: space-between;
}
progress {
position: relative;
margin: 1em 0;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 100%;
max-width: 360px;
height: 1px;
}
progress::-webkit-progress-bar {
background-color: #666;
border-radius: 1em;
}
progress::-webkit-progress-value {
position: absolute;
top: -2px;
left: 0;
background-color: #df2359;
border-radius: 1em;
height: 5px;
}
section {
position: relative;
display: flex;
min-height: 100vh;
padding: 2em 3em;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1rem;
border-radius: 1em;
background-color: #191a1d;
}
section:nth-child(odd) {
background-color: #1d1e22;
}
section#one {
background-image: url("https://andrejsharapov.github.io/iogo/src/header.jpg");
background-position: center;
background-size: cover;
color: #fff;
}
section#one h1 {
visibility: hidden;
opacity: 0;
font-family: 'Montserrat', sans-serif;
font-size: 0;
}
section#one .title {
min-width: 350px;
max-height: 80px;
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
font-weight: 600;
}
section#one .title text {
letter-spacing: 2px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
}
section#one .title path {
stroke: #fff;
stroke-width: 4;
animation-delay: 1s;
}
section#one::after {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(0deg, rgba(29,30,34,0.3), #1d1e22);
}
section#two .blocks,
section#four .blocks {
padding: 2em 0;
display: flex;
width: 100%;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
section#two .blocks .block,
section#four .blocks .block {
margin: 0 auto;
display: flex;
width: 23%;
height: 150px;
justify-content: center;
align-items: center;
border: 3px solid #312d3c;
border-radius: 1em;
background-color: #191a1d;
transition: all 0.2s linear;
}
section#two .blocks .block:hover,
section#four .blocks .block:hover {
transform: translateY(-10px);
background-color: #312d3c;
}
section#four .blocks .block {
padding: 0.25em 1em;
width: 49%;
height: auto;
flex-flow: column wrap;
background-color: #191a1d;
}
section#four .dots {
margin-top: 2em;
display: flex;
width: 25%;
align-items: center;
justify-content: space-around;
}
section#four .dot {
width: 20px;
height: 20px;
cursor: pointer;
border: 2px solid #312d3c;
border-radius: 50%;
background-color: #191a1d;
}
section#four .dot:hover {
transform: scale(1.1);
background-color: #312d3c;
}
section h2 {
font-family: 'Montserrat', sans-serif;
}
section h2 span {
color: #df2359;
}
.content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
}
.content p.lead {
font-size: 1.25rem;
}
.content .blur {
position: relative;
overflow: hidden;
margin: auto;
margin-left: 2em;
padding: 1em;
width: 100%;
height: 350px;
border-radius: 0.35em;
}
.content .blur::before {
position: absolute;
content: '';
top: -25%;
left: -25%;
width: 150%;
height: 150%;
box-shadow: inset 0 0 0 600px rgba(255,255,255,0.3);
filter: blur(10px);
}
form {
position: relative;
z-index: 3;
padding: 1em;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-around;
border: 2px solid #fff;
border-radius: 0.35em;
}
form img {
width: 64px;
height: 64px;
}
form input {
margin-bottom: 1em;
min-height: 3em;
font-size: 1em;
color: #fff;
border: 0;
border-bottom: 2px solid #fff;
background: none;
}
form input::placeholder {
position: relative;
top: 0;
color: inherit;
transition: all 0.2s linear;
}
form input:focus {
outline: none;
}
form input:focus::placeholder {
top: -1.25em;
font-size: 0.825rem;
}
form .button {
position: relative;
margin-top: 1em;
padding: 1em 3em;
text-transform: uppercase;
display: block;
font-size: 1rem;
cursor: pointer;
color: #fff;
border: 0;
border-radius: 0.35em;
background-color: #df2359;
}
footer {
padding-bottom: 1em;
width: 100%;
min-height: 35vh;
flex-direction: column;
justify-content: space-around;
background-color: #191a1d;
}
footer h3 {
position: relative;
font-family: 'Montserrat', sans-serif;
}
footer h3::before {
position: absolute;
content: '';
top: calc(100% + 4px);
left: 0;
width: 20px;
height: 2px;
background-color: #df2359;
transform-origin: 0 100%;
transform: rotate(-5deg);
transition: all 0.2s ease-out;
}
footer h5 {
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}
footer h5.follow {
color: #df2359;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul li {
line-height: 1.5;
transition: transform 200ms ease-in;
will-change: transform;
}
footer ul li:hover {
transform: translateX(5px);
}
footer .widgets,
footer .copy {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
footer .widgets .widget,
footer .copy .widget {
display: flex;
flex-direction: column;
align-items: center;
}
footer .copy {
margin-top: 1em;
border-top: 2px solid #312d3c;
}
footer .copy p {
margin: 0.75em 0 0;
}
footer .copy span {
position: relative;
display: inline-block;
color: #df2359;
animation: hearts 0.6s cubic-bezier(0.18, 0.89, 0.29, 1.05) infinite;
}
@media (max-width: 991px) {
.blur {
display: none;
}
.content {
text-align: center;
}
.content h1::before {
display: none;
}
}
@-moz-keyframes hearts {
50% {
transform: scale(1.4);
}
}
@-webkit-keyframes hearts {
50% {
transform: scale(1.4);
}
}
@-o-keyframes hearts {
50% {
transform: scale(1.4);
}
}
@keyframes hearts {
50% {
transform: scale(1.4);
}
}
@-moz-keyframes dash {
90% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill: #fff;
}
}
@-webkit-keyframes dash {
90% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill: #fff;
}
}
@-o-keyframes dash {
90% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill: #fff;
}
}
@keyframes dash {
90% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill: #fff;
}
} Step 3 (JavaScript Code):
The final step in creating a landing page using HTML, CSS, and JavaScript is to add interactivity to the website using JavaScript. JavaScript allows us to create dynamic and interactive elements on the website, such as parallex effects, modals, and image sliders.
By adding interactivity to the website with JavaScript, we are providing an engaging and interactive experience for users, making the website more usable and enjoyable. This step is essential in creating a website that encourages user engagement and ultimately drives more business to the website.
Finally, we need to create a scroller function in JavaScript. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
function scroller() {
$(".smooth").on("scroll", function() {
let scrollPos = $(this).scrollTop();
$(".parallax").css({
top: scrollPos / 2 + "px",
opacity: 1 - scrollPos / 200
});
});
}
scroller();Final Output:
Conclusion:
In conclusion, creating a landing page that converts visitors into customers is no easy task. But by using the right tools and techniques, you can create a landing page that not only looks great but also drives conversions. By using a clear and simple layout, a consistent color scheme, easy-to-read typography, high-quality images and videos, and JavaScript to add interactivity, you can create a landing page that is both visually appealing and effective.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
