Web Developer – Test 1

Test level: Beginner (Basic questions about Web Services and Web principles)

Test time: (max) 45 minute

Questions:

1. Similarities and differences between XML and JSON and their usage. (Think of Web Services and applications)

2. The following URI is given:

https://www.something.biz/#4629?query=?&pass=cookie

Explain its components.

3. What are MIME types. Can you give some examples of MIME types and their usage?

4. How would two Web Services, one SOAP the other REST, differ from each other?

5. (Follow up to the previous question) What are the key components of these two Web Services (one SOAP and one REST)? — how would you design each.

6. What do CRUD, HTTP and persistent storage have in common?

7. POST/Redirect/GET is a web development design pattern used when/in the context of …. (complete the statement)

8. HEAD and GET are both HTTP safe methods but the main difference between them is that … (complete the statement)

9. cookies and sessions what are they all about. (usage and differences)

10. (Bonus question) Same-origin Policy and JSONP — what do they have in common.

DOM and Javascript – Test 1

Test level: Beginner – Mid-Intermediate

Test time: (max) 30 minute

Questions:

1. Explain DOM bubbling and capture.

2. What is the difference between ‘==’ and ‘===’ ? (classic JavaScript question)

3. What does “1”+5+2 evaluate to? What about 6 + 3 + “8”?

4. What is the difference between ‘undefined’ value and ‘null’ value?

5. Difference between ‘window.onload’ and ‘document.onload’? What about the ‘onDocumentReady’ (‘DOMContentLoaded’)?

6. What are Javascript closures ?When would you use them?

7. What is the difference between:

1. 
<button id="myButton" onclick="alert('hello!');"> Say Hello! </button>

2. 
document.getElementById('myButton').onclick = function(){
    alert('Hello!');
}

3. 
var el = document.getElementById('myButton')
el.addEventListener( 'click', function(){
     alert('Hello!');
}, false);

8. What is Javascript namespacing? Why and where would you use it?

9. How would you alert the string ‘foobar’ after a 10 second delay. (simple yet effective task)

10. What’s the difference between these two statements:

var x = 5;
x = 5;

HTML and CSS – Test 1

Test level: Beginner – Mid-Intermediate

Test time: (max) 30 minute

Questions:

1. If someone asked you to characterize the Web in 3 words, how would you respond?

2. How many tags/elements are required to build a web page?
(Hint: web page vs web Document; HTML tags vs HTML elements)

3. What is your favourite DOCTYPE and why?

4. True or false:

  • header is similar with the head element.
  • nav and header are sectioning elements.
  • hgroup is used to group h1-h6 elements.
  • nav and menu elements have the same functionality.

(Hint: http://www.w3.org/html/wg/drafts/html/master/dom.html )

5. What is the difference between: display:none; visibility:hidden; and hidden HTML attribute?

6. List some useful HTML(5) attributes (explain why they are useful, max. 5 attributes).

7. List some of the CSS position values, and explain their functionality.

8. What is the difference between CSS transitions and CSS animations?

9. consider the following HTML excerpt:

1  <ul>
2   <li> First element </li>
3   <li> Second element <li> <!-- We want to color this li here red -->
4   <li> Third element <li>
5  </ul>

Which one of the following CSS rules are correct:

1    ul :first-child + li {color: red;}
2    li:first-of-type + li {color: red;}
3    li:first-child ~ li {color:red;}
4    li:nth-child(2) {color:red}
5    ul > :first-of-type + li {color:red;}

6    ul :nth-child(even) {color:red;}
7    ul > li:not(:nth-child(odd)) {color:red;}

10.  We want to achieve this formatting inside a Web page:

Which of the following CSS rules are correct:

1    blockquote::before {content: ' ” '; font-size: 4em; position:absolute; left:2px; top:5px;} 
2    blockquote:before {content: ' ” '; font-size: 4em; position:absolute; left:2px; top:5px;}
3    blockquote::before {content: ' &rdquo; '; font-size: 4em; position:absolute; left:2px; top:5px;}
4    blockquote ~ :before {content: ' &rdquo; '; font-size: 4em; position:absolute; left:2px; top:5px;}
5    blockquote:before {content: ' \201D '; font-size: 4em; position:absolute; left:2px; top:5px;}

New Test Category

As of this month (January 2014) I will be introducing a new category of post on IdeaSource website namely the Tests category which will include a series of questions with different levels of difficulty (Beginner – Intermediate – Advanced) from different areas such as:

  • (X)HTML/HTML5
  • HTML5 API’s
  • CSS/CSS3
  • Web Design
  • UX/IxD
  • Semantic Web
  • OWL
  • RDF/RDFS
  • XML/JSON
  • SVG
  • JAVASCRIPT
  • maybe Javascript libraries (I will see if possible).

I will post the tests as often as I find the time (starting next week). The answers will only be available if a lot of people request them (give me a reply on twitter for that).

The idea behind this new category is to prepare people for job interviews in the fields of UX/IxD, Web, Semantic Web, Front-End development.

Another good resource to review regarding job interviews is: http://glassdoor.com/

New project ideas will be posted as I find the time to do so.

Test Generator

Creating tests for your students sounds like a simple (repetitive) task. How about an application that facilitates this repetitive task.

Using the application you will be able to add different questions, exercises and tasks and label them according to their difficulty level, their time to complete, their type (multiple choice, fill in the blanks, true/false etc.). Based on these labels a professor will be able to generate tests for his students by selecting the difficulty level and the time for the test. He can also adjust or add new questions/exercises/tasks.

  • Requirements:
  • Programming Skill Level: Beginner to Intermediate;
  • Designer Skill Level: Beginner to Intermediate;
  • Other Skills: ;
  • Similar projects: probably there are a few but I couldn’t find them.