Build Your First Website with HTML and CSS Final quiz

Final quiz: build your first website with HTML and CSS

Pass mark: 75%. You can retry as many times as you need.

1 A visitor opens https://www.example.org/projects/index.html. Which sequence best describes what happens? Single answer The browser downloads the whole site first, then asks the DNS where it came from The DNS resolves the domain, the browser sends a request, the server replies, and the browser fetches extra files and renders the page The server draws the page and sends a picture of it to the browser The browser asks the editor for the file, then the server confirms

2 Which statements about file names and the developer tools are correct? (several answers) Multiple answers possible Lowercase names with hyphens and no accents are the safest choice Changes made in the Elements panel are saved to your file The Network panel shows which requests failed, such as a 404 on an image A word processor is the best editor for HTML files

3 Which line must come first in an HTML5 document to avoid the browser’s old compatibility mode? Single answer <html lang="en"> <meta charset="UTF-8"> <title>My page</title> <!DOCTYPE html>

4 You are writing a page in the folder projects/ and want to link back to index.html, which is in the parent folder. Which href is correct? Single answer index.html ../index.html projects/index.html ./projects/../index

5 Which uses of alt text are appropriate? (several answers) Multiple answers possible A short description of the content for a photo that illustrates your work alt="" for a purely decorative flourish A list of keywords to rank higher For a logo that links home, text describing the destination such as “Maya Carter, home”

6 Which element is the most appropriate for the block of main navigation links at the top of your page? Single answer div class="menu" aside nav containing a list of links section without a heading

7 Which of these form practices are recommended? (several answers) Multiple answers possible A visible label linked with for and id Using only a placeholder instead of a label type="email" for an email address field A fieldset with a legend around related radio buttons

8 Your form uses required and type="email". A developer says the server no longer needs to check the data. What is the best response? Single answer Correct, browsers guarantee that only valid data is ever sent Incorrect, native validation can be bypassed, so the receiving server must also validate Correct, because type="email" encrypts the data Incorrect, because required only works on text fields

9 A paragraph has class="note" and id="intro". You have p { color: black; }, .note { color: blue; } and #intro { color: red; }, in that order. What color is the text? Single answer Red Blue Black It depends on the browser

10 Which of these CSS properties are normally inherited from a parent element? (several answers) Multiple answers possible line-height padding color background-color

11 With box-sizing: border-box, an element has width: 300px, padding: 20px and a 5px border. How wide is it on screen? Single answer 350px 340px 320px 300px

12 Which of the following choices improve the readability of long text? (several answers) Multiple answers possible A line-height of about 1.5 to 1.7 A max-width around 65ch for paragraphs Text smaller than the browser default to fit more on screen Left-aligned text rather than centered paragraphs

13 You want a row of cards of equal width that stays aligned in columns, becoming one column on small screens without media queries. Which approach fits best? Single answer A table with one cell per card Absolute positioning of each card Floating each card left Grid with grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))

14 In a Flexbox row, which declarations push a logo and a menu to opposite ends and center them vertically? (several answers needed together) Multiple answers possible display: flex on the parent justify-content: space-between text-align: justify align-items: center

15 Why must a page for phones include <meta name="viewport" content="width=device-width, initial-scale=1">? Single answer It makes images load faster It tells mobile browsers to use the real device width so responsive styles apply as designed It disables zooming for accessibility It is only needed for printing

16 You add a transition on a button hover and an entrance animation on the hero heading. Which practice respects visitors who are sensitive to motion? Single answer Make the animation infinite so it cannot be missed Increase the duration so the movement is gentler Rely on the animation to show the key information Disable or reduce it inside @media (prefers-reduced-motion: reduce)

17 What are the advantages of CSS custom properties and a consistent naming convention such as BEM? (several answers) Multiple answers possible A color can be changed in one place and updated everywhere Selectors stay flat and names reveal how classes relate Variables can be redefined locally, for example for a dark section or theme Pages no longer need an HTML file

18 Which statement about ARIA is the most accurate for a beginner? Single answer Native HTML elements should be preferred; incorrect ARIA is worse than none Adding role="button" to a div gives it all the behavior of a button ARIA attributes are required on every element aria-hidden="true" is safe to put on any focusable element

19 Which measures help your site load faster and be better understood by search engines? (several answers) Multiple answers possible Resizing and compressing images before publishing them Using loading="lazy" on the hero image at the top of the page Giving each page a unique, descriptive title Using loading="lazy" on images far below the fold

20 You finished your portfolio and want to publish it. Which plan is the most sound? Single answer Upload everything including your private notes, then test later Test only on your own computer since it already works there Run the checklist, upload the folder contents to a host, then verify the live site over HTTPS on other devices Buy a domain first; hosting is not needed for a static site