Introduction: Making a Website All About You With Visual Studio (HTML, CSS, JQUERY)
Hey everyone!
This is my first instructable and in this instructable i'm going to show you how to use Visual Studio to create your own website!
Here's a download link for Visual Studio:
This could be broke when a new version is being released. But for now its still working and i try to keep it up to date.
Good luck and i hope you'll learn something about coding. If you liked my instructables, then please dont forget to vote for my instructables. I included a video about what you are going to make.
Step 1: Create Your Project
Click file, new, website. Then select "ASP.NET Web Forms Site"
Now you've created your project. You'll see very much code. In the bottom left there's a button called Design. If you click on it there's a webpage wich you can edit! In the next step you'll learn how to actually edit it.
Step 2: See Wich Tools You Have!
Now if you click on the text, you can edit it. You can also add buttons and text by clicking on Toolbox in the left. When you have clicked on it the will pop a screen up. There are all other options you can drag in by a simple drag & drop system. For example drag in a bulleted list on a place where you want it. When you've done that you can edit it by looking at the properties tab that is by default located in the very right bottom. When you scroll down into Misc. There is a propertie called Items. When you hover over it you see a small button with some dots in them. Click on it. There will pop up a screen. And under the tab Members click the button Add. Now you're adding list items. You see some options like enabled and selected. Just edit them like you want it. And add as many items as you would like. When you have a look at the toolbox again you'll see you can also select html buttons or ajax extensions.
Step 3: Creating a Website All About You!
Now we are going to create a website all about you. You can do this by using the toolbox and then the html forms or doing it all by code. I'm going to do it in code now because that is a bit more advanced. Now go to your solution explorer. And right-click on your project name. Select the option add and click on add new item. After that select HtmlPage. Note: There isn't a Design button for a html page but you can still use the toolbox for it.
So lets begin by adding The Style tags
<style></style>
inside those tags you can add css code. You don't have to add anything yet. Inside The title tag you can add your own title like
<title>My own website!</title>
My Own Website!
Inside the body tags is where you add buttons, text etc. Lets add a image about yourself. You can do this by adding the img tag or using the toolbox. to define wich image you're going to use add src="[Your link here.]". You also got to add height and width. Your tag should look something like this
<img src="http://bit.ly/KYvaEA" height="250" width="250">
Lets add some text by adding the tag
<p></p>
P stands for paragraph. Just add something inside P tags and you'll get text on your page. After we've done this add this code
<input type="email" placeholder="Email"> <input type="submit">
This code will add a text field wich has a placeholder email and a button where stands submit in your own language.
When you've done everything correctly you should get this webpage when you click on the green play button. (Look at the last image).
As you see it just need some style. and thats where we are going to use css for.
Nice this is it for html. Only adding css now :)
Step 4: Adding Some Style
css stand for Cascading Style Sheets. And is used for giving your webpage a bit more style.
Some things about the syntax of css. I'll show you a small code container of css:
input { background-color: red;
padding: 12px;
font-size: 18px;
}input means that we are adding this style to every element with the tag input. Then inside the curly brackets we define some things like background and border you can also define wich font o use.
So now we are going to add css to our page. We do this by adding the following code inside the style tags we created in the beginning of step 3.
body { text-align: center;
background: url("http://bit.ly/19naIXk");
color:white;
font-family: Helvetica;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
p {
font-size: 24px;
}
input {
border: 0;
padding: 12px;
font-size: 18px;
}
input[type="submit"] {
background: limegreen;
color: black;
}Replace the url after background with your own url.
This is how your code should look like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A website about me!</title>
<style>
body {
text-align: center;
background: url("http://bit.ly/19naIXk");
color:white;
font-family: Helvetica;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
p {
font-size: 24px;
}
input {
border: 0;
padding: 12px;
font-size: 18px;
}
input[type="submit"] {
background: limegreen;
color: black;
}
</style>
</head>
<body>
<img src="http://bit.ly/KYvaEA" width="250" height="250" />
<p>Hi, My name is ... and i like ... and ...</p>
<input type="email" placeholder="Email">
<input type="submit">
</body>
</html>Well Done! It's Done!
To see how beautifull you're website looks. you'll have to find a green play button and click on the arrow next to it. Then select Page Inspector To view it in visual studio otherwise select a browser you would like. After that just hit that green play button!
Step 5: Making It Your Own
Now we are going to make it your own.
Look at all the links you see in the html code and the css code(only inside the body container). You can easily see where they are used for. Change the url for your own image url. Thats it about the urls.
You can also add items inside the containers. For example you want the text to be bigger you would use this code:
p { font-size: 35px; }So you add
font-size: 35px;
to the p container. You can also add other things, i will show you a list of text customizations:
text-transform: lowercase; text-decoration: underline; text-align: right; color: blue; text-shadow: 2px 2px #ff0000; font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 900;
Try them by adding some in the P container. Just google for some css code and you will get tons of lines!
Step 6: Adding Social Media Buttons
We are going to add some social media buttons so they can also contact you via social media. There are two styles you can choose from (Look at the pictures). I've added GIF's so you can see them how they differ from each other. Hover your mouse over to see wich style it is. I like the first style the most, but the second is also beautiful.
So lets add them. For both versions you'll have to add the same html code
So add this code under the input tag with a type 'submit':
<br> <div id="social">
<a class="facebookBtn smGlobalBtn" href="#">
<a class="twitterBtn smGlobalBtn" href="#">
<a class="googleplusBtn smGlobalBtn" href="#">
<a class="linkedinBtn smGlobalBtn" href="#">
<a class="pinterestBtn smGlobalBtn" href="#">
<a class="tumblrBtn smGlobalBtn" href="#">
<a class="rssBtn smGlobalBtn" href="#">
</div>Replace '#' with your own url.
Now we have to include another css file(a font for the social media icons) we do this by adding the following line to the head tag:
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
In the style tag we'll have to add the following code:
#social {
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
} /* facebook button class*/
.facebookBtn{
background: #4060A5;
} .facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
} .facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
} /* twitter button class*/
.twitterBtn{
background: #00ABE3;
} .twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
} .twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
} /* google plus button class*/
.googleplusBtn{
background: #e64522;
} .googleplusBtn:before{
font-family: "FontAwesome";
content: "\f0d5"; /* add googleplus icon */
} .googleplusBtn:hover{
color: #e64522;
background: #fff;
border-color: #e64522;
} /* linkedin button class*/
.linkedinBtn{
background: #0094BC;
} .linkedinBtn:before{
font-family: "FontAwesome";
content: "\f0e1"; /* add linkedin icon */
} .linkedinBtn:hover{
color: #0094BC;
background: #fff;
border-color: #0094BC;
} /* pinterest button class*/
.pinterestBtn{
background: #cb2027;
} .pinterestBtn:before{
font-family: "FontAwesome";
content: "\f0d2"; /* add pinterest icon */
} .pinterestBtn:hover{
color: #cb2027;
background: #fff;
border-color: #cb2027;
} /* tumblr button class*/
.tumblrBtn{
background: #3a5876;
} .tumblrBtn:before{
font-family: "FontAwesome";
content: "\f173"; /* add tumblr icon */
} .tumblrBtn:hover{
color: #3a5876;
background: #fff;
border-color: #3a5876;
} /* rss button class*/
.rssBtn{
background: #e88845;
} .rssBtn:before{
font-family: "FontAwesome";
content: "\f09e"; /* add rss icon */
} .rssBtn:hover{
color: #e88845;
background: #fff;
border-color: #e88845;
}Now test your website site and you should see them just under the input forms. The ':hover' you see after a container means that when you hover your mouse over it has to use that code container.
Step 7: Adding Javascript (Jquery)
You can make your site even more beautiful by making it interactive. We are going to do this by adding Jquery. Jquery isn't a language but its a library written in Javascript. You can visit Jquery's official website by clicking on the link below.
You don't have to download it because we can link it using code.
Lets start by adding a acript link to jquery. Add this under the link tag we used last step.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
Then add script tags just under the thing you just added:
<script> </script>
Inside those tags we are going to add our javascript script. We first have to update our input type: 'submit'. We have to add class:'inputMail'. So our tag should look like this:
<input type="submit" class="inputMail">
Now we are going to add javascript inside the script tag. We start by adding this code into the script tag:
$(document).ready(function() {
});This means it will execute the function when the document is fully loaded. The $(document) means it searches for something called document, then it uses the function ready to check if the document is ready. Inside those brackets we put all our next Jquery code. So now we add the following code inside the brackets:
$('.inputMail').click(function() {
});
This code searches for a class named inputMail (the dot means it is a class where we are looking for). When Jquery found that object it will check if it is being clicked. When it is being clicked it executes the function. So inside that function we can let the button do a little trick. So for the trick we will add this code inside the function:
$('.inputMail').animate({height: '+=100px', opacity: '0.4'}, "slow");
$('.inputMail').animate({width: '+=100px', opacity: '1.0'}, "slow");
$('.inputMail').animate({height: '-=100px', opacity: '0.4'}, "slow");
$('.inputMail').animate({width: '-=100px', opacity: '1.0'}, "slow");Now it also looks for the class inputMail and it runs a custom animation. So lets check it out! This is how whole your script tag should look like:
<script>
$(document).ready(function () {
$('.inputMail').click(function () {
$('.inputMail').animate({ height: '+=100px', opacity: '0.4' }, "slow"); $('.inputMail').animate({ width: '+=100px', opacity: '1.0' }, "slow");
$('.inputMail').animate({ height: '-=100px', opacity: '0.4' }, "slow");
$('.inputMail').animate({ width: '-=100px', opacity: '1.0' }, "slow");
});
});
</script>Thats it! Nice! Next step we are going to look how to get the html file.
Step 8: Getting Your Html File
Now we are going to grab the html file(your webpage) and save it somewhere on your hard drive. This isn't a hard step and should only take a minute. We start by watching at our solution explorer and click on default.aspx or anything else thats inside your project name. Then you look at the property tab and search for a property called full path copy it except for the last file name. Paste the path into a file explorer and search for a file called HtmlPage.html or another name if you gave it another name. Copy the file and paste it somewhere on your hard drive. Open the file and you should get your page that you've made.
Congratulations!
You have created a website that is all about you!
Participated in the
Coded Creations
