Useful Features for Websites ✨
Bookie0 (6559)

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

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.

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.

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).

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).

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).

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).

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.

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.

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:

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:

Let's fill it in now:

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:

CSS 🎨

Time to style the features section!

First there's the title of the section; #featureTitle, where we center 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.

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.

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.

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.

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.

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:

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.

The final code looks like this:

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.

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.

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).

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'.

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.

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).


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!

You are viewing a single comment. View All
WilliamXing (53)

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

Bookie0 (6559)

@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. :)