Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?

Welcome to the first Video Tutorial of the Materialize!

What Will I Learn?

You will learn how to create a simple contact form (application form) with Materialize.
You will learn how to perform these operation without using any localhost servers.
You will learn a lot of codes about Materialize CSS programming language.

Requirements

Materialize Full Package 1.0.0-beta version (CSS and JS [minified and unminified])
Microsoft Visual Studio Code. (or another text editor)
A Standard Computer
A Standard Browser
XAMPP Control Panel Server (not used in this video but to be used in other education episodes for using localhost)

Difficulty

Intermediate

Description

Hello everyone, welcome to the first episode of the Materialize Education Series. In this video I showed you how to create a Contact Form (Application Form) without using any servers. I teached you how to Install Materialize library and how to create a Contact Form (Application Form) from scratch with totally manually (only beginning codes copied as ready). I showed and I explained you how to use a lot of division codes with classes for "Materialize CSS" for example, "form-field", "card", "card-content", "card-action" and other division classes, labels etc. used and explained in this tutorial video. I teached you how to install Materialize Library with ZIP file format.
Also I explained in detail all the commands used when creating contact (application) form. I explained you how to create modern contact (application) form without using CDN Bootstrap, in this tutorial video,we used Materialize package instead of CDN Bootstrap, I explained the reason for this in detailed on the video.

I gave technical information about codes, classes, about materialize, libraries and all operations. Our Materialize education series will progress from basic - intermediate to advanced. All the programs described in the video (Materialize CSS, Visual Studio Code, XAMPP Server Control Panel Server) are open source and are all included in the links section of the GitHub repositories (Except XAMPP Control Panel Server). If you wish, you can access the web pages of these programs and download links for Windows from the links section.

Codes Used in This Video:

  <html>
    <head>
      Import Google Icon Font
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      Import materialize.css
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <title> Sargoon </title>
      Let browser know website is optimized for mobile
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
   <div class="row">
     <div class="col-md-6">
       <div class="card">
         <div class="card-action blue black-text">
           <h3> Contact Us For Utopian.io Contributor Apllication! </h3>
         </div>
         <div class="card-content">
           <div class="form-field">
             <label for="username"> Username </label>
             <input type="text" id="username">
           </div><br>
           <div class="form-field">
             <label for="category"> Which Category? </label>
             <input type="text" id="category">
           </div><br>
           <label for="text"> Say Something! </label>
           <textarea></textarea>
         </div>
         <div class="card-action blue black-text">
           <button class="btn-large blue black-text"> Send! </button>
         </div>
       </div>

     </div>
   </div>
    <body>

      JavaScript at end of body for optimized loading
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Video Tutorial

Curriculum

This tutorial video is the first video of the Materialize. When next episodes are uploaded, links to previous episodes will be place here.

Links

Posted on Utopian.io - Rewarding Open Source Contributors

Sort Order:

Trending

[-]

greentomorrow (5) · 7 years ago

Hey, just wanted to let you know I gave you an upvote because I appreciate your content! =D See you around

$0.03

1 vote

sargoon (67) · 7 years ago

Thank you :)

$0.00

rosatravels (75) · 7 years ago

Thank you for your contribution.

Need help? Write a ticket on https://support.utopian.io.
Chat with us on Discord.

[utopian-moderator]

$0.02

Thank you for moderating my contribution sir :)

utopian-io (71) · 7 years ago

Hey @sargoon! Thank you for the great work you've done!

We're already looking forward to your next contribution!

Fully Decentralized Rewards

We hope you will take the time to share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.

Utopian Witness!

Vote for Utopian Witness! We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

Want to chat? Join us on Discord https://discord.me/utopian-io