Full Stack Web Development Web Fundamentals & HTML5 Syllabus

Web Fundamentals & HTML5 syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Web Fundamentals & HTML5 in Full Stack Web Development, not a summary of it.

1. 1

   How the Web Works

   4 topics

   • Client-Server Architecture
     • Web browsers and web servers
     • Request-response cycle
     • Front-end vs back-end roles
   • HTTP and HTTPS Protocols
     • HTTP methods (GET, POST, PUT, DELETE)
     • Status codes (2xx, 3xx, 4xx, 5xx)
     • Request and response headers
     • TLS/SSL and HTTPS security
   • URLs, Domains and DNS
     • URL structure and query strings
     • Domain name resolution
     • Web hosting and IP addresses
   • Browser Rendering Pipeline
     • Parsing HTML into the DOM
     • CSSOM and render tree
     • Layout, paint and composite
2. 2

   HTML Document Structure

   4 topics

   • Anatomy of an HTML Document
     • DOCTYPE declaration
     • head, body and metadata tags
     • Character encoding and viewport
   • Text and Content Elements
     • Headings and paragraphs
     • Lists (ordered, unordered, definition)
     • Links, anchors and navigation
     • Images and the figure element
   • Tables and Tabular Data
     • table, tr, td and th
     • thead, tbody and tfoot
     • Spanning rows and columns
   • Inline vs Block-level Elements
     • div and span containers
     • Default display behaviour
3. 3

   Forms and User Input

   3 topics

   • Form Structure and Submission
     • form action and method attributes
     • Input types (text, email, number, date)
     • Labels and accessibility
   • Form Controls
     • Checkboxes and radio buttons
     • Select dropdowns and option groups
     • Textarea and buttons
   • Client-side Validation
     • required, pattern and min/max
     • Built-in validation messages
4. 4

   Semantic HTML and Accessibility

   4 topics

   • Semantic Structural Elements
     • header, nav, main, footer
     • article, section and aside
   • Multimedia Elements
     • audio and video tags
     • Embedding with iframe
   • Web Accessibility (a11y)
     • ARIA roles and attributes
     • Alt text and keyboard navigation
     • WCAG guidelines overview
   • SEO-friendly Markup
     • Meta tags and descriptions
     • Open Graph basics

Web Fundamentals & HTML5 flashcards for Full Stack Web Development

23 of 51 cards from the Web Fundamentals & HTML5 deck — real questions with worked answers.

1. In the client-server model, what is the defining role of the client versus the server?

   The client initiates requests for resources or services; the server listens for requests and responds with the requested resource or result. The client drives the interaction, the server fulfills it.

2. What does the term 'stateless' mean in the context of HTTP, and how is state preserved across requests?

   Each HTTP request is independent and the server retains no memory of previous requests. State is preserved using cookies, sessions, tokens, or URL parameters.

3. List the most common HTTP request methods and the primary purpose of each (GET, POST, PUT, PATCH, DELETE).

   GET = retrieve data; POST = create/submit data; PUT = replace a resource entirely; PATCH = partially update a resource; DELETE = remove a resource.

4. What is the key security difference between HTTP and HTTPS?

   HTTPS encrypts traffic using TLS/SSL, providing confidentiality, integrity, and server authentication. Plain HTTP sends data in cleartext, making it readable and tamperable.

5. Which TCP ports are conventionally used by HTTP and HTTPS?

   HTTP uses port 80; HTTPS uses port 443.

6. What do the HTTP status code classes 2xx, 3xx, 4xx, and 5xx each indicate?

   2xx = success; 3xx = redirection; 4xx = client error; 5xx = server error.

7. Give the meaning of HTTP status codes 200, 301, 404, and 500.

   200 = OK (success); 301 = Moved Permanently (redirect); 404 = Not Found; 500 = Internal Server Error.

8. Name the components of a full URL in this example: https://www.site.com:443/path/page?id=5#top

   https = scheme/protocol; www.site.com = host/domain; 443 = port; /path/page = path; ?id=5 = query string; #top = fragment/anchor.

9. What is DNS and what fundamental task does it perform?

   The Domain Name System translates human-readable domain names (e.g., example.com) into machine-usable IP addresses, acting like the internet's phone book.

10. Order the DNS resolution hierarchy from highest to most specific: root, TLD, authoritative.

    Root nameserver → TLD nameserver (e.g., .com) → authoritative nameserver for the specific domain, which returns the final IP address.

11. In a domain like 'shop.example.co.in', identify the TLD, the second-level domain, and the subdomain.

    TLD = .in (with .co as a second-level/registry label); the registrable domain is example.co.in; 'shop' is the subdomain.

12. What is a DNS A record versus a CNAME record?

    An A record maps a domain name to an IPv4 address; a CNAME record maps a name to another canonical name (alias), not directly to an IP.

13. Name the main stages of the browser rendering pipeline in order.

    Parse HTML → build DOM; parse CSS → build CSSOM; combine into the Render Tree; Layout (reflow) to compute geometry; Paint to fill pixels; Composite layers to screen.

14. What is the difference between the DOM and the CSSOM?

    The DOM (Document Object Model) is the tree of the HTML document's structure/content; the CSSOM (CSS Object Model) is the tree of all CSS style rules. They are combined into the render tree.

15. What is the render tree and how does it differ from the DOM?

    The render tree combines DOM nodes with their computed styles and contains only visible elements. Nodes like <head> or those with display:none are excluded, unlike in the DOM.

16. Distinguish 'reflow' (layout) from 'repaint' in the rendering pipeline.

    Reflow/layout recalculates element positions and dimensions; repaint redraws pixels (colors, visibility) without changing geometry. Reflow is more expensive and usually triggers a repaint.

17. Why can a <script> tag without async/defer block page rendering?

    By default the parser stops to download and execute the script before continuing to build the DOM, blocking parsing and rendering until the script finishes.

18. What is the purpose of the <!DOCTYPE html> declaration?

    It tells the browser to render the page in standards mode using the HTML5 specification, preventing legacy 'quirks mode' rendering.

19. Describe the basic skeleton structure of a valid HTML5 document.

    <!DOCTYPE html>, then <html> containing <head> (metadata, title, links) and <body> (visible content).

20. What goes inside the <head> element versus the <body> element?

    <head> holds metadata not rendered as content (title, meta tags, CSS/JS links, charset); <body> holds the visible page content the user sees.

21. What does <meta charset="UTF-8"> do and why is it important?

    It declares the document's character encoding as UTF-8 so the browser correctly interprets text/special characters; it should appear early in the <head>.

22. What is the purpose of the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">?

    It controls layout on mobile browsers, setting the viewport width to the device width and the initial zoom to 1, enabling responsive design.

23. What are the six HTML heading levels and what determines their use?

    <h1> through <h6>, representing decreasing levels of importance/hierarchy. Use should follow logical document structure, not visual size; ideally one <h1> per page.

See more Web Fundamentals & HTML5 flashcards →

Planning Web Fundamentals & HTML5 for Full Stack Web Development

Web Fundamentals & HTML5 (Full Stack Web Development) FAQ