Test HTTP Requests Tools Blog PHP Quiz API Log In With Github
Test HTTP Requests Tools Blog PHP Quiz API Log In With Github
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

Beginners HTML/CSS/JS Quiz

Topic: HTML/CSS/JS Last updated on: 02-07-2017

This is a front-end code quiz for beginners. It contains questions about HTML, CSS, JavaScript and jQuery. Topics range from HTML standards or CSS properties and selectors... to basic JavaScript knowledge of data types, functions, etc.

1.What is wrong in this HTML code snippet: <img alt="Alt Text" title="title" class="preety" id="img1"> ?

2.Which of the following jQuery code snippets have the effect of changing the background color of "div" elements in a web page ?

3.By using CSS, how do you change the background of an element (.changeme), from transparent to #DDD, when the user hovers on a parent element (.parent) but not on the element itself ? The HTML is: <a href="#" class="parent">Some Text <span class="changeme">The text we need to change</span></a>

4.What will the code below do ? 

                    <script>
                      var programmingLanguages = ["PHP", "RUBY", "PEARL", "PYTHON"];
                      jQuery.each(programmingLanguages, function(i,v){
                        console.log(i, v);
                      });
                    </script>

5.Which of the following snippets can be used to display a string only to visitors that use an outdated version of Internet Explorer (Versions 1-8) ?

    <?php
    $isoldie = preg_match('/(?i)msie [1-8]/',$_SERVER['HTTP_USER_AGENT']);
    if($isIE)
      echo 'You are using an old IE version';
    ?>


    <!--[if lte IE 8]>
    You are using an old IE version
    <![endif]-->


    <?php
    $isoldie = get_browser(null, true);
    if($isoldie["majorver"] <= 8 and strtolower($isoldie["browser"])=='msie')
      echo 'You are using an old IE version';
    ?>

6.Considering the script below, what is the value of the "pricelist" variable ? 

  
  <script type="text/javascript">
  var cars = new Object;
  cars.brands = ["Mercedes", "Opel", "Rolls Royce"];
  cars.price  = [50000, 20000, 100000];
  for(i in cars.brands)
  {
    cars.b_and_p = "The " + cars.brands[i] + " is $" + cars.price[i];
  }
  var pricelist = cars.b_and_p;
  </script>

7.What is the form below used for ? 


  <form method="POST" enctype="multipart/form-data">
    <input type="file" name="image">
    <input type="submit" name="submit" value="submit">
  </form>

8.Which of the CSS rules below will make a div element stick to the bottom-right area of the page all the time ?

9.Which of the following are valid HTML or XHTML Doctype declarations ?

10.What does the <datalist> tag do ?

11.What method is used in HTML to display alternate content to a user that has scripts disabled in his browser ?

12.Which of the following statements are correct when dealing with data-* attributes in HTML ?

13.What is the computed width of a <div> element that has the following css properties ? 

  div {
    width:100px;
    height:100px;
    border:1px solid #000;
    padding:5px;
    box-sizing:border-box;
  }

14.The 'border-radius' property value can be defined in ...

15.Considering the snippet below, what happens when you hover over the red div element ? 

<style>
div {
  width:50px;
  height:50px;
  background:red;
  transition:all 2s;
  -webkit-transition:all 2s;
}

div:hover {
  width:100px;
  height:100px;
  background:blue;
}
</style>
<div></div>

16.What CSS rule is used to load non web safe fonts in a web page ?

17.Which of the following values are valid for the CSS3 background-clip property ?

18.What is the initial keyword used for in CSS ?

19.Assuming that "dir/dir/file.php" exists and that it returns "Success". What does the code below log to the console ? 


  <script>
        jQuery.ajax({
          url: "dir/dir/file.php",
          type: "POST",
          data: "x=value",
        }).done( function (r) {
          console.log(r);
        });
  </script>

20.Considering the code below, what happens when the page loads ? 


    <style>
      .one { width: 100px; height: 100px; }
    </style>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      (function( $ ) {
          $.fn.colorize = function() {
              this.each( function(){
                var color = '#'+Math.floor(Math.random()*16777215).toString(16);
                $(this).css({background: color});
                return this;
              });
          };
      }( jQuery ));
    jQuery('.one').colorize();
    </script>

21.What happens when you click on the 'Go' button ? 


  <input type="checkbox" name="check">
  <button>Go</button>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    jQuery('button').click(function(){
      jQuery('input[type="checkbox"]').prop('checked', function() {
        return !(jQuery(this).prop('checked'));
      });
    });
  </script>

22.Considering this HTML: <div class="myclass"></div>, which of the selectors below are correct ?

23.Having this HTML code:

<div id="myid" style="margin:10px; padding:10px; border:1px solid black; height:10px; width:10px;"></div> , what is the value of jQuery('#myid').outerHeight(true) ?

24.Considering the code below, what will happen when the input element will lose focus ? 


  <p>
    <input type="text" value="">
  </p>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    jQuery('p').focusout(function(){
      console.log('focusout');
    });
    jQuery('p').blur(function(){
      console.log('blur');
    });
  </script>

25.What is the best way (performance-wise) to append each element of an array(['banana', 'orange', 'apple']) to an existing list in an html document (jQuery('ul#mylist')) ?


  var fruit = ['Kiwi', 'Avocado', 'Pear'];
  var toAppend = '';
  jQuery.each(fruit, function(i, v){
    toAppend += "<li>" + v + "</li>";
  });
  jQuery( "#mylist" ).append(toAppend);




  var list = jQuery( "#mylist" );
  var parent = list.parent();
  var fruit = ['Banana', 'Orange', 'Apple'];
  var toAttach = '';
  list.detach();
    jQuery.each(fruit, function(i, v){
      toAttach += "<li>" + v + "</li>";
    });
  list.append(toAttach);
  parent.append(list);




  var fruit = ['Lime', 'Mango', 'Pineapple'];
  jQuery.each(fruit, function(i, v){
    jQuery( "#mylist" ).append("<li>" + v + "</li>");
  });

26.Which selector is faster ?

27.Which animation is smoother ?

28.How can jQuery access the 'name' property inside the object defined as the value of 'data-option' in the html tag below:
<div data-options='{"name":"John", "age":"40"}'></div> ?

Finish Quiz

© CodePunker.com 2025 :: API :: About / Contact :: CodePunker Hosting :: Terms and Conditions :: Privacy Policy