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.
The cause of FOUC is how the page is rendered by the browser and applies to the same reasoning behind putting the script toward the end of the content. The browser reads the HTML page from top to bottom. Therefore, if HTML tags are displayed before the CSS is found, the HTML will get displayed unstyled until the CSS parsed. The same issue occurs with JavaScript, except that JavaScript can only on DOM elements that exist. So, if the DOM hasn't been rendered and a call to JavaScript occurs, the JavaScript may run into undefined errors if the JavaScript required DOM elements to function.
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.
According to MDN, "Accessible Rich Internet Applications defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more."
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.