Make a Fully Responsive Website in Materialize CSS with Source Code in 2019

4th FEB 2019

javascript



Welcome back folks in this blog post we will be making a fully responsive website in Materialize CSS from scratch.Let’s get started with the post we will be having a single html file in which we will write the markup of the website and a single css file in which some styles will be written.





<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Coding Shiksha</title>
    <!--Import Google Icon Font-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body id="home" class="scrollspy">
    <div class="navbar-fixed">
        <nav class="blue">
            <div class="container">
                <div class="nav-wrapper">
                    <a href="#" class="brand-logo">Coding Shiksha</a>
                    <a href="#" data-target="mobile-nav" class="sidenav-trigger">
                        <i class="material-icons">menu</i>
                    </a>
                    <ul class="right hide-on-med-and-down">
                        <li>
                           <a href="#home">Home</a>
                        </li>
                        <li>
                            <a href="#search">Search</a>
                         </li>
                         <li>
                            <a href="#popular">Popular Courses</a>
                         </li>
                         <li>
                            <a href="#gallery">Gallery</a>
                         </li>
                         <li>
                            <a href="#contact">Contact</a>
                         </li>
                        
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <ul class="sidenav" id="mobile-nav">
        <li>
            <a href="#home">Home</a>
         </li>
         <li>
             <a href="#search">Search</a>
          </li>
          <li>
             <a href="#popular">Popular Courses</a>
          </li>
          <li>
             <a href="#gallery">Gallery</a>
          </li>
          <li>
             <a href="#contact">Contact</a>
          </li>
    </ul>

    <!-- slider section-->

    <section class="slider">
        <ul class="slides">
            <li>
                <img src="https://source.unsplash.com/1600x900/?programming">
                <div class="caption center-align">
                    <h2>Learn Programming Courses</h2>
                    <h5 class="light grey-text text-lighten-3 hide-on-small-only">
                       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur deleniti hic itaque nesciunt odit saepe laudantium beatae rerum aut minus?
                    </h5>
                </div>
            </li>
            <li>
              <img src="https://source.unsplash.com/1600x900/?developer">
                <div class="caption center-align">
                    <h2>Make New Developers Friends</h2>
                    <h5 class="light grey-text text-lighten-3 hide-on-small-only">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident laborum consequatur, dignissimos cupiditate dolorum assumenda beatae molestiae facilis corporis accusamus tempore? Nostrum quibusdam ipsa voluptas sunt possimus. Porro, reiciendis?
                    </h5>
                </div>
            </li>
            <li>
              <img src="https://source.unsplash.com/1600x900/?videos">
                <div class="caption center-align">
                    <h2>Watch Videos on Coding</h2>
                    <h5 class="light grey-text text-lighten-3 hide-on-small-only">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur enim dolore dignissimos excepturi laboriosam. Saepe exercitationem suscipit, amet porro expedita quos commodi perferendis nostrum voluptatibus libero tempora, cupiditate temporibus in.
                    </h5>
                </div>
            </li>       
        </ul>
    </section>

    <!-- section: search-->

    <section id="search" class="section-search center darken-1 scrollspy blue white-text">
        <div class="container">
            <div class="row">
                <div class="col s12">
                    <h3>Search Courses</h3>
                    <div class="input-field">
                        <input id="autocomplete-input" type="text" class="white grey-text autocomplete" placeholder="programming,webdevelopement etc..">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- section icons-->

    <section id="follow" class="section section-icons-blue lighten-4 center">
        <div class="container">
            <div class="row">
                <div class="col s12 m4">
                    <div class="card-panel">
                        <i class="material-icons large blue-text">
                            explore
                        </i>
                        <h4>Explore Content</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, atque?</p>
                    </div>
                </div>
                <div class="col s12 m4">
                        <div class="card-panel">
                            <i class="material-icons large blue-text">
                                assignment
                            </i>
                            <h4>Assignments</h4>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, atque?</p>
                        </div>
                    </div>
                    <div class="col s12 m4">
                            <div class="card-panel">
                                <i class="material-icons large blue-text">
                                    hd
                                </i>
                                <h4>HD Videos</h4>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, atque?</p>
                            </div>
                        </div>    
            </div>
        </div>
    </section>

    <!-- section popular courses-->

    <section class="section section-popular scrollspy" id="popular">
        <div class="container">
            <div class="row">
                <h4 class="center">
                    <span class="blue-text">Popular</span> Courses</h4>
                <div class="col s12 m4">
                    <div class="card">
                        <div class="card-image">
                            <img src="https://source.unsplash.com/1600x900/?coding">
                            <span class="card-title">
                                Angular Course
                            </span>
                        </div>
                        <div class="card-content">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, ullam?
                        </div>
                    </div>
                </div>
                <div class="col s12 m4">
                        <div class="card">
                            <div class="card-image">
                                <img src="https://source.unsplash.com/1600x900/?technology">
                                <span class="card-title">
                                    Bootstrap Course
                                </span>
                            </div>
                            <div class="card-content">
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, ullam?
                            </div>
                        </div>
                    </div>
                    <div class="col s12 m4">
                            <div class="card">
                                <div class="card-image">
                                    <img src="https://source.unsplash.com/1600x900/?internet">
                                    <span class="card-title">
                                        Laravel Course
                                    </span>
                                </div>
                                <div class="card-content">
                                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, ullam?
                                </div>
                            </div>
                        </div>
            </div>
        </div>
    </section>

    <!-- section: follow-->

    <section class="section section-follow blue darken-2 white-text center">
        <div class="container">
            <div class="row">
                <div class="col-s12">
                    <h4>Follow Coding Shiksha</h4>
                    <p>Follow us on social media for special offers</p>
                    <a href="#" class="white-text">
                        <i class="fab fa-facebook fa-4x">
                        </i>
                    </a>
                    <a href="#" class="white-text">
                            <i class="fab fa-twitter fa-4x">
                            </i>
                        </a>
                        <a href="#" class="white-text">
                                <i class="fab fa-pinterest fa-4x">
                                </i>
                            </a>
                            <a href="#" class="white-text">
                                    <i class="fab fa-linkedin fa-4x">
                                    </i>
                                </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section of Website-->

    <section id="gallery" class="section section-gallery scrollspy">
        <div class="container">
            <h4 class="center">
                <span class="blue-text">
                    Photo
                </span>
                Gallery
            </h4>
            <div class="row">
                <div class="col s12 m3">
                    <img src="https://source.unsplash.com/1600x900/?beach" class="materialboxed responsive-img" alt="">
                </div>
                <div class="col s12 m3">
                        <img src="https://source.unsplash.com/1600x900/?travel" class="materialboxed responsive-img" alt="">
                    </div>
                    <div class="col s12 m3">
                            <img src="https://source.unsplash.com/1600x900/?nature" class="materialboxed responsive-img" alt="">
                        </div>
                        <div class="col s12 m3">
                                <img src="https://source.unsplash.com/1600x900/?books" class="materialboxed responsive-img" alt="">
                            </div>
            </div>
            <div class="row">
                    <div class="col s12 m3">
                        <img src="https://source.unsplash.com/1600x900/?Australia,beach" class="materialboxed responsive-img" alt="">
                    </div>
                    <div class="col s12 m3">
                            <img src="https://source.unsplash.com/1600x900/?Delhi,India" class="materialboxed responsive-img" alt="">
                        </div>
                        <div class="col s12 m3">
                                <img src="https://source.unsplash.com/1600x900/?Books,Algeria" class="materialboxed responsive-img" alt="">
                            </div>
                            <div class="col s12 m3">
                                    <img src="https://source.unsplash.com/1600x900/?Albania,USA" class="materialboxed responsive-img" alt="">
                                </div>
                </div>
        </div>
    </section>

    <!-- section contact-->

    <section id="contact" class="section section-contact scrollspy">
        <div class="container">
            <div class="row">
                <div class="col s12 m6">
                    <div class="card-panel blue white-text center">
                      <i class="material-icons">email</i>
                      <h5>Contact us for more information</h5>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, sapiente quasi! Ratione nam repellat neque?</p>
                    </div>
                    <ul class="collection with-header">
                        <li class="collection-header">
                            <h4>Location</h4>
                        </li>
                        <li class="collection-item">
                                Coding Shiksha
                            </li>
                            <li class="collection-item">
                                    New Delhi
                                </li>
                                <li class="collection-item">
                                        India
                                </li>
                    </ul>
                </div>
                <div class="col s12 m6">
                    <div class="card-panel grey lighten-3">
                        <h5>Please fill out the form</h5>
                        <div class="input-field">
                            <input type="text" placeholder="name">
                        </div>
                        <div class="input-field">
                                <input type="email" placeholder="email">
                            </div>
                            <div class="input-field">
                                    <input type="number" placeholder="phone">
                                </div>
                                <div class="input-field">
                                    <textarea class="materialize-textarea" placeholder="Enter message">
                                    </textarea>
                                </div>
                                <input type="submit" class="btn" value="submit">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- footer section-->

    <footer class="section blue darken-2 white-text center">
        <p class="flow-text">
            Coding Shiksha &copy; 2019 
        </p>
    </footer>

</body>
<script>
    // side nav

    const sideNav  = document.querySelector(".sidenav");
    M.Sidenav.init(sideNav,{});

    // slider

    const slider = document.querySelector(".slider");

    M.Slider.init(slider,{
       indicators:false,
       height:500,
       transition:500,
       interval:6000
    })

    // autocomplete field

    const ac = document.querySelector('.autocomplete');
    M.Autocomplete.init(ac,{
        data:{
            "Javascript":null,
            "PHP":null,
            "PfP":null,
            "PiP":null,
            "Java":null,
            "C++":null,
            "C":null,
            "HTML":null,
            "CSS":null,
            "Python":null
        }
    })

    // Material-boxed

    const mb = document.querySelectorAll('.materialboxed');
    M.Materialbox.init(mb,{});

    // scrollspy

    const ss = document.querySelectorAll(".scrollspy");

    M.ScrollSpy.init(ss,{});

    // scrollfire

    var options = {
        selector:'#search',
        offset:0,
        callback:'Materialize.fadeInImage("#follow")'
    }
    M.ScrollFire.init(options);
</script>
</html>

.section-search #autocomplete-input{
    padding:5px !important;
    width:90% !important;
    border:#f4f4f4 3px solid !important;
    font-size:18px !important;
}
.section-follow .fa-4x{
    margin:5px 10px;
}



Congratulations we are done making the Responsive Website in Materialize from scratch. from scratch. All the source code of the Application is available below to download. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.





About Author

Gautam Sharma

Developer, Tech. Evangalist.