Material design contact form tutorial

Today we will be styling a contact form the material design way. The image bellow is a preview of the form:

Material design form

The HTML

Step #1: The basic form

We’ll write the basic markup for the form, just it’s plain elements:

Step #2: Grup the form’s elements

Put each form field and the text area in a container div together with its corresponding label:

Step #3: Mandatory fields.

We shall add an asterisk to the mandatory fields. The result:

The CSS

Step #4: Normalize the CSS

After adding normalize.css in the same directory as your main stylesheet, make this line the first:

Step #5: Change the default box model

Change the default box model to border-box. Also set the font family for our webpage.

Step #5: Style the form’s header and set the space between it’s elements:

Step #6: Style the form’s text fields, labels and its textarea

Step #7: Style the “Send” and “Cancel” buttons

And we are done! Here is my “live” version of the form.

Calculating Sales Volume in JavaScript

In this tutorial I will show you a way to calculate the total value of the products you sold over a period of time,in a few simple and clear steps. I will be using CSS to nicely style the table. jQuery and vanilla JavaScript will be used for the mathematics in this tutorial. Of course, I will be using dummy data. Let us begin.

Step #1: The table structure

Make a table with 5 columns and as many rows as you need. I have 7 products, so my table will have 9 rows. Look at the image below: the data surrounded with a green square is the result of calculations. The rest is inputted data.

sales_table

Step #2: The table markup

Step #3: Style the table

Step #4: The math

Here comes the best part: the math. Or don’t you like math. If you do, you are already enjoying this tutorial. If you don’t like math, you will after finishing this tutorial. I promise! 🙂

Create a function named totalSales, the call it:

Step #5: actual code

We eill replace the “// Code here” comment with the actual code that will make the calculations. First, select all rows in the table’s body, these being the rows that contain data needed for the calculations:

Step #6: How many rows contain data?

We need the number of rows that contain data to later loop over them:

Step #7: Get the data that will be used to calculate the total sales volume

For every row we need: the quantity sold from each product, the initial price of each product, the discount of each product. With these values we shall calculate the sales volume for each product:

Step #8: create an empty array called sales , then push product sales into it

Just above the for loop:

Inside the for loop, just above its closing bracket:

Step #9: Calculate the total sales volume

We shall sum the values of the sales array an put the result into the table cell with the id of “tot”.

The entire JavaScript code looks like this:

And we are done. See my result HERE.

Online shop tabbed content box with jQuery

This is a tutorial on how to make a tabbed content box, like those you can frequently see on the product pages of online shops. We will be using HTML5, CSS3 and jQuery.

The HTML

Step #1: the tabbed navigation

We must first make a list of links, that we will later style to look like tabs:

Step #2: the tabbed content

We have 3 pieces of content, one for each tab.

Step #3: common container for the navigation and content in a div

We’ll wrap the navigation and content in a div with a class of tabbed. The result:

And we are done with the HTML

The CSS

Step #4: basic formatting of the list of links created at step #1

Eliminate the bullets and set margin and padding to 0; then set the list’s height. Add display: flex.

Step #5: style the list items

We want the tabbs to divide all the available space equally between them. For that we need:

Step #6: style the links themselves

Step #7: add the 3D look

for this we need a CSS3 gradient; for the gradient we will use the gradient generator at colorzilla.com. Pick the gradient marked with a red border in the image below. Copy the generated code an paste it after background: #ffffff;.

gradient

Now we have

Step #8: style the active tab style

Step #9: style the content container

Step #10: style the content

We are done with the CSS. The result so far:
tabbed_content_box_02

jQuery and some vanilla JavaScript

Step #11: create a function called TabbedNav and call it:

Inside those curly brackets, we will replace “//Code here” with the actual code. Let’s do it, in small steps

Step #12: hide all the content, then show the first piece of content (out of 3):

Step #13: Add class “active” to first tab:

The code above makes the first tab active on page load.

Step #14: Correlate the tabs with the content:

And we are done. You can see a live demo HERE.

Banners rotator

You can easily make a banner rotator (randomizer) in JavaScript. Here is how:

The HTML

Step #1: create a basic HTML5 document:

Step #2: Right after the title tag, attach a stylesheet, the jQuery library and an external JavaScript:

Step #3: create the banner container:

The CSS

Step #4: set the width of the banner container and center it horizontally:

The JavaScript

Step #5: create the empty SetBanners() function and call it when the document is ready

The next steps will represent the actual code of the SetBanners() function

Step #6: generate a random integer, between 0 and 2

Step #7: create an empty array

Step #8: populate the previously created array (“banners”) with linked images

Step #8: randomly call an element of the “banners” array

Step #9: put the randomly called array element into the banners div

The entire function put together:

See the demo HERE. Refresh the page to see the effect.

Make a cool “accordion” with HTML5, CSS3 and jQuery

From this tutorial you will learn how to make a content accordion, using HTML5, CSS3 and jQuery. I have used a small .png file for the up and down arrow. You can download it from here.

Step #1: The HTML

We shall first make a definition list. The definition terms (dt tags) will contain the headers. The definition data (dd tags) will contain the paragraphs.

We also need to add a span with class “arrow” inside every definition term. We will do that a little later, dynamically, with jQuery.

Step #2: The CSS

At the top of our external stylesheet, we will add a reference to a local copy of the famous HTML5 Reset Stylesheet from html5doctor.com. Below this reference we shall add our own CSS:

NOTE: for the gradients I used the “Ultimate CSS Gradient Generator” from colorzilla.com.

Step #3: The jQuery

The comments in the jQuery code bellow are all the explaining you will need. Here is the code:

And we’ve made a nice accordion. You can see the demo HERE.

Horizontal navigation bar tutorial

In this tutorial I will show you how to create a horizontal navigation bar in HTML5 and CSS3, in a fwe simple steps.

The HTML

Step #1: The navbar’s HTML

Our HTML is, of course, a nested list of links

The CSS

Step #2: Clean up the list of links

Step #3: Add height and background to the navbar

Step #4: Prepare the drop-downs

The drop-downs will be positioned relative to the navbar’s main menu items, so we will give main items position: relative:

Step #5: Style the main items more

Step #6: Style the links

Step 7: center links vertically

The next lines are vital for centering the text vertically on the navbar

Step #8: The drop-downs

The display: none; line hides drop-downs by defaults

Step #9: Show the drop-downs on hover

Step #10: Style the drop-down links

And we are done! Here is a JSFiddle with my end result.

Make a tabbed content box with jQuery

In this tutorial I will teach you, step by step, how to make a tabbed content box using HTML5, CSS3 and jQuery (with a bit of vanilla JavaScript). There is a link to my end result at the and (hosted on jsfiddle.net), but don’t sneak a peek, follow the tutorial and enjoy it. Comment bellow.

Step #1: create an empty HTML5 document

Step #2: In the head section, attach the style sheet, the jQuery library and an external .js file for our custom Java Script

Step #3 – adding the HTML: the tabs

In a div with tge class of content, we will add a list of links:

Step #4 – adding the HTML: the tabbed content

We shall now add the articles, just bellow the list we made at step 4. There will be 3 articles – one for each tab.

Step #5: Style the page

You can style your tabbed content as you wish. The only CSS that counts for achieving the goal of the tutorial is:

My CSS:

Step #6: Scripting the tabs

In the tabbed.js file, first of all, make sure you execute the function that handles the tabs, after the document is loaded:

Step #7: create the function TabbedNav() and call it:

Step #8: write the function’s code

The comments serve as an explanation, so here is the entire code:

And we are done. You can see my end result here.