Module 1: Frontend development

Knowledge check: Creating web pages with HTML

Practice Assignment

1. Which of the following are examples of a semantic tag? Select all that apply.

  • <main>
  • <section>
  • <nav>
  • <div>

Explanation:
Semantic tags clearly define the purpose of the content in HTML. Tags like <main>, <section>, and <nav> are semantic because they describe their roles in the document structure. <div>, on the other hand, is a non-semantic tag as it does not convey any meaning about its content.

2. Which of the following are the attributes of the tag? Select all that apply.

  • href
  • alt
  • width
  • src

Explanation:

  • alt: Provides alternative text for the image (important for accessibility).
  • width: Specifies the width of the image.
  • src: Specifies the path to the image file.
  • href is not an attribute of <img> but of the <a> tag.

3. True or False: The declaration tells the browser to render the document using the latest HTML5 standards .

  • True
  • False

Explanation:
The <!DOCTYPE html> declaration ensures the browser renders the document in standards mode using the HTML5 specifications.

4. In which of the following statements, is the syntax of forming a hyperlink correct? Select all that apply.

  • <a src=”hello.html”>click here</a>
  • <a href=”hello.html”>click here</a>
  • <a href=”#hello”>click here</a>
  • <a target=”hello.html”>click here</a>

Explanation:

  • <a href="hello.html">: Links to an external file named “hello.html”.
  • <a href="#hello">: Links to an element with the ID “hello” within the same page.
  • <a src="hello.html">: Incorrect, as src is not a valid attribute for <a>.
  • <a target="hello.html">: Incorrect, as target is used to specify where to open the linked document (e.g., _blank).

5. You are trying to design an HTML table with two columns having a common heading so that it is rendered as follows:

Which of the following HTML scripts will create the desired output?

Explanation:

  • The colspan="2" attribute merges two columns under the “Subjects” heading.
  • Other scripts either miss the colspan attribute or use incorrect syntax.

Knowledge check: Styling the page

Practice Assignment

6. When designing a website, to ensure consistent styling across multiple pages, which approach is best for applying and updating styles efficiently?

  • Using external styles with internal styles.
  • Using inline styles on every HTML element.
  • Using internal stylesheets in each HTML document.
  • Using an external stylesheet.

Explanation:
Using an external stylesheet ensures consistent styling across multiple pages. By linking a single CSS file to all pages, updates can be made in one place, and the changes will reflect across the entire website. Other approaches, such as inline styles or internal stylesheets, are less efficient and harder to maintain.

7. True or False: If both inline styles and an external stylesheet are applied to the same element, the inline styles will override the external styles.

  • True
  • False

Explanation:
Inline styles have a higher specificity than external stylesheets, so they take precedence when both are applied to the same element. To override inline styles, you can use !important in the external stylesheet.

8. Which of the following are valid CSS selectors? Select all that apply.

  • Element selector
  • ID selector ( #)
  • Class selector ( . )
  • Pseudo-element selector ( ::)

Explanation:

  • Element selector targets all elements of a specific type (e.g., p {} applies to all <p> tags).
  • ID selector (#) targets elements with a specific id (e.g., #header {}).
  • Class selector (.) targets elements with a specific class (e.g., .button {}).
  • Pseudo-element selector (::) targets specific parts of elements, such as ::before or ::after.

9. Given the following HTML code, which CSS property would you use to change the text color of the paragraph?

<p>This is a sample text.</p>

  • text-decoration
  • background-color
  • font-style
  • color

Explanation:
The color property changes the text color of an element. Other options:

  • text-decoration: Changes text decoration (e.g., underline, overline).
  • background-color: Changes the background color of the element.
  • font-style: Changes the text style (e.g., italic).

10. To create a navigation bar that resizes and realigns items based on the user’s screen size, which CSS layout method would you use?

  • Grid
  • Inline styles
  • Media queries
  • Flexbox

Explanation:

Flexbox is specifically designed for flexible and responsive layout control, making it ideal for creating navigation bars that adjust and realign items based on screen size. It allows elements to align dynamically and handles resizing efficiently.

Knowledge check: Frontend development

Practice Assignment

11. What does the following code output?

let arr = [5, 10, 15];
arr.push(20);
arr.shift();
console.log(arr);

  • [5, 10, 15]
  • [5, 10, 15, 20]
  • [10, 15, 20]
  • [10, 15]

Explanation:

  1. The array starts as [5, 10, 15].
  2. arr.push(20) adds 20 to the end of the array: [5, 10, 15, 20].
  3. arr.shift() removes the first element (5) from the array: [10, 15, 20].
  4. console.log(arr) outputs [10, 15, 20].

12. Which of the following statements correctly describes the purpose of a try-catch-finally block in JavaScript?

  • To check for syntax errors only during execution
  • To catch and handle runtime errors, with optional cleanup in finally
  • To execute code regardless of errors
  • To check syntax errors during compilation

Explanation:

  • try contains code that might throw an error during execution.
  • catch is executed if an error is thrown, allowing you to handle it gracefully.
  • finally contains code that runs regardless of whether an error occurred or not (e.g., cleanup actions).
    This structure is used for error handling, not syntax checking or unconditional execution.

13. What will console.log(0.1 + 0.2 === 0.3); output?

  • True
  • False

Explanation:
Due to floating-point precision issues in JavaScript, 0.1 + 0.2 does not equal 0.3 exactly. Instead, it evaluates to 0.30000000000000004. Thus, the comparison 0.1 + 0.2 === 0.3 returns false.

14. Which of the following correctly defines an object in JavaScript?

  • let person = (name: “Alice”, age: 30);
  • let person = “name: Alice, age: 30”;
  • let person = {name: “Alice”, age: 30};
  • let person = [“Alice”, 30];

Explanation:
An object in JavaScript is defined using curly braces {} with key-value pairs.
Other options:

  • (name: "Alice", age: 30) is invalid syntax.
  • "name: Alice, age: 30" is a string, not an object.
  • ["Alice", 30] is an array, not an object.

15. Which of the following are features of a JavaScript framework? Select all that apply.

  • Application flow control
  • Structured development patterns
  • Code compilation and hardware optimization
  • Built-in development tools

Explanation:

  • Application flow control: Frameworks manage the sequence and logic of application operations.
  • Structured development patterns: Frameworks promote organized code with design patterns like MVC (Model-View-Controller).
  • Built-in development tools: Frameworks often include utilities like debuggers, linters, or testing tools.
  • Code compilation and hardware optimization is not a feature of JavaScript frameworks but pertains to low-level programming tools or languages like C++.

Module quiz: Frontend development

Practice Assignment

16.

  •  

Leave a Reply