Website


#1



https://www.codecademy.com/en/courses/web-beginner-en-zmn0b/0/8?content_from=make-an-interactive-website%3Ayour-first-program


I tried to make kinda a website with notepad++ and saved it as .html so i could see it on chrome, but everything works fine till i got to javascript it wont load... i have even made a notepad++ and copied everything just like from the lesson but then it even wont work... (i got 3 diffrent tabs one with skelet.html, app.js (tried with app.html too) and style.css)


<--Html-->: <!DOCTYPE html>
	<html>
		<head>
			<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
			<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
			<link type="text/css"rel="stylesheet" href="stylesheet.css"/>
		</head>
			<body>
			
				<div class="menu">
					
					<div class="icon-close">
						<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
					</div>
						
						<ul>
							<li><a href="#">Computer</a></li>
							<li><a href="#">Televisie</a></li>
							<li><a href="#">Telefoon</a></li>
							<li><a href="#">Wasmachine</a></li>
							<li><a href="#">Vuurwapens</a></li>
						</ul>
					</div>
				
				<div class="jumbotron">

				<div class="icon-menu">
					<i class="fa fa-bars"></i>
					Menu
				</div>
    
				<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
				<script src="app.js"></script>
			</body>
		</html>

<--CSS-->: body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/*.head {
	margin-left: 650px;
	margin-right: 650px;
	font-family: Cursive;
	font-size: 48px;
	border: 2px solid black;
	border-width: 3px;
	text-align: center;
}*/

.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

.jumbotron {
  background-image: url('http://www.webdeveloppementdurable.com/wp-content/uploads/technologies.jpg'); 
  height: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
		  clear: right;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}

<--javascript-->: var main = function() {
  /* Push the body and the nav over by 285px over */
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

withing the <-- ... --> isnt there, but so you know the code.


#2

@xxcutycatxx
If you use //, you are trying to access the cache of codecademy....
So change your

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

into

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

and
your stylesheet.css and app.js should be in the same directory as your HTML file....


#3

they are in the same map, but if i paste them both in one file on notepad ++ they wont work at all
And changing the links didnt work


#4

@xxcutycatxx,
In Notepad
[file] -> new
[language] ->HTML
[file]-> Save-as.....
then paste in

<!DOCTYPE html>
<html>
 <head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
  <link type="text/css"rel="stylesheet" href="stylesheet.css"/>
  <style>
    body {
      left: 0;
      margin: 0;
      overflow: hidden;
      position: relative;
    }

    /*.head {
      margin-left: 650px;
      margin-right: 650px;
      font-family: Cursive;
      font-size: 48px;
      border: 2px solid black;
      border-width: 3px;
      text-align: center;
    }*/

    .menu {
       background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
       left: -285px;  /* start off behind the scenes */
       height: 100%;
       position: fixed;
       width: 285px;
    }

    .jumbotron {
       background-image: url('http://www.webdeveloppementdurable.com/wp-content/uploads/technologies.jpg'); 
       height: 100%;
       -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
       clear: right;
    }
    .menu ul {
       border-top: 1px solid #636366;
       list-style: none;
       margin: 0;
       padding: 0;
    }

    .menu li {
       border-bottom: 1px solid #636366;
       font-family: 'Open Sans', sans-serif;
       line-height: 45px;
       padding-bottom: 3px;
       padding-left: 20px;
       padding-top: 3px;
    }

    .menu a {
       color: #fff;
       font-size: 15px;
       text-decoration: none;
       text-transform: uppercase;
    }

    .icon-close {
       cursor: pointer;
       padding-left: 10px;
       padding-top: 10px;
    }

    .icon-menu {
       color: #fff;
       cursor: pointer;
       font-family: 'Open Sans', sans-serif;
       font-size: 16px;
       padding-bottom: 25px;
       padding-left: 25px;
       padding-top: 25px;
       text-decoration: none;
       text-transform: uppercase;
    }

    .icon-menu i {
       margin-right: 5px;
    }
  </style>
 </head>
 <body>
   <div class="menu">
     <div class="icon-close">
       <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
     </div>
     <ul>
       <li><a href="#">Computer</a></li>
       <li><a href="#">Televisie</a></li>
       <li><a href="#">Telefoon</a></li>
       <li><a href="#">Wasmachine</a></li>
       <li><a href="#">Lollies</a></li>
     </ul>
   </div>
   <div class="jumbotron">
     <div class="icon-menu">
       <i class="fa fa-bars"></i>
       Menu
     </div>
   </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!--<script src="app.js"></script>-->
  <script>
    alert("==executing script==");
    var main = function() {
      /* Push the body and the nav over by 285px over */
      $('.icon-menu').click(function() {
        $('.menu').animate({left: "0px"}, 200);
        $('body').animate({left: "285px"}, 200);
      });

      /* Then push them back */
      $('.icon-close').click(function() {
        $('.menu').animate({left: "-285px"}, 200);
        $('body').animate({left: "0px"}, 200);
      });
	  alert("==executed main==")
    };
    $(document).ready(main);
  </script>
 </body>
</html>

then
[file] -> save....


#5

thank you so much!!
It works now!


#6

@xxcutycatxx
Heb je de lollies gevonden....


#7

ja hahaah xD
doe dit voor school project.. ben niet zo goed in coderen nog, kan t een beetje sinds een week.. heel erg bedankt :smiley: