0% found this document useful (0 votes)

31 views

Web Design Unit 3

Uploaded by

Charishma Reddy

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

31 views

Web Design Unit 3

Uploaded by

Charishma Reddy

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 137

1

2
Please read this disclaimer before proceeding:

This document is confidential and intended solely for the educational purpose of
RMK Group of Educational Institutions. If you have received this document through
email in error, please notify the system manager. This document contains
proprietary information and is intended only to the respective group / learning
community as intended. If you are not the addressee you should not disseminate,
distribute or copy through e-mail. Please notify the sender immediately by e-mail if
you have received this document by mistake and delete this document from your
system. If you are not the intended recipient you are notified that disclosing,
copying, distributing or taking any action in reliance on the contents of this
information is strictly prohibited.
R.M.K. ENGINEERING
COLLEGE

20IT005

WEB DESIGN AND

DEVELOPMENT

Department : ECE

Batch/Year : 2021-2025 / IV year

Created by : Dr. M. Perarasi/ASP

Modifed by :Ms. Priyadarshini/AP
1. CONTENTS

Page
S. No. Contents
No
1 Contents 5

2 Course Objectives 6

3 Pre requisites 7

4 Syllabus 8

5 Course outcomes 9

6 CO- PO/PSO Mapping 10

7 Lecture Plan 11

8 Activity based learning 12

9 Lecture Notes 13

10 Assignments 122

11 Part A Questions & Answers 123

12 Part B Questions 129

13 Supportive online Certification courses 131

14 Real time Applications 132

15 Contents beyond the Syllabus 133

16 Assessment Schedule 134

17 Prescribed Text Books & Reference Books 135

18 Mini Project Suggestions 136

5
2. COURSE OBJECTIVES

OBJECTIVES:

• To Learn the basic concepts in HTML, CSS, Javascript

• To Understand the responsive design and development

• To learn the web project management and maintenance process

• To Design a Website with HTML, JS, CSS / CMS - Word press

3. PRE REQUISITES

BASIC COMPUTER KNOWLEDGE

6
4. Syllabus
WEB DESIGN AND DEVELOPMENT L T P C
20IT005
3 0 0 3

OBJECTIVES:
❖ To Learn the basic concepts in HTML, CSS, Javascript
❖ To Understand the responsive design and development
❖ To learn the web project management and maintenance process
❖ To Design a Website with HTML, JS, CSS / CMS - Word press

UNIT I WEB DESIGN - HTML MARKUP FOR STRUCTURE 9

Working of Web - HTML Markup for Structure - Creating simple page -
Marking up text - Adding Links - Adding Images - Table Markup - Forms -
HTML5

UNIT II CSS AND JAVASCRIPT 9

CSS - Formatting text - Colors and Background - Padding, Borders and
Margins - Floating and positioning - Page Layout with CSS - Transition,
Transforms and Animation - JavaScript - Using Java Script
UNIT RESPONSIVE WEB DESIGN 9
III
Sass for Responsive Web Design - Marking Content with HTML5 - Mobile-First
or Desktop-First - CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD -
Designing small UIs by Large Finger - Images and Videos in Responsive Web
Design - Meaningful Typography for Responsive Web Design
UNIT WEB PROJECT MANAGEMENT 9
IV
Project Life Cycle - Project Definition - Discovery and Requirements - Project
Schedule and Budgeting - Running the project - Technical Documentation -
Development , Communication, Documentation - QA and testing -Deployment
- Support and operations.

UNIT V PROJECT CASE STUDY 9

Using HTML, CSS, JS or using Opensource CMS like Word press, design and
develop a Website having Aesthetics, Advanced and Minimal UI Transitions
based on the project - Host and manage the project live in any public hosting
5. COURSE OUTCOMES

COURSE OUTCOMES:

On successful completion of the course, the students should be able to

Highest
Course Outcomes Cognitive
Level
CO 1 Design Website using HTML K2

CO 2 Design Website using CSS and JS K3

CO 3 Design Responsive Sites K3

CO 4 Manage, Maintain and Support Web Apps K2

Design and develop Website having advanced UI
CO 5 K2
6. CO-PO/PSO Mapping

CO PROGRAM OUTCOMES PSO

CO ATTAI P P
NMENT PO PO PO PO PO PO PO PO PO PO PO PO PS S S
1 2 3 4 5 6 7 8 9 1 1 12 O O O
0 1 1 2 3

CO1 1 3 3 3 1 1 1 - - 2 1 2 1 - - -

CO2 2 3 2 3 1 2 1 - - 2 1 2 1 - - -

CO3 3 3 3 3 1 2 1 - 1 2 1 2 1 - - -

CO4 4 3 3 3 1 2 1 - - 2 1 2 1 - - -

CO5 5 3 3 3 1 2 1 - 1 2 1 2 1 - - -

CO 3 3 3 1 2 1 - 1 2 1 2 1 - - -

11/15/202 12
2
7. LECTURE PLAN
UNIT 3- RESPONSIVE WEB DESIGN

Mode of Delivery
Taxonomy level
Proposed Date
No. of Periods

Pertaining CO
Actual Date

Reason for
Deviation
S.No

Topic

Sass for Responsive 1 PPT

1 CO3
Web Design K2
Marking Content 1 K2 PPT
2 CO3
with HTML5
Mobile-First or 1 K2 PPT
3 Desktop-First CO3

CSS Grids 1 K2 PPT

4 CO3
CSS Frameworks 1 PPT
5 CO3
K2
UI Kits 1 PPT
6 CO3
K2
Flexbox for RWD - 1 PPT
7 Designing small UIs CO3 K2
by Large Finger
Images and Videos 1 PPT
in Responsive Web K2
8 CO3
Design -
Meaningful
Typography for 1 PPT
9 Responsive Web CO3 K2
Design

Total No. of Periods : 9

11
8. ACTIVITY BASED LEARNING – UNIT III

This activity enables the students to master the CSS flexbox.

https://flexboxfroggy.com/
Lecture Notes
Unit III - RESPONSIVE WEB DESIGN

Sass for Responsive Web Design - Marking Content with HTML5 -

Mobile-First or Desktop-First - CSS Grids, CSS Frameworks, UI Kits, and
Flexbox for RWD - Designing small UIs by Large Finger - Images and
Videos in Responsive Web Design - Meaningful Typography for
Responsive Web Design
UNIT III RESPONSIVE WEB DESIGN 9

Sass for Responsive Web Design - Marking Content with HTML5 - Mobile-First or
Desktop- First - CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD -
Designing small UIs by Large Finger - Images and Videos in Responsive Web
Design - Meaningful Typography for Responsive Web Design

1.Sass for Responsive Web Design:

Sass lets you use features that do not exist in CSS, like variables,
nested rules, mixins, imports, inheritance, built-in functions, and other
stuff.The basic concepts of Sass for RWD:

Sass is a programming/scripting language

What is Sass?

• Sass stands for Syntactically Awesome Stylesheet

• Sass is an extension to CSS
• Sass is a CSS pre-processor
• Sass is completely compatible with all versions of CSS
• Sass reduces repetition of CSS and therefore saves time
• Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in
2006
• Sass is free to download and use

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This
is where a CSS pre-processor can help.

A Simple Example why Sass is Useful

Let's say we have a website with three main colors:

#a2b9bc
#b2ad7f
#878f99

So, how many times do you need to type those HEX values? A LOT of times. And
what about variations of the same colors?

Instead of typing the above values a lot of times, you can use Sass and write this:
Sass Example
/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */

.main-header {
background-color: $primary_1;
}

.menu-left {
background-color: $primary_2;
}

.menu-right {
background-color: $primary_3;
}
So, when using Sass, and the primary color changes, you only need to change it in
one place. How Does Sass Work?

A browser does not understand Sass code. Therefore, you will need a Sass pre-
processor to convert Sass code into standard CSS.

This process is called transpiling. So, you need to give a transpiler (some kind of
program) some Sass code and then get some CSS code back.
Tip: Transpiling is a term for taking a source code written in one
language and transform/translate it into another language.

Sass File Type

Sass files has the ".scss" file
extension.

Sass
Comments
Sass supports standard CSS comments /* comment */, and in
addition it supports inline comments // comment:

Sass Example
/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */

.main-header {
background-color: $primary_1; // here you can put an inline
comment
}

Sass Variables
Variables are a way to store information that you

can re-use later. With Sass, you can store

information in variables, like:

• strings
• numbers
• colors
• booleans
• lists
• nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax:

$variablename: value;

The following example declares 4 variables named myFont, myColor,

myFontSize, and myWidth. After the variables are declared, you can
use the variables wherever you want:

mystyle.scss:

$myFont: Helvetica, sans-serif;

$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
font-family:
$myFont; font-size:
$myFontSize;
color: $myColor;
}

#container {
width: $myWidth;
}

mystyle.css
:
body {
font-family: Helvetica, sans-serif; font-size:
18px;
color: red;
}

#container { width: 680px;

border: 1px blue double;
}

mypage.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>

<h1>Hello World</h1>

<p>This is a paragraph.</p>

<div id="container">This is some text inside a container.</div>

</body>
</html>
So, when the Sass file is transpiled, it takes the variables (myFont, myColor, etc.) and
outputs normal CSS with the variable values placed in the CSS, like this:

CSS
Output:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}

#container { width:
680px;
}

Sass Variable Scope

Sass variables are only available at the level of nesting where they are

defined. Look at the following example:

mystyle.scss:

$myColor: red;

h1 {
$myColor: green; color:
$myColor;
}

p{
color: $myColor;
}

mystyle.css:

h1 {
color: green;
}

p{
color: red;
}
mypage.html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>

<h1>Hello World</h1>

<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:

Ok, that is the default behavior for variable scope.

Using Sass !global:

The default behavior for variable scope can be overridden by using the !global switch.

!global indicates that a variable is global, which means that it is accessible on all levels. Look at

the following example (same as above; but with !global added):

mystyle.scss:

$myColor: red;

h1 {
$myColor: green !global; color:
$myColor;
}

p{
color: $myColor;
}

mystyle.css:
h1 {
color: green;
}

p{
color: green;
}

mypage.html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>

<h1>Hello World</h1>

<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:

Now the color of the text inside a <p> tag will be green!

So, the CSS output will be:

CSS Output:
h1 {
color: green;
}
p{
color: green;
}
Tip: Global variables should be defined outside any rules. It could be wise to define all global
variables in its own file, named "_globals.scss", and include the file with the @include keyword.

Sass Nested Rules and Properties:

Sass Nested Rules

Sass lets you nest CSS selectors in the same way as HTML. Look at

mystyle.css:
nav ul { margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block; padding: 6px 12px;
text-decoration: none;
}
mypage.ht
ml:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>

</body>
</html>

OUTPUT:

Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector.

While in CSS, the rules are defined one by one (not nested):

CSS Syntax:

nav ul { margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block; padding: 6px
12px; text-decoration: none;
}
Because you can nest properties in Sass, it is cleaner and easier to read than
standard CSS.

Sass Nested Properties

Many CSS properties have the same prefix, like font-family, font-size and font-weight or
text- align, text-transform and text-overflow.

With Sass you can write them as nested properties:

Example

SCSS Syntax:
font: {
family: Helvetica, sans-
serif; size: 18px;
weight: bold;
}

text: {
align: center;
transform:
lowercase; overflow:
hidden;
}
The Sass transpiler will convert the above to normal
CSS:
CSS Output:
font-family: Helvetica, sans-serif; font-
size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase; text-
overflow: hidden;

Sass @import and Partials:

ass keeps the CSS code DRY (Don't Repeat Yourself). One way to write DRY code is to
keep related code in separate files.

You can create small files with CSS snippets to include in other Sass files. Examples of
such files can be: reset file, variables, colors, fonts, font-sizes, etc.
Sass Importing Files

Just like CSS, Sass also supports the @import directive.

The @import directive allows you to include the content of one file in another.

The CSS @import directive has a major drawback due to performance issues; it creates an
extra HTTP request each time you call it. However, the Sass @import directive includes the
file in the CSS; so no extra HTTP call is required at runtime!
Sass Import Syntax:
@import filename;

Tip: You do not need to specify a file extension, Sass automatically assumes that you mean
a
.sass or .scss file. You can also import CSS files. The @import directive imports the file and
any variables or mixins defined in the imported file can then be used in the main file.

You can import as many files as you need in the main file:
Example

@import "variables";
@import "colors";
@import "reset";

Let's look at an example: Let's assume we have a reset file called "reset.scss", that looks like
this:
Example

SCSS Syntax (reset.scss):

html,
body,
ul,
ol {
margin: 0;
padding:
0;
}
and now we want to import the "reset.scss" file into another file called "standard.scss".

Here is how we do it: It is normal to add the @import directive at the top of a file; this
way its content will have a global scope:
SCSS Syntax (standard.scss):
@import "reset";

body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}

So, when the "standard.css" file is transpiled, the CSS will look like
this:
CSS output:
html, body, ul, ol {
margin: 0;
padding: 0;
}

body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Run Example »

Sass Partials

By default, Sass transpiles all the .scss files directly. However, when you want to import a
file, you do not need the file to be transpiled directly.
Sass has a mechanism for this: If you start the filename with an underscore, Sass will
not transpile it. Files named this way are called partials in Sass.

So, a partial Sass file is named with a leading underscore:

Sass Partial Syntax:
_filename;

The following example shows a partial Sass file named "_colors.scss". (This file will not
be transpiled directly to "colors.css"):
Example

"_colors.scss":
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Now, if you import the partial file, omit the underscore. Sass understands that it should
import the file "_colors.scss":

Example
@import "colors";

body {
font-family: Helvetica, sans-serif; font-size:
18px;
color: $myBlue;
}
Sass @mixin and @include Sass
Mixins

The @mixin directive lets you create CSS code that is to be reused throughout the

website. The @include directive is created to let you use (include) the mixin.
Defining a Mixin

A mixin is defined with the @mixin

directive.
Sass @mixin Syntax:
@mixin name {
property: value;
property: value;
...
}

The following example creates a mixin named "important-

SCSS
text": Syntax:
@mixin important-text
{ color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}

Tip: A tip on hyphens and underscore in Sass: Hyphens and underscores are considered
to be the same. This means that @mixin important-text { } and @mixin important_text {
} are considered as the same mixin!

Using a Mixin

The @include directive is used to include a mixin.

Sass @include mixin Syntax:

selector {
@include mixin-name;
}

So, to include the important-text mixin created

above:
SCSS Syntax:
.danger {
@include important-
text; background-color:
green;
}

The Sass transpiler will convert the above to normal CSS:

CSS output:

mystyle.scss:

@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}

.danger {
@include important-text;
background-color: green;
}

mystyle.css:

.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}

mypage.html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>

<h1>Hello World</h1>

<p class="danger">Warning! This is some text.</p>

</body>
</html>

OUTPUT:

A mixin can also include other

mixins:SCSS Syntax:

@mixin special-text {
@include important- text;
@include link; @include
special-border;
}

Sass @extend and Inheritance:

Sass @extend Directive

The @extend directive lets you share a set of CSS properties from one selector to
another.

The @extend directive is useful if you have almost identically styled elements
that only differ insome small details.

The following Sass example first creates a basic style for buttons (this style will
be used for mostbuttons). Then, we create one style for a "Report" button and
one style for a "Submit" button.
Both "Report" and "Submit" button inherit all the CSS properties from the
.button-basic class,through the @extend directive. In addition, they have their
own colors defined:

SCSS Syntax:

.button-basic {
border: none;
padding: 15px
30px; text-align:
center; font-size:
16px; cursor:
pointer;
}

.button-report {
@extend .button-
basic;
background-color: red;
}

.button-submit { @extend
.button- basic;
background-color:
green; color: white;
}

After compilation, the CSS will look like this:

CSS Output:

.button-basic, .button-report, .button-submit {

border: none;
padding: 15px 30px; text-
align:
center; font-size:
16px; cursor:
pointer;
}

.button-report { background-
color:
red;
}

.button-submit {
background-color:
green; color: white;
}

By using the @extend directive, you do not need to specify several classes for an
element in your HTML code, like this: <button class="button-basic button-
report">Report this</button>. You just need to specify .button-report to get both sets
of styles.

The @extend directive helps keep your Sass code very DRY.

URL LINK:

https://www.w3schools.com/sass/sass_functions_map.php

https://www.w3schools.com/css/css_rwd_intro.asp

2. Marking Content with HTML5:

The HTML Main Element (<main>) can be used as a container for the dominant contents of
the document. The main content area consists of content that isdirectly related to, or
expands upon the central topic of a section or the central functionality of an application.
Here are a few important points to remember about the
<main> element:
• The top-level content of a page should be included in the <main> element.
• The content should be exclusive and unique to it.
• The <main> element should never be included inside the <header>,
<footer>, <nav>, <aside>, or <article> elements.
•There can only be one <main> element per
page.Consider the following example:
<body>
<main class="main-container"
role="main">Content goes here
</main>
</body>
The <article> element
As per the MDN definition:
The HTML Article Element (
<article>) represents a self-contained composition in a document, page, application, or
site, which is intended to be independently distributable or reusable, e.g., in syndication.
This couldbe a forum post, a
magazine or newspaper article, a blog entry, or any other independent item of content. Each
<article> should be identified, typically by including a heading(h1-h6 element) as a child of the
<article> element.
Here are a few important points to remember about the <article> element:
• Any self-contained content should be placed inside the <article>
element. Self-contained means that if we take the <article> element
and everything inside itout into another context, all the content is
self-
explanatory and does
not need anything else around it to be understood.
• An <article> can be nested inside another <article> element.
• There can be more than one <article> element in a
single page.Consider the following example:
<body>
<main class="main-container" role="main">
<article class="article-container flex-
container"> Content goes here
</article>
</main>
</body>
The <section> element
As per the MDN definition:
The HTML Section Element (
<section>) represents a generic section of a document, i.e., a thematic grouping of
content, typically with a heading. Each <section> should be identified, typically by
including a heading(<h1>-<h6>
element) as a child of the <section> element.Here are a few important points to remember
aboutthe<section> element:
•The <section> element can be used to encapsulate a group of related content. This
relatedcontent doesn't necessarily have to make sense if we take it out of
the page's context.
•A safe and valid way to use the <section> element is to place it inside an<article>
element. You can certainly use the <article> element without a <section> element. It's
recommended, although not required, to include a heading element (<h1>, <h2>,
<h3>, and so on) when using the
<section> element.
•It can be confusing to know when to use the <section> element and when to use the
<article> element. If you're in doubt, you can choose either element.
• There can be more than one <section> in a single page.

Consider the following example:

<body>
<main class="main-container" role="main">
<article class="article-container flex-container">
<section class="main-content">
<header>
<h1>The <code><main></code> element </h1>
</header>
<p>As per the MDN definition:</p>
<blockquote>
<p>The HTML Main Element
(<code><main></code>)
represents…</p>
</blockquote>
</section>
</article>
</main>
</body>

The <aside> element

As per the MDN definition:
The HTML
<aside> element represents a section of the page with content connected
tangentially to the rest, which could be considered separate
from that content. These sections are often represented as sidebars or inserts. They
often contain the definitions on the sidebars, such as
definitions from the glossary; there may also be other types of information, such as
related advertisements; the biography of the author; web applications; profile
information or related links on the blog.
Here are a few important points to remember about the
<aside> element:
• Content that is tangential to the main content can be included in an
<aside>element. If this content was to be separated from the main content,
it would stillpage.Consider
single make sensetheonfollowing
its own.example:
• There can be more than one <aside> in a
<body>
<main class="main-container" role="main">
<article class="article-container flex-container">
<section class="main-content">
<header>
<h1>The <code><main></code> element </h1>
</header>
<p>As per the MDN definition:</p>
<blockquote>
<p>The HTML Main Element
(<code><main></code>) represents…</p>
</blockquote>
</section>
<aside class="side-content" role="complementary">
<h2>What Does "Semantic HTML" Mean?</h2>
<p>Semantic markup basically means that we use HTML
tagsto describe what a specific piece of content is.</p>
</aside>
</article>
</main>
</body>
Tangential content means that the content refers to the subject at hand, but it's not part
of the main message. If this content inside the <aside> element is removed,
the main message is notaffected.
The <header> element
Here's the definition from MDN:
The HTML
<header> Element represents a group of introductory or navigational aids. It may contain
someheading elements but also other elements like a logo,wrapped section's header, a search
form, and so on.
Here are a few important points to remember about the <header> element:
• A good rule of thumb is to use a <header> element inside a <section> element.
•We can wrap a heading (h1 to h6) inside a <header> element if we think
it isnecessary, but this is not really a common practice or required.
•There can be more than one <header> element in a single
page. In the following example, there are two highlighted
<header> sections, the masthead
and a header inside a <section> element:
<body>
<header class="masthead" role="banner">
<div class="logo">Mastering RWD with HTML5 & CSS3</div>
<div class="search" role="search">
<form>
<label>Search:
<input type="text" class="field">
<button>Search Now!</button>
</label>
</form>
</div>
</header>
<main class="main-container" role="main">
<article class="article-container flex-
container">
<section class="main-content">
<header>
<h1>The <code><main></code> element</h1>
</header>
<p>As per the MDN definition:</p>
<blockquote>
<p>The HTML Main Element
(<code><main></code>)
represents…</p>
</blockquote>
</section>
<aside class="side-content" role="complementary">
<h2>What Does "Semantic HTML" Mean?</h2>
<p>Semantic markup basically means that we use
HTMLtags to describe what a specific piece of
contentis.</p>
</aside>
</article>
</main>
</body>
The <nav> element
As per the MDN definition:
The HTML Navigation Element (<nav>) represents a section of a page that links to other
pagesor to parts within the page: a section with navigation links.
Here are a few important points to remember about the
<nav> element:
•It is used to group a list or collection of links. The links can either point
to external resources or to other pages within the site/app.
• It's common practice to use an unordered list <ul> inside the
<nav> element to structure the links, because it's easier to style.
•Including a <nav> in the <header> element is also a common
practice butnot required.
Not all groups of links have to be inside a <nav> element. If we have
a list of links inside a <footer> tag, then its isn't really
necessary to include thoselinks in a
<nav> as well.
There can be more than one <nav> element in a single page, for
example, a main navigation, a utility navigation, and a <footer>
navigation.
Consider the following example:
<body>
<header class="masthead" role="banner">
<div class="logo">Mastering RWD with HTML5 & CSS3</div>
<div class="search" role="search">
<form>
<label>Search:
<input type="text" class="field">
<button>Search Now!</button>
</label>
</form>
</div>
</header>
<nav class="main-nav" role="navigation">
<ul class="nav-container">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<main class="main-container" role="main">
<article class="article-container flex-container">
<section class="main-content">
<header>
<h1>The <code><main></code> element</h1>
</header>
<p>As per the MDN definition:</p>
<blockquote>
<p>The HTML Main Element
(<code><main></code>)
represents…</p>
</blockquote>
</section>
<aside class="side-content" role="complementary">
<h2>What Does "Semantic HTML" Mean?</h2>
<p>Semantic markup basically means that we use HTMLtags to
describe what a specific piece of
content is.</p>
</aside>
</article>
<footer class="main-footer" role="contentinfo">
<p>Copyright ©</p>
<ul class="nav-container" role="navigation">
<li><a href="#">Footer Link 1</a></li>
<li><a href="#">Footer Link 2</a></li>
<li><a href="#">Footer Link 3</a></li>
<li><a href="#">Footer Link 4</a></li>
<li><a href="#">Footer Link 5</a></li>
</ul>
</footer>
</main>
</body>
Using WAI-ARIA landmark roles to increase accessibility:
WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich
Internet Applications. WAI-ARIA landmark roles
WAI-ARIA landmark roles can also be referred to as ARIA roles, so that's
the term we're going to use.
An ARIA role looks like this when implemented in an HTML5 element:
<header role="banner">
There are really multiple ARIA roles at our disposal, but in this book we're going to
focus on theones that are easier to implement and that will enhance the
accessibility
of our websites/apps efficiently.
The banner role
Here are a few important points to remember:
• This role is usually applied to the top <header> of the page.
• The header region contains the most prominent heading or title of a page.
•Usually, the content that has role="banner" appears constantly
across thesite rather than in a single specific page.
• Only one role="banner" is allowed per page/document.
The navigation role
Here are a few important points to remember:
•This role is usually applied to the <nav> element, but it can also be applied to other
containerssuch as
<div> or <ul>.
•It describes a group of navigational elements/links. These links can
be eitherto navigate the site or the page they appear on.
• There can be more than one role="navigation" per page.
The main role
Here are a few important points to remember:
• This role is usually applied to the <main> element of the page.
• The container of the main/central subject of the page should be marked with this
role.
• Only one role="main" is allowed per page/document.
The contentinfo role
Here are a few important points to remember:
• This role is usually applied to the main <footer> element of the page.
• This is the section that contains information about the document/site/app.
• If the section contains, for example, a copyright link,
footnotes, links to privacy statement, or terms and conditions, it's
a good candidate forrole="contentinfo".
• Only one role="contentinfo" is allowed per page/document.
The search role
Here are a few important points to remember:
•This role is usually applied to the <form> element that belongs to
the searchfeature of the page/app.
• If the search form is wrapped inside a <div> element, this role can also be
applied to that
<div> element. If this is the case, then there's no need to addit to
the child <form> element.
•There can be more than one role="search" per page as long as the control isan
actual search feature. For example, using the
role="search" on a contact form is incorrect and unsemantic.
The form role
Here are a few important points to remember:
•This role is usually applied to a <div> element that contains some type of form,
except the main search form of the site/app, for example, contact
forms,registration forms, payment forms, and so on.
•It should not be applied to the actual <form> element, because this
elementalready has default role semantics that assist technology
support.
The complementary role
Here are a few important points to remember:
• This role is usually applied to an <aside> element.
•It should be used on a region that contains supporting content; if
separatedfrom the content, it can still make sense on its own. This
is pretty much the description of the
<aside> element.
• There can be more than one role="complementary" per page.
Important meta tags to consider for RWD:
The viewport meta tag:
The viewport meta tag is the most important meta tag for RWD. It was introduced by
Apple in their mobile Safari browser. Now, other mobile
browsers support it as well. Oddly enough, this meta tag is not part of any web
standards of any kind, yet it is mandatory if we want our responsive sites/apps to
display correctly on small screens.
The recommended syntax of this meta tag is as follows:
<meta name="viewport" content="width=device- width,initial-
scale=1">
Here are a few important points to remember:
• The name="viewport" directive describes the type of meta tag.
•The content="width=device-width, initial-scale=1" directive
doesseveral things:
The width property defines the size of the viewport meta tag.
We can also use specific pixel widths, for example,
width=960.
The device-width value is the width of the screen at 100 percentzoom
in CSS pixels.
The initial-scale value defines the zoom level the page shouldbe
shown at when it's first loaded. 1 equals 100 percent zoom and
1.5 equals 150 percent zoom.
The X-UA-Compatible meta tag:
The X-UA-Compatible meta tag targets only Internet Explorer and its CompatibilityView
feature. As we all know, Microsoft introduced Compatibility
View in IE8.
The recommended syntax of this meta tag looks like this:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The charset meta tag
The charset meta tag tells the browser which character set to use to interpret
thecontent.
The recommended syntax of this meta tag in HTML5 is like this:
<meta charset="utf-8">
Output screenshots for desktop andMobile:
3. Mobile-first or Desktop-first?
Create your designs in a desktop-first
view, but implement them with mobile-first
Let's look at some terminology so that we're on the same page:
•Wireframe: This is a very basic visual representation of a layout using only
outlines, in otherwords, in black and white. There are no colors, no branding,
and no defined styles of any kind.
• Design/Comp: This is a fleshed out wireframe with colors, branding, and styles. It's
a very close representation (usually, say, 95 percent close to the final product) of
the final page/site/appwithout going into markup or coding of any kind.
• HTML mockup or HTML template: This is when the design
has beenimplemented into an actual HTML page with CSS and—
sometimes— JavaScript. It can only be viewed in the browser.
It's practically an exact representation (99 percent close to the
final product) of how the page/site/
web app will look and work like.
Why create designs in a desktop-first view?
• The reason behind creating designs in a desktop-first view is simple: real estate
(space).
• As designers, we are required to reflect the hierarchy of the content in a visual way.
To accomplish this, we use many design principles such as rhythm, proximity,
whitespace, patterns, contrast, balance, grid, symmetry, and so on.
• When the canvas on which we're creating a wireframe or design/comp is big
enoughto try different arrangements and layouts, we have the necessary flexibility
to explore different ways that can represent the said content hierarchy.
Creating a layout like this one with a mobile-first approach with a small canvas is
practically impossible. The small real estate screen is incredibly restrictive and limited. But
when things start to grow, we would need to make this exploration process each time we think
of a specificbreakpoint.
Note: Actually, we shouldn't be thinking about breakpoints at this point (no pun
intended), because the content—not specific device widths—is what dictates where a new
breakpoint needsto be added.
Why implement with mobile-first?
Use desktop-first to create your designs and wireframes. Having a large canvas
allows us to explore different layouts and properly arrange the hierarchy of the content.
When it's time toimplement (create HTML mockups), use mobile-first.
Sass mixins for the mobile- first
anddesktop-first media queries:
For our examples, there are two types of Sass mixins we're going to use in this book:
a mobile-first mixin that uses the min-width property and a
desktop-first mixin that uses the max-width property.
The mobile-first mixin
We're going to use the following mobile-first mixin:@mixin
forLargeScreens($media) {
@media (min-width: $media/16+em) { @content; }
}
This is how we use it:
header {
//Properties for small screenswidth:
50%; background: red;
@include forLargeScreens(640) {
//Properties for large screenswidth:
100%; background: blue;
}
}
This compiles to the following:header {
width: 50%; background: red;
}
@media (min-width: 40em) { header {

width: 100%;
background: blue;
}
}
The desktop-first mixin
Here's the desktop-first mixin we're going to use: @mixin
forSmallScreens($media) {
@media (max-width: $media/16+em) { @content; }
}
This is how we use it:
header {
//Properties for large screenswidth:
100%; background: purple;
@include forSmallScreens(640) {
//Properties for small
screenswidth: 50%; background:
yellow;
}
}
@include forSmallScreens This
compiles to the following:
header {
width: 100%; background:
purple;
}
@media (max-width: 40em) { header
{ width: 50%; background:
yellow;
}
}
Note:
The great thing about using these mixins is that it's incredibly easy to find out which
approach isbeing used, because we can see either the term forLargeScreens or
forSmallScreens is repeated all
over our SCSS file. If someone else were to edit any of the work we initially did, they will get
aclear idea of which approach we used to build our site/app just by scanning the SCSS file.
The RWD magic formula
Discovered/created by Ethan Marcotte, who coined the term Responsive Web Design,the
RWD magic formula is a very simple equation:
(target ÷ context) x 100 = result %
Before we start turning pixels into percentages, we need to see which width our
context is going to be.
The main container
Our context is going to be the main container of the page .container_12,
and the columns that will turn this 980px context into 960px. Notice the
10pxleft-right padding on the .container_12 section and the 10px left-right
marginin the .grid rules:
.container_12 { width:
980px; padding: 0
10px;margin:
auto;
}
.grid {
&_1, &_2, &_3, &_4, &_5, &_6, &_7, &_8, &_9,
&_10,&_11, &_12 {
float: left;
margin: 0 10px;
}
}
The Header and Footer sections
Both the Header and Footer sections have the same width, 940px. Knowing that
their context is 960px, let's go ahead and find their widths in percentages using the
magic formula: (940px ÷ 960px) x 100 = 97.91666666666667%
The Nav section
To find the width of the Nav section in percentages, we use 960px as its
context aswell: (220px ÷ 960px) x 100 = 22.91666666666667%.
Using two decimals, we end up with a Nav section of 22.91 percent.
The Content section
To find out the width of the Content section in percentages, our
formula looks almost identical. The only difference is that we are
changing the firstvalue which corresponds to the width of the
Content section in pixels: (700px ÷ 960px) x 100 =
72.91666666666667%.
Using only two decimals, our final value is a Content section of 72.91
percent.final SCSS, combining all breakpoints and widths, is as follows:
.container_12 { width: 980px;
padding: 0
1.04%;margin:
auto;
}
.grid {
&_1, &_2, &_3, &_4, &_5, &_6, &_7, &_8, &_9,
&_10,&_11, &_12 {
float: left; margin: 0
1.04%;
}
}
.container_12 {
@include forSmallScreens(980px)
{width: 768px;
}
@include forSmallScreens(768px) { width:
640px;
}
@include forSmallScreens(640px) { width:
480px;
}
@include forSmallScreens(480px) { width:
320px; padding: 0;
}
.grid_12 { //Header and Footer sections width:
97.91%;
}
.grid_3 { //Nav sectionwidth:
22.91%;
}
.grid_9 { //Content sectionwidth: 72.91%;
}
.grid_3, .grid_9 { //Nav and Content sections @include
forSmallScreens(640px) {
width: 97.91%;
}
}
}
It compiles to the following CSS:
.container_12 {
width: 980px; padding: 0
1.04%;margin:
auto;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7,
.grid_8, .grid_9, .grid_10, .grid_11,
.grid_12 { float: left; margin: 0 1.04%;
}
@media (max-width: 980px) {
.container_12
{width:
768px;
}
}
@media (max-width: 768px) {
.container_12
{width:
640px;
}
}
@media (max-width:
640px) {
.container_12
{width:
480px;
}
}
@media (max-width: 480px) {
.container_12
{ width:
320px; padding: 0;
}
}
.container_12
.grid_12 { width:
97.91%;
}
.container_12
.grid_3 { width:
22.91%;
}
.container_12
.grid_9 { width:
72.91%;
}
@media (max-width: 640px) {
.container_12 .grid_3, .container_12
.grid_9 {width: 97.91%;
}
}
As you can see, it's a lot less code using RWD than AWD to retrofit a site. Granted,
these examples are an extreme simplification of a site/app layout, but now you are
aware of the basic concepts of each technique when the time
to make the call of usingAWD or RWD knocks on your door.

4. CSS Grids:

What is a grid?
A grid is a set of visual guidelines (vertical, horizontal, or both, hence the term grid)
that help define where elements can be placed. Once the elements have been placed,
we end up with a layout.
CSS grids
A CSS grid is basically a compound of vertical guidelines that form columns. The
properties ofthese columns are defined in a CSS file. This file contains a list of classes with
specific widths that match the amount of columns that a specific grid is built for. The pros and
cons of CSS grids for RWD:
The advantages are as follows:
•Laying out elements is a lot easier because the columns serve as
guidelinesfor placement.
• If using a prebuilt CSS grid, there's no need to do any of the math to deal with the
column andgutter widths. It's already taken care of by the author
of the grid.
•We can build faster, since all we need to do is add specific classes to our containers
in our HTML and—for the most part—the layout will happen instantly.
•Understanding grids in web design is relatively simple, so enhancing/editing someone
else's markup and code in an already built project is less painful than if they
hadn't used a CSS grid at all.
• If the grid is responsive or adaptive, we don't have to worry too much
about the breakpoints.
• If we are using a third-party CSS grid, any cross-browser issues have
already beenaddressed.
The disadvantages are as follows:
• Some CSS grids have a steeper learning curve than others.
• With many CSS grids, we are locked into using the name
conventions theauthor created.
• We may have to change/adapt the way we write our HTML.
• There are so many CSS grids to choose from that it can be
overwhelmingfor some.
• If our content breaks at certain points the grid doesn't support, we have to spend
timeamending the original grid to fit each individual situation.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container
{display:
grid;
grid-template-columns: auto auto auto;
background-color: #2196F3; padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0,
0.8);padding: 20px;
font-size: 30px; text-align:
center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to
<em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

</body>
</html>

Output:

CSS Grid Container:

To make an HTML element behave as a grid container, you have to set the
display propertyto grid or inline-grid.

Grid containers consist of grid items, placed inside columns and

rows.The grid-template-columns Property

The grid-template-columns property defines the number of columns in your

grid layout, and itcan define the width of each column.

The value is a space-separated-list, where each value defines the width of the
respective column.
If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or
"auto" if all columns should have the same width.

<!DOCTYPE html>

<html>

<head>

<style>

.grid-container

{display:

grid;
grid-template-columns: auto auto auto auto;

grid-gap: 10px;

background-color:

#2196F3;padding: 10px;

}
.grid-container > div {

background-color: rgba(255, 255, 255,

0.8);text-align: center;

padding: 20px

0;font-size: 30px;

</style>

</head>

<body>
<h1>The grid-template-columns Property</h1>
<p>You can use the <em>grid-template-columns</em> property to specify the
number ofcolumns in your grid layout.</p>

</div>

</body>

</html>

Output:

The grid-template-columns property can also be used to specify the size (width)
of the columns.
<!DOCTYPE html>
<html>

<head>

<style>

.grid-container

{display:

grid;
grid-template-columns: 80px 200px auto 30px; grid-gap: 10px;

background-color: #2196F3;padding: 10px;

.grid-container > div {

background-color: rgba(255, 255, 255, 0.8);text-align: center;

padding: 20px 0;font-size: 30px;

</style>

</head>

<body>

<h1>The grid-template-columns Property</h1>

<p>Use the <em>grid-template-columns</em> property to specify the size of each

column.</p>
<div class="grid-container">

</div>

</body>

</html>

The align-content Property

The align-content property is used to vertically align the whole grid inside
the container.

<!DOCTYPE html>

<html>

<head>

{display:

grid; height:

400px;

align-content: center;

grid-template-columns: auto auto auto; grid-gap: 10px;

background-color: #2196F3;padding: 10px;

.grid-container > div {

background-color: rgba(255, 255, 255, 0.8);text-align: center;

padding: 20px

0;font-size: 30px;

</style>

</head>

<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the
container.</p>
<p>The value "center" will align the rows in the middle of the container:</p>

</div>

</body>

</html>

CSS Grid Item:

A grid container contains grid items.

By default, a container has one grid item for each column, in each row, but you can style
the griditems so that they will span multiple columns and/or rows.

The grid-column Property:

The grid-column property defines on which column(s) to place an

item.You define where the item will start, and where the

Note: The grid-column property is a shorthand property for the grid-column-start and the grid-
column-end properties.

item will end.

To place an item, you can refer to line numbers, or use the keyword "span" to define how
manycolumns the item will span.

Example

Make "item1" start on column 1 and end before column 5:

<!DOCTYPE html>

<html>

<head>

<style>

.grid-container

{display:

grid;
grid-template-columns: auto auto auto auto auto auto;

grid-gap: 10px;

background-color:
#2196F3;padding: 10px;
}

.grid-container > div {

background-color: rgba(255, 255, 255, 0.8);text-

align: center;

padding: 20px 0;font-size:

30px;

.item1 {

grid-column: 1 / 5;

</style>

</head>

<body>

<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>

<p>Item1 will start on column 1 and end before column 5:</p>

</div>
</body>

</html>
The grid-row Property:

The grid-row property defines on which row to place an

item. You define where the item will start, and where the item

will end. The grid-area Property

The grid-area property can be used as a shorthand property for the grid-row-start,
grid-column-start, grid-row-end and the grid-column-end properties.

Naming Grid Items

The grid-area property can also be used to assign names to grid items.

<!DOCTYPE html>

<html>

<head>

<style>

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }

.grid-container

{display:

grid;

grid-template-areas:

'header header header header header

header''menu main main main right right'

'menu footer footer footer footer

footer';grid-gap: 10px;

background-color: #2196F3;
padding: 10px;

.grid-container > div {

background-color: rgba(255, 255, 255,

0.8);text-align: center;

padding: 20px

0;font-size: 30px;

</style>

</head>

<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the
<em>grid-template- areas</em> property on the grid container.</p>

<p>This grid layout contains six columns and three rows:</p>

<div class="item1">Header</div>

<div class="item4">Right</div>

<div class="item5">Footer</div>

</div>

</body>

</html>

url link: https://www.w3schools.com/css/css_grid_item.asp

5. CSS Frameworks:

A CSS framework is a group of prebuilt features that basically help

speed upfrontend development for the Web.

The following list describes some of the features and

characteristics ofCSS frameworks:
•CSS frameworks are focused solely on web-based development, not
nativemobile apps.
• CSS frameworks always offer a CSS grid.
•Many of them also offer user interface components as well (just like a UI kit), for
example, sliders, paginations, navigation bars, typography, buttons, and so on in the
form of HTML andCSS.
• Both CSS frameworks and web-oriented UI kits can be called frontend frameworks.

6.UI kits:
Similar to CSS frameworks, there is another type of frontend framework called UI
kits. However, UI kits can be a breed of their own.
The following list describes some of the features and characteristics of UI kits:
•There are basically two types of UI kits: those that are built with web
technologies (HTML and CSS) and can be used to prototype web-based
applications, and those that are made of (usually) Photoshop (PSD) files to
help mock up and design native mobile apps.
• Very few web-oriented UI kits offer a grid of some sort.
•UI kits are focused on providing user interface components such as
sliders, paginations, navigation bars, dialog boxes, overlays/modals,
buttons,typography, tooltips, lists, accordions,tab systems,
carousels/slideshows,forms, and so on.
•In a web-oriented UI kit, the architecture is very modular. This means
that each component canbe incorporated into any CSS framework.

UI kits, or user interface kits, help you improve your design workflow. They
also encourage recycling components instead of creating new ones from
scratch. They’re commonly used for mobile design or prototyping, largely
because two of the biggest operating systems—iOS and Android—both have
robust, well documented, and heavily supported design systems. (Note that
design systems and UI kits often go hand-in- hand. A design system relates
to both the code components and UI design, while a UI kit refers to the
designer’s version of the design system. AUI kit can stand alone without any
relation to a larger design system.
What is a UI kit?
A UI kit is a set of files that contains critical UI components like fonts,
layered design files, icons, documentation, and HTML/CSS files. UI kits can
be fairly simple with a few buttons and design components, or extremely
robust with toggles that change fonts, colors, and shapeson the fly.UI kits
save you time and keep you consistent by allowing you to create, edit, or
expand on the existing components without creating
them from scratch. Things like checkboxes, arrows, drop-downs, and forms
are not worth re-inventing, especially when prototyping.
Advantages and disadvantages of UI kits:

UI kits can take time to make, but are worth it in the long run. That being

said, they’re notperfect. Here’s a quick breakdown.

Advantages

Most notably, UI kits can save you time and money by allowing designers to use their

time more efficiently. When you don’t have to worry about the standard details, you

can optimize your work by focusing on the unique features of the specific site, app,

or product you’re working on. Though it can be an investment to purchase or create

a premium UI kit, it’s worthit, especially if you’re going to use it for several designs

or sites.

When everyone knows exactly what size your CTAs should be and what color the
cancel buttons are, your product is more consistent throughout. This allows your

users to learn yourproduct quicker and reduces cognitive load. This reliable

documentation

also encourages newcomers (to the product or company) to quickly hop on board,

giving thema helpful glimpse into your rules and style preferences. Think of it as

the true north for your UI.

Last but not least, UI kits give you the ability to update styles quickly, easily, and on
the fly. Ifa client changes the color of their app or site, no big deal. A UI kit allows

you to keep everything organized and categorized so you know that all your CTAs

are

blue with a 2px stroke and a 5px dropshadow.

Disadvantages

The disadvantages of UI kits are more nuanced, but still worth considering before you
dive in.

Depending on the UI kit you create or use, you could be locked into specific
components, or bemissing certain ones completely. Not all kits are

comprehensive, and if you’re building yours as you go, you’ll have some gaps.

It’s not a huge deal, but it could rob your efficiency instead of boosting it.

Matching styles from your brand to a different UI kit can be time-consuming.

Let’s

say you find a great UI kit that has rounded edges on all the elements, but
your
client’s brand has square edges throughout. Smaller components may be easy

to change, but matching the stylethroughout the entire kit could take a lot of

work. If a kit is dramatically different from your style, this could mean more

work, time, and money.

If you’re managing multiple UI kits for different clients, projects, or teams, it can
be
taxing to re-learn a new system everytime you switch. Deciphering the layers,
naming convention, and general organization each time can be frustrating, and

feel like

you’re spending more time on the process versus the design itself.

Examples of UI kits

To help get you started on making your dream project a reality, InVision has a

library of high- quality UI kits that are completely free. Below, a few highlights.

With 130 screens and 10 unique themes, this kit provides enough UIs to build
all

kinds ofclean, colorful apps.

Relate

With 45 unique templates, 19 categories, and over 99 UI elements, the Relate UI

kit gives youthe resources you need to build immersive mobile app experiences.

There’s no optimization required with vector-only shapes that scale to any size,

including retina.

Tethr
This kit provides eight source files, 138 templates, and over 250 UI elements so
that

you caneasily build iOS templates.

Deck

With over 200 UI elements, this cross-platform UI kit is made for designing

card- basedinterfaces and media websites for desktop, mobile, and tablet

formats.
Form

This wireframe kit is like having a head start on your next project, with a huge
library
of ready- to-use layouts, components, and symbols. Popular page categories include

headers, footers, pricing tables, blog post templates, feature pages, testimonials,

FAQ pages, and more.

Save time and money right from the start

You want to design a beautiful user interface but collecting feedback and revising

your designscan be tough if it’s not all in one place. What’s the most efficient way

to go about this important step?

With InVision, it’s easy for your team to share prototypes and quickly gather
meaningful feedback—both in and outside your organization. From early, low-

fidelity freehands to high-

fidelity Studio screens, the user feedback is built into the process, empowering

your team tofine-tune, fix, and ship a successful product.

The pros and cons of CSS frameworks for RWD:

With RWD as our main driver for any decisions we make in terms of layout
versus screen real estate, let's take a look at what the good and not so good
things are about CSS frameworks:
The advantages are as follows:
• They are very useful to rapidly build responsive prototypes rather
thanshowing static wireframes.
• Cross-browser issues are already taken care of.
• They force you, in a good way, to create grid-based layouts.
• They offer a solid starting point to build on top of.
• The modularity allows you to handpick the components you want. For example,
you canjust use the CSS grid module or you can use the forms module.
• Changing the styling to fit your design(s) is relatively easy.
• If you aren't too good at CSS, you can still use a CSS framework to
• implement your own designs. The
disadvantages are as follows:
• They can bloat your project(s) with CSS that you will never use.
• They have a large footprint if you decide to use the entire CSS framework.
• You might need to change your habits and the way you write your
HTMLand CSS to fit the CSS framework you're using.
• They can be opinionated, so if you don't like the way things are named
youhave very little choice for customization.
• Customizing a CSS framework is doable, but it can be very time
consuming and dangerous. Change a name to something else and there's
almost no way to know what the impact is going to be on other parts
of the framework.
• If the default styling is not changed to fit your brand/designs, your site or
app will not be unique and will look like everyone else's, losing credibility
infront of users.
• If you need to build something simple, using a CSS framework is overkill.
• Every website/app or project is different, so you may end up spending
a lotof time changing and overriding properties for every single project.
• They try to solve every frontend problem.
• Creating a custom CSS grid:
Let's lay out our CSS grid requirements:
• It should have 12 columns.
• It should be 1200px wide to account for 1280px screens.
•It should be fluid, with relative units (percentages) for the
columnsand gutters.
• It should use the mobile-first approach.
• It should use the SCSS syntax.
• It should be reusable for other projects.
• It should be simple to use and understand.
• It should be easily scalable.
Here's what our 1200 pixel wide and 12-column width 20px grid
looks like:

The left and right padding in black are 10px each. We'll
convert those 10px into percentages at the end of this
process.

Nested containers:

• Notice that there are several nested containers inside their own
row (black background). The idea here is to highlight the nested
content sections that add up to 12 columns.
• Nesting columns are a major advantage of any grid system.
In this book, we areharnessing this power so we don't
limit the design in any way.

We're using the HTML5 Shiv polyfill to add HTML5 support

to IE8 and below. On small screens (320px wide), this is
what the container looks like:
On large screens starting at 40em (640px) wide, this is what the
layout looks like:
You can see the demo I created on CodePen
at http://codepen.io/ricardozea/
pen/d6ab6e0293be9b6bac2e16ad37942ed5

CSS User Interface Properties:

The following table lists all the user interface

properties:

Propert Descriptio
y n
outline- Adds space between an outline and the edge or border of an
offset element
resize Specifies whether or not an element is resizable by
the user CSS Resizing

The resize property specifies if (and how) an element should be resizable by the
user.

<!DOCTYPE html>
<html>
<head>
<style
>div { border: 2px
solid;padding:
20px; width: 300px;
resize:
horizontal; overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

The following example lets the user resize only the height of a <div> element:
<!DOCTYPE html>
<html>
<head>
<style
>div { border: 2px
solid;padding:
20px; width:
300px; resize:
vertical; overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

The following example lets the user resize both the height and width of a <div>
element:
<!DOCTYPE html>
<html>
<head>
<style
>div { border: 2px
solid;padding:
20px; width:
300px; resize:
both; overflow:
auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
<p>Let the user resize both the height and the width of this div
element.</p>
<p>To resize: Click and drag the bottom right corner of this div
element.</p>
</div>

</body>
</html>

In many browsers, <textarea> is resizable by default. Here, we have used the

resize property todisable the resizability:
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test
{
resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this

example, we have usedthe resize property to disable the resizability:</p>

<textarea id="test">Textarea - Not resizable</textarea>

<textarea>Textarea - Resizable (default)</textarea>

</body>
</html>
CSS Outline Offset

The outline-offset property adds space between an outline and the edge or
border of an element.

Note: Outline differs from borders! Unlike border, the outline is drawn outside
the element's border, and may overlap other content. Also, the outline is NOT
a part of the element's
dimensions; the element's total width and height is not affected by the width of the
outline.
The following example uses the outline-offset property to add space
between the border and theoutline:

<!DOCTYPE html>

<html>

<head>

<style

div.ex1

margin: 20px;

border: 1px

solid

black;outline:

4px solid red;

outline- offset:

15px;

}
div.ex2 {

margin:

10px;

border: 1px solid

black;
outline: 5px dashed

blue;outline-offset:

5px;

</style>

</head>

<body>

<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside
the borderedge.</div>

<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels

outside the borderedge.</div>

</body>

</html>

url link:
https://www.w3schools.com/css/css3_user_interface.asp
7.CSS Flexbox Layout Module:

Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage

• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive
layout structurewithout using float or positioning.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

he element above represents a flex container (the blue area) with three flex
items.

Example

A flex container with three flex items:

<!DOCTYPE html>

<html>

<head>

<style>

.flex-

container {

display:

flex;

background-color:
DodgerBlue;

.flex-container > div {

background-color:

#f1f1f1;margin:

10px; padding:

20px;font-
size: 30px;

</style>
</head
>

<body
>
<h1>Create a Flex
Container</h1>

</div>

<p>A Flexible Layout must have a parent element with the

<em>display</em> property setto <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container

automatically becomes flexibleitems.</p>

</body>

</html>

CSS Flex Container

Parent Element
(Container)
Like we specified in the previous chapter, this is a flex container (the blue area) with
threeflex items:

The flex container becomes flexible by setting the display property to flex:

<!DOCTYPE html>

<html>

<head>

<style>

.flex- container { display:

flex;

background-color: DodgerBlue;

.flex-container > div {

background-color:

#f1f1f1;margin: 10px;

padding:
20px;font- size:

30px;

</style>

</head>

<body>
<h1>Create a Flex
Container</h1>

</div>

<p>A Flexible Layout must have a parent element with the

<em>display</em> property setto <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically

becomes flexibleitems.</p>

</body>

</html>

he CSS Flexbox Container Properties

The following table lists all the CSS Flexbox Container properties:

Property Description
align-content - Modifies the behavior of the flex-wrap property. It is similar to
align- items, butinstead of aligning flex items, it aligns flex lines
align-items - Vertically aligns the flex items when the items do not use all
available space onthe cross-axis
display - Specifies the type of box used for an HTML element

flex-direction - Specifies the direction of the flexible items inside a flex

containerflex-flow - A shorthand property for flex-direction and flex-

wrap
flex-wrap Specifies whether the flex items should wrap or not, if there is
not enough roomfor them on one flex line
justify-content Horizontally aligns the flex items when the items do not use all
available spaceon the main-axis

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex
items.

<!DOCTYPE html>

<html>

<head>

<style>

.flex- container {

display:

flex;

flex-direction: column;
background-color:

DodgerBlue;

.flex-container > div {

background-color:
#f1f1f1;width:
100px;
margin:

10px; text-

align:

center;
line-height:
75px;font-

size: 30px;

</style>

</head>

<body>

<h1>The flex-direction Property</h1>

<p>The "flex-direction: column;" stacks the flex items vertically (from top to
bottom):</p>

</div>

</body>

</html>
Example

The column-reverse value stacks the flex items vertically (but from bottom
to top):

<!DOCTYPE html>

<html>

<head>

<style>

.flex-

container {

display:

flex;

flex-direction: column-
reverse; background-

color: DodgerBlue;

}
.flex-container > div
{
background-color:

#f1f1f1;width:

100px;
margin: 10px;
text-align:

center;
line-height:
75px;font-

size: 30px;

</style>

</head>

<body>

<h1>The flex-direction Property</h1>

<p>The "flex-direction: column-reverse;" stacks the flex items vertically

(but from bottomto top):</p>

</div>

</body>

</html>
Example

The row value stacks the flex items horizontally (from left to right):

<!DOCTYPE html>

<html>

<head>

<style>

.flex- container {

display:

flex;
flex-direction: row;

background-color:

DodgerBlue;

.flex-container > div {

background-color:

#f1f1f1;width: 100px;
margin: 10px;
text-align:

center;line-

height: 75px;
font-size: 30px;

</style>

</head>

<body>

<h1>The flex-direction
Property</h1>

<p>The "flex-direction: row;" stacks the flex items horizontally (from left
to right):</p>

</div>

</body>

</html>

Example

The row-reverse value stacks the flex items horizontally (but from right to
left):

<!DOCTYPE html>
<html>

<head>

<style>

.flex- container { display:

flex;
flex-direction: row- reverse;

background-color: DodgerBlue;

.flex-container > div {

background-color:

#f1f1f1;width: 100px; margin:

10px;

text-align: center;line-

height: 75px; font-size:

30px;

</style>

</head>

<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: row-reverse;" stacks the flex items

horizontally (but from right toleft):</p>
<div class="flex-container">

</div>

</body>

</html>

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container

{ display:
flex; flex- wrap: wrap;

background-color: DodgerBlue;
}

.flex-container > div {

background-color:

#f1f1f1;width: 100px;

margin: 10px;
text-align:

center;line- height:

75px; font-size:

30px;

</style>

</head>

<body>

<h1>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

<div>5</div>
}

.flex-container > div {

background-color: #f1f1f1; width:

100px;

margin: 10px; text-align:

center; line-height: 75px;

font-size: 30px;

</style>

</head>

<body>

<h1>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

</div>

<p>Try resizing the browser window.</p>

</body>

</html>

Example

The wrap value specifies that the flex items will wrap if necessary:

<!DOCTYPE html>

<html>

<head>

background-color: DodgerBlue;

.flex-container > div {

background-color: #f1f1f1;

width: 100px;

margin: 10px; text-

align: center; line-

height: 75px; font-

size: 30px;

</style>

</head>

<body>
<h1>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

</div>

<p>Try resizing the browser

window.</p>

</body>

</html>

Example

The nowrap value specifies that the flex items will not wrap (this is
default):
<!DOCTYPE html>

<html>

<head>

flex-wrap: nowrap;

background-color: DodgerBlue;

.flex-container>div {
background-color: #f1f1f1; width:

100px;

margin: 10px; text-align:

center;

line-height: 75px; font-size:

30px;

</style>

</head>

<body>
<h1>The flex-wrap Property</h1>
<p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap (this is
default):</p>

</div>
<p>Try resizing the browser window.</p>

</body>

</html>
Example

The wrap-reverse value specifies that the flexible items will wrap if necessary, in
reverse order:
.flex-container { display:
flex;
flex-wrap: wrap-reverse;
}

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction
and flex- wrap properties.

Example
.flex-container {
display: flex;
flex-flow: row wrap;
}
The justify-content Property

The justify-content property is used to align

the flex items: Example

The center value aligns the flex items at the center of

the container:

<!DOCTYPE html>

<html>

<head>

}
.flex-container > div {
background-color:

#f1f1f1; width:

100px;

margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;

</style>

</head>

<body>

<h1>The justify-content Property</h1>

<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>

</div>

</body>
</html>

Example

The flex-start value aligns the flex items at the beginning of the container (this is
default):
.flex-container { display:
flex;
justify-content: flex-start;
}

Example

The flex-end value aligns the flex items at the end of the
container:
.flex-container {
display: flex;
justify-content: flex-end;
}
Example

The space-around value displays the flex items with space before, between, and after
the lines:
.flex-container { display:
flex;
justify-content: space-around;
}

Example

The space-between value displays the flex items with space between the lines:
.flex-container { display: flex;
justify-content: space-between;
}

URL link:

https://www.w3schools.com/css/css3_flexbox_container.asp
8. Designing small UIs by Large Finger:

The intense popularity of touchscreen devices is nothing new to us—the web/mobile

designers and developers. So we're not going to talk about market shares, statistics, or
analytics numbers. Instead, we're going to talk about the things we need to consider to
build a usable interface, such
as target sizes, navigation patterns, navigation icons, best practices and
mobile device ergonomics.

In this chapter, we're going to cover the following topics:

• The ideal target sizes on small UIs.

• The posture patterns and the touch zones.
• The basic guidelines to consider for RWD.
• The navigation patterns for RWD.

The ideal target sizes on small UIs All vendors have different sets of rules and
guidelines regarding the ideal size of targets on small screen devices. Some of them
refer to these sizes in pixels, others in points, and others in units such as inches,
millimeters, or centimeters.
Regardless of the units these vendors use, they all agree on one basic concept: make
your target size big enough to avoid accidental taps. This goes in hand with Fitts's
law, which states that the smaller the target, the longer the user will take to reach it.
Obviously, as web designers, we have to be mindful of what large means in the
context of our designs, so we need to balance the target size recommendations with
good design principles. Our aim is that the messages should reach the users and they
should be able to comfortably use our interfaces
One thing to keep in mind is that the guidelines for target sizes for RWD are mostly
based on mobile apps design patterns. Let's get right to it. The average width of an
adult's index finger is about 16 mm to 20 mm. This is close to 45px to 57px.
According to Apple's iOS Human Interface Guidelines, the recommended minimum
target size is 44pt x 44pt
Note: The reason some user interface guidelines use points and millimeters as their
measuring units is to provide a consistent scale that is device independent. That's
because 1px in one device may not necessarily mean exactly 1px in another device.
Nonetheless, some vendors do provide guidelines on pixels, but mostly so we can get
an idea of how an element's proportions relate to one another.
The Android Developers guidelines recommend a minimum target size of 48dp, which
is about 9
mm. The minimum and maximum recommended target sizes are 7 mm and 10 mm,
respectively. The Android Developers guidelines also recommend a minimum spacing
between elements of 8dp.
Note: Here, dp means density-independent pixels. This means that 1dp is the same
as 1px in normal density screens. Just like Apple with the use of points (pt), they are
trying to define a unit that is global and screen density independent.
The posture patterns and the touch zones
No matter how usable the sizes of our touch targets are, if they are not placed
in the right location, all our efforts are pretty much worthless.
The posture patterns:
In his article, Luke talks about the patterns of posture most users have when holding
their smartphones, tablets, and touch-enabled laptops:

These patterns allow us to define the best way to lay out our content in order to be easily
usable and accessible. Understanding the posture patterns of our users will allow us to
understand when our targets can be the right size or even a bit smaller if there isn't enough
screen real estate, or a bit larger if precision is needed, since it's different when someone
uses their thumbs as opposed to their index fingers.
The touch zones:
Luke also talks about touch zones, which are basically the areas of a device that are either
easy or hard to reach, depending on the posture. In all major styles of devices,
smartphones, tablets and touch-enabled laptops, the ideal touch zones are in dark green,
the ok touch zones are in lighter green, and the hard-to-reach zones are in yellow:

In RWD, it's a bit hard to drastically change the layout of a single page, let alone many pages
(at least yet) like a standalone app, without an exorbitant amount of work. Also, there is a
very high probability of negatively impacting the user experience and maintaining the content
hierarchy.
RWD is strongly coupled with content strategy, so the content hierarchy needs to be
preserved
regardless of the device our site/app is being viewed on. We need to make sure the elements
themselves are big enough for someone with large fingers to use properly. These elements
are, to
name a few, links, buttons, form fields, navigation items, controls of any sort like
paginations, open/collapse controls in accordions, tab systems, and so on.
The nav icon – basic guidelines to consider for RWD:
The nav icon can be represented in many ways. RWD takes patterns from mobile apps
since small screens apps and websites have many similar metaphors. Let's take a look at
the common navigation icon patterns:
•The hamburger icon.
•The word Menu.
•The hamburger icon plus the word Menu
The hamburger icon:
This is by far the most popular icon used to represent the navigation
button: ≡. The advantages are as follows:
•It's easily recognized by certain demographics, especially young ones.
•It takes up very little space in a design.
•It's not language dependent.
•It's easy to make using the Unicode character 2261 (≡), which has a global
support of 96 percent.
The disadvantages are as follows:
•It's not easily recognized by some demographics, especially older ones.
•Although very popular, a lot of people have a hard time understanding that the
hamburger icon represents a menu.
•It promotes low discoverability since a site's navigation will usually be hidden.
The word Menu:
Some informal tests on the web have yielded that using the word Menu is the most
trusted solution to the drawbacks of the hamburger icon.
The advantages are as follows:
•It's self-explanatory.
•Virtually anyone from any demographic can understand what it means.
•It can be used in any language.
•It takes up very little space in the design
The disadvantage is as follows:
•It may clash with an iconography system since it's a word.
Consider the following
example. Here's the HTML:

The hamburger icon plus the word Menu:

One alternative to the hamburger icon versus the word Menu discussion is to use
both at the same time. Some argue that we may get the best of both worlds by
doing this.

The advantages are:

•It's self-explanatory.

•Virtually anyone from any demographic can understand what it means.

•It can be used in any language.

•It can still take up very little space in the design.

•It is easy to make using the Unicode character 2261 (≡), which has a global
support of 96 percent.

The disadvantage is:

•Depending on the design, the word Menu could be too small

The navigation patterns for RWD:
One of the most mystifying features of RWD is the navigation. It can be as simple
or as complex as we want it to be.

In this section, I'm going to show you how to build three commonly used
navigation patterns:
• Toggle navigation: This is based on Brad Frost's Toggle
Menu demo (http://codepen.io/bradfrost/pen/sHvaz/).

• Off-Canvas or Off-Screen navigation: This is based on Austin Wulf's

SitePoint Pure CSS Off-Screen Navigation Menu demo (http://codepen.io/
SitePoint/pen/uIemr/).

• Flexbox-based navigation: This is our custom solution

9.Images and Videos in Responsive Web Design:

The element and the srcset and sizes attributes:

The element and the srcset and sizes attributes are maintained by the Responsive Images
Community Group (RICG) and are now part of the HTML specification. In other words, we can use
them without any type of polyfill and have the confidence that modern browsers will support them.
Well, to some degree at least.

The only reason we would need to use a polyfill is to support those browsers (legacy and
modern) that haven't yet implemented support for them.

Both the element and the srcset attribute have a fallback feature for those browsers that don't
support them. You can opt to use a polyfill, but you are not required to do so. If you think using a
polyfill enhances the user experience, by all means, go for it. Read this article about it from the
creator of the Picturefill polyfill, Scott Jehl (http:// www.filamentgroup.com/lab/to- picturefill.html).

There are many polyfills out there, here's a short list of the ones we can use today:

•Picturefill by Scott Jehl (recommended by the RICG: http://scottjehl. github.io/picturefill/)

•PicturePolyfill by Andrea Verlicchi (http://verlok.github.io/ picturePolyfill/)

•respimage by Alexander Farkas (https://github.com/aFarkas/ respimage)

Some people in the web design and web development communities feel strongly about considering
that a new HTML element () isn't the solution to the issues we are experiencing with images in
RWD. They feel that the solution should come from within an already existing tag, the
<img> tag.
Note: The sizes attribute can also be used with the <picture> element, but we're going to focus
on using the sizes attribute with the <img>tag. Good for us, that the solutions come in both
flavors. It doesn't matter which method you use to serve your images in a responsible way, what
matters is that you should be using one of these methods. If you already are, that's awesome. If
not, don't sweat it. The following explanations will help clear up any questions you have about this
matter.

Using The width Property

If the width property is set to a percentage and the height property is set to "auto", the image will
be responsive and scale up and down:

<!DOCTYPE html>

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> img {

width: 100%;

height: auto;

</style>

</head>

<body>

<img src="img_chania.jpg" width="460" height="345">

<p>Resize the browser window to see how the image will scale.</p>

</body>

</html>

Output:

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but
never scale up to be larger than its original size:
Example img {
max-width: 100%; height:
auto;
}

Responsive Web Design – Videos:

Using The width Property

If the width property is set to 100%, the video player will be responsive and scale up
and down:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style> video {

width: 100%; height:

auto;

</style>

</head>

<body>

<video width="400" controls>

<source src="mov_bbb.mp4"
type="video/mp4">
<source src="mov_bbb.ogg"

type="video/ogg"> Your browser does not

support HTML5 video.

</video
>

<p>Resize the browser window to see how the size of the video player will scale.</p>

</body
>

</html
>

Using The max-width Property

If the max-width property is set to 100%, the video player will scale down if it has to, but
never scale up to be larger than its original size:
Example video {
max-width: 100%; height: auto;
}

10. Meaningful Typography for Responsive Web Design:

Typography is the art and technique of arranging type. It involves the thoughtful and
deliberate selection of typefaces, point size, line length, leading, tracking, kerning, color and
any element that can affect a design.
Pixels, ems, or rems for typography?
It is difficult to decide whether to use pixels, ems, or rems for typography. It's a matter
of style. Some web designers/developers still use pixels as their unit to declare font
sizes. It's just a lot easier to wrap our heads around the sizes.

Calculating relative font sizes :

Remember the RWD magic formula we mentioned in Chapter 3, Mobile-first or Desktop-
first?: (target ÷ context) x 100 = result %

There's also another similar magic formula to calculate relative font sizes (ems) when
the font size has been set in pixels. The only difference is that we don't multiply by
100.

This is that formula: target ÷ context = result

Creating a Modular Scale for a harmonious typography:

The Modular Scale was created by Tim Brown. There are different ways to create a
Modular Scale for typography. In our example, we're going to create a Modular Scale
using two base numbers and one ratio. The multiplication of these numbers creates a
scale that's harmonious and proportional between all the values.

Once the web app opens, there are three steps we need to do in order to create our
Modular Scale:

1.Define the first base number.

2.Define the second base number.

3.Choose a ratio.

Defining the first base number:

The recommended way to define this first number is to use the body text size, that is,
the font size that is used in the paragraphs. But keep in mind that using the body text
size as the first base number is not mandatory. We can use our typeface's x-height, or
some other length within that typeface, that we think could be a good starting point.

Although we can choose any font size, let's start with the default one we all know all
browsers use, 16px. So we type 16px in the first base field.

Click on the plus icon and add a second base field

Defining the second base number:

The second base field is what I call a magic number because this number is
completely subjective and arbitrary, however, it's tightly related to the project
we're working on.

When I say tightly related I mean something like using the width of the main
container, for example, 960px, 980px, 1140px, and so on. Alternatively, it can also be
the number of columns used in the grid, such as 12 or 16. It can also be the width of
a column at the maximum width of the site, such as 60px, or even the gutter
spacing, say 20px.

This magic number is anything we want it to be, but it's directly related to our project
in one way or another. For this example, let's say we're going to target screens at a
maximum width of 1280px, so our main container is going to have a maximum width
of 1140px. So let's type 1140px in the second base field.

Choosing a ratio:
This is where the magic takes place. Choosing a ratio means that this ratio will be
multiplied by the base numbers creating a scale of values that are proportionally
related.

The ratios are based on musical scales, and in that list is the golden ratio (1.618) as
well, if we decide to use it. From the Ratios dropdown, select 1:1.618 – golden
section ratio.

That's it! We have now created our first Modular Scale.

The font sizes provided by this Modular Scale are totally harmonious because
they are proportionate to each other based on relevant values that are directly
related to our project:

•The ideal body font size is 16px

•The maximum width of our main container is 1140px

•The Golden Ratio is 1.618

Our typography now has a solid modular foundation, let's use it

Using the Modular Scale for typography:

If you click on the Table view, all the text is now gone and we're left with a list of
font sizes— ranging from ridiculously small values to just as ridiculously large values.
But that's ok. That's the power of a modular scale.
As you can see in the preceding image, there are three
columns:

•The first column shows the font size in pixels.

•The second column shows the font size in ems.

•The third column shows the font size if the base was
16px.
The rems-to-pixels Sass mixin:
All we need is a Sass mixin that allows us to set the font values
without a specific unit and the mixin takes care of adding the font sizes for
both rem-based for modern browsers, and the pixel-based for legacy
browsers.
This is the Sass mixin created by Chris Coyer:

//Pixels to Rems Mixin

@mixin fontSize($sizeValue: 1.6) { font-size:

($sizeValue * 10) + px; font-size: $sizeValue +

rem;

Web fonts and how they affect RWD:

Web fonts are almost mandatory to use nowadays, and I say almost because we need to be
mindful of the implications they bring to our projects, and if necessary, we may actually not use
them at all. Before we get into the nitty gritty of how to work with web fonts, here are a few web
font resources that may be helpful for many of you:

• Font Squirrel
• Google Fonts
• Adobe Edge Web Fonts
The advantages are:

•They help accentuate the brand and create consistency across different media.

•When used correctly, they make designs look more appealing.

•There is no need to use image replacement techniques anymore.

•This keeps the text as HTML making the content more accessible and indexable.

Legacy browsers support web fonts.

•Great resources for free fonts.

•All these in turn help keep the markup cleaner. The
disadvantages are:
•They slow down the website/app due to HTTP requests or their dependency on third-party
servers.

•Not all web fonts are legible at small and/or large sizes.

•If legacy browsers are required to support, there are more files to manage.
•Licensing the use of a font requires some sort of payment: monthly, per font family, per
font style, and so on.

•Some free fonts are not well built.

•There are rendering side effects:

° Flash Of Unstyled Text (FOUT): On modern browsers, when the page loads, the text
is first rendered on the screen with a system font, and then a second later it's swapped
and styled with the web font.
° Flash Of Invisible Text (FOIT): On legacy browsers, when the page loads, the text
is not visible but a second later it's rendered with the web font.

Defining thresholds :
There's a potential problem with the solution we just saw: FlowType.js will modify the font
size of the paragraphs indefinitely. In other words, on small screens the text will be
extremely small and on large screens it will be way too big.

We can solve this issue with two separate threshold approaches or a combination of both.
Now, one thing we need to make clear is that this part will require some tweaking and
adjusting in order to get the best results, there aren't specific values that will work for all
situations.

We are going to use the following approach:

•Define the minimum and maximum widths of the container or element.

•Define the minimum and maximum font sizes of the container or element.

Threshold widths:
Defining the minimum and maximum widths will tell FlowType.js at which points it should
stop resizing. Let's define the width thresholds:

$(function() {

$("html").flowtype( {
//Max width at which script stops enlarging

maximum: 980,
//Min width at which script stops decreasing
minimum: 320
});

});

Threshold font sizes:

Just like with the width thresholds, defining the minimum and maximum
font sizes will tell FlowType.js what the smallest and largest font sizes it
should scale the text to.

We're also going to declare our own font size using the fontRatio variable;
the higher the number, the smaller the font, and the lower the number,
the larger the font. If this feels counterintuitive, look at it this way: the
higher the number, the higher the compression (thus making it small) and
the lower the number, the lower the compression (thus making it large).

Adjusting the fontRatio value is an eyeballing exercise, so tweak and

test like there's no tomorrow.
VIDEO LINKS

Video Links
https://www.youtube.com/watch?v=srvUrASNj0s

https://www.youtube.com/watch?v=3tLb3i7GB38&list=P
L4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw
10. ASSIGNMENTS
S.No. ASSIGNMENT TOPICS competence

Level 1. Create a css grids using 4*4 matrix format. K3

Level 2. Create a css grids using 5*5 matrix format. K3

Level 3. Create a box model for any four colours

Level 4. Create a box model for any fiver colours

Level 5. Explain about the marking content with html5.

K5
.
11. Part A Q & A (with K level and CO)

S.No PART A CO’ Blooms

S Level

1. What is the command to install the Sass gem?

Open the Command Line (CMD) Tip!: Press Windows Key
+ R and type: CMD, then press Enter. The almighty
Command Line (CMD) will appear: ...
CO3 K1
Type the following command in the CMD (it doesn't
matter which folder you're in): gem install sass.
Command to install Sass

2. What is Mixins?
A mixin lets you make groups of CSS declarations that
you want to reuse throughout your site. It helps keep
your Sass very DRY. You can even pass in values to make
your mixin more flexible. Here's an example for theme CO3 K1

3. What is css grids

The CSS Grid Layout Module offers a grid-based layout
system, with rows and columns, making it easier to CO3 K1
design web pages without having to use floats and
positioning.

4. Summarize about flexbox.

The way items are laid out when you use flexbox is based
on the flex directions. If the flex-direction is row which is
the default value, your main axis is along the row, and CO3 K1
your cross-axis is along the column. If the flex-direction is
column , your main axis is along the column while your
cross-axis is along the row.
5. Calculate the relative font size for the 30 px target and 16 px
context.
To calculate the relative font size, we use the following
formula: 30px ÷ 16px = 1.875em. We would have to do
CO3 K1
this for every font size in our design.

123
S.No PART A CO’S Bloom
s Level
6. List the important points about <article>
The <article> tag specifies independent, self-contained
content.
An article should make sense on its own and it should be CO3 K1
possible to distribute it independently from the rest of
the site.

7. List the important points about <arside> in css

The <aside> tag defines some content aside from the
content it is placed in.
CO3 K2
The aside content should be indirectly related to the
surrounding content.

8. List the important points about <section> in css

The <section> tag defines a section in a document.
Section
CO3 K1
{
display: block;
}
9. What is meant by typography
There are two main groups of CSS properties that control
typography style: font and text. The font CSS property
CO3 K1
group dictates general font characteristics such as font-
style and font-weight . Below you'll see the p element
given a font-style and a font-weight property.
10. How to refer parent selector in the SASS?

You can select the parent selector by using the & CO3 K1
character. It tells where the parent selector should be
inserted.

11 How to write placeholder selector in SASS?

SASS supports placeholder selector using class or id CO3 K1

selector. In normal CSS, these are specified with "#" or
".", but in SASS they are replaced with "%".

124
S.No PART A CO’S Bloom
s Level

12. Which is a container for slide items?

.carousel-inner is a container for slide items, .carousel-

caption creates a caption text for each slide in the
CO3 K1
carousel, .carousel-control is container for next and
previous links, .carousel-indicators adds little dots at the
bottom of each slide

13. Which class is a container for progress bars?

progress class is a container for progress bars, .progress-

bar creates a progress bar, .progress-bar-success creates
a green progress bar and indicates success, .progress- CO3 K1
bar-info shows light-blue progress bar indicating
information.
.

14. Which of the following aligns media objects?

.media aligns media objects like images or videos often

used for comments in a blog post, .media-body specifies CO3 K1
the text that should appear next to media object, .media-
list creates nested media lists, .media- object indicates a
media object
15. Which shapes an image to a thumbnail?

.img-thumbnail shapes image to a thumbnail (borders),

.img-rounded adds rounded crners to an image,
.img-responsive makes an image responsive, .img-circle CO3 K1
shapes an image to a circle, it is not supported in IE8 and
earlier versions

125
S.No PART A CO’S Bloom
s Level

16 Why organize an activity or job as a project?

It allows you to better structure and organize the tasks
that need to be performed Well-developed approaches
and tools are available for managing projects Easy-to- CO4 K1
use software is available for scheduling and budgeting
projects.

17. What is meant by planning?

Planning as a process involves the determination of
future course of action, that is, why an action, what
action, how to take action, and when to take action. CO4 K1
These why, what, how, and when are related with
different aspects of planning process.

18. What are the phases in software development life cycle?

.
Requirement analysis
Architecture design
Detailed design
Code and test CO4 K1
Integration
Qualification testing.
Installation.
Acceptance support

19. Define Requirement Analysis

This investigates what the potential users and their
managers and employers require as features
and qualities of the new system.
CO4 K1

126
S.No PART A CO’S Bloom
s Level

20. What is meant by qualification testing? (U)

The system, including the software components, has to
CO4 K1
be tested carefully to ensure that all the requirements
have been fulfilled.
21. What is management? (U)
Management can be defined as all activities and tasks
undertaken by one or more Persons for the purpose of
planning and controlling the activities of others in CO4 K1
order to achieve objectivesor complete an activity that
could not be achieved by others acting independently.

22. What are the steps involved in step wise

planning? (U)

Identify project scope and objectives.

Identify project infrastructure.3.Analyze
project characteristics.
CO4 K1
Identify project products and activities.
Estimate effort for each activity.
Identify activity risks.
Allocate resources.
Review / publicize plan9. Execute plan/ lower levels of
planning
23. Explain the steps involved in to identify activity risks
The first thing to understand in risk management is that
it's a on-going activity. It's not about identifying risks
upfront and then forging ahead regardless. It's too easy
to forget the risks once the project is started and fail to CO4 K1
recognize and raise new risks when the project is
underway.

127
S.No PART A CO’S Bloom
s Level

26. Explain the steps in project planning with case

studies example. (U)
Define
Project goal CO4 K1
Project deliverables
Project schedule
Supporting plans

27. Define project Evaluation

Project evaluation is a systematic method for collecting,
analyzing, and using information to answer questions
about projects, policies and programs, particularly about
their effectiveness and efficiency. CO4 K1

28. Define technical assessment

Technical assessment of a proposed system consists of
evaluating the required functionality against
the hardware and software available. Organizational
policy aimed at the provision of a uniform and consistent CO4 K1
hardware/software infrastructure is likely to place
limitations on the nature of technical solutions that
might consider

29. Write short notes on WBS.

This involves identifying the main tasks required to
complete a project and then breaking each of CO4 K1
these down into set of lower-level tasks.

30. Write short notes on control.

Control uses the information supplied by the monitoring
techniques in order to bring project actual results in line
with stated project performance standards. CO4 K1

128
12. Part B Q & A (with K level and CO)

S.No PART B CO’S Blooms

Level

1. What are the basic concepts of SAAS for Responsive

CO3 K2
Web Design?

2. Demonstrate CSS grids along with its pros and cons.

CO3 K2
Explain in detail CSS Frameworks

3. Explain in detail the marking content with HTML 5

CO3 K2
and mobile first or desktop first

4. Illustrate building a sample page with Flex box.

Explain in detail about UI CO3 K1
.

5. Illustrate building a sample page with Flex box.

CO3 K2
Explain in detail about UI

6. Explain how Images and Videos are added in

CO3 K2
Responsive Web Design

7. What are the phases of project life cycle? Explain

CO4 K2
each phase with diagram.

8.
Summarize the Project Scheduling and Budgeting?
CO4 K2

9.
Explain in detail about Discovery and Requirements.
CO4 K2

129
12. Part B Q & A (with K level and CO)

S.No PART B CO’S Blooms

Level

10. Review each type of documentation that you need for

CO4 K2
a successful project

11.

Explain in detail about how to run the project CO4 K2

12.
Explain in detail the deployment, QA and testing CO4 K2

130
13. SUPPORTIVE ONLINE CERTIFICATION COURSES

COURSERA

https://www.coursera.org/learn/html

https://www.coursera.org/learn/html-css-javascript-for-web-
developers

https://www.coursera.org/projects/introduction-to-html

https://www.coursera.org/professional-certificates/meta-front-end-
developer

https://www.coursera.org/professional-certificates/ibm-full-stack-
cloud-developer

UDEMY

https://www.udemy.com/course/hmtl5-training/

https://www.udemy.com/course/learn-html5-programming-from-
scratch/

https://www.udemy.com/course/takethefirststep/

NPTEL

https://onlinecourses.swayam2.ac.in/aic20_sp11/preview
14. REAL TIME APPLICATIONS : UNIT – III

Create a Responsive Website / newspaper page using Flexbox CSS

15. CONTENT BEYOND SYLLABUS : UNIT – III

Bootstrap Example
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>
16. Assessment Schedule

Sl Examination Proposed Date Actual Date

N
o

1 First Internal Assessment Test

2 Second Internal Assessment

Test

3 Model Exam
MINI PROJECT SUGGESTIONS

Landing page K4
LEVEL 3

Create a webpage
filter
LEVEL 4
k4

News website
LEVEL 5 K4
17. Prescribed Text Books & Reference Books

TEXT BOOKS:

1. Jennifer Niederst Robbins, "Learning Web Design", O'REILLY 4th Edition,

2012.

2. Ricardo Zea, "Mastering Responsive Web Design", PACKT Publishing,

2015.

3. Justin Emond, Chris Steins, "Pro Web Project Management", Apress,

2011.

REFERENCES:

1. Jon Duckett, "HTML and CSS: Design and Build Websites", John Wiley
and Sons, Edition 2014.

2. Jon Duckett, Jack Moore, "JavaScript & JQuery: Interactive Front-End

Web Development", John Wiley and Sons, Edition 2014.

3. Uttam K. Roy "Web Technologies" Oxford University Press, 13th

impression, 2017.

4. Wordpress - http://www.wpbeginner.com/category/wp-tutorials/

136
Thank you

Disclaimer:

This document is confidential and intended solely for the educational purpose of RMK Group of
Educational Institutions. If you have received this document through email in error, please
notify the system manager. This document contains proprietary information and is intended
only to the respective group / learning community as intended. If you are not the addressee
you should not disseminate, distribute or copy through e-mail. Please notify the sender
immediately by e-mail if you have received this document by mistake and delete this document
from your system. If you are not the intended recipient you are notified that disclosing,
copying, distributing or taking any action in reliance on the contents of this information is
strictly prohibited.

Wb Development full course : from zero to web hero
From Everand
Wb Development full course : from zero to web hero
Ameer Seikh
No ratings yet
22it403 Unit 4 (23 24even)
No ratings yet
22it403 Unit 4 (23 24even)
42 pages
UNIT-1 SOA_21CS913_digital Notes (1)
No ratings yet
UNIT-1 SOA_21CS913_digital Notes (1)
74 pages
Unit 3
No ratings yet
Unit 3
74 pages
Wad Syllabus
No ratings yet
Wad Syllabus
4 pages
22CS602_OOSE_UNIT III_DCM
No ratings yet
22CS602_OOSE_UNIT III_DCM
87 pages
Syllabus Web Technology
No ratings yet
Syllabus Web Technology
2 pages
Web Designing (KCS-052) - BLOWUP
No ratings yet
Web Designing (KCS-052) - BLOWUP
10 pages
Syllabus Web Technology
No ratings yet
Syllabus Web Technology
2 pages
CSE 256 Internet Technologies-Handout
No ratings yet
CSE 256 Internet Technologies-Handout
12 pages
WD (UNIT-2) PPT
No ratings yet
WD (UNIT-2) PPT
170 pages
Unit 1
No ratings yet
Unit 1
58 pages
WEB TECHNOLOGY
No ratings yet
WEB TECHNOLOGY
47 pages
Uni 4
No ratings yet
Uni 4
36 pages
5.basic Web Design Lab
No ratings yet
5.basic Web Design Lab
7 pages
WEB ESSENTIAL UPDATED SYLLABUS
No ratings yet
WEB ESSENTIAL UPDATED SYLLABUS
4 pages
Advance Web Development Theory
No ratings yet
Advance Web Development Theory
3 pages
CER5E1
No ratings yet
CER5E1
3 pages
CA317 Web Technology
No ratings yet
CA317 Web Technology
3 pages
Python Programming Couse Plan -RAMESH
No ratings yet
Python Programming Couse Plan -RAMESH
8 pages
3 Mech - Java Programming Unit 1
No ratings yet
3 Mech - Java Programming Unit 1
121 pages
Djang Course File
No ratings yet
Djang Course File
151 pages
22it403 Unit 1 (23 24even)
No ratings yet
22it403 Unit 1 (23 24even)
52 pages
20cb402 Dbms Unit 3
No ratings yet
20cb402 Dbms Unit 3
83 pages
BCA - SEM-1 - Static Website Designing - Syllabus
No ratings yet
BCA - SEM-1 - Static Website Designing - Syllabus
6 pages
UNIT-3 Web Tech
No ratings yet
UNIT-3 Web Tech
103 pages
FM-Unit 2 Valuation of Securities
No ratings yet
FM-Unit 2 Valuation of Securities
64 pages
6 CSE - CS8651 IP Unit 5
No ratings yet
6 CSE - CS8651 IP Unit 5
43 pages
maaaaaaaaa
No ratings yet
maaaaaaaaa
31 pages
CSS Project 1
No ratings yet
CSS Project 1
16 pages
22cs910 Devops Unit 3 Dcm (1)
No ratings yet
22cs910 Devops Unit 3 Dcm (1)
69 pages
22cs910 Devops Unit 5 Dcm
No ratings yet
22cs910 Devops Unit 5 Dcm
66 pages
3 Mech - Java Programming Unit 4
No ratings yet
3 Mech - Java Programming Unit 4
78 pages
Mad Syllabus
No ratings yet
Mad Syllabus
5 pages
Mad Lab Manual
No ratings yet
Mad Lab Manual
89 pages
20cs521 - Web Programming Laboratory Lab Manual
No ratings yet
20cs521 - Web Programming Laboratory Lab Manual
52 pages
CAD 3201 EAD Syllabus
No ratings yet
CAD 3201 EAD Syllabus
2 pages
Unit 3
No ratings yet
Unit 3
124 pages
all we manual
No ratings yet
all we manual
34 pages
22cs910 Devops Unit 4 Dcm (1)
No ratings yet
22cs910 Devops Unit 4 Dcm (1)
76 pages
CC, DBMS Syllabus
No ratings yet
CC, DBMS Syllabus
10 pages
Syllabus WEB APPLICATION DEVELOPMENT
No ratings yet
Syllabus WEB APPLICATION DEVELOPMENT
4 pages
21CB702 Scilab Unit 2
No ratings yet
21CB702 Scilab Unit 2
71 pages
Web Technologies
No ratings yet
Web Technologies
9 pages
Unit 1
No ratings yet
Unit 1
63 pages
STA - Final Lab Record
No ratings yet
STA - Final Lab Record
61 pages
Syllabus-Graphic Design and Web Business Development(K21-CA)
No ratings yet
Syllabus-Graphic Design and Web Business Development(K21-CA)
12 pages
BSC - 2nd SEM FOIT LAB Manual
No ratings yet
BSC - 2nd SEM FOIT LAB Manual
62 pages
24cs102 Unit - II
No ratings yet
24cs102 Unit - II
89 pages
Wtaj Theory
No ratings yet
Wtaj Theory
2 pages
Unit 3 - Cloud Computing - Digital Course Material
No ratings yet
Unit 3 - Cloud Computing - Digital Course Material
88 pages
WTL Lab Manual
No ratings yet
WTL Lab Manual
75 pages
3 Mech - Java Programming Unit 5
No ratings yet
3 Mech - Java Programming Unit 5
84 pages
DBMS_UNIT-1
No ratings yet
DBMS_UNIT-1
100 pages
21CS933 Ooad Unit2
No ratings yet
21CS933 Ooad Unit2
79 pages
Updated FET Syllabus 18.12.19
No ratings yet
Updated FET Syllabus 18.12.19
3 pages
SWPD - 4311603 - CO-PO-PSO Mapping With Justification Format For Compliance
No ratings yet
SWPD - 4311603 - CO-PO-PSO Mapping With Justification Format For Compliance
7 pages
unit 3
No ratings yet
unit 3
82 pages
Unit 5 - Cloud Computing - Digital Content
No ratings yet
Unit 5 - Cloud Computing - Digital Content
83 pages
WDT SYLLABUS and Model Paper
No ratings yet
WDT SYLLABUS and Model Paper
4 pages
Turner, Frontier Thesis
No ratings yet
Turner, Frontier Thesis
9 pages
Week 12_Decision Making
No ratings yet
Week 12_Decision Making
19 pages
Narrative Community Extention
No ratings yet
Narrative Community Extention
5 pages
R1-231xxxx - Summary #1 For 8.13.1 Coverage Enhancement For NR NTN - v000 - FL
No ratings yet
R1-231xxxx - Summary #1 For 8.13.1 Coverage Enhancement For NR NTN - v000 - FL
42 pages
Tutorial: Drop Ejection From A Printhead Nozzle: 26.3, Setting Up The VOF Model
No ratings yet
Tutorial: Drop Ejection From A Printhead Nozzle: 26.3, Setting Up The VOF Model
15 pages
7 Power System Simulation Lab
No ratings yet
7 Power System Simulation Lab
53 pages
20120803084416209
No ratings yet
20120803084416209
24 pages
Sensors Used in WPP
No ratings yet
Sensors Used in WPP
27 pages
Mery Dina Amelia 1835511016
No ratings yet
Mery Dina Amelia 1835511016
8 pages
Assignment 04 Answers
No ratings yet
Assignment 04 Answers
12 pages
PFA Activity Sheets Module 1
100% (2)
PFA Activity Sheets Module 1
9 pages
ASOC-D-23-07024_R4
No ratings yet
ASOC-D-23-07024_R4
27 pages
QS Variations
No ratings yet
QS Variations
7 pages
Combust Planets
No ratings yet
Combust Planets
6 pages
Report Specification Example
No ratings yet
Report Specification Example
19 pages
Error Codes - DEUTZ EMR3
100% (1)
Error Codes - DEUTZ EMR3
6 pages
Product Support Schwinn Service Manuals 1998 General Troubleshooting Manual
No ratings yet
Product Support Schwinn Service Manuals 1998 General Troubleshooting Manual
50 pages
Bernoulli Equation Practice Worksheet: Answer S
No ratings yet
Bernoulli Equation Practice Worksheet: Answer S
1 page
ABB Medium Voltage Vacuum Circuit-Breakers VD4
100% (1)
ABB Medium Voltage Vacuum Circuit-Breakers VD4
120 pages
Williams Raster Monitor Theory
No ratings yet
Williams Raster Monitor Theory
12 pages
Ginpole and Countet Balance Simulation
No ratings yet
Ginpole and Countet Balance Simulation
14 pages
Ion Future - Stem Career List
No ratings yet
Ion Future - Stem Career List
8 pages
Root Cause Analysis 1699434646
No ratings yet
Root Cause Analysis 1699434646
34 pages
Edmund Burke - The Sublime and Beautiful
No ratings yet
Edmund Burke - The Sublime and Beautiful
156 pages
Physics Brevet All
No ratings yet
Physics Brevet All
116 pages
PHILANIMA: Philippine Animation and The New Innovative and Mastered Arts
100% (2)
PHILANIMA: Philippine Animation and The New Innovative and Mastered Arts
23 pages
7 Ste Mock Card
No ratings yet
7 Ste Mock Card
4 pages
Esp32 Iot Development Kit
No ratings yet
Esp32 Iot Development Kit
66 pages
CE103 Deflection in Beams Nov.22 252022
No ratings yet
CE103 Deflection in Beams Nov.22 252022
41 pages
Quadrature-Mirror Filter Bank
No ratings yet
Quadrature-Mirror Filter Bank
63 pages