Comparing Desktop & Mobile First Design

-

 Responsive Design 

Comparing DesktopVS Mobile First



Desktop

Different devices 

Traditional approach 

office-based audience

Feature-rich website 


Mobile

Functional approach 

Lifestyle/news-focused audience 

Content First 

Comments

Post a Comment

Popular posts from this blog

Alternatives with "else " and "else if"

-
Image
 The if...else is a type of conditional statement that will execute a block of code when the condition in the if statement is truthy. If the condition is false, then the else block will be executed. Truthy and falsy values are converted to true or false in if statements. if (condition is true) {    // code is executed } else {    // code is executed } Any value that is not defined as falsy would be considered truthy in JavaScript. Here is a list of  falsy values: false 0 (zero) -0 (negative zero) 0n (BigInt zero) "", '', `` (empty string) null undefined NaN (not a number)
Read more

ADVANCE FUNCTIONS JS

-
Image
 A function has access to the variable environment (VE) of excecution context it was created  Closure : VE attached to the function, exactly as it was at the time and place the function was created  A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. A closure is the closed-over variable environment of the execution context in which a function wascreated, even after that execution context is gone. A closure gives a function access to all the variables of its parent function , even after that parent function has returned. The function keeps a reference to its outer scope, which preserves the scope chain throught time. A closure makes sure that a function doesn't loose connection to variable that...
Read more

Layouts & position

-
Image
1. static 2 absolute  3. relative  4. fixed  what do we change? Document flow  + positioning context  working with (Background) images Understanding Flexbox & Grid Diving deeper into Units   Flexbox aligned and positioned inside such a box  Flex container  is the direct parent of the flex items Original  Display: flex; Flex-direction: row; by default  Flex-direction: column; Flex-direction: column-reverse Flex-direction:row-reverse;   Flex-direction:row; Flex-wrap; allows the items to wrap as needed  align-items : center ; Justify-content: space-between; Justify-content: space-around;
Read more