CSS Framework - Ampersand Tutorials

Proven Roadmap to web development in 2021

27/10/2021

by Dinesh Kumar R with No Comment Web Development

Learn the Proven Roadmap to web development in 2021

In this tutorial, we will discuss the Roadmap to web development. We will discuss the technologies and tools that you should learn to become a web developer are.

2 Parts in web development

Any website has two parts:

Frontend
Backend

Frontend:

The front end is the part where we see and interact with a website in a browser. It is the part where we can click and feel all the visual elements of the website.

Frontend Technologies:

HTML – HyperText Markup Language

HTML defines the building blocks of the front end. It is not an actual language but a markup since we cannot use them to instruct a computer.

CSS – Cascading Style Sheets

CSS is for styling web pages and making them beautiful. CSS is also not an actual language.

JS – JavaScript

Adds functionality to the website. JS is a language we can instruct the computer to do certain operations using JavaScript.

Frameworks

Generally, a Website or Web Application has a set of repetitive blocks. Frameworks or libraries help you with making the front end development quick and feature-rich. Few of the frontend frameworks include React, Angular and Vue.

Which Framework to use

Ideally, there is no rule book to follow. Each company and each project requires a different framework. Suppose you’re looking to learn a frontend library or Framework. In that case, it is better to get started with React since it’s used in several projects and companies and later, you can also learn Angular or Vue or any new framework that will serve you in your projects.

Backend:

The backend is the part that powers the front end. It is about storing the data, displaying the data and consists of databases. Backend is a technical term that web experts and coders utilize. Fundamentally, the backend is the software engineer’s code that encompasses server-side activities, incorporating CRUD functionality with the database and all server logics. Backend technologies which you can learn in

2021 includes NodeJS, Java, Kotlin, Python and Ruby on Rails. Databases that you can know for web development include but are not limited to MySQL, Postgre SQL.

Web Development Jobs:

Front end Development – HTML + CSS + JS
Back end Development – Language + Database
Full Stack Development – Front end + Backend

Timeline to learn:

HTML + CSS – 6 Weeks

JS – 6 Weeks

React – 6 Weeks

NodeJS / Python – 9 Weeks

SQL – 6 Weeks

Now that you know Roadmap to web development, Good luck with your endeavour to become a Web Developer. Follow our website to learn and get tips and other plugins you require in your web development projects. Learn about Materialize CSS, one of the famous CSS Frameworks used in website and web development.

Open Modal on page load easily in 3 easy steps

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn how to Open Modal on page load

In this tutorial, we will discuss how to create a modal that opens on the page load in Materialize CSS framework. In a presumption that you already have an idea to implement modal in your Materialize CSS project, we have written this tutorial. It is merely a baby step to create a modal in Materialize CSS, and we look forward to writing a tutorial on this shortly.
Now lets complete the task at hand. We are writing this tutorial with the JQuery version of Materialize CSS. As a first step, create a boilerplate template with Materialize CSS.
Following is the boilerplate template with JQuery. Here’s the link to the official Boilerplate Template and Modal Creation Documentation

<!DOCTYPE html>
  <html>
    <head>
  
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   
    </head>
    <body>

        
         <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"></script>

    </body>
</html>

The second step is to add the modal HTML code. Kindly copy-paste the following code inside the body tag.

<div id="modal1" class="modal" >
    <div class="modal-content center ">
     
    <h1>Hi</h1>
  </div>
        </div>

The third step is to add the following JQuery script just above the closing body tag. The following script not only helps in showing the modal on page load but also helps in creating the modal in the first place.

<script>
            $(document).ready(function(){
             
                  $('.modal').modal();
                 $('#modal1').modal('open');
                $('#cls').click(function(){
                    $('#modal1').modal('close');                   
                });
            });
        </script>

Et voila! Now we have a modal that opens on page load. You can customize the content inside the modal. Learn how to add Breadcrumbs in your Materialize CSS Projects

Quickly Implement Breadcrumbs in Materialize CSS with 2 steps

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn to implement Breadcrumbs in Materialize CSS

Breadcrumbs are an intuitive way of showing the current location of the user on a website or web application. Just beneath the navigation bar is the ideal place for a breadcrumb. The position of the breadcrumb and the design of the breadcrumb plays a vital role in user experience design.
It is astounding that the Materialize CSS has nailed the design of the breadcrumb. Its unique userfriendly design makes a standout. Web designers can quickly implement the breadcrumb in their projects, and it is so easy that there is no JavaScript element in displaying the breadcrumb. Copying a few lines of HTML code can bring the required breadcrumb in the project. Following code can be directly copied into your web project. The only thing that is needed is to change the corresponding link name and links. Here’s the link to Materialize CSS Breadcrumb Documentation

 <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

Thanks to the Materialize CSS team for giving us this excellent, yet, easy-to-use breadcrumb functionality. Learn how to Create FAB to Toolbar

Beautiful Gradient Color Cards in 2021

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn Gradient Color Cards in Materialize CSS

In this tutorial, we will learn how to add background gradient in Materialize CSS. Gradient shade is one of the recent trends in modern web designing. Gradient shades give beautiful and visually appealing layouts. A gradient is a CSS3 property and used inside the background property. Any HTML component, including buttons, cards, navigation bars, side-navigation, and divisions encourages gradient property. In this tutorial, we are discussing how to implement gradient in Materialize CSS cards.

In Materialize CSS, there are options to add solid colours as the background by calling the colour name inside the class of card. If you are in a quest to add a dark blue background and white text to your card component, you can achieve this by simply adding a blue darken-4 white-text class next to the class card.

  <div class="row">
    <div class="col s12 m6">
      <div class="card blue darken-4 white-text">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

Now that we know how to add solid colours to the background of the card, we can now start to learn how to implement a gradient background in the card. After creating the card, add the following CSS style.

<div class="row">
    <div class="col s12 m6">
      <div class="card" style="background: linear-gradient(60deg,#ef5350,#e53935);">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

The above CSS script will create red gradient background to the card element in materialize CSS.

Learn about Animation in Materialize CSS.

For more details about various courses, check out Ampersand Academy.

Animation in Materialize CSS

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn Animation in Materialize CSS

Materialize CSS is one of the most widely leveraged CSS frameworks for building websites and web applications next to the Bootstrap. Materialize CSS is rich in features and has got components that are required to build even a complex application. However, when it comes to animations in Materialize CSS, the framework doesn’t have any dedicated animation functionalities integrated inside it. In this tutorial, we will discuss how to add animations to the Materialize CSS framework using the Animate CSS framework. Adding Animation in Materialize CSS is never this easy. Lets do the Animation in Materialize CSS with the following easy steps.

Animate CSS:

Animate CSS is one of the most leverages CSS frameworks for animation. Animate CSS can be either downloaded as a CSS file or can be linked to the working HTML file using the CDN. Mentioned below are both the options to import the Animate CSS into the HTML

Download the file from the following link: here

Once downloaded link it in the following way

<head>
  <link rel="stylesheet" href="animate.css">
</head>

Import the CDN using following code

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

In the Materialize CSS case, we will be having the started template as mentioned below

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

In the starter template, we can add the CDN of Animate CSS to incorporate the Animate CSS in the project. Once it is embedded, we can start animating the components in Materialize CSS.

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

After including the Animate CSS CDN, now we can add a button in our body. Which will produce the button in the output. Once we include the button, we can start animating the button by adding the class animated followed by the animated class. In this example we have included the class to bounce the button from right. This will add the animation in the output.

<a class="waves-effect waves-light btn animated bounceInRight">button</a>

We can refer the Animate CSS library to lookup varied options of animations. Also we want the animation to be looped continuously we can add the class infinite after the animated class.

https://daneden.github.io/animate.css/

<a class="waves-effect waves-light btn animated infinite bounceInRight">button</a>

Now that you have learnt Animation in Materialize CSS, you can also Learn about Shadow Effect in Materialize CSS

Shadow effect

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn how to create Shadow effect in Materialize CSS

Google’s Material Design is trending among the designers and many have started using Material Design Concepts in their Websites and Web Applications. On the wake of this, Materialize CSS which we have discussed in our previous tutorials has introduced the Shadow Effect. Shadow can be easily utilized in the project by adding a class in the respective HTML element.

Adding the class=”z-depth-1″ will produce a shadow effect in the respective HTML element. Materialize CSS offers various depth ranges which can be utilized. The depth range varies from 1 to 5. The class=”z-depth-1″ will produce a minimal shadow effect and as the depth range increases shadow effect also increases with class=”z-depth-5″ producing a maximum shadow effect. The shadow explanation can be seen in the following image …

Here’s the link to Materialize CSS Hover Class.

The only drawback is the shadow effect produces a default shadow on the element it has been applied. In order to create a creative layout, it is desirable to have some animation for shadows. Materialize CSS offers a new feature called hoverable, which produces a shadow effect when the element with the hoverable class when hovered. This helps in creating beautiful layouts with the shadow effect when hovered.

In order to understand how the shadow effect, you must start with how to start with Materialize CSS. You can read that from the following link …

First step in building Materialize CSS Websites and webpages

Once the Materialize CSS project has been created, the next step is to demonstrate how z-depth-1 works, the following code and image will help you understand how the z-depth class works

  <div class="row">
            <div class="col m4 s12 z-depth-1">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
            <div class="col m4 offset-m2 s12 z-depth-5">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
        </div>

Now we will demonstrate how the hoverable class works. In order, to demonstrate this duplicate the row and instead of z-depth classes replace it with hoverable class. This will create a flat layout, however, when we hover the mouse over the respective columns, it creates a shadow. The coding and image are mentioned below …

<div class="row">
            <div class="col m4 s12 hoverable">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
            <div class="col m4 offset-m2 s12 hoverable">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
        </div>

You can also learn how to have Sidenav as main nav in Materialize CSS

Nested Dropdown in Materialize CSS in Easy 3 steps

06/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn how to create Nested Dropdown in Materialize CSS

Nested dropdown is one of the most important elements web developers look for while designing the website. Materialize CSS Framework does not offer nested dropdown in their repository. In this tutorial, you will be learning how to create a nested dropdown menu in Materialize CSS framework.

Creating Dropdown Button:

Initially, we need to insert the dropdown button from the Materialize CSS Framework. We need to add the respective JS for the dropdown menu.

Step 1:

Create an HTML template from the Materialize CSS official website. Use the following link:

http://materializecss.com/getting-started.html


  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
     

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
    </body>
  </html>

Step 2:

Add the DropDown button as given on the website. Use the following link:

http://materializecss.com/dropdown.html

Step 3:

We can now add the nested dropdown in created dropdown button.

In the last list item in <ul>, we can now copy paste the classes for the dropdown menu.
Change the data-activates option to dropdown2 and change the class name to dropdown-button2
Insert the following javascript within the script tag.
Add the following style just above the </head> tag

 <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <style>.dropdown-content{
    overflow: visible !important;
}</style>
    </head>

    <body>
     <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
        <ul id='dropdown1' class='dropdown-content'>
            <li><a href="#!">one</a></li>
            <li><a href="#!">two</a></li>
            <li class="divider"></li>
            <li>
                <a class='dropdown-button2' href='#' data-activates='dropdown2'>Dropdown></a>
            </li>
        </ul>
        <ul id='dropdown2' class='dropdown-content'>
            <li><a href="#!">one</a></li>
            <li><a href="#!">two</a></li>
        </ul>
        
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
      <script>
        $(document).ready(function(){
          $('.dropdown-button2').dropdown({
              inDuration: 300,
              outDuration: 225,
              constrain_width: false, // Does not change width of dropdown to that of the activator
              hover: true, // Activate on hover
              gutter: ($('.dropdown-content').width()*3)/2.5 + 2, // Spacing from edge
              belowOrigin: false, // Displays dropdown below the button
              alignment: 'left' // Displays dropdown with edge aligned to the left of button
            }
          );
         
        });
        </script>
    </body>
  </html>

We have successfully created the nested dropdown in Materialize CSS framework.

In this tutorials series, you’ll learn more Materialize CSS Plugins, Working Codes and tutorials. In the next tutorial, you’ll learn how to create Navbar with Autocomplete Search Box

Ampersand Tutorials

Posts tagged: CSS Framework

Proven Roadmap to web development in 2021

Learn the Proven Roadmap to web development in 2021

2 Parts in web development

Frontend:

Frontend Technologies:

HTML – HyperText Markup Language

CSS – Cascading Style Sheets

JS – JavaScript

Frameworks

Which Framework to use

Backend:

Web Development Jobs:

Timeline to learn:

Open Modal on page load easily in 3 easy steps

Learn how to Open Modal on page load

Quickly Implement Breadcrumbs in Materialize CSS with 2 steps

Learn to implement Breadcrumbs in Materialize CSS

Beautiful Gradient Color Cards in 2021

Learn Gradient Color Cards in Materialize CSS

Animation in Materialize CSS

Learn Animation in Materialize CSS

Animate CSS:

Shadow effect

Learn how to create Shadow effect in Materialize CSS

Recent Posts

Recent Comments

Ampersand Tutorials