Home
Fresco Play
HackerRank

HTML5 Semantic Elements Fresco Play Hands on Hacker Rank

HTML5 Semantic Elements Fresco Play Hands-On solution for HTML5 Elements, HTML5 Multimedia, HTML5 Graphics, HTML5 APIs, covered HTML/CSS/JS, questions
D Shwari
HTML5 Semantic Elements Fresco Play Hands on Hacker Rank - www.pdfcup.com

Kindly Note: If you had any problems, please comment below.

Note: You must complete the following steps to successfully complete this course Labs:
  • Step 1: Click the "Install" button at the top of your Hands-on Lab.
  • Step 2: Then, Click the PreView button, which is also located at the top of your Hands-on Lab.
HTML5 Semantic Elements Fresco Play Hands on solution Hacker Rank

LAB 1 : Welcome to Html5-header

Solution: Welcome to Html5-header

Solution: Welcome to Html5-header 

  
<!-- challenge/app/index.html-->  
<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
 //write your code here
 <header>
   <h1>WELCOME TO MY PAGE</h1>
 </header>
</body>
</html>  
    
/*Not require to use this css code, it's just for learning purpose.*/
*{
  margin: 0;
  padding: 0;
}
body {
	/*  background-image: url("https://farm6.staticflickr.com/5695/22447126166_2db1545ed4_b.jpg");*/
  background-size: inherit;
  background-position: center;
/*  background-color: orange;
*/
}
header{
	width: 100%;
	height: 80px;
	background-color: #cc6533;
	display: inline-block;
}

header a:hover{
	color: orange;
}
h1{
	margin-top: 30px;
	text-align: center;
	color:white
}

LAB 2: Welcome to html5-navigation

Solution: Welcome to html5-navigation

Solution: Welcome to html5-navigation

  
<!-- challenge/app/index.html-->  
  
  
<!DOCTYPE html>
<html>
<head>
<nav>
  <a href="#">Home</a> |
  <a href="#">Blogs</a> |
  <a href="#">Videos</a> |
  <a href="#">About Me</a>
</nav>
 
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
 
</body>
</html> 
    
/*Not require to use this css code, it's just for learning purpose.*/
*{
  margin: 0;
  padding: 0;
}
body {
 height: -webkit-fill-available;

} 
nav {
	width: 200px;
	height:inherit;
	background-color: #cc9865;
}
nav a{
	
  color: white;
  display: block;
  padding: 20px;
  text-decoration: none;
}
nav a:hover {
  background-color: #ccc;
}
hr{
	color:black
}

LAB 3: Welcome to Html5-footer

Solution: Welcome to Html5-footer

Solution: Welcome to Html5-footer

 <!-- challenge/app/index.html-->  
<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
  <footer>
	  <!--Kindly Complete the next line text.-->
    <p>Copyright @ T_ _ 2016</p>
  </footer>
</body>
</html>    
/*Not require to use this css code, it's just for learning purpose.*/

*{
  margin: 0;
  padding: 0;
}
body {
	position: relative;
	/*  background-image: url("https://farm6.staticflickr.com/5695/22447126166_2db1545ed4_b.jpg");*/

  background-position: center;
/*  background-color: orange;
*/
}
footer{
	bottom: 0;
	position: fixed;
	width: 100%;
	height: 80px;
	background-color: #cc6533;
	display: inline-block;
}


p{
	font-size: 30px;
	margin-top: 25px;
	text-align: center;
	color:white
}

LAB 4: Welcome to Html5-registration

Solution: Html5-registration

Solution: Html5-registration

 <!-- challenge/app/index.html-->  

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
 <h1>Registration Form</h1>
 <form>
  <label for="fname">Name:</label> 
  <input type="text" id="fname" name="fname"><br>
  <label for="Birth">Date of Birth:</label>
  <input type="date" id="Birth" name="Birth" placeholder="dd/mm/yyyy"><br>
  <label for="country">country:</label>
  <input list="country">
  <datalist id="country">
  <option>India</option>
  <option>United States</option>
  <option>United Kingdom</option>
  <option>Austraila</option>
  <option>France</option>
  </datalist><br>
  <label for="Phone">Phone number:</label>
  <input type="tel" id="Phone" name="Phone"><br>
  <label for="Email">Email:</label>
  <input type="email" id="Email" name="Email"><br>
  <label for="website">website:</label> 
  <input type="url" id="website" name="website"><br>
 </form>
</body>
</html>

/*Not require to use this css code, it's just for learning purpose.*/


body {
	/*  background-image: url("https://farm6.staticflickr.com/5695/22447126166_2db1545ed4_b.jpg");*/
 
 background-color: #e0d8cc;

}
header{
	width: 100%;
	height: 80px;
	background-color: #cc6533;
	display: inline-block;
}

header a:hover{
	color: orange;
}
h1{
	margin: 13px 15px 12px 13px;

	color:black
}
input{
	border: 1px solid #cc6533;
  border-radius: 4px 0px 0px 4px;
}
form{
	margin: 47px 0px 0px 34px;
}
#container{
	margin-left: 11px;
	width: 500px;
	height: 300px;
	border-radius: 4px;
	border: 1px solid #cc6533
}
button{
	border-radius: 4px;
    border: none;
    padding: 4px 9px 5px 10px;
    margin: 6px 0px 0px 452px;
    background-color: #cc6533;
}
select{
	border-radius: 0px 4px 4px 0px;
    border: none;
    background-color: #cc6533;
    padding: 1px;
}

LAB 5: Welcome to Html5-audioplayer

Solution: Welcome to Html5-audioplayer

Solution: Welcome to Html5-audioplayer

 
<!-- challenge/app/index.html-->  
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
 <audio controls>
  <source src="SampleAudio.mp3" type="audio/mp3" />
 </audio>
 <audio controls preload="none" >
  
  <source src="SampleAudio.mp3" type="audio/mp3" />
 </audio>
 <audio controls loop>
  <source src="SampleAudio.mp3" type="audio/mp3" />
 </audio>
</body>
</html>


/*Not require to use this css code, it's just for learning purpose.*/

*{
  margin: 0;
  padding: 0;
}
body {
    position: relative;
    /*  background-image: url("https://farm6.staticflickr.com/5695/22447126166_2db1545ed4_b.jpg");*/

  background-position: center;
/*  background-color: orange;
*/
}
footer{
    bottom: 0;
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: #cc6533;
    display: inline-block;
}


p{
    font-size: 30px;
    margin-top: 25px;
    text-align: center;
    color:white
}

LAB 6: Welcome to html5-video player

Solution: Welcome to html5-video player

Solution: Welcome to html5-video player

 
<!-- challenge/app/index.html-->  

<!DOCTYPE html>
<html><head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>

    <video  controls  width="320"  height="200" 
  autoplay >

    <source src="video.mp4" type="video/mp4" />
  </video>

     <video  controls  width="320" 
  height="200"   preload="none">

    <source src="video.mp4" type="video/mp4" />
  </video>

    <video  controls 
  poster="https://cdn12.picryl.com/photo/2016/12/31/lego-stones-plastic-education-8b9a7d-1024.jpg">

    <source src="video.mp4" type="video/mp4" />
  </video>
</body>
</html>

LAB 7: Welcome to html5 canvas.

Solution: Welcome to html5 canvas.

Solution: Welcome to html5 canvas.

<!-- challenge/app/index.html-->
 <!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">


  <script>
    function my_canvas(){
      obj=doument.getElementById('temp').getContext("2D");
      obj.fillStyle='red';
      obj.fillRect(20,20,200,100)
      obj.strokeRect(20,20,200,100)
    }
    window.onhold(my_canvas);
  </script>
</head>
<body>

    <canvas id='temp'  height="400" width="600"> 
  </canvas>

</body>
</html>
 <!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">


  <script>
    function my_canvas(){
      obj=doument.getElementById('temp').getContext("2D");
      obj.fillStyle='red';
      obj.fillRect(20,20,200,100)
      obj.strokeRect(20,20,200,100)
    }
    window.onhold(my_canvas);
  </script>
</head>
<body>

    <canvas id='temp'  height="400" width="600"> 
  </canvas>

</body>
</html>


/*Not require to use this css code, it's just for learning purpose.*/
*{
  margin: 0;
  padding: 0;
}
body {
	/*  background-image: url("https://farm6.staticflickr.com/5695/22447126166_2db1545ed4_b.jpg");*/
  background-size: inherit;
  background-position: center;
/*  background-color: orange;
*/
}
header{
	width: 100%;
	height: 80px;
	background-color: #cc6533;
	display: inline-block;
}

header a:hover{
	color: orange;
}
h1{
	margin-top: 30px;
	text-align: center;
	color:white
}

Toipc Covered:

HTML5 Semantic Elements handson fresco play answers

Fresco play HTML5 audio hands on answers

Mini project HTML CSS Fresco Play hands-on answers

HTML5 Semantic Elements Fresco Play MCQ

HTML5 canvas hackerrank solution fresco play

Fresco Play milestone challenge HTML5

HTML5 audio player hackerrank solution

About the author

D Shwari
I'm a professor at National University's Department of Computer Science. My main streams are data science and data analysis. Project management for many computer science-related sectors. Next working project on Al with deep Learning.....

Post a Comment