What is the difference between HTML and XHTML?
HTML, stands for Hyper Text Markup Language, and XHTML stands for Extensible Hypertext Markup Language.
The differences between HTML and XHTML are:
> XHTML 1.0 is a reformulation of HTML 4 with XML parsing requirements.
> XHTML is case-sensitive, HTML is not. All tags and attributes must be lowercase in XHTML.
> XHTML allows the use of CDATA sections, HTML does not.
> XHTML can use xml:base, HTML cannot.
> HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework while
XHTML is an application of XML; a more restrictive subset of SGML.
What's the difference between Cellspacing & Cellpadding
Cellpadding is used for formatting purpose where you specify the space needed between the edges of the cell and the cell content. Cellspacing is also used for formatting purpose and it is used to set space between the actual cells.
What's an ID selector?
ID selector is used when you want to define a style relating to an object with a unique ID.
ID is specified by including a number sign (#) before the selector name.
What is the difference between an ID and a class.
ID and a class are CSS properties and HTML attributes. The main difference between ID's and Classes is that an ID is unique and can be used only once in a html file while a CLASSes can be used multiple times on any html elements. ID's are designated by a hash (#) and a Classes are designated by a period (.). Also please note that an ID selector has a superiority over any conflicting styles declared in the class selector.
What's a DTD?
The DTD() document Type Declaration tells the browser which version of (X)HTML you're using, so it will know how to display the page. The doctype declaration refers to a Document Type Definition (DTD).
What is CSS?
CSS is a style sheet language used to describe the presentation of a document written in a markup language. CSS stands for Cascading Style Sheets. When a CSS file is included in a HTML file it controls how page is displayed.
What you mean by Cascading?
Cascading is a fundamental feature of CSS where more than one style sheet can influence the documents presentation.
What are the different types of Style Sheet or the number of ways we can use a CSS in a web page.
There are three common types of CSS styles:
Inline style sheet which are are written inside the html tags and are specified using the 'style' attribute.
External Style Sheets are separated CSS files that are included within the HTML document.
Embedded (internal) Style Sheets are styles that are embedded in the head of the document. You define Embedded (internal) styles in the head section of an HTML page, by using the 'style' tag. You can also attach a style sheet using @import rule which allows you to include external style sheets in your document. Note that the @import notations must come before any other declaration.
Is CSS case sensitive?
No, CSS is not case sensitive but it also depends on your DOCTYPE. For example if your page uses an XML declaration and an XHTML DOCTYPE then the CSS selectors will be case-sensitive for some browsers but, if your page uses a HTML DOCTYPE then your CSS selectors will be case-insensitive.
What is inheritance?
Inheritance is where specific CSS properties are passed down to descendant elements.
What are the pros and cons of using absolute positioning?
Absolutely positioned elements are removed from the document flow. The positioned element does not flow around the content of other elements, nor does their content flow around the positioned element. An absolutely positioned element may overlap other elements, or be overlapped by them.
What does semantic markup mean?
Semantic markup usually means using proper HTML tags for your content (p tags for paragraphs, divs for large content areas of your page, tables for tabular data, etc) and meaningful classes and id’s for your CSS. It also means not putting any inline CSS or Javascript in the body of your HTML page. There are exceptions to this rule, but for most of the time, this is how a properly coded webpage will be structured.
Knowing the answer to this question means the interviewee has been paying attention to web development for the past 5 years. It also means they understand the proper design and coding principles like separation of content (HTML), style (CSS) and behavior (JS).
Describe the box model
The box model describes rectangular boxes that are generated for elements in a web page. The properties of these boxes are margin, border, padding, width and height.
If an interviewee doesn’t know this, they probably haven’t read 1 book or website about the basics of CSS.
Why do you use DIV based layout instead of a TABLE based layout?
Faster page loading
In a TABLE based layout, the browser has to process code such table, tr, th, td, height, weight, bgcolor, align, etc... before rendering the page.
In a CSS based layout there is much less HTML coding than in table based layout and the CSS based layout is typecally loads 2-3 times faster compare to a table based layout. Also when we use an external CSS file the browser will cache all the formatting and layouting and this will result in much faster page loading time.
Accessibility and usability:
CSS based websites are more accessible and usable than table based where you can create separate css files for different browsers and support multimedia
such as for mobile devices, printing, PDA's, computer screen etc; and as a result website become accessible at all multimedia applications.
When would you use a table in a webpage?
For tabular data. Representing data in a database or a spreadsheet. NOT for layout
Tables for layout is definitely in the past, so if a developer talks about using them for layout, they’ve been out of the loop for a long time. CSS is for layout, it provides much finer control and allows for semantic markup of your content and data.
What is the difference between a DIV and SPAN?
The difference between DIVs and SPANs is that:
> DIV tags are block elements that allow you to position elements contained within them. SPAN tags are NOT block elements.
> DIV tags create line breaks. SPAN tags do not.
> DIV is used to select a block of text so that one can apply styles to it. SPAN is used to select the inline text and to apply styles to it.
What is the difference between Inline and Block level elements?
Every HTML page is built-out of a series of elements and these elements are displayed as:
Block which takes up the full width available, with a new line before and after (display:block;)
Inline that takes up only as much width as it needs, and does not force new lines (display:inline;)
Common HTML elements that are naturally block-display include:
DIV - Your general-purpose box
h1...h6 - All headings
P - Paragraphs
UL, OL, DL - Lists (unordered, ordered and definition)
LI, DT, DD - List items, definition list terms, and definition list definitions
TABLE - Tables
BLOCKQUOTE - is an indented paragraph, meant for quoting passages of text
PRE - Indicates a block of preformatted code
FORM - An input form
Inline-display elements don't break the flow. They just fit in with the flow of the document.
Elements are naturally inline-style, including:
SPAN - Your all-purpose inline element
A - Anchor, used for links (and also to mark specific targets on a page for direct linking)
STRONG - Used to make your content strong, displayed as bold in most browsers, replaces the narrower bold tag
EM - Adds emphasis, but less strong than STRONG. Usually displayed as italic text, and replaces the old (italic) tag
IMG - Images
What is the W3C?
W3C stands for World Wide Web Consortium. W3C is the main international standards organization for the World Wide Web (www) Founded and headed by Sir Tim Berners-Lee. W3C is working to Standardize the Web and make the web accessible to all users. W3C was created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission.
How do you debug a webpage?
Lots of ways. Alert statements (basic debugging), Firebug, DebugBar, DragonFly, Web Inspector, and Developer Toolbar.
Knowledge of development tools is important and increases productivity immensely when you can inspect your website’s state without using alerts all over the place. Programming large websites becomes tedious and time-consuming if you don’t have tools like Firebug or the Developer Toolbar.
Explain what is Graceful Degradation?
In general terms Graceful degradation is the property that enables a system (often computer-based) to continue operating properly in the event of the failure of some of its components.
Since web browsers have been around as long as the Web, it is possible to have customers viewing your web pages in browsers that are extremely old and missing features of more modern browsers. Graceful degradation is a strategy of handling web page design for different browsers.
A web design that is built to gracefully degrade is intended to be viewed first by the most modern browsers, and then as older, less feature-rich browsers view it it should degrade in a way that is still functional, but with fewer features.
The main difference between the graceful degradation strategy and progressive enhancement is where you start your design. If you start with the lowest common denominator and then add features for more modern browsers for your web pages, you're using progressive enhancement. If you start with the most modern, cutting edge features, and then scale back, you're using graceful degradation.
Graceful Degradation Doesn't Mean Telling Your Readers, "Download the Most Recent Browser"
One of the reasons many modern designers don't like the graceful degradation approach is because it often turns into a demand that readers download the most modern browser for the page to work. But this is not graceful degradation. If you find yourself wanting to write "download browser X to get this feature to work", you have left the realm of graceful degradation and moved into browser-centric design.
A good rule of thumb is to follow the same rules for graceful degradation as you would for progressive enhancement:
> Write valid, standards-compliant HTML
> Use external style sheets for your designs and layout
> Use externally linked scripts for interactivity
> Make sure the content is accessible even to low-level browsers without CSS or JavaScript
Explain what is Progressive Enhancement?
Progressive enhancement is a web design strategy that emphasizes accessibility, semantic markup, external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.
Is Javascript an object oriented language?
Yes, Javascript is an object oriented language. Base objects or classes are called prototypes. They allow for dynamically adding attributes and functions to the prototypes and they will immediately be available to all instances of the prototype. (There's a lot more you can do with prototypes)
This question is actually a tough one. Lots of developers program in Javascript frequently and never learn more than the basics. Learning about Javascript prototypes is one of the first steps in understanding what makes Javascript different than most classical object oriented languages
How Much?
How Long?
Get in Touch: