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
- Materialize Github Repo
- Visual Studio Code (VSCode) GitHub Repo
- Materialize Web Site
- Materialize Package Download for Windows
- Visual Studio Code Web Site
- Visual Studio Code Download Link for Win x64
- XAMPP Server Web Site
- XAMPP Server(For Windows) Download Link
Posted on Utopian.io - Rewarding Open Source Contributors