Getting Started

In order to get started on making the webpage. Visit the Materialize Getting Started page and scroll down to HTML setup. Using that start up code
can enable you to have a blank canvas to start making your materialize webpage. <!DOCTYPE html> <html> <head>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body>  <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>

Navigation Bar

To get started on the nav bar, head to the Navbar option on the materialize documentation website in the
component option.Using the following styles of navbar code you can have a basic navbar. Here’s the code for a basic navbar with a logo and right aligned options. <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo">Logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="sass.html">Sass</a></li> <li><a href="badges.html">Components</a></li> <li><a href="collapsible.html">JavaScript</a></li> </ul> </div> </nav>
Using the CSS color classes and overriding the CSS classes used, you can customize the colors, fonts, size, padding of the navigation bar.

Icons

Icons can also be easily used along with the options.
Import the link for the icons and use the following code in order to use the icon packs.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" >

Icons must be as text content in a tag. E.g account box is an icon in the library and it must be imported as follows.

For Reference:

<i class="material-icons">account_box</i>

Visit Colors for the documentation for using various colors.
Visit Icons to view the library of icons that can be used with the option menu

Parallax Panels

CSS

In order to make the parallax panels used in the demo website. Make a CSS class related to that parallax panel. E.g. This is the
image that will be used it must be fixed 100%. You may add some text formatting options if you wish to include text in your parallax
panel. Make a class for padding the included text. Include that class in div when you are making the HTML text tag for the parallax
.Coffee-Parallax { background: url(https://s4827.pcdn.co/wp-content/uploads/2017/01/coffee_beans_Mac_5K.jpg ) fixed 100% font-family: 'Raleway',monospace; text-align: center; color: white; font-size:72px; }

HTML

For the HTML portion of parallax. Include all the details inside a section tag with the parallax class imported.
<section class=”Coffee-Parallax”> <div class=”Text-padding ”> <h1> Cofee is the best</h1> </div> <p>lorem ipsum etc</p> </section>

Text Sections

CSS

For the text portion below the parallax. Include it inside its own section tag and make a CSS class for that as follows.
section.Cofee-text { background-color: #e0e0e0; font-family: 'Raleway',monospace; width: 100%; height: 500px; color: black; text-align: center; }
In the CSS class we include the width as 100% so it stretches out to the sides. The formatting for the font that will be
included inside the section. The background color of the section and the variable height based on the amount of text it contains.

HTML

Django

DJango was mainly used for travel from one page to another such as home page, tutorials, conclusion, etc..
Travelling from one page to another was quite simple, and the code below shows how this website travel from
one to another.

from django.http import HttpResponse
                            from django.shortcuts import render

# Create your views here.

def index(request):
                                return render(request, 'cps530app/intro.html')

def homePage(request):
                                return render(request, 'cps530app/homePage.html')

def install(request):
                                return render(request, 'cps530app/install.html')

def framework(request):
                                return render(request, 'cps530app/FrameWork.html')

def team(request):
                                return render(request, 'cps530app/Team.html')

def conclusion(request):
                                return render(request, 'cps530app/Conclusion.html')

def tutorial(request):
                                return render(request, 'cps530app/Tutorial.html')

Tutorial

Learn To Build A Website

Getting Started

Navigation Bar

Icons

Parallax Panels

CSS

HTML

Text Sections

CSS

HTML

Django

DJango was mainly used for travel from one page to another such as home page, tutorials, conclusion, etc.. Travelling from one page to another was quite simple, and the code below shows how this website travel from one to another.

DJango was mainly used for travel from one page to another such as home page, tutorials, conclusion, etc..
Travelling from one page to another was quite simple, and the code below shows how this website travel from
one to another.