W3.CSS & W3.JS: modern & responsive

W3.CSS is a free to use CSS framework with features of responsiveness whereas W3.JS is a javascript library

W3.CSS is based on standard CSS therefore easier to learn and use. It supports responsiveness and provides CSS equality across all browsers and all devices.

W3.JS is smaller and faster than other JavaScript libraries. It is designed to speed up application development.

W3.CSS classes start with “w3-propertyname” and W3.JS  selects and performs action using “w3.action(selector)”

Responsive website UI with Bootstrap

Bootstrap is a popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. It makes front-end development easier and responsive.

Important feature of Bootsrap is its CSS adjusts to phones, tablets, desktop. Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element

History Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

  • Grid System: Bootstrap achieves its responsive feature through Grid System which allows 12 columns across the webpage.
  • Glyphicons: Bootstrap includes glyphs from the Glyphicon Halflings set which are free to use.
  • Navigation Components:  Tabs, pagination, labels, navbar helps in making the website more user-friendly.
  • Other features include BS buttons, BS alerts, BS Dropdown, BS Carousel, BS inputs etc

Responsive web design can also be achieved with Media Queries.

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries can also be used to change layout of a page depending on the orientation of the browser.