Basic Folder Structure for Project

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Project Folder Structure</title>
  <!-- importing reset and main css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti perferendis tenetur cupiditate placeat tempore nam
      commodi cum illum adipisci aliquam similique dolores nesciunt expedita debitis atque deserunt, repellendus hic vero?</p>
    <button class="clickMe">Click Me</button>
  </div>
  <!-- using jquery cdn -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
  <!-- importing main js -->
  <script src="js/main.js"></script>
</body>

</html>

CSS Code (main.css)
body {
  font: 14px/1.5 'Arial', sans-serif;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 640px;
}

h1 {
  font-size: 20px;
  color: #333;
  margin: 0 0 20px;
}

p {
  margin: 0 0 15px;
}

.clickMe {
  background: #555;
  border: none;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
}

CSS Code (reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

/* using border box */
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

JS Code (main.js)
$('.clickMe').click(function() {
  alert('Jquery works!!');
});

Video Tutorial

Share this

Related Posts