6. 1
2
HTML, CSS & JavaScript
HTML doctype
CSS in the <head>
JavaScript at the bottom before </body>
Tags & attributes in lower case
Attributes double quoted
3
4
20. 1
2
3
4
Responsive Design
Fluid Grid:
Turning static layout to fluid one by turning the static values to relative values.
Static
Width= 700px
Static
Width= 300px
Fluid
Width= 70%
Fluid
Width= 30%
21. 1
2
3
4
Responsive Design
Media Queries:
A media query is a CSS expression that will test certain device features , and return a
boolean value. If the value is true, styles defined in the media query block will be applied
to the document.
25. 1
2
3
4
Responsive Design
Media Query Anatomy:
@media - Specifies the start of a media query.
only - States that the following query should apply only to screen media types. The
only keyword also serves to hide the associated style rules from older browsers that
don't support media queries.
screen - Specifies the media type we are targeting. Other media types include
print, handheld, and tv.
and - Indicates the end of the media type specification and the beginning of the
media feature rule.
(max-width: 768px) - Media feature rule to test. In this case, the browser window
must be 768px or smaller for the rules to apply.