Web Development Basics Quiz

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the smallest space on a grid called?

Grid Gap

Grid Cell (correct)

Grid Track

Grid Line

Which property is used to create gaps between grid tracks?

gap

grid-width

grid-gap (correct)

track-space

What does the 'fr' unit represent in a grid layout?

Full row

Fraction of available space (correct)

Flexible range

Fixed ratio of width

Which function is used to repeat grid elements in CSS?

repeat() Signup and view all the answers

What is the main purpose of ECMAScript in relation to JavaScript?

To serve as a standard for JavaScript Signup and view all the answers

What is the primary function of the Domain Name System (DNS)?

It translates domain names into IP addresses. Signup and view all the answers

Which HTTP request method is commonly used to update a resource?

PUT Signup and view all the answers

What are web browsers primarily used for?

To locate, retrieve, and display content on the web. Signup and view all the answers

Who is credited with the creation of the World Wide Web?

Tim Berners-Lee Signup and view all the answers

What does a web server do?

Delivers web pages to clients on the internet. Signup and view all the answers

Which port is typically used by web browsers for HTTP connections?

80 Signup and view all the answers

What was a significant consequence of the Dot-Com Bubble?

The widespread failure of many internet companies. Signup and view all the answers

Which of the following is NOT an example of web browser software?

Apache Signup and view all the answers

How does absolute positioning differ from relative positioning in CSS?

Absolute positioning does not appear in the normal flow of the document. Signup and view all the answers

What is the main function of Flexbox in CSS?

To simplify the creation of complex, flexible layouts. Signup and view all the answers

Which property is used to define the direction of flex items in a Flex container?

flex-direction Signup and view all the answers

What does the 'justify-content' property control in a Flex container?

The space distribution between items along the main axis. Signup and view all the answers

How does the 'align-self' property in Flexbox differ from 'align-items'?

align-items applies to all flex items, while align-self applies to individual items. Signup and view all the answers

What is one of the main advantages of using Grid over traditional CSS layout methods?

It allows for responsive web design and adapts layouts using media queries. Signup and view all the answers

What does the 'gap' property in Flexbox and Grid layout control?

The shared space between flex or grid items. Signup and view all the answers

Which of the following values can be assigned to the 'flex-direction' property?

column-reverse Signup and view all the answers

Which statement accurately describes PHP?

PHP executes on the server side and returns HTML to the browser. Signup and view all the answers

What file extension is commonly used for PHP files?

.php Signup and view all the answers

Which of the following is a requirement to run PHP code?

A web server, such as Nginx or Apache. Signup and view all the answers

How does PHP handle requests from a browser for PHP files?

It executes the PHP code on the server and returns HTML output. Signup and view all the answers

What is the primary purpose of the Internet Protocol (IP)?

To specify the format of packets and the addressing scheme Signup and view all the answers

What is a characteristic feature of server-side scripting languages like PHP?

It is responsible for generating dynamic web pages. Signup and view all the answers

Which layer of the OSI model is responsible for data delivery reliability?

Transport Layer Signup and view all the answers

Which data type in PHP is correctly paired with its example?

Boolean: 0 Signup and view all the answers

What mechanism does Transmission Control Protocol (TCP) use to allow multiple data types to be sent simultaneously?

Multiplexing Signup and view all the answers

Which of the following statements about PHP tags is true?

You can omit the closing tag if the file contains only PHP code. Signup and view all the answers

Which of the following statements about the Internet is inaccurate?

The Internet is primarily under centralized control. Signup and view all the answers

What is the role of the Presentation Layer in the OSI model?

To ensure data is presented in a format usable by applications Signup and view all the answers

Which of these is NOT a server-side technology associated with web development?

JavaScript Signup and view all the answers

What is the function of a local IP address in networking?

To identify the device on the network using unique addressing Signup and view all the answers

Which OSI model layer handles the actual moving of data across a physical link?

Data Link Layer Signup and view all the answers

What does the lack of centralized control in the Internet facilitate?

Greater innovation in device creation Signup and view all the answers

What is the purpose of the preventDefault() method in JavaScript?

To cancel the default action of an event. Signup and view all the answers

Which of the following methods is NOT a way to attach an event in JavaScript?

Adding a CSS class. Signup and view all the answers

What will the following code output if the button is clicked? const btn = document.querySelector('button'); btn.addEventListener('click', function(event) { event.preventDefault(); console.log('Nope.'); });

'Nope.' Signup and view all the answers

What does the spread operator (...) do in JavaScript?

It expands elements in places where multiple values are needed. Signup and view all the answers

How is the rest operator used in JavaScript?

To grab additional arguments passed to a function. Signup and view all the answers

In the class definition below, what will rect.calcArea() return? class Rectangle { constructor(height, width) { this.height = height; this.width = width; } calcArea() { return this.height * this.width; } } let rect = new Rectangle(20, 40);

800 Signup and view all the answers

How can mouse events provide additional information?

By accessing mouse position properties. Signup and view all the answers

Which statement regarding event listeners is correct?

They are used to execute code when an event occurs. Signup and view all the answers

Study Notes

Introduction to the Internet

A connection of computers using the Internet Protocol (IP)
IP is the method by which data is sent from one computer to another on the internet
Key aspects include decentralized control, open standards (anyone can create a new internet device), and everyone can use it with simple software.

Internet Layered Architecture

OSI Model Layers: The internet uses layers to organize and process data in a structured way.
- Physical: Hardware for sending and receiving data (ethernet, modems, coaxial cables)
- Data Link: Handles data transfer between physical links on a network.
- Network: Determines the physical path data takes to its destination.
- Transport: Ensures data delivery reliability and error correction.
- Session: Manages the setup and termination of connections between communicating endpoints.
- Presentation: Transforms data into a format that the application layer can use (e.g., encryption).
- Application: Layer interacted with by web users (e.g., browser, email, ftp).

Internet Protocol (IP)

Specifies the format of packets (datagrams) and addressing scheme.
Local IP addresses are identified by commands such as ifconfig or ipconfig.

Transmission Control Protocol (TCP)

Adds multiplexing and guaranteed message delivery to the IP protocol.
Multiplexing allows sending different data types across a single communication channel.
TCP uses ports to assign each application a unique port number on a device, enabling multiple services to run simultaneously.
Multiple programs can use the same IP address on a given device.

World Wide Web (WWW)

Part of the internet that is accessible through websites.
Evolution through time from the 1960s-2000s, including the development of notable browsers such as Netscape Navigator and Internet Explorer.
Integral part of modern life
Web servers are computers serving web pages.
Web Browser software is used to locate, retrieve and display content.

Hypertext Transfer Protocol (HTTP)

Protocol that defines message formatting and transmission for web requests.
HTTP has methods for various tasks such as reading, creating, updating and deleting resources (GET, POST, PUT, PATCH etc.).
HTTP response codes show server status after handling a request(e.g., 200 OK, 404 Not Found, etc).
Mime Types help specify data types and content formats (e.g. text/html, text/plain).

Other Web Technologies

HTML : HyperText Markup Language - used for basic webpage structure
CSS : Cascading Style Sheets - used to style webpages
Javascript - used to control the behavior of web pages
PHP - Server-side language used to dynamically create web pages.

AJAX

Asynchronous JavaScript and XML (AJAX) makes it possible to update portions of a web page without refreshing the whole page.
XML, JSON used for representing data for fast and efficient exchange between computers.
SQL (Structured Query Language): a relational database language for asking, retrieving, or updating data in a structured way.

Javascript Basics

Types: Number, String, Boolean, Object, and Function. null and undefined are special values.
Operators: Arithmetic, comparison and logical (e.g. +,-,==, !=. ===, !==, &&, ||)
Control Structures: if/else, while, for loops.
Arrays: Ordered collections of values. Include operations such as push, pop, length to manipulate arrays.

Objects

Allows storage of values with named keys.
Access values using dot notation (object.key) or bracket notation (object["key"]).

Destructuring

Syntax that unpacks values from arrays or objects into distinct variables.

HTML

(Basic and important elements)

<h1> to <h6>: Headings of varying importance
: Paragraphs
<img>: Images (with attributes like src and alt)
<a>: Links for navigation
<div> and : Generic containers for grouping content

CSS (Cascading Style Sheets)

Used to style HTML elements. Includes selectors, properties, and values to control appearance.
Types of selectors include element selectors, id selectors, class selectors and pseudo-selectors like a:hover.

Layouts and Positioning

Normal flow: The default layout where each element takes its normal position.
Positioning: position properties (relative, absolute, fixed) allow for precise positioning of elements using top, bottom, left, and right

Flexbox and Grid Layouts

Flexbox lays elements out along a single axis.
Grid lays out elements on a two-dimensional grid(rows and columns)

HTTP Requests/Responses

HTTP is used for communications between web clients (browsers) and servers.
GET (for retrieving data), POST (for submitting data), and other types of operations like PUT (to update data) or DELETE.

PHP

PHP is a server-side scripting language used to create dynamic websites.

Database Management Systems(DBMS)

Relational database management systems (RDBMSs) organize data in tables with rows (records) and columns (fields).
SQL (Structured Query Language) is used to query, insert, update, and delete data within these systems.

SQL Queries

Select statements: retrieve data from tables (e.g., SELECT * FROM table_name).
Distincts clauses: filter for unique values.
Where clauses: filter rows by specific conditions (e.g., WHERE column='value').

SQL Joins

Combine data from multiple tables.
INNER JOIN, LEFT JOIN, RIGHT JOIN are different types of joins

Web Application Security

Issues such as Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and SQL Injection, need to be considered.
Methods like using parameters in queries, escaping user inputs and checking for input types are ways to reduce risk.

Sessions

Used to maintain state across multiple web page requests.

Security Principles

Trust nothing and nobody
Assume worst-case scenarios
Apply defense in depth
Principle of least privilege

Web Accessibility

Design for different user types, use WCAG standards, and ensure web content is usable and accessible for everyone.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge on essential web development concepts including CSS grid and Flexbox, as well as important web technologies like ECMAScript and DNS. This quiz covers key functionalities and definitions important for any aspiring web developer.