freeCodeCamp Responsive Web Design Syllabus

Responsive Web Design syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Responsive Web Design in freeCodeCamp, not a summary of it.

1. 1

   HTML Foundations

   4 topics

   • Semantic HTML
   • Forms and Inputs
   • Tables
   • Accessibility
2. 2

   CSS Fundamentals

   4 topics

   • Selectors and Specificity
   • The Box Model
   • Colors and Backgrounds
   • Typography
3. 3

   CSS Flexbox

   3 topics

   • Flex Container Properties
   • Flex Item Properties
   • Building Layouts with Flexbox
4. 4

   CSS Grid

   3 topics

   • Grid Containers and Tracks
   • Placing Grid Items
   • Responsive Grid Layouts
5. 5

   Responsive Design Principles

   3 topics

   • Media Queries
   • Relative Units
   • Responsive Images
6. 6

   Certification Projects

   5 topics

   • Survey Form
   • Tribute Page
   • Technical Documentation Page
   • Product Landing Page
   • Personal Portfolio Webpage

Responsive Web Design flashcards for freeCodeCamp

25 of 50 cards from the Responsive Web Design deck — real questions with worked answers.

1. What is semantic HTML and why is it preferred over generic <div> elements?

   Semantic HTML uses elements whose names describe their meaning/content (e.g., <header>, <nav>, <article>). It improves accessibility (screen readers can navigate by landmarks), SEO, and code readability, unlike meaningless <div> containers.

2. Name the main semantic sectioning elements introduced in HTML5 for page structure.

   <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. <main> should appear only once per page and contain the primary content.

3. What is the difference between <section> and <article>?

   <article> is for self-contained, independently distributable content (blog post, news story, comment). <section> groups thematically related content, usually with a heading, but is not standalone.

4. What is the correct usage rule for heading elements <h1>–<h6>?

   Headings should form a logical outline: one <h1> per page for the main title, with lower levels nested in order without skipping levels (e.g., <h2> then <h3>). They must not be chosen just for font size.

5. What do the <figure> and <figcaption> elements do?

   <figure> wraps self-contained media (image, chart, code snippet) referenced by the main content; <figcaption> provides its caption. Together they semantically associate a caption with its media.

6. In an HTML form, what does the action attribute and the method attribute of <form> specify?

   action specifies the URL where the form data is sent on submission; method specifies the HTTP method used — GET (data appended to the URL, for non-sensitive queries) or POST (data in the request body, for sensitive/large data).

7. How do you associate a <label> with a form input, and why does it matter?

   Either set the label's for attribute equal to the input's id, or nest the input inside the <label>. It matters for accessibility: screen readers announce the label, and clicking the label focuses/toggles the input.

8. What attribute makes a form field mandatory before submission, and which attributes constrain a text input's length?

   required makes a field mandatory. minlength and maxlength constrain the number of characters; for numeric inputs, min and max constrain the value range.

9. How do radio buttons get grouped so only one can be selected, and how is their data submitted?

   All radio inputs sharing the same name attribute form one mutually exclusive group. The submitted data is the shared name paired with the value attribute of the selected button.

10. What is the purpose of <fieldset> and <legend> in forms?

    <fieldset> groups related form controls (e.g., a set of radio buttons or checkboxes) into a single logical unit, and <legend> provides a caption describing that group — improving structure and accessibility.

11. Which input types provide built-in browser validation of format, and what does the pattern attribute add?

    Types like email, url, and number validate format automatically. The pattern attribute adds custom validation by requiring the value to match a regular expression, e.g., pattern="[a-z0-5]{8,}".

12. What is the difference between the placeholder attribute and the value attribute on an input?

    placeholder shows hint text inside an empty field that disappears when the user types and is never submitted; value sets the actual (pre-filled) content of the field that is submitted with the form.

13. List the core HTML table elements and the role of each.

    <table> wraps the table; <caption> titles it; <thead>, <tbody>, <tfoot> group header, body, and footer rows; <tr> defines a row; <th> a header cell; <td> a data cell.

14. In tables, what does the scope attribute on <th> do, and which attributes make a cell span multiple columns or rows?

    scope="col" or scope="row" tells assistive technology whether the header applies to its column or row. colspan makes a cell span multiple columns; rowspan makes it span multiple rows.

15. When should you use an empty alt attribute (alt="") on an image?

    When the image is purely decorative and conveys no information. alt="" tells screen readers to skip it, whereas omitting alt entirely may cause the file name to be read aloud.

16. What are ARIA roles and the aria-label / aria-labelledby attributes used for?

    ARIA attributes convey semantics to assistive technology when native HTML is insufficient. role defines an element's purpose (e.g., role="region"); aria-label gives an accessible name directly; aria-labelledby points to the id of another element that names it.

17. What is the standard CSS technique to hide content visually while keeping it available to screen readers?

    A "visually hidden" (sr-only) class: position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;. Never use display:none or visibility:hidden, which hide it from screen readers too.

18. What does the WCAG recommend for text color contrast, and what is the minimum contrast ratio for normal text?

    Text must have sufficient contrast against its background: at least $4.5 : 1$ for normal text and $3 : 1$ for large text (WCAG AA).

19. What accessibility feature does the tabindex attribute control, and what do values 0 and -1 mean?

    tabindex controls keyboard focus. tabindex="0" makes an element focusable in the natural tab order; tabindex="-1" makes it focusable only programmatically (skipped when tabbing). Positive values force a custom order and are discouraged.

20. How is CSS specificity calculated for a selector?

    Count three levels, compared left to right: (a) number of ID selectors, (b) number of class/attribute/pseudo-class selectors, (c) number of type/pseudo-element selectors. A selector wins if it has a higher count at the most significant differing level; inline styles beat all selectors, and !important overrides everything.

21. Rank these by specificity from lowest to highest: p, .card, #main, inline style attribute.

    p (type, 0-0-1) < .card (class, 0-1-0) < #main (ID, 1-0-0) < inline style (beats any selector). Ties are broken by source order — the later rule wins.

22. What do the CSS combinators (space), >, +, and ~ select?

    A B (space): any B descendant of A; A > B: B that is a direct child of A; A + B: B that is the immediately adjacent next sibling of A; A ~ B: any B that is a later sibling of A.

23. What is the difference between a pseudo-class and a pseudo-element in CSS?

    A pseudo-class (single colon, e.g., :hover, :first-child, :not()) selects elements in a particular state or position. A pseudo-element (double colon, e.g., ::before, ::after, ::first-line) styles a specific part of an element or generates content.

24. List the four layers of the CSS box model from innermost to outermost.

    Content, padding (space between content and border), border, and margin (space outside the border separating the element from neighbors).

25. How does box-sizing: border-box change width calculation compared to the default content-box?

    With content-box (default), rendered width $=$ width $+$ padding $+$ border. With border-box, the declared width already includes padding and border, so the content area shrinks: content width $=$ width $-$ padding $-$ border. This makes layouts predictable.

See more Responsive Web Design flashcards →

Planning Responsive Web Design for freeCodeCamp

Responsive Web Design (freeCodeCamp) FAQ