Gallery
Share
Explore

Web Technologies Quiz 1: Study Syllabus and Practice Questions


Study Syllabus

1. HTML (HyperText Markup Language)

Basic Structure:
Understanding the basic HTML document structure (doctype, html, head, body).
Common elements: headings, paragraphs, links, images, lists.
Semantic HTML: <header>, <nav>, <main>, <section>, <article>, <footer>.
Attributes and Elements:
Global attributes (id, class, style, data-*).
Inline elements vs. block elements.
Forms: input types, labels, form attributes (action, method).

2. CSS (Cascading Style Sheets)

Basic Syntax:
Selectors (element, class, id, attribute, pseudo-classes).
Properties and values (color, background, margin, padding, border).
Box Model:
Understanding content, padding, border, and margin.
Box-sizing property.
Layouts:
Flexbox: main axis, cross axis, container properties (justify-content, align-items), item properties (flex, align-self).
Grid: container properties (grid-template-columns, grid-template-rows), item properties (grid-column, grid-row).
Responsive Design:
Media queries.
Responsive units (%, em, rem, vh, vw).

Practice Questions

HTML Practice Questions:
Write the basic structure of an HTML document.
What is the purpose of semantic HTML elements? Provide examples of five semantic elements.
Create a simple HTML form with fields for name, email, and a submit button.
CSS Practice Questions:
Explain the CSS box model with a diagram.
Write CSS to center a div horizontally and vertically using Flexbox.
How do media queries work? Write a media query to change the background color of the body to light blue when the screen width is less than 600px.

Comprehensive Practice Questions:
Create a simple webpage with a header, navigation menu, main content area, and footer. Use Flexbox for layout and include a responsive design that changes the layout for smaller screens.

Example Answers

HTML Example Answer:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Structure</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Main Content</h2>
<p>This is the main content of the webpage.</p>
</section>
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>

CSS Example Answer:
css
Copy code
/* Centering a div using Flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Media query example */
body {
background-color: white;
}

@media (max-width: 600px) {
body {
background-color: lightblue;
}
}


Additional Resources

HTML:
MDN HTML Documentation
⁠
⁠
CSS:
MDN CSS Documentation
⁠
⁠
JavaScript:
MDN JavaScript Documentation
⁠
⁠
Git:
Git Documentation
⁠
⁠
Good luck with your studies! Make sure to practice coding regularly and review the documentation to reinforce your understanding.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.