Module 1: Frontend development

Looking for ‘full stack web development module 1 answers‘?

In this post, I provide accurate answers and detailed explanations for Module 1: Frontend development of Course 5: Full Stack Web Development – Amazon Junior Software Developer Professional Certificate.

Whether you’re preparing for quizzes or brushing up on your knowledge, these insights will help you master the concepts effectively. Let’s dive into the correct answers and detailed explanations for each question.

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. Which operator checks if two variables are equal in value only?

  • ===
  • == ✅
  • !=
  • !==

Explanation:

  • The == operator compares the values of two variables after type conversion if necessary.
  • The === operator checks for both value and type equality (strict equality).

17. What is the correct syntax for opening a link in a new browser tab?

  • <a href=”page.html” target=”_blank”>Link</a> ✅
  • <a href=”page.html” new=”tab”>Link</a>
  • <a href=”page.html” open=”new”>Link</a>
  • <a href=”page.html” tab=”new”>Link</a>

Explanation:

  • The target="_blank" attribute specifies that the link should open in a new tab or window.
    Other options (new="tab", open="new", tab="new") are not valid HTML attributes.

18. Which tag represents a cell in a table?

  • <header>
  • <cell>
  • <tr>
  • <td> ✅

Explanation:

  • The <td> tag defines a table cell.
  • <header> is used for headings.
  • <tr> defines a table row.
  • <cell> is not a valid HTML tag.

19. Which <form> tag attribute specifies where form data should be submitted?

  • method
  • action ✅
  • type
  • name

Explanation:

  • The action attribute defines the URL where form data should be sent after submission.
  • method specifies the HTTP method (GET or POST).
  • type and name are used for input fields, not form submission.

20. The <table> tag in HTML is used to create both tables and lists.

  • False ✅
  • True

Explanation:

  • The <table> tag is exclusively used for creating tables.
  • Lists are created using <ul> (unordered list) or <ol> (ordered list) tags.

21. Which CSS selector selects all <p> tags within a with the ID container?

  • p #container
  • .container p
  • #container p ✅
  • container p

Explanation:

  • The selector #container p targets all <p> elements that are descendants of the <div> with the ID container.
  • .container p would select <p> tags within an element with a class of container.

22. Which property is used to control the space between Flexbox items?

  • align-content
  • flex-wrap
  • align-items
  • justify-content ✅

Explanation:

  • justify-content controls the horizontal spacing and alignment of Flexbox items.
  • align-items controls the vertical alignment.
  • align-content controls spacing for multi-line flex containers.
  • flex-wrap determines whether items wrap to the next line.

23. Which CSS property controls the space outside an element's border?

  • border
  • padding
  • margin ✅
  • outline

Explanation:

  • margin specifies the space outside an element’s border.
  • padding specifies the space inside the border.
  • border defines the width and style of the border.
  • outline is a line drawn outside the border and does not affect spacing.

24. How do you declare a constant in JavaScript?

  • let constName = 10;
  • var constName = 10;
  • const constName = 10; ✅
  • constant constName = 10;

Explanation:

  • The const keyword is used to declare a constant in JavaScript. Its value cannot be reassigned.
  • let and var declare variables that can be reassigned.
  • constant is not a valid keyword in JavaScript.

25. Why is a catch block used after a try block in JavaScript?

  • try { … } except { … }
  • try { … } error { … }
  • try { … } catch { … } ✅
  • try { … } ifError { … }

Explanation:

  • A catch block is used to handle errors that occur in the try block.
  • Syntax like try { ... } except { ... }, error { ... }, or ifError { ... } is not valid in JavaScript.

Related contents:

Module 2: Java web development
Module 3: Web APIs
Module 4: Final project and course wrap up

You might also like:

Course 1: Introduction to Software Development
Course 2: Programming with Java
Course 3: Data Structures and Algorithms
Course 4: Database Management with Java and SQL
Course 6: Generative AI in Software Development
Course 7: Application Development

Leave a Reply