CSS

Why would you use <strong> instead of <b> ?

<strong> is used to mean that you are trying to emphasize those words strongly, and that is the structure of what you want to write. But <b> is used for styling text to be bold, which can be done with CSS, and CSS can override the appearance of <strong> also.

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

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, p::first-line can be used to change the font of the first line of a paragraph.

What is a semantic tag?

Semantic HTML, or "semantically-correct HTML", is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content. for example, <b></b> (for bold), and <i></i> (for italic) should never be used, because they're to do with formatting, not with the meaning or structure of the content. Instead, use the replacements <strong></strong> and <em></em> (meaning emphasis), which by default will turn text bold and italic (but don't have to do so in all browsers), while adding meaning to the structure of the content. You would use a semantic tag for Search Engine Optimization, accessibility, repurposing, light code.

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

translate() is a value of CSS transform. Changing transform or opacity does not trigger browser reflow or repaint, only compositions, whereas changing the absolute positioning triggers reflow. transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence translate() is more efficient and will result in shorter paint times for smoother animations. When using translate(), the element still takes up its original space (sort of like position: relative), unlike in changing the absolute positioning.

What's the difference between display: inline and display: inline-block?

"display: inline" Property: This property is used to display an element as an inline element (like <span>). The height and width properties are not effected on display:inline; property. It allows only left and right side of margins, not top and bottom. In simple words it has no line break before and after of its neighbor elements and it allows HTML next to it. "display: inline-block" Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content). It looks like an inline element but it behaves as a block element and don't force to line break.

What is Sass?

+Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly. + A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.

What is a Mixin and how to use on?

A Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site. To define mixin: @mixin grid($flex: true /*default argument*/) { @if $flex { @include flex; } @else { display: block; } } To use a Mixin, we simply use @include followed by the name of the Mixin and a semi-colon. /*scss*/ .row { @include grid(true); } /*css*/ .row { display: -webkit-flex; display: flex; }

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

A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

How is clearfix css property useful?

A clearfix is a way for an element to clear its child elements automatically without any additional markup. The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally. The CSS float property states how an element should float; i.e., it specifies the position where an element should be placed. The clearfix property allows a container to wrap its floated children. Without a clearfix, a container will not wrap around its floated children and will collapse, just as if its floated children had been positioned absolutely.

What is a Grid System in CSS?

A grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Grid systems include two key components: rows and columns. Some Grid Systems: Simple Grid Pure Flexbox Grid Bootstrap Foundation

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

All, screen, print, and speech. Are the four different properties of media , the one I can tell you about other than screen is print media. It is a form of communication that comes in many different types. Messages can be sent out and printed on fliers, in newspapers, billboards and magazines. Once the pieces are printed, they are distributed to their proper audience.

Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?

An example of a pseudo class would be using p:: whatever to just change the first line of a paragraph. I think it would be useful if you didn't want to create a class for certain styling elements.

Why would you use sprites?

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

What is an optional tag?

Basically, that's the idea of optional HTML tags: you don't have to write an HTML tag if you can easily infer it from the context. For instance, there's no point in writing the <html> tag. The document is shown in the browser, so we already know it's an HTML document.

Why css selectors mixed up with cases don't apply the styles?

Because, HTML ID and classes are case sensitive.

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

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.

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

By using @font-face using font service link<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

How do you link a stylesheet into a HTML document?

CSS can be added to HTML documents in 3 ways: +Inline - by using the style attribute inside HTML elements +Internal - by using a <style> element in the <head> section +External - by using a <link> element to link to an external CSS file

What do you know about transition?

CSS transitions allows you to change property values smoothly, over a given duration.

What is the difference between canvas and svg?

Canvas: is based on pixels. is a single HTML element, and is only script driven. It is suitable for small area, big data applications. SVG: is based on graphic elements, and is also a graphic element. It's supported by script and CSS. It's suitable for a large area, and small number of scenarios.

What is ClickJacking?

ClickJacking is an attack that fools users into thinking they are clicking on one thing when they are actually clicking on another. The attack is possible thanks to HTML frames (iframes).

Describe Floats and how they work.

Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike position: absolute elements, which are removed from the flow of the page.

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

Graceful degradation — The practice of building an application for modern browsers while ensuring it remains functional in older browsers. Progressive enhancement — The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it. Use caniuse.com to check for feature support. Autoprefixer for automatic vendor prefix insertion. Feature detection using Modernizr.

What are data- attributes good for?

HTML 5 has "data-*" which are custom attributes defined by the developer. They are used when any existing characteristic is not suitable to be used. These attributes are only used on the page they are written on, and they do not need AJAX calls. These are Global attributes, so they can be applied to any element.

What is CSS selector specificity and how does it work?

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out. Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.The universal selector (*) has low specificity, while ID selectors are highly specific!

Why and when should I Use Webpack?

If you're building a complex Front End application with many non-code static assets such as CSS, images, fonts, etc, then yes, Webpack will give you great benefits. If your application is fairly small, and you don't have many static assets and you only need to build one Javascript file to serve to the client, then Webpack might be more overhead than you need.

What's doctype for?

Information to the browser about what type of document to expect.

Does the screen keyword apply to the device's physical screen or the browser's viewport?

It applies to the browser's viewport

Does padding-top or padding-bottom have an effect on inline element?

It does have an affect, because inline elements actually appear within block elements.

What is the use of only?

It is for older browsers that do not support media queries. However, it should not affect coding right now.

What is the box model?

It is used to explain padding and margins

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

It will just take different factors into account, like the width and height of the elements.

Explain meta tags in HTML.

Meta tags always go inside the head tag of the HTML page. Meta tags are always passed as name/value pairs. Meta tags are not displayed on the page but intended for the browser. Meta tags can contain information about character encoding, description, title of the document etc.

If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

Nope

What is progressive rendering?

Progressive rendering is a rendering mode in which the program gradually updates small parts of the entire image refining it from low quality to final result rather than focusing on one small part of the image at a time.

Explain standard and quirks mode.

Quirks mode in browsers allows you to render pages as old browsers. This is for backward compatibility.

What are the difference between "resetting" and "normalizing" CSS?

Resetting: Resetting removes all the built-in browser styling. It does not provide bug fixes Normalizing: Normalizing makes the integrated browser styling consistent across the browsers. It includes bug fixes.

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

Responsive design starts on the desktop, and then scales down to the smallest screen. A mobile-first design approach is like designing a mobile app, and then adapting the layout to larger screens.

How is responsive design different from adaptive design?

Responsive is fluid and adapts to the size of the screen no matter what the target device. Adaptive design, on the other hand, uses static layouts based on breakpoints which don't respond once they're initially loaded.

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

Static: This is the default for every single page element. Different elements don't have different default values for positioning, they all start out as static. Static doesn't mean much; it just means that the element will flow into the page as it normally would. Relative: This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be. Absolute: This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left, bottom, and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relative to the page itself. Fixed: A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

How can you highlight text in html?

The <mark> tag defines text that should be marked or highlighted.

How could you apply css rules specific to a media?

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Explain the CSS "box model" and the layout components that it consists of.

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following: +Content - The content of the box, where text and images appear +Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content) +Border - A border surrounding the padding (if any) and content +Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

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

The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you'll see a <br /> element or some other random element used, but div is the most common because it has no brower default styling, doesn't have any special function, and is unlikely to be generically styled with CSS. The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it

What is the difference between classes and IDs in CSS?

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. I prefer using ids for js files, and classes for css files

Name some basic design elements

The elements of design are: LINE SHAPE DIRECTION SIZE TEXTURE COLOR

Name fundamental principles of design

The fundamental principles of design are: BALANCE, PROXIMITY ,ALIGNMENT , REPETITION, CONTRAST, SPACE

What's the difference between the "nth-of-type()" and "nth-child()" selectors?

The nth-child() and nth-of-type() selectors are "structural" pseudo-classes, which are classes that allow us to select elements based on information within the document tree that cannot typically be represented by other simple selectors. In the case of nth-child() and nth-of-type(), the extra information is the element's position in the document tree in relation to its parent and siblings. Although these two pseudo-classes are very similar, they work in fundamentally different ways.

What are the differences between visibility hidden and display none?

The visibility: "hidden"; property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. The visibility is a property in CSS that specifies the visibility behavior of an element and display: "none" property is used to specify whether an element exists or not on the website.

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

These techniques are related to accessibility (a11y). visibility: hidden. However the element is still in the flow of the page, and still takes up space. width: 0; height: 0. Make the element not take up any space on the screen at all, resulting in not showing it. position: absolute; left: -99999px. Position it outside of the screen. text-indent: -9999px. This only works on text within the block elements. Metadata. For example by using Schema.org, RDF and JSON-LD. WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages. Even if WAI-ARIA is the ideal solution, I would go with the absolute positioning approach, as it has the least caveats, works for most elements and it's an easy technique.

How do you change the direction of html text?

To set text direction in HTML, use the style attribute. The style attribute specifies an inline style for an element. The style attribute is used with the CSS property direction to set direction. Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet. You can use the following property values to set direction − ltr(left to right), rtl(right to left), and initial(default setting)

Does margin-top or margin-bottom have an effect on inline element?

Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content.

How would you approach fixing browser-specific styling issues?

Use a separate stylesheet that only loads when that specific browser is being used. Thankfully, the days of IE specific stylesheets are almost gone

What is User Centered Design?

User-centered design is an iterative design process in which designers focus on the users and their needs in each phase of the design process. UCD calls for involving users throughout the design process via a variety of research and design techniques so as to create highly usable and accessible products for them. User-centered design demands that designers employ a mixture of investigative (e.g., surveys and interviews) and generative (e.g., brainstorming) methods and tools to develop an understanding of user needs.

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

We could use the header for guessing language preferences, with a list of languages.

What is a CSS rule?

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from: +A set of properties, which have values set to update how the HTML content is displayed, +A selector, which selects the element(s) you want to apply the updated property values to. +A set of CSS rules contained within a stylesheet determines how a webpage should look.

What are some of the key new features in HTML5?

Webfonts, Gradient, Animation and Transition

What is webpack?

Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph. Webpack lets you use require() in your source code to point to local files, like images, and decide how they're processed in your final Javascript bundle, like replacing the path with a URL pointing to a CDN.

How can you clear sides of a floating element?

When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.

Describe z-index and how stacking context is formed.

When you create an index, and then assign it values and stuff etc. only works when positioned.

Does overflow: hidden create a new block formatting context?

Yes, a new block formatting context can be created by adding any one of the necessary CSS conditions like overflow: scroll , overflow: hidden , display: flex , float: left , or display: table to the container.

How can you load css resources conditionally?

You could use media query rules to specify which css file you want to use. But i don't really know.

How do you insert an image in HTML?

You use the <img> tag inside the <body> tag

How do you align a p center-center inside a div?

You would just use p{text-align: center; line-height: 100px;}

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

You would use the srcset attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference).

What is the difference between span and div?

div is a block element span is inline element