Quotes help make search much faster. Example: "Practice Makes Perfect"

Saturday, February 15, 2014

Codecademy About You Exercises 18 to 20

<!-- sample solutions to Padding-->
<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    padding: 12px;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

<!-- sample solution to Bigger, Better Input -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>

<!-- sample solution to Bright Buttons! -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}
input[type="submit"] {
    background: limegreen;
    color: black;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
<input type="email" placeholder="Facebook Handle">
<input type="submit" value="Submit">

</body>
</html>
Posted by Nathan at 0 comments
Labels: , ,

Codecademy About You Exercises 13 to 17

<!-- sample solutions to Logo Image-->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solutions to Background Image -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solutions to Background Check -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solution to Font sizes -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>

<!-- sample solution to Remove Default Styles -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
}
input {
    border: 0;
}
p{
    font-size: 24px;
}
</style>
</head>
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>
This is a picture of an indifferent owl.
</p>
</body>
</html>
Posted by Nathan at 0 comments
Labels: , ,

Codecademy About You Exercises 10 to 12


<!-- sample solutions to Latest and Greatest-->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
}
</style>
</head>
<body>
   
</body>
</html>

<!-- sample solutions to Changing Color -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
}
</style>
</head>
<body>
This is sample text.   
</body>
</html>

<!-- sample solutions to Fonts -->

<!DOCTYPE html>
<head>
<style>
body {
    text-align: center;
    background-color: black;
    color: white;
    font-family: Helvetica;
}
</style>
</head>
<body>
This is sample text.   
</body>
</html>


Posted by Nathan at 0 comments
Labels: , ,

Codecademy About You Exercises 5 to 9

<!-- sample solutions to Adding Style-->

<style>

</style>

<!-- sample solutions to Center your Heading-->

<style>
h1 {
    text-align: center;
}
</style>

<!-- sample solutions to Center your Paragraph-->

<style>
h1, p {
    text-align: center;
}
</style>

<!-- sample solutions to Work Your Body-->

<style>
body {
    text-align: center;
}
</style>
<body>
   
</body>

<!-- sample solutions to Good Head on your Shoulders-->

<head>
<style>
body {
    text-align: center;
}
</style>
</head>
<body>
   
</body>
Posted by Nathan at 0 comments
Labels: , ,

Codecademy About You Exercises 1 to 4


<!-- sample solutions to Welcome to HTML! -->

<h1>Bruce Wayne</h1>

<!-- sample solutions to Speak in Paragraphs -->

<h1>Bruce Wayne</h1>
<p>When he was a child, Bruce Wayne's parents were shot and killed during a robbery. This would be the driving force in Bruce's quest to bring justice to the streets of Gotham City as the Dark Knight.</p>

<!-- sample solutions to Asking for Input -->

<h1>Bruce Wayne</h1>
<p>When he was a child, Bruce Wayne's parents were shot and killed during a robbery. This would be the driving force in Bruce's quest to bring justice to the streets of Gotham City as the Dark Knight.</p>
<input type="email">
<input type="submit">

<!-- sample solutions to Placeholders -->

<h1>Bruce Wayne</h1>
<p>When he was a child, Bruce Wayne's parents were shot and killed during a robbery. This would be the driving force in Bruce's quest to bring justice to the streets of Gotham City as the Dark Knight.</p>
<input type="email" placeholder="Email">
<input type="submit">
Posted by Nathan at 0 comments
Labels: ,

Thursday, February 6, 2014

Codecademy Deezer API 4/6

<!-- Sample Solution -->

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn-files.deezer.com/js/min/dz.js"></script>
</head>

<body>
    <div id="dz-root"></div>
   
    <input type="button" onclick="search();" value="Search"/>
    <ul id="results">
    </ul>
   
    <script>
        DZ.init({
            appId  : '122865',
            channelUrl : 'http://external.codecademy.com/channel.html',
        });

        function search(){
            DZ.api('/search?q=sting', function(json){
                for (var i=0, len = json.data.length; i<len ; i++)
                {
                  $('#results').append('<li>' + json.data[i].title + ' - ' + json.data[i].album.title + '</li>');
                }
            });
        }
    </script>
</body>
</html>
Posted by Nathan at 0 comments
Labels:

Codecademy Deezer API 3/6

<!--Sample Solution-->

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn-files.deezer.com/js/min/dz.js"></script>
</head>

<body>
    <div id='dz-root'></div>
    <input type="button" value="Play" onclick=DZ.player.playAlbum(6125830);
    />
    <script>
        DZ.init({
            appId  : '122865',
            channelUrl : 'http://external.codecademy.com/channel.html',
            player: {
                onload: function () {}
            }
        });
    </script>
</body>
</html>
Posted by Nathan at 0 comments
Labels:
Subscribe to: Posts (Atom)

This is an example of scrolling text using Javascript.

Popular Posts