The design above has one column and three rows, but the CSS properties indicate a nine-by-nine grid template. You can see the three columns being defined with the grid-template-columns property.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: auto;
  grid-gap: 5px;
}

Then when you look at the HTML, you can see three rows.

<div class="grid-container">
  <div class="header">Header</div>
  <div class="form">Form</div>
  <div class="footer">Footer</div>
</div>

The grid-column property below tells the grid to position the form row at column one and to span three columns because the value of grid-column is 1 / span 3.

grid-column: 1 / span 3;

.form {
  grid-row: 2;
  grid-column: 1 / span 3;
  background-color: #14906a;
  padding: 20px;
  font-size: 30px;
  width: 50%;
  height: 505px;
  justify-self: center;
  border-radius: 5px;
}

So how are we centering the form row? That’s where the justify-self property comes in! We first set a width on the row, which is set to a width of 50%. Next, we then use justify-self to center the row within the columns.

width: 50%;
justify-self: center;

This code is pretty simple; it makes the row 50% of its full width and then instructs the browser to center the row within the three-column span.

Not only can we center the row within the three-column span, but we can make it start at the beginning by using the start value.

justify-self: start;

Addionally, we can also change the value to end like justify-self: end; which places the row at the end of the span.

justify-self: end;

Wrapping up

The property justify-self is used to align or position items along the horizontal axis within a grid, ideally along a row. It accepts four values; start, center, end, and stretch.

If you wish to test the code for this grid layout, check it out here on codepen.io

Recommended Articles

• A Guide on How To Use CSS Grids for Layouts
• How to Create a Responsive Flexbox Grid

The post The CSS justify-self Property appeared first on AppCode.

When displaying content on a web page, it’s crucial to think about how the different items like the icons, images, headers, footers, sidebars, search bars, and text will be positioned. The layout can get messy when displayed on different browsers or devices without a proper blueprint. CSS grid provides you with the flexibility to tell all platforms (browsers and devices) how the content will organize and arrange itself.

Why You Should be Using CSS Grid Layout

CSS grid provides a way for web developers to easily map how the space on a web page will hold content. You can create rows and columns because the grid uses a two-dimensional positioning algorithm, and a grid can make it easy to organize complex web pages. Addionally with mapping and structure, the CSS grid can create a responsive web page layout that automatically adjusts to device screen size and orientation. It can adapt to PCs, tablets, mobile phones, and other devices. With this said, you may wonder about compatibility. The good news is that the grid layout is compatible with all your favorite browsers such as Chrome, Mozilla Firefox, Safari, Brave, Edge, Opera, and more.

Important CSS Classes

Key CSS Grid Properties

Examples of Web Page Layout Using CSS Grid

Now that we have been introduced to the CSS grid, let’s see the different ways how you can build beautiful design layouts using the grid layout. We’ve included seven various examples below.

1. CSS Grid Layout With Three Columns
2. CSS Grid Layout With Profile
3. CSS Grid Layout for a Basic Messenger
4. CSS Grid Layout for Accordion Sections
5. CSS Grid Layout for an Image Grid
6. CSS Grid Layout for a Web Form With Sidebars
7. CSS Grid Layout With Footnotes

Layout 1: CSS Grid Layout With Three Columns

Looking a the image above, the layout has three significant areas, the header section, the search section, and the columns. To create these sections, we need to define some HTML elements.

<!-- GRID MESH -->
<div class="grid-container">
  <div class="grid-item item-1">Header</div>
  <div class="grid-item item-2">Search</div>
  <div class="grid-item item-3">Right Sidebar</div>
  <div class="grid-item item-4">Left Sidebar</div>
  <div class="grid-item item-5">Middle Column</div>
</div>

We define the grid container, which contains the grid mesh, and the grid item, which holds the items. Once the mesh has been described with HTML elements, the next step is to position the five sections onto the grid by specifying their positions (rows and columns) with CSS.

All five sections above are contained within a .grid-container class. Included in the .grid-container is a CSS property called display.

Whenever the display property has a value of grid, the property turns the element and its children into a grid.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

Addionally you see another property called the grid-template-columns. This property defines the names of lines and the functions used in the grid.

grid-template-columns: auto auto auto;

In this example, the value of grid-template-columns doesn’t indicate the name of lines, but it does use auto auto auto. The auto value is defined three times, which tells the grid to use automatic widths to fill the parent element’s width.

Here is the style for the above CSS grid design. You can combine the code with the HTML above and the CSS to complete the layout.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  box-shadow: 0 5px 5px rgb(0 0 0 / 49%);
  margin: 10px;
  border: 0;
  border-radius: 10px;
  padding: 20px;
  font-size: 30px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  text-align: center;
  font-family: Arial;
}

.item-1 {
  grid-row: 1;
  grid-column: 1 / span 3;
  border: 3px solid #c87922;
  background: #f89427;
  padding: 20px;
  font-size: 30px;
}

.item-2 {
  grid-row: 2;
  grid-column: 1 / span 2;
  border: 3px solid #5a985b;
  background: #75c576;
  padding: 20px;
  font-size: 30px;
}

.item-3 {
  grid-row: 2 / span 3;
  grid-column: 3;
  border: 3px solid #b85757;
  background: #ec7272;
  padding: 20px;
  font-size: 30px;
}

.item-4 {
  grid-row: 3;
  grid-column: 1;
  border: 3px solid #34a2c2;
  background: #3dc0e6;
  padding: 20px;
  font-size: 30px;
  height: 560px;
}

.item-5 {
  grid-row: 3;
  grid-column: 2;
  border: 3px solid #8774bc;
  background: #9e84e4;
  padding: 20px;
  font-size: 30px;
  height: 560px;
}

Here is the entire code and example on Codepen.io for layout one.

Layout 2: CSS Grid Layout With Profile

This layout demonstrates creating a web page with a profile and main body. The main body section is where you design a feed or other features the user can see whenever they log in to their profile.

This is the HTML code below which the structure is the same across most of the layout examples in this tutorial.

<!-- GRID MESH -->
<div class="grid-container">
  <div class="grid-item item-1">Menu Bar</div>
  <div class="grid-item item-2">Header</div>
  <div class="grid-item item-3">Profile</div>
  <div class="grid-item item-4">Main Body</div>
  <div class="grid-item item-5">Footer</div>
</div>

/* LAYOUT 2 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  box-shadow: 0 5px 5px rgb(0 0 0 / 49%);
  margin: 10px;
  border: 0;
  border-radius: 10px;
  padding: 20px;
  font-size: 30px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  text-align: center;
  font-family: Arial;
}

.item-1 {
  grid-row: 1;
  grid-column: 1 / span 3;
  border: 3px solid #5a985b;
  background: #75c576;
  padding: 20px;
  font-size: 30px;
}

.item-2 {
  grid-row: 2;
  grid-column: 1 / span 3;
  border: 3px solid #c87922;
  background: #f89427;
  padding: 20px;
  font-size: 30px;
}

.item-3 {
  grid-row: 3;
  grid-column: 1;
  border: 3px solid #b85757;
  background: #ec7272;
  padding: 20px;
  font-size: 30px;
}

.item-4 {
  grid-row: 3;
  grid-column: 2 / span 2;
  border: 3px solid #34a2c2;
  background: #3dc0e6;
  padding: 20px;
  font-size: 30px;
  height: 460px;
}

.item-5 {
  grid-row: 5;
  grid-column: 1 / span 3;
  border: 3px solid #8774bc;
  background: #9e84e4;
  padding: 20px;
  font-size: 30px;
}

To edit layout two, visit the layout two CSS and HTML code on Codepen.io

Layout 3: CSS Grid Layout for a Basic Messenger

This design shows how you can use the grid mesh to create a basic messenger-style app structure. This example uses eight sections, and we also include icons from font-awesome.

Here is the HTML grid mesh below.

<!-- GRID MESH -->
<div class="grid-container">
  <div class="grid-item item-1">
    <i class="fa fa-home bottomleft" aria-hidden="true"></i>
    <center>
      <span>Menu Bar</span>
      <i class="fa fa-bell" aria-hidden="true"></i>
      <i class="fa fa-telegram" aria-hidden="true"></i>
      <i class="fa fa-camera" aria-hidden="true"></i>
    </center>
    <i class="fa fa-bars bottomright" aria-hidden="true"></i>
  </div>
  <div class="grid-item item-2">Messages</div>
  <div class="grid-item item-3">Groups</div>
  <div class="grid-item item-4">Friends</div>
  <div class="grid-item item-6">Search Bar</div>
  <div class="grid-item item-7">Avatars</div>
  <div class="grid-item item-8">Current Chat Body</div>
  <div class="grid-item item-9">New message requests</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.fa {
  color: #3c663d;
}

.grid-item {
  box-shadow: 0 5px 5px rgb(0 0 0 / 49%);
  margin: 10px;
  border: 0;
  border-radius: 10px;
  padding: 20px;
  font-size: 30px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  text-align: center;
  font-family: Arial;
}

.item-1 {
  grid-row: 1;
  grid-column: 1 / span 3;
  border: 3px solid #5a985b;
  background: #75c576;
  position: relative;
}

.item-2 {
  grid-row: 2;
  grid-column: 1;
  border: 3px solid #c87922;
  background: #f89427;
}

.item-3 {
  grid-row: 2;
  grid-column: 2;
  border: 3px solid #c87922;
  background: #f89427;
}

.item-4 {
  grid-row: 2;
  grid-column: 3;
  border: 3px solid #c87922;
  background: #f89427;
}

.item-8 {
  grid-row: 6;
  grid-column: 1 / span 3;
  border: 3px solid #34a2c2;
  background: #3dc0e6;
  height: 260px;
}

.item-9 {
  grid-row: 7;
  grid-column: 1 / span 3;
  border: 3px solid #5a985b;
  background: #75c576;
}

.bottomleft {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.bottomright {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.item-7 {
  grid-row: 4;
  grid-column: 1 / span 3;
  border: 3px solid #8774bc;
  background: #9e84e4;
}

.item-6 {
  grid-row: 3;
  grid-column: 1 / span 3;
  border: 3px solid #b85757;
  background: #ec7272;
}

Layout three can be created with the code above, or you may visit codepen.io.

Layout 4: CSS Grid Layout for Accordion Sections

Layout four illustrates a web page broken down into horizontal blocks like an accordion because the sections are stacked.

<!-- GRID MESH -->
<div class="grid-container">
  <div class="grid-item item-1">
    <center>Menu Bar</center>
    <a href="#">
      <i class="fa fa-bars topleft" aria-hidden="true"></i>
    </a>
    <a href="GRID_1.html">
      <i class="fa fa-home topright" aria-hidden="true"></i>
    </a>
    <a href="#">
      <i class="fa fa-search bottomright" aria-hidden="true"></i>
    </a>
  </div>
  <div class="grid-item item-2">My Proposals</div>
  <div class="grid-item item-3">My Profile</div>
  <div class="grid-item item-4">My Project Dashboard</div>
</div>

<div class="grid-container">
  <div class="grid-item item-1">Sub header</div>
  <div class="grid-item item-2">Sub menu</div>
  <div class="grid-item item-6">Main Body</div>
</div>

Addionally we position content like the icons within a grid item using CSS classes like the topleft corner, bottomleft corner, topright corner, or bottomright corner.

/* POSITIONING */
.topleft {
  position: absolute;
  top: 20px;
  left: 20px;
}

.topright {
  position: absolute;
  top: 20px;
  right: 20px;
}

.bottomright {
  position: absolute;
  bottom: 23px;
  right: 60px;
}

.bottomright {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

To view the entire code for this example, look it up here.

Layout 5: CSS Grid Layout for an Image Grid

This layout design is for websites that deal with images or videos on their platform. CSS Grid Layout provides an easy-to-use framework to organize the graphics more presentably.

The images are placed in a grid format using the display, grid-gap, and the grid-template-columns properties.

.img-container {
  display: grid; /* Set the grid */
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); This function sets the grid item column behavior */
  grid-gap: 40px;
  padding: 20px;
  width: 100%;
}

This example uses the repeat function for the grid-template-columns.

  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* This function sets the grid item column behavior */

The line grid-template-columns: repeat(auto-fit, minmax(300px,1fr));: subdivides the grid into columns 300 pixels wide in which the images will be contained. It automatically fits them depending on the size of the display device. The entire code is available on Codepen.

Layout 6: CSS Grid Layout for a Web Form With Sidebars

This layout demonstrates creating a web page with a form and two sidebars.

<div class="grid-container">
  <div class="grid-item item-1">Header</div>
  <div class="grid-item item-4">Left Sidebar</div>
  <div class="grid-item item-2">Form</div>
  <div class="grid-item item-5">Right Sidebar</div>
  <div class="grid-item item-3">Footer</div>
</div>

html,
body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
  width: auto;
}

.grid-item {
  box-shadow: 0 5px 5px rgb(0 0 0 / 49%);
  margin: 10px;
  border: 0;
  border-radius: 10px;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  font-family: Arial;
}

.item-1 {
  grid-row: 1;
  grid-column: 1 / span 8;
  border: 3px solid #34a2c2;
  background: #3dc0e6;
}

.item-3 {
  grid-row: 3;
  grid-column: 1 / span 8;
  border: 3px solid #34a2c2;
  background: #3dc0e6;
}

.item-2 {
  grid-row: 2;
  grid-column: 2 / span 6;
  height: 570px;
  border: 3px solid #c87922;
  background: #f89427;
}

.item-4 {
  grid-row: 2;
  grid-column: 1 / span 1;
  height: 570px;
  border: 3px solid #b85757;
  background: #ec7272;
}

.item-5 {
  grid-row: 2;
  grid-column: 8 / span 1;
  height: 570px;
  border: 3px solid #b85757;
  background: #ec7272;
}

You can check out this layout on codepen.io

Layout 7: CSS Grid Layout With Footnotes

Layout seven illustrates how to set the exact width for grid rows and columns using pixels. Addionally we add footers underneath the bottom of the columns.

<div class="grid-container">
  <div class="grid-item item-1">Dashboard</div>
  <div class="grid-item item-2">Main Content</div>
  <div class="grid-item item-5">Sidebar</div>
  <div class="grid-item item-3">Footnote</div>
  <div class="grid-item item-4">Footnote</div>
</div>

html,
body {
  margin: 0;
}

.grid-container {
  display: grid;
  padding: 10px;
  width: auto;
  grid-template-columns: 1fr 800px 1fr;
  grid-template-rows: 2fr 540px 1fr;
}

.grid-item {
  box-shadow: 0 5px 5px rgb(0 0 0 / 49%);
  margin: 10px;
  border: 0;
  border-radius: 10px;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  font-family: Arial;
}

.item-1 {
  grid-row: 1;
  grid-column: 1 / span 3;
  border: 3px solid #34a2c2;
  background: #3dc0e6;
}

.item-3 {
  grid-row: 3;
  grid-column: 2 / span 2;
  border: 3px solid #34a2c2;
  background: #3dc0e6;
}

.item-2 {
  grid-row: 2;
  grid-column: 1 / span 2;
  border: 3px solid #c87922;
  background: #f89427;
}

.item-4 {
  grid-row: 3;
  grid-column: 1 / span 1;
  border: 3px solid #b85757;
  background: #ec7272;
}

.item-5 {
  grid-row: 2;
  grid-column: 3;
  border: 3px solid #b85757;
  background: #ec7272;
}

This design has a header, two columns, and two footers, respectively. The trick here is these two lines of code in the grid container that constructs a nine-by-nine grid template. Then we use some CSS properties to make the visible rows and columns fit within this structure the way we want.

.grid-container {
  grid-template-columns: 1fr 800px 1fr;
  grid-template-rows: 2fr 540px 1fr;
}

The two properties above accept uniform measurements for each row or column.

We see that grid-template-columns: 1fr 800px 1fr; sets the width of three invisible columns; this is the column template. The first and third column is set to 1fr, and the second column is set to 800px.

grid-template-columns: 1fr 800px 1fr;

Addionally above, you see the visible footnote rows. The rows also use a template, which is the row grid template. To create the row template, we used the grid-template-rows property.

grid-template-rows: 2fr 540px 1fr;

The grid-template-rows effectively sets the first row’s height to 2 fractions, the second row to 540px, and the last row to 1 fraction. This template can be seen in the image below. 

Now moving on to constructing the visible grid.

In the first image above, you see there are two footer columns. In the CSS code, there is a property called grid-column. We use the grid-column property to set the first column’s width to take up the first template column. The grid column declares the column should start in the first template column and span only one column.

 grid-column: 1 / span 1;

Since we used the value of 1fr as the first value in grid-template-columns, the first column’s width is 1fr.

On the other hand, the 2nd column starts in the second template column and spans two columns. The column width equals 800 pixels + 1fr (the last two template columns). Spanning the column is done with CSS grid-column property as follows.

grid-column: 2 / span 2;

The total width of these two columns equals 1fr + 800px + 1fr, the same as the value of grid-template-columns. You can check the CSS code for the Dashboard, Main Content, and the Sidebar values for grid-column property values.

In the second image above, we don’t use the grid-column property; the row heights are set to the values of grid-template-row property. The grid-template-rows: 2fr 540px 1fr; sets the first row to two fractions, sets the size of the 2nd row to 540 pixels, and then the remaining row is a single fraction.

You may view and test the entire code for Layout 7 here.

Let’s end here

Thanks for going through this article. I hope you found it helpful and that it helped you better understand how to use CSS Grid Layout in your projects to make them more responsive and appealing.

Recommended Articles

• The Awesome CSS Transform Property and Scale Function
• Explaining the Scale Property in CSS
• How to Center DIV Elements or Nested Elements
• What Are More Examples of HTML Elements and Structure
• How To Use CSS (Cascading Style Sheets) To Style HTML

The post A Guide on How To Use CSS Grids for Layouts appeared first on AppCode.

From grid layouts, carousels, and down to colors, CSS defines the aesthetics of your website. It shapes the look and feels, acting as a car chassis’s body kit. In short, it determines your site’s user experience. So, learning this language is essential to exceeding the threshold of mediocrity in the web development field.

Once you dive in and dig deep into the CSS language, you’ll understand its capabilities go beyond just adding layouts, fonts, and colors to web structure. Interestingly, one of such unique properties of CSS is that it includes dynamic transformation properties. Those dynamic properties allow you to change the shapes and the positions of elements on a web page.

Though the goal of publishing this article is to shed more light on the transform: scale property, we’d like to, first, share with you what the CSS transform property is all about.

An Overview

The CSS transform property lets you visually manipulate elements by scaling, skewing, rotating, or translating.

Scale CSS Styles

.element {
  width: 50px;
  height: 50px;
  transform: scale(10);
}

This example shows that the element highlighted above will now be scaled to ten times its original size, even with a defined height and width. However, in the example below, the element will be greatly the width but twice the height of the original element.

.element {
  transform: scale(3, 2);
}

Syntax

transform: none|transform-functions|initial|inherit;

Property Values

What is the transform scaleX value?

scaleX()

The scaleX function defines a transformation that changes the size of an HTML element along the X-axis. The scaleX() function modifies the abscissa of each element point. It does this by a constant factor, though that’s not the case if the scale factor equals 1. Unlike some of the other CSS functions highlighted below, this one isn’t isotropic, and the angles are also not conserved. But note that scaleX (-1) defines an axial symmetry.

The CSS transform scaleX is expressed as transform: scaleX(number); with the number being replaced with an actual number like scaleX(0.2).

Below, we show an example where we use scaleX to scale an element on the x-axis.

HTML

<div>
  <p>Normal Element</p>
</div>
<div class="scaled">
  <p>Scaled Element</p>
</div>

CSS

body {
  background: gray;
  color: white;
}

div {
  width: 120px;
  height: 120px;
  background-color: black;
  display: inline-block;
}

.scaled {
  transform: scaleX(0.6);
  background-color: red;
}

p  {
  font-family: cambria;
}

Click on me to edit the code on codepen.io.

What is the transform scaleY value?

scaleY()

The scaleY function helps define a transformation that resizes an HTML element along the y-axis. In the real sense, it alters the lines of each HTML element by a fixed factor. But the exception, however, is when the scale factor is 1. The function is the identity transform. Note that the scaling isn’t isotropic, and the angles of each HTML element aren’t conserved. The syntax for this is scaleY(s).

The CSS transform scaleY is expressed as transform: scaleY(number); with the number being replaced with an actual number like scaleY(1.9).

Below, we show an example where we use scaleY to scale an element on the y-axis.

HTML

<div>
  <p>Normal</p>
</div>
<div class="scaled">
  <p>Scaled HTML Element</p>
</div>

CSS

body {
  background: gray;
}

div {
  width: 80px;
  height: 80px;
  background-color: red;
  color: white;
}

.scaled {
  transform: scaleY(0.6);
  background-color: blue;
  padding-bottom: 40px;
}

p{
  padding-top: 30px;
  margin-left: 10px;
}

Click on me to edit the code on codepen.io.

What is the transform scaleZ value?

scaleZ()

The scaleZ function defines a transformation that resizes any element on the Z-axis. It modifies the z-coordinate of each HTML element point by a fixed factor. But the exception is when the scale factor is 1; in this case, the function is the identity transform. But here’s the catch – the scale isn’t isotropic. Also, the angles of each element aren’t conserved. But note, scaleZ(sz) is same as scale3d(1, 1, sz).

The CSS transform scaleZ is expressed as transform: scaleZ(number); with the number being replaced with an actual number like scaleZ(0.75).

Below, we show an example where we use scaleZ to scale an element on the z-axis.

HTML

<div>
  <p>Normal</p>
</div>
<div class="perspective">
  <p>Translated Element</p>
</div>
<div class="scaled-translated">
  <p>Scaled Element</p>
</div>

CSS

div {
  width: 120px;
  height: 120px;
  background-color: blue;
  border: 1px solid black; 
  display: inline-block;
  margin-left: 70px;
}

.perspective {
  /* The line includes a perspective to create a 3D space effect*/
  transform: perspective(200px) translateZ(-150px);
  background-color: black;
}

.scaled-translated {
  /* The code includes a perspective to create a 3D space effec*/
  transform: perspective(300px) scaleZ(3) translateZ(-150px);
  background-color: red;
}

p {
  color: white;
  border-radius: 50%;
  text-align: center;
  padding-top: 50px; 
  margin: auto;
}

Click on me to edit the code on codepen.io.

What is the transform scale3d value?

scale3d()

The scale3d function defines a transformation that resizes an HTML element in 3D space (just as the name suggests). Thanks to the amount of scaling defined by a vector, it can be resized into different dimensions at different scales. Hence, this CSS function’s result is a <transform-function> datatype.

The CSS transform scale3d is expressed as: transform: scale3d(number, number, number); with the numbers being replaced with actual numbers like scale3d(0.2, 2, 0.5).

Below, we show an example where we use scale3d to scale an element on the x-axis, y-axis, and z-axis.

HTML

<div>
  <p>Unaltered Div</p>
</div>
<div class="scaled">
  <p>A Scaled Div</p>
</div>

CSS

body {
  background: gray;
  color: white;
}

div {
  width: 120px;
  height: 120px;
  background-color: red;
  font-family: Cambria;
  display: inline-block;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: black;
}

Click on me to edit the code on codepen.io.

Conclusion

The previous scale tutorial only highlighted the CSS scale property and its values and functionalities. Keep in mind that the scale property is not the same as the transform property. This tutorial highlights the functions and values of the transform scale property. Don’t forget; you can always tweak the codes provided in this article. Let’s see what you come up with at the end.

Recommended Articles

• Explaining the Scale Property in CSS
• How To Use CSS (Cascading Style Sheets) To Style HTML
• How To Create CSS Gradient Buttons
• 15 Awesome Keyframe CSS Animation Examples and Code
• 15 Text Outline CSS Examples and Code
• 15 CSS Image Slider Examples and Code

The post The Awesome CSS Transform Property and Scale Function appeared first on AppCode.

What is HTML?

HTML, or HyperText Markup Language, is the standard markup language for texts intended to be viewed on a web browser. When working with HTML, we make web pages, and we use a web browser to read and process the HTML content. To develop a well-organized website, we’ll need to ensure that all HTML files we produce are saved in the same folder.

It may appear to be a challenge. Perhaps you believe it is too difficult for you to learn. But the focus of the article is to demonstrate how simple HTML may be. Let’s get started! This guide will teach you everything you need to know about basic HTML.

How easy is HTML?

HTML is quite simple to learn; believe it or not, you can be operational in less than a day. Simply put, there’s not much to it. Realistically, it is a simple language to learn, and it isn’t going away anytime soon. If you’re not used to working with computers or the internet, you can find it difficult. However, if you’re comfortable with basic word processing, copying and pasting, and other similar tasks, you’ll see HTML to be reasonably simple.

Getting the required code editor

You need a text editor, code editor, or an IDE (integrated development environment) installed on your operating system to create your HTML web page. The editor is where you write the code. Here are several examples of programs you can start writing code below:

Codeanywhere Cloud IDE

Notepad++ Code Editor

Brackets Code Editor

What are HTML tags?

An HTML tag is a group of characters that constitute the beginning and end of an HTML element. Tags, which are at the heart of HTML, give instructions or blueprints to create pieces that make up the structure of all web pages on the internet.

All HTML documents consist of elements that are built up from contents and tags, and to create the most basic HTML document, we first need an HTML tag at the start of the document which looks something like this <html> and another tag at the end of the document which looks something like this </html>.

<html>
</html>

As you can see, the tags all start and end with an angle bracket <, and usually but not always, tags work in pairs, and it’s often the case that the opening tag is the same as the closing tag but with a forward slash sign / after the opening angle bracket.

That being said, let’s put some content in between the <HTML> tags.

How to start coding?

On the following line, after the opening tag <HTML>, type a simple sentence like: “Welcome, this is a basic web page.”.

<html>
Welcome, this is a basic web page.
</html>

Save the file name as “index.html”. Make sure you put the HTML at the end; if not, your file will save as a text document by default.

After saving the file as HTML, double click the folder in the location you saved, and you’ll see that it’ll open up your browser. It should say, “Welcome, this is a basic webpage.”, in your browser.

Note: You can scale the webpage by holding down the CTRL key with a + sign to make it bigger. On the other hand, to make the browser page smaller, use CTRL with the – symbol.

Add some text after “Welcome. this is a basic web page” like “This is a second paragraph” then save the HTML file and refresh the browser.

When you go back to your browser, you’ll notice that your second paragraph isn’t a pretty second paragraph. The first and second sentences will appear to be together. The reason for them appearing together is, with HTML, you won’t get a line break unless you indicate that the two sentences are different paragraphs.

So go back to the editor and put a break tag or paragraph tag there. The code for a break tag is <br> is placed at the end of the sentence.

Sentence One<br>
Sentence Two

On the other hand, the code for a paragraph tag starts with <p>. Then you use a <\p> at the end of the paragraph.

<p>Sentence One</p>
<p>Sentence Two</p>

The break tag takes the following sentence to the next line, while a paragraph tag gives the following sentence a whole paragraph. For the sake of this tutorial, we’ll use the paragraph tag.

<html>
  <p>Welcome, this is a basic webpage.</p>
  <p>This is a second paragraph</p>
</html>

How to add other HTML elements?

Moving on, you can add more HTML elements to your web page. The next thing you will be learning is how to make bold, italics, or underlined texts using HTML elements.

The tag for bold is <b> to open it and <\b> to close it, the tag for italics is <i> to open it and <\i> to close it, and the tag for underline is <u> to open it and <\u> to close it.

To use all of these elements we create write “We are including various text formats with <b>bold</b>, <I>italics</i> and <u>underlined</u> elements.”. Save and refresh.

<p>We are including various text formats with <b>bold</b>, <I>italics</i> and <u>underlined</u> elements.</p>

What the code above looks like on a web page.

Next, we’re going to add a heading. You can add your heading where ever you want to. Although Ideally, headings are usually on the top of a document, there are no structure rules, especially when it comes to coding.

To add a heading to your HTML, you need to understand the six headings types, with H1 being the most significant and H6 being the smallest. Your heading should look something like this “<h1>This is a Heading</h1>”.

<h1>This is a Heading</h1>

At this point, our code should look like this below:

<html>
  <h1>This is a Heading</h1>
  <p>Welcome, this is a basic webpage.</p>
  <p>This is a second paragraph</p>
  <p>We are including various text formats with <b>bold</b>, <I>italics</i> and     <u>underlined</u> elements.</p>
</html>

List Of 13 Basic HTML Tags

Here are 13 of the most basic HTML tags and their meanings:

Although these HTML tags may confuse you as a beginner, before the end of this tutorial, you will understand more of the elements better.

Container Vs Non-Container Tags

Container tags are the tags that have to start and closing tags like the paragraph tag <p>Content</p> while non-container tags are tags that don’t have any closing tag but have start tags like </br> and <img>.

How to make HTML compliant?

A compliant web page indicates that a web site’s HTML and CSS code complies with the World Wide Web Consortium’s standards (W3C for short). Compliance is substantial because it will help you design a website that can be read and accessed in a broader range of browsers, platforms, and devices. Addionally compliant web pages render correctly in most browsers and devices.

As we’ve seen, the HTML code we’ve written works perfectly well, but for compliance with widely accepted HTML standards, it should contain a bit more structure, such as the document type, head, title, and body tag, and we’ll show you exactly how to do this.

Firstly, all HTML documents should begin by declaring their document type to be HTML, so the browser knows the kind of content it contains.

To do this, we have to add a declaration tag at the very start of our document before our HTML code begins.

<!DOCTYPE html>
<html>
  <h1>This is a Heading</h1>
  <p>Welcome, this is a basic webpage.</p>
  <p>This is a second paragraph</p>
  <p>We are including various text formats with <b>bold</b>, <I>italics</i> and     <u>underlined</u> elements.</p>
</html>

How to add the head element?

The <head> element represents a container for metadata, scripts, and other resources for the browser to download. To place the <head> element, we need to put it on the following line, after the document’s opening <html> tag.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <h1>This is a Heading</h1>
  <p>Welcome, this is a basic webpage.</p>
  <p>This is a second paragraph</p>
  <p>We are including various text formats with <b>bold</b>, <I>italics</i> and     <u>underlined</u> elements.</p>
</html>

How to add the title element?

Add a title element inside the head element by inputting <title> with the contents of “A basic webpage” (or whatever title you want to give it) and close the title with <\title>; after this, don’t forget to close the header on the line by inputting <\head>.

<!DOCTYPE html>
<html>
  <head>
    <title>A basic webpage</title>
  </head>
  <h1>This is a Heading</h1>
  <p>Welcome, this is a basic webpage.</p>
  <p>This is a second paragraph</p>
  <p>We are including various text formats with <b>bold</b>, <I>italics</i> and     <u>underlined</u> elements.</p>
</html>

How to add the body element?

The next thing to do for compliance indicates that there’s a body. So after the header, add a tag for the body with <body> and right before the end of the document’s closing tag <\html> to close off the body with <\body>.

<!DOCTYPE html>
<html>
  <head>
    <title>A basic webpage</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>Welcome, this is a basic webpage.</p>
    <p>This is a second paragraph</p>
    <p>We are including various text formats with <b>bold</b>, <I>italics</i> and     <u>underlined</u> elements.</p>
  </body>
</html>

How to check web page compliance?

If you notice, you will see that we haven’t done anything to the content of this document; we have just structured it better with additional elements. It’s straightforward to check the validation and compliance for HTML. The W3C provides an HTML markup validation service to validate your web pages. You can copy the code to validate by direct input or use a URL. 

What are links and hyperlinks?

A link or hyperlink is just an address that defines the location of an internet resource, the same as a URL that directs you to a web page. Furthermore, hyperlinks are text URL links that may be activated with a pointing device to take you to the desired website using a hidden URL.

So far, our HTML is coming together pretty well. Our page lacks any form of interaction, so how do we place a link?

How to add links and hyperlinks?

Somewhere around the body start a new paragraph and add a <a> tag. Below is the code for the <a> tag:

<a href="link address">the text you want to link</a>

For the sake of this tutorial, I am going to be using digitalocean.com as my link. When it is clicked, this link will change the current web page to the Digital Ocean Marketplace. My code for that will look something like this:

<a href="https://marketplace.digitalocean.com/">Digital Ocean: Get a a cloud server today!</a>

Now we will make another paragraph and place the link within it. Down below, your web page code should look like this.

<!DOCTYPE html>
<html>
  <head>
    <title>A basic webpage</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>Welcome, this is a basic webpage.</p>
    <p>This is a second paragraph</p>
    <p>We are including various text formats with <b>bold</b>, <I>italics</i> and     <u>underlined</u> elements.</p>
    <p><a href="https://marketplace.digitalocean.com/">Digital Ocean: Get a a cloud server today!</a></p>
  </body>
</html>

If you refresh your browser after saving, you will see the new link in the third paragraph.

The browser will change the current page to the Digital Ocean Marketplace whenever the link is clicked. You should see the marketplace after the browser navigates.

However, if you want to open your link in another tab, your coding will be slightly different. For links opening in another tab, we need to add the target="_blank" link attribute.

<a href="https://marketplace.digitalocean.com/" target="_blank">Digital Ocean: Get a a cloud server today!</a>

This attribute forces the text link to open the resource in another tab.

How to add images to HTML?

Images are usually linked to web pages rather than being physically put into them, but sometimes images can be embedded using a base64 string. We will only be using the link in this tutorial. The <img> element produces a placeholder for the picture that will be loaded during page render in a browser window.

To add an image to your HTML, place an image tag <img> in your desired location plus an src attribute src="The URL of image". We will also add a width attribute, or the image will render at its max dimensions. For a clearer picture, it should look something like this:

<img width="number" src="https://example.com/images/untitled_design.jpg">

Unsplash is a website that provides free images. For example, we can use a free jellyfish photo with this link.

https://images.unsplash.com/photo-1532191343016-47bf741b8b3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80

Below, we place the jellyfish image into our own <img> element.

<img width="400" src="https://images.unsplash.com/photo-1532191343016-47bf741b8b3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">

Now we need to add the image to our webpage. We need to add the <img> tag in a new paragraph to do this.

<!DOCTYPE html>
<html>
  <head>
    <title>A basic webpage</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>Welcome, this is a basic webpage.</p>
    <p>This is a second paragraph</p>
    <p>We are including various text formats with <b>bold</b>, <I>italics</i> and     <u>underlined</u> elements.</p>
    <p><a href="https://marketplace.digitalocean.com/">Digital Ocean: Get a a cloud server today!</a></p>
    <p><img width="400" src="https://images.unsplash.com/photo-1532191343016-47bf741b8b3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"></p>
  </body>
</html>

Our new web page should look like this after updating the code.

Conclusion

If you’ve followed all of the steps in this post, you should end up with a basic webpage.

Recommended Articles

• JavaScript Fundamentals – A Dinosaurs Cheat Sheet
• What Are More Examples of HTML Elements and Structure
• How To Create a Valid HTML Web Page With Elements
• How To Create Your First HTML Elements With Examples
• How To Use CSS (Cascading Style Sheets) To Style HTML

The post How To Code a Fun Basic Web Page appeared first on AppCode.

The JavaScript request functions allow clients to exchange data from all server-side and client-side resources. The request works by transferring data (sends and receives) from the client-side to the server-side by making what’s known as HTTP requests. These HyperText Transfer Protocol (HTTP) requests work with the fetch and other functions to communicate with the server.

Interestingly, the internet consists of different servers. These servers are a network of interconnected computers, where the browser fetches most website files from. Surfing the internet and navigating through the various pages is the same as users requesting the web browser to fetch the information from the servers. In this short but detailed reference, however, we shall take a closer look at everything you need to instruct web pages to fetch files using different JavaScript request functions.

1. Fetching With the Fetch Function
2. Using the XMLHttpRequest Function

HTTP Request

Clients make HTTP Requests to specific hosts. These named hosts are located on servers, and the goal is to communicate with those hosts to access the resources stored on the servers. It is important to note that for a user to make the request, they have to use the components of a request. These components include a request line, URL (also referred to as Uniform Resource Locator), a method, a series of HTTP header fields, and a message body.

An HTTP request may also contain an entity. The entity consists of entity-headers and an optional entity-body, which an entity-body is only present if there is a message-body. The entity-body comes from the format and encoding of the message-body and is represented in the entity-headers. On the other hand, entity-headers describe the message-body or the resource if no body is present. Depending on the request, some of the entity-headers below are required or are optional.

Here are example of enity-headers fields:

• Allow
• Content-Encoding
• Content-Language
• Content-Length
• Content-Location
• Content-MD5
• Content-Range
• Content-Type
• Expires
• Last-Modified

What is a Request-Line?

The request line, just as we’ve highlighted below, starts with a method token and is followed by the Request-URL, coupled with the protocol version. It ends with CRLF. All of these elements are separated by space SP characters.

What does a request line look like?

Request-Line = Method SP Request-URI SP HTTP-Version CRLF

The request line looks something like this with real data below. This example fetches the contents of example.com’s home page.

GET https://example.com HTTP/1.1

Request-URI

The (the Request-URI) is a Uniform Resource Identifier, and it identifies the current resource on which to apply the selected request. Highlighted below are the most commonly used forms developers use to specify a URI.

• “*”
• Abs_path
• absoluteURI
• authority

The Request-URI structure is illustrated below:

Request-URI = "*" | absoluteURI | abs_path | authority

Using real data again we can construct a simple Request-URI below which contains a scheme name, authority, path, query, and fragment:

https://example.com:80/search?s=ufo#real

The HTTP Methods

The method token indicates which of the HTTP methods will be performed on the resource highlighted by the Request-URI. But remember, they are case-sensitive. Thus, we believe it would be best always to mention methods in uppercase. In the table below, we’ve highlighted the supported methods in HTTP/1.1.

Building a Simple Page

First, before we attempt to create a JavaScript request, we will need to create a simple web page to load the results of the request we will be making. The examples below will walk you through creating a simple web page that retrieves the user’s IP address. We will be demonstrating two JavaScript functions that can achieve a request.

HTML Code

<div class="box">
  <title>Display IP Address</title>
  <h2 id="center">Appcode JavaScript Tutorial</h2>
  <h3 id="center" class="down"> Getting the JavaScript request with the fetch method</h3>
  <p class="top">( Here's the IP Address of your machine: )</p>
  <h1 id=ipAddress></h1>
</div>

CSS Code

body, html {
  background-color:#add8e6;
  font-family: Arial;
  margin: 0;
  height: 100%;
}

h1 {
  font-family: sans-serif;
  text-align: center;
  padding-top: 40px;
  font-size: 40px;
}

p {
  font-family: sans-serif;
  color: #000000;
  text-align: center;
}

.center {
  align: center;
}

#center {
  text-align: center;
}

.down {
  margin-bottom: 50px;
}

.top {
  margin-bottom: -30px;
}

Fetching With the Fetch Function

The syntax of the JavaScript request function will look something like this:

var request = new Request(sample_url: String, [init: Object]);

JavaScript Code

// You can use the var request variable above or provide a url in the fetch function 
// fetch(request) or fetch("url")
fetch("https://ipinfo.io/json")
  .then(function (response) {
    return response.json();
  })
  .then(function (ipJson) {
    document.querySelector("#ipAddress").innerHTML = ipJson.ip;
  })
  .catch(function (error) {
    console.log("Error: " + error);
  });

Here’s what the result would look like using the fetch() function:

You can play around with the code which is found on codepen.io

Using the XMLHttpRequest Function

Alternatively, you may use the XMLHttpRequest function instead of the fetch function. The XMLHttpRequest function will achieve the same results.

JavaScript Code

let IPxhr = new XMLHttpRequest();
IPxhr.open("GET", "https://ipinfo.io/json", true);
IPxhr.send();
IPxhr.onreadystatechange = processRequest;
function processRequest(e) {
  if (IPxhr.readyState == 4 && IPxhr.status == 200) {
    let response = JSON.parse(IPxhr.responseText);
    document.querySelector("#ipAddress").innerHTML = response.ip;
  }
}

Conclusion

Hopefully, with what you’ve learned so far, handling different JavaScript Requests types won’t be a hassle for you. First, we’ve described what some HTTP methods are. Secondly, we highlighted the commonly used JavaScript request types, including XMLHTTPRequest and the fetch functions. Finally, we’ve provided you with some code examples to play around with and use.

Remember, incorporating HTTP Request methods and returning data remains one of the simplest tasks to do, especially when you are still new to the JavaScript language. But with time, not only will you understand the functionality, but you’ll also know the right one to use in any given scenario.

Recommended Articles

• JavaScript Fundamentals – A Dinosaurs Cheat Sheet
• How To Use CSS (Cascading Style Sheets) To Style HTML
• What Are More Examples of HTML Elements and Structure
• How To Create a Valid HTML Web Page With Elements
• How To Create Your First HTML Elements With Examples

The post Introduction to the Fancy JavaScript Request appeared first on AppCode.

If your website is without helpful optimizations, you may be missing out. Users will begin to leave your site before it is entirely loaded if the pages take a long time to load.

1. Minification of the CSS code
2. Compressing your files
3. Minimize server calls
4. Performing image optimization
5. Clean up your HTML code
6. Make use of lazy loading
7. Enhance the speed with caching
8. Use lightweight CSS frameworks

Every day, millions of different websites are seen, and the majority of them are closed before they have a chance to influence, share their material, or sell the things they promote. So, what causes this? Most of the time it’s because of poor optimization. Many websites are slow, unfriendly to users, and incompatible with browsers. That means something must be done to prevent the loss.

This article presents eight front-end performance optimization methods and tips. These methods will certainly be effective in enhancing front-end performance and increasing website speed so that users do not leave your website.

#1 Minification of the CSS code

A CSS file’s minification involves removing unnecessary characters from the source code in order to reduce the file’s size. The primary goal of minification is to boost the website’s speed. When a user requests information from a website, the minified version is given rather than the full version. As a result, bandwidth costs are reduced, and response time decreases. It helps in the accessibility of the site as well as the search engine’s rating.

Before CSS minification

header {
  width: 90%;
  height: 100vh;
  background-color: white;
  background-repeat: no-repeat;
  background-size: cover;
}
nav {
  width: 80%;
  height: 15vh;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

After CSS minification

header{width:90%;height:100vh;background-color:#fff;background-repeat:no-repeat;background-size:cover}nav{width:80%;height:15vh;background-color:#000;display:flex;justify-content:space-between;align-items:center}

#2 Compressing your files

HTML and CSS code files make up any website. The more complicated the page is, the longer it will take to load. These huge code files should be reduced to their original size to enhance site responsiveness. These are some decent file compression options:

• Brotli was introduced by Google in 2015, offers a compression ratio that is equivalent to the greatest general-purpose compression methods currently available.
• Gzip, which is another widely used data compression and decompression tool, is known as Gzip. You can also use this tool for compressing the files.

#3 Minimize server calls

A site’s overall loading speed is heavily influenced by the total number of HTTP requests it must handle. You may dramatically enhance the speed of your site’s loading by reducing HTTP requests.

The following are elements that do not improve your visitors’ experience:

• Unnecessary images
• Unnecessary JavaScript
• Excessive CSS
• Unnecessary plugins

The fewer resources you have, the fewer requests a server must make to render a webpage.

#4 Performing image optimization

Images might be a website-killer for people who aren’t familiar with frontend optimization techniques. Large photo albums and high-resolution photographs on your site can cause the rendering process to become choked. Non-optimized high-definition photographs can be several gigabytes in size. As a result, appropriately optimizing these will help you to increase the frontend performance of your site.

Every image file contains a lot of information unrelated to the photograph or image itself. Dates, locations, camera specs, and other unnecessary information are included in JPEG images.

Using optimization tools like Optimus, you may shorten the time it takes for a picture to load by removing the excess image data. Optimus uses smart compression, which optimizes PNG pictures losslessly.

#5 Clean up your HTML code

The core of almost every website is HTML or hypertext markup language. HTML allows you to add headings, subheadings, lists, and other text-organizing elements to your web pages.

Whether you are new to HTML or a seasoned pro, You must follow a set of guidelines to make HTML writings consistent and well-organized. One of the main concerns should be writing clean code.

Here are a few best practices for keeping HTML code clean and appealing.

• Use Proper Document structure.
• Use Standard Compliant Coding.
• Ident your Code.
• Keep your syntax organized.

#6 Make use of lazy loading

Frontend loading times can be sped up much more with lazy loading. With lazy loading, the web page loads only the content that is required first, and the remaining content is loaded only when the user requests it.

For example,  Google Image Search results initially load only a small set of images. It loads placeholder images of hidden content rather than the actual content, which reduces loading time. The actual content is rendered as the user scrolls down the page.

#7 Enhance the speed with caching

Caching content in a visitor’s browser means storing images, CSS files, etc., on each visitor’s computer. Therefore, if a user visits your website or the same page multiple times, the page may be partially loaded from already saved elements.

This is especially useful for websites that have a lot of images, such as an e-commerce website that visitors visit many times before making a purchase. Using the browser cache improves both the visitor user experience and the load on the server because the webserver does not have to regenerate the cached files.

#8 Use lightweight CSS frameworks

Unless you’re designing your website entirely from scratch, a good frontend framework will help you avoid a lot of amateur frontend optimization blunders.

Although some bigger, more well-known frameworks offer many extra features and options, you may not need them all for your web project.

As a result, it’s critical to figure out what features your project needs and then start with a framework that can provide those features while being lightweight. Concise HTML, CSS, and JavaScript code are used in some of the most modern frameworks.

Here are a few examples of minimalist CSS frameworks that give fast loading times:

• Pure
• Skeleton
• Milligram

Wrapping up

Making the first step is always challenging. Whatever the case may be, the future belongs to those who are not afraid to innovate and redefine previously existing approaches. The execution of these methods assures that your site loads quickly and provides a fantastic customer experience. Simply make sure everything is small, clever, and smooth.

Recommended Articles

• What Are More Examples of HTML Elements and Structure
• How To Create a Valid HTML Web Page With Elements
• How To Create Your First HTML Elements With Examples
• How To Use CSS (Cascading Style Sheets) To Style HTML
• JavaScript Fundamentals – A Dinosaurs Cheat Sheet

The post 8 Useful Methods To Minimize Code and Reduce Page Load appeared first on AppCode.

What is data visualization?

Data visualization is expressed as the application converts data into a visual context, such as a graph. A graph makes it easier for the human brain to understand and gain insight into the data. It refers to techniques to make data understandable by encoding them as visual objects (dots, lines, or bars). With those techniques, the interpretation of data can be beneficial in many ways.

High-quality rendered graphics are 30 times more likely to be read than average. In addition, the human brain processes visual data approximately 50,000 times faster. Likewise, data presented to the users with a graph is 97% more convincing.

With the short explanation of data visualization, we can now start learning how to create a graph with the chart.js library.

What is Chart.js?

There are many data visualization libraries for web developers to use. However, in this article, we will prefer Chart.js. We chose Chart.js because it’s highly customizable with many options, and is used frequently on the web.

In short, the Chart.js library can be thought of as a web tool that offers interactive charts while having advanced features yet being easy to use. You can create many graphs such as bar, line, area, and scales from this open-source data visualization library.

How to create a chart with Chart.js?

• How to install Chart.js
• Creating a canvas
• Preparing the data
• Creating the canvas and chart variables
• Customizing the chart options
• Using HTML to deploy the graph
• Rendering the graph

How to install Chart.js

To install Chart.js, it requires simply placing a script tag between the <head> element in the HTML. We will be using version 3.7.0, as seen in the script source below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" ></script>

Once you include the script, we can create a simple pie chart with the steps below.

Creating a canvas

The <canvas> element allows graphics drawn by JavaScript to display on HTML. It creates a drawing board for items that need to be visually present on the web page.

<canvas id="chartName" width="500" height="500"></canvas>

For example, we created a canvas (drawing area) with a height and width of 500px and an id of id="chartName" in the above structure.

Preparing the data

We’ve turned a small data set into the table below to illustrate a data set example. The table includes cryptocurrencies and the market sizes of these coins.

To visualize a Chart.js graph with the data set we created, we need to prepare it with JavaScript. For this, let’s create two arrays named coins and market sizes:

// Data sizes are provided by creating an array with let
let coins = ['Bitcoin', 'Ethereum', 'Cardano', 'Ripple'];
let marketCap = [957, 480, 51, 43];

Creating the canvas and chart variables

To bring all the components together, we first need to define a variable called canvas with the value being the canvas element. We use let again for this (the getElementById must be the same as the canvas id in the HTML element above).

let canvas = document.getElementById(‘chartName’);

Now it’s time to combine the pieces by creating a new chart that uses the canvas variable. We will also define the chart type.

// In the type section, options such as line, bar, radar,
// donut and pie, polar area, bubble and scatter can be used.
let firstChart = new Chart(canvas, {
    type: 'pie',
    data: {}
});

At this point, you should choose a chart type that you think will be appropriate for the data used. For example, we used a pie chart to see the distribution of coins among themselves in the data set we created. We set type to pie like below:

type: 'pie',

There are additional chart types such as:

• line
• bar
• radar
• doughnut and pie
• polar area
• bubble
• scatter

Customizing the chart options

After the chart structure is created, the Chart.js library allows many customizations. For example, you can change the colors of the graph, titles, legends, and more. This is shown in the code snippets below:

Data color:

//you can choose colors as hex code or rgb
backgroundColor: [
  "#26b99a", 
  "#9b59b6", 
  "#8abb6f", 
  "#bfd3b7"
],

Legend options:

  options: {
    plugins: {
      legend: {
        title: {
          display: true,
          text: "Percentage distributions of the most known coins"
        }
      }
    }
  }

Border options:

borderColor: [
  "#26b99a", 
  "#9b59b6", 
  "#8abb6f", 
  "#bfd3b7"
]

With so many changes you can make, each chart can be unique.

Using HTML to deploy the graph

When deploying the chart we created to the web environment, it should be noted that the <canvas> element is placed inside the <body> element. In addition, after the Chart.js library script is placed in the head, the following structure is formed.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Chart</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" >   </script>
  </head>
  <body>
    <div style="width:400px; height:400px;">
        <canvas id="chartName"></canvas>
    </div>
  </body>
</html>

Similarly, the following code structure is formed when you bring together the components of the chart structure created with JavaScript.

let coins = ["Bitcoin", "Ethereum", "Cardano", "Ripple"];
let marketCap = [957, 480, 51, 43];

let canvas = document.getElementById("chartName");

let firstChart = new Chart(canvas, {
  type: "pie",
  data: {
    labels: coins,
    datasets: [
      {
        label: "Coin",
        data: marketCap,
        backgroundColor: ["#26b99a", "#9b59b6", "#8abb6f", "#bfd3b7"],
        borderColor: ["#26b99a", "#9b59b6", "#8abb6f", "#bfd3b7"]
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        title: {
          display: true,
          text: "Percentage distributions of the most known coins"
        }
      }
    }
  }
});

Rendering the graph

To render the graph now that the HTML and JavaScript are finished, combine the two. As you see below, the JavaScript is placed into a new script element in the body below the canvas. This code is now ready to be used on a webpage. Check below for a rendered image of the pie chart.

<!DOCTYPE html>
<html>
   <head>
      <title>My First Chart</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"> </script>
   </head>
   <body>
      <div style="width:400px; height:400px;">
         <canvas id="chartName"></canvas>
      </div>
      <script>
         let coins = ["Bitcoin", "Ethereum", "Cardano", "Ripple"];
         let marketCap = [957, 480, 51, 43];
         let canvas = document.getElementById("chartName");
         let firstChart = new Chart(canvas, {
           type: "pie",
           data: {
             labels: coins,
             datasets: [{
               label: "Coin",
               data: marketCap,
               backgroundColor: ["#26b99a", "#9b59b6", "#8abb6f", "#bfd3b7"],
               borderColor: ["#26b99a", "#9b59b6", "#8abb6f", "#bfd3b7"]
             }]
           },
           options: {
             plugins: {
               legend: {
                 title: {
                   display: true,
                   text: "Percentage distributions of the most known coins"
                 }
               }
             }
           }
         });
      </script>
   </body>
</html>

The code renders the following graph:

You can edit this graph example on codepen.io

Final Words

There are also libraries such as Chartist.js and Apache Echart developed for data visualization. These libraries are also JavaScript, just like Chart.js, and they are created with similar structures. But if you find other graphs for your web page that you think will increase user interaction more, the different libraries may be suitable for you.

Recommended Articles

• Explaining the Scale Property in CSS
• How To Create a Stacked Card Hover Effect Using CSS
• How to Center DIV Elements or Nested Elements
• How To Create an HTML Carousel

The post Creating Fun Charts With Chart.js appeared first on AppCode.

The scale property in CSS is a CSS transformation property. It makes it possible for a developer to resize an element in a three-dimensional plane across the x, y, and z-axis. The property can also help decrease or increase the size of an element. Hence, the scale property can zoom in and out a selected element. When applying the scale transformation, it is essential to instruct the web browser, the user is surfing on, about the number to resize. A vector or a single number defines the scaling value. By using the scale property you can scale elements vertically and horizontally.

You can specify scale transforms independently and individually. But, of course, it maps better to specific user interface usage and tends to help in remembering the exact order of transform functions if you have to specify it in the transform value.

What scale looks like in a line of CSS code:

.element {
  width: 50px;
  height: 50px;
  scale: 2; /* Results in 100 pixels square */
}

If we have an element that’s 20 pixels square, scaling it up by a value of 2 will automatically double the dimensions to 40 pixels square. As seen in the line of codes above, the CSS scale property does “its job” independently of the transform property, thus, giving users more flexibility to help scale elements without linking the effect with other transforms.

Reiteratively, the transform property happens to be another way to scale your HTML elements since the scale is a function of transform, and this is what it looks like:

.element {
  width: 50px;
  height: 50px;
  transform: scale(2); /* Results in 100 pixels square */
}

Syntax

scale: none | <number> {1,2};

When working with scale property, you can input the “none” keyword or one to three numeric values. On the other hand, providing numeric values scales the selected element along the X and Y-axis. For example, if you provide two values, the first will scale the X-axis while the second will scale the Y-axis. Meanwhile, if you provide three values, the third one will correspond to the Z-Axis, thus scaling the element’s depth in a 3D context, the same as transform: scale3d().

What are the parameters of scale?

The parameters of scale look like this:

scale: { sx };
scale: { sx, sy };
scale: { sx, sy, sz };

• sx in this context resizes the element in the horizontal plane, x-axis.
• sy resizes the elements in the vertical plane, y-axis.
• sz resizes the elements on the z axis.

But here’s the catch, if no values are defined after the sx, then the element is resized using only the sx in a horizontal and vertical direction.

What are the values of scale?

/* Keyword values */
scale: none;

/* Single values */
scale: 2;
scale: 0.5;

/* Two values */
scale: 2 0.25;

/* Three values */
scale: 2 0.5 1;

/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: unset;

• (Single Values) scale: 2 – The <number> specifies a scale factor that makes the selected element scale by the same factor along the X- and Y-axis. This is equivalent to (2D scaling) function but with a single specified value.

• (Two Values) scale: 1 0.25 – It represents two <number> ‘s’ that specifies the X- and Y-axis values of the 2D scale. It is the same as the transform: scale(x, y) (2D scaling) CSS property with two values specified.

• (Three Values) scale: 2 0.5 1 – Three values, on the other hand, represent three <number) ‘s’ that specify X-, Y-, Z-axis scaling values of a 3D scale. Similar to transform: scale3d(x, y, z).

• None: It means no scaling is applied to the element, which is the same as scale: 1.

Fallbacks

In this case, though web browser support is currently building for the scale property, we recommend checking for support when using the scale. Here’s what the CSS scale fallback looks like:

.box:hover {
  transform: scale(3); /* Fallback to this */
}

@supports (scale: 0.5) {
  .box:hover {
    scale: 3; /* Used if support for `scale` is detected */
  }
}

Accessibility issues

Scaling and zooming animations can be quite taxing and complex for accessibility. This is mostly because these animations are a common trigger for some types of migraines. If there’s ever a need to include such animations on your website or application, ensure to provide control to enable users to turn it off. We recommend doing this site-wide.

It would help if you considered using prefers-reduced motion to write media queries, which will ultimately turn off animations whenever the user has reduced the animation specified in the user’s web system preference.

Notables

• Scaling doesn’t distort the natural layout flow.

It is crucial to note that the scale property doesn’t affect other elements or make them flow to wrap around it as the transform scale function does. In simple terms, that means an element’s scale doesn’t alter the other elements’ motion to make an extra room available due to that specific element.

• Scaling affects the child as well as the descendants’ elements

Another thing to note is that the CSS scale property scales all the element’s descendants. For instance, if you have an image inside the element. Altering the elements scale will automatically scale both the element and the image within it.

Example of CSS scale with hover

<!-- HTML -->
<style>
  html,
  body {
    height: 100vh;
    width: 100%;
    background: #cccccc;
    font-family: system-ui;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  .box {
    background: #2872fa;
    height: 100px;
    margin: 50px auto;
    width: 100px;
    transition: 300ms;
    border-radius: 50%;
  }

  .box:hover {
    scale: 1.5;
  }
</style>

<!-- HTML -->
<div class="box"></div>

You can edit this example of scale on codepen.io

Compatible Browsers

Browsers currently compatible with the CSS Scale property include:

Desktop:

• Chrome (no)
• Edge (no)
• Firefox (72)
• Internet Explorer (no)
• Opera (no)
• Safari (14.1)

Mobile:

• Chrome Android (no)
• Firefox for Android (79)
• Opera Android (no)
• Safari for iOS (14.5)
• Samsung Internet (no)
• WebView Android (no)

Recommended Articles

• How To Use CSS (Cascading Style Sheets) To Style HTML
• How To Create a Valid HTML Web Page With Elements
• What Are More Examples of HTML Elements and Structure
• How To Create Your First HTML Elements With Examples
• JavaScript Fundamentals – A Dinosaurs Cheat Sheet

The post Explaining the Scale Property in CSS appeared first on AppCode.

We will learn to create and add a stacked hover effect to an HTML card using CSS. Don’t worry whether you’re new to CSS, or if you want to use this effect to attract more visitors to your website, or if you want to experiment with new CSS capabilities. I’ll walk you through the process of making your first stacked card.

What is a card in HTML?

Cards are an essential component of websites. As they can be used to provide highlights of certain data or crucial information to visitors in a concise manner.

How to create a card using HTML?

In HTML, you can create a class name .card, .card-header, and .card-body which will contain properties to make the card components. First, you use the .card class is to create the card body. Then you can use a class called .card-header to give a heading to the card. Addionally, to write the card’s contents, the .card-body class is available.

When creating a card, it’s almost like when we learn to write a paper. First, the header comes, then the body, which will have the content.

An additional point here is that the content represented by the card class will contain a .card-inner element. All the information like the title of the card, its body (in other words, .card-title, .card-body, etc.) will be stored in this element. 

Here is a practical representation of what I mean below:

<style>
  body {
    background: red;
  }
</style>
<center>
  <div class="card">
    <div class="card-inner">
      <h3 class="card-title">
        Merry X-MAS
      </h3>
      <div class="card-body">
        Wishing you a merry christmas & sending lots of love.
      </div>
    </div>
  </div>
</center>

Note: In the <style> element above, I have used the red background just to give you an idea of what the card will look like on the webpage.

As you can see, the card contents are center-aligned and contain a title called “Merry X-Mas” using the .card-title class. For the content of the card, a class called .card-body wraps around “Wishing you a merry Christmas & sending lots of love”. The .card-inner element wraps around all of the information and contains it.

Even though we have the CSS classes and content in the correct locations, the webpage does not look like a card but a wall of red.

So, what’s missing here?

If you have guessed right, it needs some designing using CSS properties in each class. For example, .card-title has no properties associated with it. The class isn’t even defined in the style element above. A class with properties would look like this below:

.card-title {
   color: white;
   /* Property two */
   /* Property three */
   /* You get the idea! */
}

How to create a stack effect using CSS?

In order to create the stack effect, we will use the CSS pseudo-elements ::before and ::after. The ::before is used to add new content before the content an element. Similarly, ::after is used to add new content after the content of an element.

Note: You can use :before and ::before (same with after) optionally but, IE8 supports only the single “:” notation.

This next HTML code example remains the same as above, except we need to edit the CSS in the style element to add missing classes below to it:

<style>
  .card {
    position: relative;
    width: 400px;
    margin: 60px auto;
  }

  .card::before,
  .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .card::before,
  .card::after,
  .card .card-inner {
    background-color: green;
    border: 1px solid #01937C;
    transition: transform 0.5s;
  }

  .card::before,
  .card-inner {
    z-index: 1;
  }

  .card-inner {
    position: relative;
    padding: 4rem;
  }
</style>

Above, you can now see how the card will look. I used a few basic CSS properties to give its structure and style. As you can see, the .card class positions the card’s inner elements by using the CSS position and setting the card’s width.

Note: We add a z-index: 1 to all .card-inner classes so that the elements always sit on top of their pseudo-elements.

Additionally, the margin in the card class has the left and right set to auto to center the card horizontally.

Note: You can use margin: 0 auto and the width property to center most block type elements.

Don’t worry if you don’t completely understand everything above. In the next step, some confusion will clear up. Addionally, you can look at this CSS reference to know how the properties used above work.

How to add a hover effect to a card using CSS?

The CSS hover property is used to add effects on elements and activates by hovering over them. Using the hover property on cards, we may accomplish movement or effects whenever a user hovers over a card with a cursor.

The transform property creates a 2D/3D transformation of an element. In simple words, you can use it to move, rotate, or scale your elements along the X, Y & Z- axis respectively.

You can also move elements by giving angles, numbers, or offset variables.

What are the types of card hover effects?

• card-top-left
• card-top-right
• card-bottom-left
• card-bottom-right
• card-diagonal-from-right
• card-diagonal-from-left
• card-rotate
• card-perspective
• card-origin

How to create the top-left stack effect?

  .card:hover::before {
    transform: translate(-5px, -5px);
  }

  .card:hover::after {
    transform: translate(-10px, -10px);
  }

The above code implements a transform property that applies a transformation to the before & after pseudo-elements. When the user hovers over the card, the card’s before and after pseudo-elements will translate on the X & Y axis respectively. Here the card will translate on the -X (negative X-axis) and -Y(negative Y-axis) hence, creating multiple stacked card effects by utilizing the before and after pseudo-elements.

The picture above shows the resulting top-left stacked effect when the CSS classes are added to the style element.

A complete example of what we have learned

<!DOCTYPE html>
<html>
  <head>
    <title> Top-left stacked effect</title>
      <style>
      .card {
        position: relative;
        width: 400px;
        margin: 60px auto;
      }

      .card::before,
      .card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .card::before,
      .card::after,
      .card .card-inner {
        background-color: green;
        border: 1px solid #01937C;
        transition: transform 0.5s;
      }

      .card::before,
      .card-inner {
        z-index: 1;
      }

      .card-inner {
        position: relative;
        padding: 4rem;
      }

      .card:hover::before {
        transform: translate(-5px, -5px);
      }

      .card:hover::after {
        transform: translate(-10px, -10px);
      }
    </style>
  </head>
  <body>
    <center>
      <div class="card">
        <div class="card-inner">
          <h3 class="card-title">
            Merry X-MAS
          </h3>
          <div class="card-body">
            Wishing you a merry christmas & sending lots of love.
          </div>
        </div>
      </div>
    </center>
  </body>
</html>

For those people who want to create more than one card and have the hover effect, you can use the .card element which will include all of the contents of the card. You can then paste the .card element on the page somewhere else and the card will be duplicated.

An advanced example of stacked cards

In the above photo, we have created a styled stacked card that includes vertically and horizontally centering. There is more CSS included in creating this card effect. To view or edit this example, you may visit codepen.io.

Conclusion

I hope this article will assist you in creating your personalized cards. Here we have demonstrated how easily we added the stacked effect to a card using the CSS hover property.

Recommended Articles

• How to Center DIV Elements or Nested Elements
• How To Create an HTML Carousel
• Using jQuery To Manipulate Classes and IDs
• How to make an HTML Loader / Spinner Appear and Disappear
• How To Create An Icon Bar With CSS

The post How To Create a Stacked Card Hover Effect Using CSS appeared first on AppCode.

Though it seems easy, CSS is quite tough to implement in real-time. The reason is that CSS is huge and has many concepts. Moreover, every challenge has more than one solution, sometimes several. Even experienced developers sometimes struggle while implementing CSS. 

One of the common challenges in CSS is to center an element. If you have ever worked with CSS, you likely faced a situation where a div element or a heading needs to be centered. And many developers struggle in doing this simple task. One of the primary reasons for this is that developers do not give enough time to learn the tricks for centering elements using CSS. So in this article, we will provide different ways of centering a div or centering other elements inside a div using CSS.

Different ways to center a div or center elements inside a div

There are several different ways to center a div on the screen or center elements such as paragraphs, headings, or images inside a div. We can do it horizontally, vertically, or both horizontally or vertically. So let’s discuss each of these ways one by one.

Using margin property

One of the easiest ways to center a div horizontally is by using the margin property. Observe the following div element.

The green circle is the div element and currently, it is not centered. Following is the HTML for the above.

<html>
  <body class="body-css">
    <div class="div-css">
</div>
  </body>
</html>

And following is the CSS.

.body-css {
  border: 2px solid black;
  padding: 60px;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
}

To center this div horizontally, we can use the margin property and set “auto” as its value. 

.body-css {
  border: 2px solid black;
  padding: 60px;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  margin: auto;
}

With margin as “auto”, the div will be centered with respect to its parent element, i.e. body. 

Using flex 

Using flex, we can align the div horizontally, vertically, or both. We have to apply the “flex” as the value of the display property in the parent element. Then, we have to use the justify-content and align-items property in the parent element as well and both of them should have “center” as their values.

.body-css {
  border: 2px solid black;
  padding: 60px;
 
  display: flex;
  justify-content: center;
  align-items: center;
}
.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
}

This way is also useful when we want to center any element inside a div. Observe the following HTML.

<html>
  <body class="body-css">
    <div class="div-css">
      <h3>Hello World!</h3>
    </div>
  </body>
</html>

To center the h3 element, we have to apply the flex to its parent element i.e. div. Yes, we have already applied flex to the body element and there is no problem in applying the flex again.

.body-css {
  border: 2px solid black;
  padding: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
}

Remember, the justify-content property will center the element horizontally while align-items will center vertically.

Using text-align property

Using text-align property is the most common way to center a text. In the above example, we centered the h3 element inside the div using the flex, which was also used to center the div itself. Instead of using flex to center the h3 element, let’s try the text-align property.

.body-css {
  border: 2px solid black;
  padding: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  text-align: center;
}

But there is one problem. The text-align property will only center the element horizontally. 

So, we can use the text-align property, if it is required to center the text horizontally only.

Using transform property

Another way to center an element to its nearest parent element is by using the transform property. In this technique, we give the parent a “relative” position and “absolute” to the child. Then, we provide top, left, and transform properties to the child element with necessary values.

.body-css {
  border: 2px solid black;
  padding: 120px;
  position: relative;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Remember, the top and left property values should always be “50%” while “translate” should be used for the transform property.

Using grid

The grid system is relatively new, and you can use it to center elements in CSS. In this technique, we have to set “grid” as the value of display in the parent element and define rows and columns. Then, we can use justify-self and align-self properties in the child element and set their values as “center”.

.body-css {
  border: 2px solid black;

  display: grid;
  grid-template-rows: 80vh;
  grid-template-columns: 100vw;
}

.div-css {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;

  justify-self: center;
  align-self: center;
}

Wrapping it up

So centering elements using CSS is not challenging, and you only need to have the correct understanding of specific CSS properties and their values. In this article, we discussed five ways to center a div or center other elements in a div both horizontally and vertically.

Here is a link to a relatively more advanced example of a centered nested DIV element on codepen.io

Recommended Articles

• How To Create an HTML Carousel
• How To Align an HTML List Side by Side
• JavaScript Fundamentals – A Dinosaurs Cheat Sheet
• How To Create An Icon Bar With CSS

The post How to Center DIV Elements or Nested Elements appeared first on AppCode.