#Landing Page
Create your own landing page. Whenever you open your internet browser you can chose what to show.
Websites are made of HTML, CSS and JavaScript. You are going to learn about all 3 today.
Start by working through this turotial which will give you an introduction to web design.
When you have completed the introduction return to this page and continue the tutorial.
To create your own website you need to edit the code.
- Download Sublime Text to get started.
- Install Sublime Text
- Open Sublime Text to get started
Lets create your first website using the code bellow
- Paste this code into Sublime Text
- Save your file on your Desktop and call it
index.html - Double click
index.htmlto open the file in your browser
<html>
<head>
<title>My's Landing Page</title>
</head>
<body>
Hello World!
</body>
</html>Change your <body></body> tag to look like the following code
<body>
<div class="greeting">
<h1>Hello</h1>
</div>
</body>The class="greeting" is used in the next section.
Save your work and reload your page, how does your website look?
Have a look at this turotial to get started with how CSS works.
Change your <head></head> tag to look like the following code
<head>
<title>My's Landing Page</title>
<style type="text/css">
body {
background-color: red;
}
</style>
</head>Reload your page and have a look how it has changed, this changes the color of the page.
To make your greeting more elegant change your <style></style> tag to look the following code
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
background-color: red;
}
.greeting {
margin: auto;
padding: 100px;
text-align: center;
}
</style>Red is not a very nice background for your landing page. Lets change that.
Have a look at this link https://unsplash.it/1280/800/?random
Each time you access this link it provides a random image.
Try changing the numbers and see how the image changes
Change your <style></style> tag to look the following code
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
background-image: url("https://unsplash.it/1280/800/?random");
background-size: cover;
}
.greeting {
margin: auto;
padding: 100px;
text-align: center;
}
</style>Reload your page and have a look how it has changed.
We are going to include a quote of the day on your website
Add the following lines to the <head></head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.get( "http://api.theysaidso.com/qod.json", function( data ) {
var quotes = data.contents.quotes;
$('#quote').html(quotes[0].quote)
$('#author').html(quotes[0].author)
});
</script>Add the following lines to the <head></head> tag.
<div class="quote">
<h2 id="quote"></h2>
<h3 id="author"></h3>
</div>You have created the basic web page. Now its time to cutomize it for yourself.
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
background-image: url("https://unsplash.it/1280/800/?random");
background-size: cover;
}
.greeting {
color: blue;
font-size: 60px;
margin: auto;
padding: 100px;
text-align: center;
}
.quote {
color: orange;
margin: auto;
width: 50%;
text-align: center;
}
</style>http://webdesign.tutsplus.com/series/web-design-for-kids--cms-823 https://www.codecademy.com/skills/make-a-website