HTML and CSS Questions
1. Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
CSS links should be placed before the body content, because otherwise you run into the issue of flash of unstyled content, or FOUC. That is, for a brief moment, you will have HTML displayed before the CSS has styled the content.
2. What does a doctype do?
A doctype is a document type declaration that allows for HTML validation when testing and tells the browser how to render the page in standards-compliant mode. DOCTYPE is now mostly there for legacy, but it is still required for rendering pages correctly in HTML5 format.
3. What is flash of unstyled content? How do you avoid FOUC?
Flash of unstyled content is what happens when a web browser displays unstyled HTML text before the CSS has been loaded. You can avoid FOUC by calling the CSS in the <head> before the body.
4. Explain what ARIA and screenreaders are and how to make a website accessible.
Basically, ARIA allows for accessibility to people with disabilities using appropriate HTML attributes, such as "role" and "aria-", in current browsers. ARIA does not interfere with functionality and only provides for additional accessibility.
5. Describe z-index and how stacking context is formed.
Z-index defines the order of elements as they stack on top of one another. Essentially, the z-index is the z-plane in a 3D coordinate axis.
For example, let's say we have 3 elements all stacked up on each other. The elements will be stacked in order of their z-index value in CSS, with the highest numbered element on top and the lowest numbered element on the bottom.
6. Have you used or implemented media queries or mobile specific layouts/CSS?
Yes, in the coding program you have all used custom media queries and Bootstrap to create mobile-specific layouts/CSS. The custom media queries are used if you want more customized looks across more breakpoints. However, premade layouts can be used, such as Bootstrap for performing the same mobile responsiveness.
7. What is the difference between classes and IDs in CSS?
IDs are used to target specific elements, while classes are used to target one or more elements with the same CSS.