Learn to Code via Tutorials on Repl.it!

← Back to all posts
Useful Features for Websites ✨
h
Bookie0 (6359)

Hi! 👋

Hope you're doing well and staying safe! This is a tutorial/template to show you how to create a navbar, features section, and contact section for a website in HTML and CSS! They will all be responsive, meaning you can view and use it on any device; computer, tablet, phone, etc.

This tutorial is related to [my post about a Frontend Blog here] where I use some of the features. This tutorial/template is intended to teach you more about those features and help you construct them for your own sites!

Basic knowledge of HTML CSS is recommended

You can also check out the tutorial on this site as well, so you'll be able to see the features at the same time.

Also, for the styling parts, I won't go over everything as many of the style rules repeat themselves, but there are still comments to guide you.


Links 🔗

Site ==> Useful-features-for-websites.bookie0.repl.co

Tutorial/Code ==> replit.com/@Bookie0/Useful-features-for-websites#tutorial.md

Post ==> replit.com/talk/learn/Useful-Features-for-Websites-sparkles/141857

Apps/spotlight page ==> replit.com/@Bookie0/Useful-features-for-websites?v=1

Main post (where the features come from) ==> replit.com/talk/share/Frontend-Blog/141856

Let's start!


Navbar 🏠

HTML 🖥️

A navbar, also known as a navigation bar, is a feature on a webpage that contains several elements (links, drowndowns, search bars, etc.) that you can use to navigate the site. Most of the time, the navbar is stuck to the top of the page so that you can always easily access it, which is what we'll be doing.

This is how the navbar will look like:

As you can see, the navbar shall have 4 links; Home, Projects, About and Contact, as well as a search bar with a search button.

So first, let's wrap the navbar in a <div> which will have a class attribute. We'll start with the links on the navbar using <a>. Each link will also have a class attribute to style it.

<!-- HTML code for navbar -->
<div class="navBar">
	<a href="" class="navBarLink">Home</a> <!-- first item -->
	<a href="" class="navBarLink">Projects</a> <!-- second item -->
	<a href="" class="navBarLink">About</a> <!-- third item -->
	<a href="" class="navBarLink">Contact</a> <!-- fourth item -->
</div>

As you can see, we're wrapping everything in the navBar class. Inside, there are links with href="", which is where you can put your link URL. Each link has the navBarLink class.

For the search box, there'll be a <div> for which will contain a form with an input box and a button.

<div class="navBar">
	<a href="" class="navBarLink">Home</a> 
	<a href="" class="navBarLink">Projects</a>
	<a href="" class="navBarLink">About</a> 
	<a href="" class="navBarLink">Contact</a>

	<!-- NEW -->
	<div class="searchContainer"> <!-- contains search box and search button -->
		<form action=""> <!-- form to collect user input (not implemented) -->
			<input type="text" placeholder="Search..." autocomplete="off" class="searchBox"> <!-- input box with placeholder text and no autocomplete -->
			<button type="submit" class="searchButton"><i class="fa fa-search"></i></button> <!-- search button -->
		</form>
	</div>
</div>

There are several attributes in the input box. First, there's type="text" for the input box to only be one line. Next, there's placeholder="Search..." which puts some text in the input box that disappears when the user clicks on it. Then, there's autocomplete="off" whcih removes the autocomplete (like data from previous entries) and finally class="searchBox.

For the button, there's type="submit" which indicates that this button is used to submit forms. There's also this part: <i class="fa fa-search"></i>, which basically is a search icon icon from Font Awesome.

That's it for the HTML of the navbar!

CSS 🎨

Let's jump into the CSS for the navbar.

First, we remove all the text decoration (the underline) from links (with the tag selector a).

/* CSS styling for navbar: */
/* for all links */
a {
	text-decoration: none; /* no underline */
}

Now, we're going to style the navbar. First we set the background color to white, then we add a box shadow for a cool floating effect. We add position: fixed; so that the navbar always stay stuck even when we scroll, and make the width the full screen width. top: 0; makes the navbar 'stick' to the top, and z-index: 1; makes the navbar stay on top of other elements (you can change the value depending on what you want/need).

/* navbar */
.navBar {
  background-color: #ffffff; /* white background color */
	box-shadow: 0 0 40px rgb(0 0 0 / 50%); /* box shadow for floating effect */
	position: fixed; /* to keep it always stuck on top */
	width: 100%; /* make width cover the screen end to end */
	top: 0; /* make navbar touch top */
	z-index: 1; /* to make navbar be on top of other elements (value can be changed accordingly) */
}

Let's style the items in the navbar with the selector .navBarLink. We use float: left; to make those items align themselves to the left, we set the font size to 17px, color of the text, how round each item is, and the size of the background behind them with padding: 10px. We also set the margin (spacing) all around each item to 10px to space out each item, and finally transition-duration: 0.3s; to make a smooth transition between the different background colors (:hover).

/* an item/link on navbar */
.navBarLink {
  float: left; /* makes them go on left */
	font-size: 17px; /* font size */
	color: #0052cc; /* blue text color */
	background-color: #e6f0ff; /* light blue background color */
	border-radius: 4px; /* how round the background behind them is */
	padding: 10px; /* for the size background behind them */
	margin: 10px; /* to space each item/link out */
	transition-duration: 0.3s; /* transition between different colors when user hovers (see below) */
}

/* when user hovers over it */
.navBarLink:hover {
	background-color: #bdd2f2; /* change background color to a darker blue */
}

Next, the search container containing the search box and the search button. This time, we make the selector .searchContainer have the style rule of float: right; instead of left, to keep it on the right.

For the search box, we have a gray colored border (only on the left because of border-right: none;), a border radius of 4px (also only on the left because with border-top-right-radius: 0; and border-bottom-right-radius: 0; we make 90° angles), and we also set the width and the height. margin-top: 20px; spaces it out from the top, and padding-left: 10px; shifts the text inside the search box a bit to the right. We also specify the font family and transitoin duration to make it gradually turn the border color to blue on focus (:focus).

/* contains search input bar and search button */
.searchContainer {
  float: right; /* float on right side */
}

/* search input box */
.searchBox {
	border: 1px solid #ccc;  /* border thickness and gray color */
	border-right: none; /* removes right border */
  border-radius: 4px; /* how round the input box is */
	border-top-right-radius: 0; /* makes top right corner a 90° angle */
	border-bottom-right-radius: 0; /* makes bottom right corner a 90° angle */
	width: 200px; /* width of search box */
	height: 26px; /* height of search box */
	font-size: 15px; /* font size of text */
	margin-top: 20px; /* space it out from top */
	padding-left: 10px; /* space it out from left */
	font-family: 'Roboto', sans-serif; /* font family of text */
	transition-duration: 0.5s; /* to make it slowly turn border color to blue on focus (see below) */
}

/* when user clicks on the input box */
.searchBox:focus {
	border: 1px solid #0052cc; /* changes border color to blue */
}

For the search button, we use cursor: pointer; to make the cursor into a pointer. This border radius is the opposite of the search box; the border radius is 4px on the top right and bottom right corner, but 0 for the top and bottom left corner. The border is also kind of the same; it's for all sides except the left side. We do all these styles for both the search button and the search box to make it look like both elements are joined together without anything seperating them out.

/* search button */
.searchButton {
	cursor: pointer; /* makes cursor pointer */
	background-color: #e6f0ff; /* light blue background color */
	color: #0052cc; /* blue text color */
  font-size: 17px; /* size of text */  
	margin-top: 20px; /* spacing from top */
	margin-right: 10px; /* spacing from right */
	padding: 5px; /* makes icon inside button centered */
	border-radius: 4px; /* how round the button is */
	border-top-left-radius: 0; /* makes top left corner a 90° angle */
  border-bottom-left-radius: 0; /* makes bottom left corner a 90° angle */
	border: 1px solid #ccc;  /* border thickness and gray color */
	border-left: none; /* removes left border */
	width: 35px; /* width of search button */
	height: 30px; /* height of search button */
}

Finally, to make it responsive, we use the media query @media screen and (max-width: 600px) {} to set style rules if the screen width is below 600px. As you can see, the selectors .navBarLink, .searchContainer, and .searchButton have their width expanded to 100%, are in the center with text-align: center;, and a smaller font size. meanwhile, the search box has a full border and border radius on all sides, and the search button has no border around it.

/* to make it responsive */
/* if screen width is smaller than 600px */
@media screen and (max-width: 600px) {
	/* navbar items, search container, and search button */
	.navBarLink, .searchContainer, .searchButton {
    width: 100%; /* cover screen */
    margin: 0; /* removes uneccessary space */
    padding: 5px; /* spaces items out a bit */
    text-align: center; /* makes text centered */
    font-size: 14px; /* reduces text size */
    background-color: #ffffff; /* makes white background color */
	}

	/* search box */
	.searchBox {
		border: 1px solid #ccc; /* puts back the border (on all sides) */
		margin: 0; /* removes top spacing */
		border-radius: 4px; /* reset border radius to 4px (on all sides) */
	}

	/* search button */
	.searchButton {
		border: none; /* removes all borders */
	}
}

Great job, you've finished making the HTML and CSS of your first feature – the navbar!

Now for the features section.


Features 📦

HTML ️️🖥️

The features section is a section of a site with (usually) 3 important features that the site wants to put in value. We'll have a box with 3 cards inside, each card having 1 feature. When the user hovers, the card will 'float' up to sort of make it interactive.

This is how it looks like (as you can see one of the cards is floating a bit up because I'm hovering over it):

Everything will be in a <section> tag with id "features". Inside, we'll have a <h2> to show what the site offers, and then a <div> which will contain the feature cards:

<!-- HTML code for features section -->
<section id="features">
	<h2 id="featureTitle">What we offer:</h2> <!-- title of section -->

	<!-- contains 3 cards with the features -->
	<div id="featuresContainer">
		<!-- feature cards will go here -->
	</div>
</section>

Now let's make a feature card. Each feature card will have to things: a <div> containing the title and icon, and a <p> tag with the text:

<!-- first card; design (for example) -->
<div class="featureCard">
	<div class="titleIconContainer">
		<!-- title and icon -->
	</div>

	<p>
		<!-- text of feature -->
	</p>
</div>

Let's fill it in now:

<!-- first card; design -->
<div class="featureCard">
	<div class="titleIconContainer"> <!-- contains the title and icon of feature --->
		<h2 class="cardTitle">Design</h2> <!-- title -->

		<img src="designIcon.png" class="featuresIcons"> <!-- design icon -->
	</div>

	<p class="cardText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur convallis neque vitae imperdiet. Proin feugiat ultricies suscipit. Nulla rhoncus interdum sapien, ut mollis purus porta id. Morbi et felis sed arcu tempor pellentesque.</p> <!-- dummy text explaining respective title -->
</div>

Also, you can see in <img src="designIcon.png" class="featuresIcons"> that I'm using "designIcon.png" as the src attribute for the image. That is the icon for 'design'. You can pick and select your own icons by going to Google Icons here:

Then download it as a png:

And drag it in the files section:

Rename it, and copy the name in the src="" like I did above.

Here's how the 2 other cards look like, with the full features section code:

<section id="features">
	<h2 id="featureTitle">What we offer:</h2> 

	<div id="featuresContainer">
		<div class="featureCard">
			<div class="titleIconContainer">
				<h2 class="cardTitle">Design</h2>

				<img src="designIcon.png" class="featuresIcons">
			</div>

			<p class="cardText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur convallis neque vitae imperdiet. Proin feugiat ultricies suscipit. Nulla rhoncus interdum sapien, ut mollis purus porta id. Morbi et felis sed arcu tempor pellentesque.</p>
		</div>

		<!-- 2nd new card we just added -->
		<div class="featureCard">
			<div class="titleIconContainer">
				<h2 class="cardTitle">Community</h2>

				<img src="communityIcon.png" class="featuresIcons"> 
			</div>

			<p class="cardText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur convallis neque vitae imperdiet. Proin feugiat ultricies suscipit. Nulla rhoncus interdum sapien, ut mollis purus porta id. Morbi et felis sed arcu tempor pellentesque.</p>
		</div>

		<!-- 3rd new card we just added -->
		<div class="featureCard">
			<div class="titleIconContainer">
				<h2 class="cardTitle">Learning</h2>

				<img src="learningIcon.png" class="featuresIcons"> 
			</div>

			<p class="cardText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur convallis neque vitae imperdiet. Proin feugiat ultricies suscipit. Nulla rhoncus interdum sapien, ut mollis purus porta id. Morbi et felis sed arcu tempor pellentesque.</p> 
		</div>
	</div>
</section>	

CSS 🎨

Time to style the features section!

First there's the title of the section; #featureTitle, where we center text.

/* CSS styling for features section: */
/* title of features section */
#featureTitle {
	text-align: center; /* centers text */
}

Now we'll need to contain the 3 feature cards that are horizontally aligned (if the screen width is big enough, but we'll get to that later), and for that, we'll use display: flex;. To center all the items cards inside, justify-content: center; does the trick. Next we set the background color to a nie blue, as well as how long the container is. Finally, to center the actual container, we make margin-left and margin-right auto. There's also a border radius of 8px.

/* contains the 3 cards holding 3 features */
#featuresContainer {
	display: flex; /* to align the 3 cards */
	justify-content: center; /* centers cards */
	background-color: #e6f0ff; /* blue background color */
	width: 80%; /* covers 80% of screen width */
	margin-left: auto; /* centers container */
	margin-right: auto; /* centers container */
	border-radius: 8px; /* roundness of container */
}

Next, one of the cards; .featureCard. It has padding: 20px; to space out the items inside it from the border, and margin: 30px; to space out the card from the rest of the elements. With top: 0;, the initial position of the card is 0px from the top of the container. position: relative; makes the card relative to its normal position, and transition: top ease 0.5s; makes the sliding of the card up more smooth. There's also a box shadow to make it look like the card is floating. When the user hovers over it (:hover), the style rule top changes value from 0 to -20px to make the card slide up.

/* one feature card */
.featureCard {
	padding: 20px; /* to space out text from borders of card */
	border-radius: 8px; /* roundness of card */
	margin: 30px; /* space out each card */
	background-color: #ffffff; /* white background color */
	width: 20%; /* covers 20% of screen width */
	top: 0; /* initial position is at 0 from top of container */
	position: relative; /* positioned relative to its normal position */
	transition: top ease 0.5s; /* ease in for 0.5 seconds from standing still to going up  */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15); /* to make it look like it's floating */
}

/* when user hovers over it */
.featureCard:hover {
	top: -20px;	/* makes card go up higher */
}

Let's now style the container which contains the title and icon of a card. This element has display: flex; to align the title and the icon, and justify-content: center; to center that content. .featuresIcons are the different icons on each card. To center those icons vertically, we do margin-top: auto; and margin-bottom: auto;, kind of like in the #featuresContainer selector with margin-left: auto; and margin-right: auto;. There's also margin-left: 10px; to space out the icon from the title.

/* contains title of card and icon */
.titleIconContainer {
	display: flex; /* to align the title and the icon */
	justify-content: center; /* centers title and icon */
}

/* the icons on the cards */
.featuresIcons {
	margin-top: auto; /* center icon vertically */
	margin-bottom: auto; /* center icon vertically */
	margin-left: 10px; /* space it out from title text */
}

Lastly, we have the media queries for the responsiveness. In @media screen and (max-width: 1000px) {}, the following style rules will apply if the width of the screen is less than 1000px. First we have #featuresContainer that has a full screen width, and no border radius. Then the feature cards become bigger and have less spacing between them. Then, the title and text of each card has their font reduced.

/* to make it responsive */
/* if screen width is smaller than 1000px */
@media screen and (max-width: 1000px) {
	/* contains the 3 cards holding 3 features */
	#featuresContainer {
		width: 100%; /* makes it cover entire screen width */
		border-radius: 0; /* removes roundness of border (as you don't see exterior corners anymore */
	}

	/* one feature card */
	.featureCard {
		width: 30%; /* bigger width */
		margin: 20px; /* reduced space between each card */
	} 

	/* title of card */
	.cardTitle {
		font-size: 20px; /* smaller text */
	}

	/* text of card */
	.cardText {
		font-size: 14px; /* smaller text */
	}
}

We have another media query; the same thing, but with styles applying only if the screen width is smaller than 600px. The container holding the cards has flex-direction: column; which aligns the feature card vertically instead of horizontally. And finally, the cards are even bigger and are centered.

/* if screen width is smaller than 600px */
@media screen and (max-width: 660px) {
	/* contains the 3 cards holding 3 features */
	#featuresContainer {
		flex-direction: column; /* makes feature cards align vertically in column (instead of horizontally */
	}

	/* one feature card */
	.featureCard {
		margin-right: auto; /* center the card */
		margin-left: auto; /* center the card */
		width: 60%; /* bigger width (covers 60% of the screen) */
	} 
}

Now onto the last part, the contact section.


Contact ✉️

HTML ️🖥️

The contact section will have a contact form where the user can fill in information (it doesn't actually work, you'll have to implement that yourselves). The form will ask for the first and last name, email, subject, and main message. At the bottom there will be a submit button.

It looks like this:

Again, we'll be wrapping everything in <section> tags. Then, we'll have a form with the action attribute (again, it isn't functional, but you'll need it if you want to make the backend for it) with <div>s containing each part of the form:

<!-- HTML code for contact form -->
<section id="contact">
	<form action="" id="contactForm"> <!-- form to collect user input (not implemented) -->
		
		<div id="nameContainer">
			<!-- name (first, last) -->
		</div>
	
		<div id="emailContainer">
			<!-- email address -->
		</div>
	
		<div id="messageContainer">
			<!-- subject and main body -->
		</div>
	</form>
</section>

Now let's fill it in with inputs and a textarea (just "nameContainer" for now):

In one input, we have type="text" to make it a one line input box and placeholder="First name" for the gray text inside the box that disappears once you start typing. There's also autocomplete="off" because we don't want previous data to show up, and finally class="contactFormInput" for the CSS.

<section id="contact">
	<form action="/action.php" id="contactForm"> 
		<div id="nameContainer">
			<p>Name</p> 
			<input type="text" placeholder="First name" autocomplete="off" class="contactFormInput"> 
			<input type="text" placeholder="Last name" autocomplete="off" class="contactFormInput">
		</div>

		<!-- ... -->
	</form>
</section>

The final code looks like this:

<section id="contact">
	<form action="/action.php" id="contactForm">
		<div id="nameContainer">
			<p>Name</p>
			<input type="text" placeholder="First name" autocomplete="off" class="contactFormInput"> 
			<input type="text" placeholder="Last name" autocomplete="off" class="contactFormInput">
		</div>
		
		<div id="emailContainer">
			<!-- newly added -->
			<p>Email</p>
			<input type="text" placeholder="[email protected]" autocomplete="off" class="contactFormInput">
		</div>

		<div id="messageContainer">
			<!-- newly added -->
			<p>Subject</p>
			<input type="text" placeholder="Subject" autocomplete="off" class="contactFormInput">

			<p>Message</p>
			<!-- newly added -->
			<textarea id="formTextArea" name="subject" placeholder="What would you like to say?"  autocomplete="off" class="contactFormInput"></textarea>
		</div>
		
		<!-- newly added -->
		<!-- submit button -->
		<button type="submit" id="formButtonSubmit">Submit</button>
	</form>
</section>

At the end there's also a button which is the submit button to complete the form.

CSS 🎨

Onto the CSS. First, we're styling the HTML element with id "#contact"; the <section> tag. We added the display: flex; with justify-content: center; to center the form.

/* CSS styling for contact form: */
/* contact section */
#contact {
	display: flex; /* container for the contact form */
	justify-content: center; /* centers the form */
	margin-top: 200px; /* just for this site, to space the contact form out from the navbar */
}

Next, we can set the background color of the contact form as well as the padding (how far the elements inside are from the border of the contact form). With width: 600px;, we set the, well, width of the form, and we also make the form have a roundness of 8px.

/* contact form to get in touch */
#contactForm {
	background-color: #e6f0ff; /* light blue background color */
	padding: 20px; /* to space elements inside out from border */
	width: 600px; /* width of form */
	border-radius: 8px; /* roundness of border */
}

Now let's style an input box: (I won't go over styles we've already used) no outline, a gray solid border 1px thick, with text that is 10px spaced out from the left, and blue color. There's also the font family of the text and a transition-duration of 0.5s. This makes it gradually turn the border color to blue when the user clicks on the input box (see :focus).

/* an input box */
.contactFormInput {
	outline: none; /* remove outline */
	border-radius: 4px; /* roundness of border */
	height: 30px; /* height of input box */
	border: 1px solid #ccc; /* border thickness and color */
	padding-left: 10px; /* space out the text from the left */
	background-color: #ffffff; /* white background color of input box */
	color: #0052cc; /* color of text */
	font-family: 'Roboto', sans-serif; /* font family of text */
	transition-duration: 0.5s; /* to make it slowly turn border color to blue on focus (see below) */
}

/* when user clicks on input box */
.contactFormInput:focus {
	border: 1px solid #0052cc; /* changes border color to blue */
}

For the textarea, we made the resize only vertical, so they can't expand it diagonally. When it's clicked (:focus), we set the transition-duration to 0s so that if the user wants to resize the textarea, it won't take 0.5s and won't be as 'laggy'.

/* textarea on form */
#formTextArea {
	padding-top: 5px; /* to space text out from top */
	height: 100px; /* height of textarea */
	width: 100%; /* width of textarea */
	resize: vertical; /* to only be able to resize textarea vertically (instead of diagonally) */
	transition-duration: 0.5s; /* to make it slowly turn border color to blue on focus */
	font-family: 'Roboto', sans-serif; /* font familly of textarea */
}

#formTextArea:focus {
	transition-duration: 0s; /* so when you make it bigger it doesn't do it slowly */
}

Next, the submit button. Not much to say about it (I've covered those style rules above), but basically when you hover, the button changes color (:hover) and when you click on it (:active), it changes back to the initial color.

/* submit button on form */
#formButtonSubmit {
	font-family: 'Roboto', sans-serif; /* font familly of button */
	margin-top: 30px; /* spacing on top */
	background-color: #ffffff; /* background color of button */
	color: #0052cc; /* color of text */
	border: none; /* no border */
	border-radius: 4px; /* roundness of button */
	width: 100px; /* width of button */
	height: 30px; /* height of button */
	transition-duration: 0.3s; /* transition between different colors (when user hovers( */
}

/* when user hovers over it */
#formButtonSubmit:hover {
	background-color: #bdd2f2; /* change background color to darker blue */
}

/* when user clicks it */
#formButtonSubmit:active {
	background-color: #ffffff; /* change background color white */
}

Finally, to make the form responsive, we add a @media query; if the screen width is smaller than 600px, we make the width of the contact form 300px (instead of the initial 600px).

/* to make it responsive */
/* if screen width is smaller than 600px */
@media screen and (max-width: 600px) {
	/* contact form to get in touch */
	#contactForm {
		width: 300px; /* reduces width */
	}
}

Closing 🚪

Great job! You've learnt how to make 3 essential features in a website; a navbar, features section, and contact form! Along the way, you've and learnt some HTML and some new CSS styling techniques. You also (hopefully) enjoyed this tutorial and were able to add and remix these features to your own websites!

If you have any questions/comments/thoughts, please let me know and I'll do my best to help! :)

Have an amazing day!

Comments
hotnewtop
JBloves27 (1903)

Hm, maybe add on javascript or small backend code to tutorial?
Or maybe on diff tutorial?

Nice tutorial btw :)

Bookie0 (6359)

@JBloves27 Thanks! Unfortunately, I don't know enough backend to make the code for the form lol. Thanks anyways! :)

JBloves27 (1903)

Np! lol rip (you'll prob learn it in a few weeks lol) @Bookie0

WilliamXing (52)

The form doesn't work. How to make it work?

Bookie0 (6359)

@WilliamXing Like I said in the post; the form does not work. It's only the frontend. You would have to make the backend yourself. :)