Technical Questions

Question 1

What does doctype do?

Answer 1

Doctype is the abbreviation for the document type, Doctype declaration tells the browser
what kind of document to expect. If you don’t declare the doctype, browsers can interpret the document as something else other than HTML

Question 2

How do you serve a page with content in multiple languages?

Answer 2

We can set the language in the HTML document by setting the lang attribute in the code. By default, the specified language is English, but it can be changed at our convenience.
By default:
You can set the whole site as being english by setting the html element Or you could set a paragraph as spanish with <p></p>

Question 3

What kind of things must you be wary of when design or developing for
multilingual sites?

Answer 3

• Sentence length/Text overflow when translated
• Formatting Dates Calendar dates are sometimes presented in different ways For Example, May 31, 2012 in the US. vs “31 May 2012” in parts of Europe.
• Text In Images Won’t Scale
• Be Mindful af How Colors Are Perceived Across Different Cultures

Question 4

What are data- attributes good for?

Answer 4

Explanation: They store data private to the page or application
Use: They were often used for storing extra data in the DOM, but are generally discouraged now.

Question 5

Consider HTML5 as an open web platform. What are the building blocks of
HTML5?

Answer 5

• Semantics: allowing you to describe more precisely what your content is.
• Connectivity: allowing you to communicate with the server in new and innovative ways.
• Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
• Multimedia: making video and audio first-class citizens in the Open Web
• 2D/3D graphics and effects: allowing a much more diverse range of presentation options.
• Performance and integration: providing greater speed optimization and better usage of computer hardware.
• Device access: allowing for the usage of various input and output devices
• Styling: letting authors write more sophisticated themes

Question 6

Describe the difference between a cookie, sessionStorage and localStorage

Answer 6

the server with HTTP request.
sessionStorage and losalStorage are initiated by the client and aren’t sent to the server.
The main difference is that localStorage will stay forever until it Is cleared manually.

Question 7

Describe the difference between script, script async, and script defer

Answer 7

HTML parsing is blocked, script is fetched and executed immediately.
- async scripts load in the background and run when ready. The DOM and other scripts don’t wait for them, and they don’t wait for anything. A fully independent script that runs when loaded.
The defer attribute tells the browser not to wait for the script. The script loads “in the background”, and then runs when the DOM is fully built

Question 8

Why is it generally a good idea to position CSS «link»s between ¿head» «/head>
and JS «script>s just before

Answer 8

Putting <1ink>s in the chead» allows for quick “first meaningful paint”. When a page first loads, HTML and CSS are being parsed simultaneously. Conversely script> tags block HTML parsing while they are being downloaded and executed which can slow down your page. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
Exceptions: When your script contains document. write, however it isn’t consider good practice to use document. rite Also if you need scripts to run on page load it may be beneficial to split them out from your main script and place in the head.

Question 9

What is progressive rendering?

Answer 9

Explanation: Techniques used to improve the performance of a webpage to render content for display as quickly as possible.
Use: Improving percerved load time
Example: Lazy loading of images. Prioritizing visible content (or above-the-fold rendering) and Async HIM fragments

Question 10

Why you would use a srcset attribute in an image tag? Explain the process the
browser uses when evaluating the content of this attribute

Answer 10

Explanation: When you want to serve different images to users depending on their device display width.
Use: Sending lower resolution to limut data waste and increase performance or sending larger images to a higher resolution display to enhance the UX
Example: < img srcset=”omall.jpg 500w. mediun.jpg 1000w, large.jog 2000w” arC=”
“ alt=“”>

Question 11

Have you used different HTML templating languages before?

Answer 11

EJS and React (JSX)

Question 12

What is CSS selector specificity and how does it work?

Answer 12

Explanation: The means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
Use: Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
Example: A selector of #id .class tag would have 111 points as id’s count for 100, classes for 10 and tags 1.

Question 13

What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Answer 13

Explanation: “Normalize” alters the default styles of various browser to match each other. “Reset” will remove the browsers default styles so you are starting from scratch.
Use: Applying one or the other is done to try and make websites visually consistent across different browsers. I prefer to use a mix of both. Starting with the normalize to keep it conscise and then add some elements like anchors and headers with a reset. Going full “nuke” is often unnecessary and creates a larger, harder to debug file.

Question 14

Describe floats and how they work.

Answer 14

Explanation: Floats are a positioning property where the element that is floated will be removed from the flow of the page and affect the elements around it. A parent element will collapse to zero height if it contains only floated elements, to fix this it was common to use a .clearfix hack.
Use: It was used prior to flex and grid to layout pages in a more flexible manner.
Example: You could float three elements left and give them widths of 33% to create three even width columns.

Question 15

Describe z-index and how stacking context is formed

Answer 15

Explanation: The z-index property in CSS controls the vertical stacking order of elements that overlap. A stacking context is an element that contains a set of layers. The z-index values of its children are set relative to that element rather than to the document root. Layers outside of that context can’t sit between layers within it.

Question 16

Describe BFC (Block Formatting Context) and how it works.

Answer 16

Explanation: A BFC is an HTML box that satisfies at least one of the following conditions:
The value of float is not none.
The value of position is neither static nor relative.
The value of display is table-cell, table-caption, inline-block, flex, or inline-flex, grid, or inline-grid.
The value of overflow is not visible.
Use: Knowing how to establish a block formatting context is important, because without doing so, the containing box will not contain floated children.
Example: Without forming a BFC you could have content of a float that is taller than the content alongside it. The border of the parent element could then “cut-through” the floated box.

Question 17

What are the various clearing techniques and which is appropriate for what
context?

Answer 17

Explanation:
Empty div method
Clearfix method
overflow: auto or overflow: hidden method
Use: .clearfix utility class is probably the best method to use in general as it doesn’t take long to construct and doesn’t suffer from clipping issues like the overflow methods.

Question 18

Explain CSS sprites, and how you would implement them on a page or site.

Answer 18

Explanation: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.
Use: Browsers limit the number of concurrent requests a site can make so leading several images with a single HTTP request helps increase page load speed.
Example: An example would be combining press logo’s for Wired, NY Times and The Washington Post into a single image file. Then on the site, with CSS, placing the file three times and moving/cropping it to display the applicable logo.

Question 19

How would you approach fixing browser-specific styling issues?

Answer 19

Explanation: There are a handful of ways to solve the issue such as browser specific stylesheets, using a library like bootstrap, etc. MY preference would be to use a combination normalize/reset style sheet. I’d rather use a combination as going full nuke with a reset isn’t necessary and makes it a little harder to debug.

Question 20

How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

Answer 20

Explanation: My preference is to try and build lightweight simple websites that incorporate progressive enhancement.
Use: Build the base level of HTML/CSS with semantics and accessibility in the forefront you get a site that works well on feature-constrained browsers. I would then add any CSS on JavaScript enhancements deliberately, checking caniuse.com and using vendor prefixs and polyfills if required.
Example: Instead of filling the site with <div> using more semantically appropriate tags like </div>

Question 21

What are the different ways to visually hide content (and make it available only for screen readers)?

Answer 21

One of the ways is to tell CSS to display nothing or to make something hidden:
display:none; or visibility: hidden;

Another way is to set the literal content to 0 pixels so that whatever is written in the HTML has no value in pixels to be displayed:
width: 0px; Height 0px;

Yet another way is the move the visible content off of the visible screen.
Text-intent: -10000px;
Moving the content off screen is a great way to hide the content from the sighted user but keeps it available for the screen readers.

Question 22

Have you ever used a grid system, and if so, what do you prefer?

Answer 22

The float-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the float approach until Bootstrap 4 which switched to the flex-based approach. Flex is the recommended approach for building grid systems and has decent browser support. But I am almost confident that with the broader adoption of CSS Grid, it will turn into the main layout standard.

Question 23

Have you used or implemented media queries or mobile specific layouts/CSS?

Answer 23

Explanation: I use them quite frequently.
Use: I use them on every website and typically build mobile first. The breakpoints and media queries are then used to convert the layout from mobile to desktop.
Example: Some examples is changing a bunch of cards from being a single column stack on mobile to a three column layout on desktop.

Question 24

Are you familiar with styling SVG?

Answer 24

Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphic

Explanation: Yes there are a few ways to style them including inline CSS, embedded CSS or an external style sheet. Basic coloring can be done with the fill and stroke attributes.

Example:
Basic coloring can be done by setting two attributes on the node: fill and stroke. fill sets the color inside the object and stroke sets the color of the line drawn around the object.

Question 25

Can you give an example of an @media property other than screen?

Answer 25

all - for all media type devices
print - for printers
speech - for screenreaders that “reads” the page out loud
screen - for computer screens, tablets, smart-phones etc.

Question 26

What are some of the “gotchas” for writing efficient CSS?

Answer 26

Avoid using tag and universal selectors for your key selector.

Avoid using styles that trigger reflow.

Question 27

What are the advantages/disadvantages of using CSS preprocessors?

Answer 27

Some advantages would be:
The code is easier to maintain
More efficient to write with nested selectors
Mixins can be used for repeated styles
Ability to split into different files

Disadvantages would be:
Additional tooling is required
You aren’t able to use the most current features of standard CSS

Advantages:

CSS is made more maintainable.
Easy to write nested selectors.
Variables for consistent theming. Can share theme files across different projects.
Mixins to generate repeated CSS.
Sass features like loops, lists, and maps can make configuration easier and less verbose.
Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
Disadvantages:

Requires tools for preprocessing. Re-compilation time can be slow.
Not writing currently and potentially usable CSS. For example, by using something like postcss-loader with webpack, you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you’re learning new skills that could pay off if/when they become standardized.

Question 28

Describe what you like and dislike about the CSS preprocessors you have used.

Answer 28

Explanation: I’ve found that being able to split files and nest selectors is the most useful. A couple of downsides are that debugging is a little more difficult and having to wait for compilation.

Advantages:
CSS is made more maintainable.
Easy to write nested selectors.
Variables for consistent theming. Can share theme files across different projects.
Mixins to generate repeated CSS.
Sass features like loops, lists, and maps can make configuration easier and less verbose.
Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.

Likes:
Mostly the advantages mentioned above.
Less is written in JavaScript, which plays well with Node.

Dislikes:
I use Sass via node-sass, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions.
In Less, variable names are prefixed with @, which can be confused with native CSS keywords like @media, @import and @font-face rule.

Question 29

How would you implement a web design comp that uses non-standard fonts?

Answer 29

Explanation: Use @font-face and define font-family

Question 30

Explain how a browser determines what elements match a CSS selector.

Answer 30

This part is related to the above about writing efficient CSS. Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.

For example with this selector p span, browsers firstly find all the <span> elements and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.</span></p></span></p></span>

Question 31

Describe pseudo-elements and discuss what they are used for.

Answer 31

Explanation & Use: A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s)
Example: ::first-line can be used to change the font of the first line of a paragraph

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line, :first-letter) or adding elements to the markup (combined with content: …) without having to modify the markup (:before, :after).

:first-line and :first-letter can be used to decorate text.
Used in the .clearfix hack as shown above to add a zero-space element with clear: both.
Triangular arrows in tooltips use :before and :after. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.

Question 32

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

Answer 32

Explanation: The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area and optional surrounding padding, border, and margin areas.
Use: The standard box model calculates box size by taking a specified height and width, then adding the padding and border. However to change to the alternative box model you would set box-sizing: border-box which allows you to set the box size with height and width.

Question 33

What does * { box-sizing: border-box; } do? What are its advantages?

Answer 33

It allows you to specify the actual width and height of a box using the width and height properties. This allows you to input true sizes and not have to do any math to take padding and borders into account.

By default, elements have box-sizing: content-box applied, and only the content size is being accounted for.
box-sizing: border-box changes how the width and height of elements are being calculated, border and padding are also being included in the calculation.
The height of an element is now calculated by the content’s height + vertical padding + vertical border width.
The width of an element is now calculated by the content’s width + horizontal padding + horizontal border width.
Taking into account paddings and borders as part of our box model resonates better with how designers actually imagine content in grids.

Question 34

What is the CSS display property and can you give a few examples of its use?

Answer 34

Explanation & Use: The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
Example: display: block would make the element consume the whole line width. display: grid would allow you to layout children in a grid system. If you wanted three columns you could pair it with something like grid-template-columns: 1fr 1fr 1fr

none - Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree

block - The element consumes the whole line in the block direction (which is usually horizontal)

Question 35

What’s the difference between inline and inline-block?

Answer 35

Explanation:
inline
CANNOT specify width and height
Can only set margin and padding for the sides, not top and bottom.
inline-block
CAN specify width and height
Can set margin and padding on all sides

inline Elements can be laid out beside each other
inline-block Similar to inline, but allows some block properties like setting width and height

Question 36

What’s the difference between a relative, fixed, absolute and statically positioned element?

Answer 36

Explanation:
Relative - Position is relative to it’s original static position. Original space on the page is preserved.
Fixed - Element removed from page flow and placed in spot relative to viewport. It won’t move when scrolled.
Absolute - Element removed from page flow and positioned relative to it closest “positioned” ancestor. Original space on the page is not preserved
Static - The default position. top, right, bottom, left and z-index properties do not apply.

static - The default position; the element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not apply.
relative - The element’s position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
absolute - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
fixed - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn’t move when scrolled.
sticky - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Question 37

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

Answer 37

Bootstrap - It takes a while to get the latest CSS features added. Your sites end up looking very similar to others.
Tailwind - The HTML can feel very cluttered. Reusing styles is a bit clunky.

Question 38

Have you played around with the new CSS Flexbox or Grid specs?

Answer 38

Explanation: I have used both flexbox and grid and like to employ both of them.
Use: I find grid to be useful for the top level page layout and any elements which have a typical grid layout. I prefer using flexbox for sections and other elements which don’t need a rigid grid alignment.
Example: If I had something like a tic-tac-toe board I would use grid as it is easy to get the boxes to align and be the same size. If I had some sort of information card with multiple pieces of information I would likely use flexbox.

Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.

Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days.

Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.

Question 39

Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?

Answer 39

Explanation: Making a website responsive means the some elements will respond by adapting its size or other functionality according to the device’s screen size. A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later.
Use: You would use media queries to make the above changes at certain screen size breakpoints.
Example: An example of mobile first and responsive would be:
.my-class {
font-size: 12px;
}

@media (min-width: 600px) {
.my-class {
font-size: 24px;
}
}

Note that these two 2 approaches are not exclusive.

Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device’s screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.

@media (min-width: 601px) {
.my-class {
font-size: 24px;
}
}

@media (max-width: 600px) {
.my-class {
font-size: 12px;
}
}

A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:

.my-class {
font-size: 12px;
}

@media (min-width: 600px) {
.my-class {
font-size: 24px;
}
}

A mobile-first strategy has 2 main advantages:

It’s more performant on mobile devices, since all the rules applied for them don’t have to be validated against any media queries.
It forces to write cleaner code in respect to responsive CSS rules.

Question 40

How is responsive design different from adaptive design?

Answer 40

Explanation: Both responsive and adaptive design attempt to optimize the user experience across different devices.
Use: Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Instead of one flexible design, adaptive design detects the device then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. I believe responsive is the best approach to provide a great experience for all users.

Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.

Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.

Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you’d have several different balls to use depending on the hoop size.

Both have these methods have some issues that need to be weighed:

Responsive design can be quite challenging, as you’re essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.

Question 41

Have you ever worked with retina graphics? If so, when and what techniques did you use?

Answer 41

Explanation: Retina is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using highest resolution images will have an impact on page load times.
Use: To overcome this problem, we can use responsive images, as specified in HTML5 with the srcset attribute.
Example:
<img></img>

Question 42

Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?

Answer 42

Transform causes the browser to create a GPU layer for the element.
Changing absolute positioning properties uses the CPU.
Hence translate() is more efficient and will result in shorter paint times for smoother animations.