How can create a responsive web design?

Responsive Design

We can develop responsive webpage by using following ways.

  1. Media queries
  2. Responsive frameworks like Bootstrap and Foundation.

Media Queries Example:

To write CSS codes for accepting in mobile view only:

@media (max-width: 767px){
//CSS declarations

To write CSS codes for accepting in tablet view only:

@media (min-width: 768px) and (max-width: 1024px){
// CSS declarations

To write CSS codes for accepting in desktop view only:

@media (min-width: 1200px){
// CSS declarations

Some of Device Resolutions:

  • 768px – IPad portrait
  • 1024px – Ipad Landscape
  • 375px – Iphone6 Portrait or latest mobile devices
  • 360px – Some android phones
  • 320px – IPhone5 Portarit
  • 1280, 1366+ – desktop resolutions

Responsive design using CSS Frameworks (Bootstrap / Foundation):

This is like plug and play type. They have already predefined the required classes and components for responsiveness. We can use those class names and UI components for achieving responsiveness with minimal efforts.

Continue Reading

What are the steps to learn front end web development?

Learning Front End Development

  • First learn about web development basic concepts such as domain, web hosting, web server, FTP, HTTP, HTTPS, markup languages, script languages, SEO, version control, responsiveness, recent trends in web development… ect
  • Then focus on creating structures (image, title, table, logo, content section, slider, tab.. ect) using markup language like HTML/HTML5.
  • Then applying styles (color, fonts, background, line-height, border.. etc) for created structures using CSS/CSS3.
  • Create interaction between the webpage and user by using scripts like Javascript and Jquery.
  • Try to create responsive web page by using media queries.
  • Then use advanced responsive framework like Bootstrap and Foundation.
  • Learn Advance Javascipt based libraries such as Angular JS, React JS, Ember JS, Knockout JS, Node JS for advanced web development.

Continue Reading

Instantly turn any ttf font permission into installable

Turn any ttf font permission into installable

Online based tool to set truetype fonts permission into its least restrictive form “installable embedding allowed”. Solves most problems related to embedding fonts into web pages, free of charge. Based on the tool embed. Made because there just weren’t any quick fix tools available.

Continue Reading

Font color is not changing on Iphone for Numbers

This happens as IOS detects Phone Numbers and change to links that people can click to call them.

To overcome this issue, we can follow two approaches such as CSS fix and adding meta data fix.

Sample HTML

<div class="number">01202-529-414</div>

1) CSS based Fix

.number a,
.number a[href^=tel]{
   color: inherit; //or color code
   text-decoration: none;

2) Meta data based Fix

<meta name="format-detection" content="telephone=no" />

Continue Reading

Removing dropdown arrow from select

Remove default dropdown arrow in select field

Removing dropdown arrow from select field in Chrome, Mozilla and IE browsers. To achieve this scenario, we have to use below prefix based CSS codes.

select {    
/*for firefox*/
-moz-appearance: none;
/*for chrome*/    
/*for IE10*/
select::-ms-expand {   
  display: none;

Continue Reading