03 modern techniques every web developer should know

03 modern techniques every web developer should know

Learning new techniques is a good thing to do for every novice or seasoned web developer to keep him/her updated with ongoing technologies. Web development is a complex technical field which requires every developer to keep learning new things to increase his proficiency and to hold a solid grasp of expertise in coding and programming websites.

Here are the three modern techniques every web developer should know about:

ALSO READ: The Difference between UX and UI design

CSS 3 media queries

Css3 media queries are the fundamental building block elements of a responsive website design. These are syntax command code in a cascading style sheet module used to define set of parameters to modify the desktop screen resolution sizes and mobile browser viewport width.

The CSS3 media queries are used to apply styles with the CSS modules by using the @media and @import at-rules. It is also used to target specific media for the <link>, <source>, and other HTML elements. Moreover, it is further used to test media queries by using the Window.match media () and MediaQueryList.addlistener () JavaScript methods.

Following is the code to illustrate the CSS media queries with example:

@media screen and (max-width: 767px) {

#container {

Width: 320px;

}

 

Header h1#logo a {

Width: 320px;

Height: 44px;

Background: url (image-small.jpg) no-repeat 0 0;

}

 

}

 

Font resizing with REM

Font resizing is a root element in Cascading style sheet to make it easier to increase and decrease the size of fonts by inches. It provides a relative measurement of length in the HTML element and defines in a percentage in the HTML body and h1 header tag.

Here is the font resizing code with root em:

 

Html {font-size: 62.5 %;}

Body {font-size: 1.4rem ;} /* =14px */

h1 {font-size: 2.4rem ;} /* =24px */

Cache pages for offline usage

Cache manifest is a new feature in the Html 5 web element which helps users to easily visit the website while being offline. It helps in navigating offline web pages with a faster loading speed and reduced load server.

Following is the code for offline cache pages:

Add-Type text/cache-manifest .manifest

 

CACHE MANIFEST

 

CACHE

index.html

style.css

image.jpg

 

<html manifest=”/offline. Manifest”>

Summary
03 modern techniques every web developer should know
Article Name
03 modern techniques every web developer should know
Description
Learning new techniques is a good thing to do for every novice or seasoned web developer to keep him/her updated with ongoing technologies.
Author
Publisher Name
Deign Proficient
Publisher Logo

About the author

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *