hi I’m new to web development but done some works in software development and I learned some html and css basics and want to try it out, so my question is how to set that html and css file and make a first testing website and if it’s possible for free
@rubyblaster43314,
You can develop on your own PC
- get yourself an editor
Here’s a list of some of the ones ( all free):
http://www.pnotepad.org/ ( favorite for quick scripts)
http://notepad-plus-plus.org/
http://brackets.io/
Also in use Visual studio
http://www.visualstudio.com/products/free-developer-offers-vs - create a HTML-file
and put in following code
<!DOCTYPE html>
<head><title>Rock,Paper,Scissors!</title>
<style>
h2 {
font-family:arial;
}
div {
border: 1px solid black;
height:20px;
width:180px;
text-align:center;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height:20px;
width:170px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
.uC {
background-color:red;
}
.cC {
background-color:white;
}
.result {
background-color:blue;
}
</style>
</head>
<body>
<!-- from Jquery - Modifying HTML Elements - 11. Click Da Button! Do It Naoughw! --></!-->
<h2>Rock Paper Scissors</h2>
<h5>Give your Choice (rock, paper, scissors)</h5>
<form name="checkListForm">
<input type="text,reset" name="checkListItem"/>
</form>
<div id="button">Show a Result</div>
<br/>
<div class="list" style="opacity: 0"></div>
<div class="uC"></div>
<div class="cC"></div>
<div class="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
//var userChoice = prompt("Do you choose rock, paper or scissors?");
var main = function() {
$('#button').click( function() {
var userChoice = $('input[name=checkListItem]').val();
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
}
else if(computerChoice <= 0.67) {
computerChoice = "paper";
}
else {
computerChoice = "scissors";
}
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
}
else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "Rock wins";
}
else {
return "Paper wins";
}
}
else if (choice1 === "paper") {
if (choice2 === "rock") {
return "Paper wins";
}
else {
return "Scissors wins";
}
}
else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "Rock wins";
}
else {
return "Scissors wins";
}
}
}
var result = compare(userChoice, computerChoice);
// var docString= "<p>User: " + userChoice + "</p>" +
// "<p>Computer: " + computerChoice + "</p>"+
// "<p>Result: " + result + "</p>"
// document.write( docString);
$('.uC').text("userChoice: " + userChoice);
$('.cC').text("computerChoice: " + computerChoice);
$('.result').text("Result: " + result);
$('input[name=checkListItem]').val("");
});
};
$(document).ready(main);
</script>
</body>
</html>
I can do the same work by myself and I’m using sublime text 3 but that is visiable only for me and I mean I want to do site where other people will visit it and see what i have built. Thanks for reply.
If you have static pages (which i guess you have, based on your description) i would read hosting on github pages, which makes it simply to host your page
1 Like