Developing a desktop view

To implement the redirection approach, we need to create three different HTML files for desktop, mobile, and tablet. In all three HTML templates, the elements are all similar except for their placement and width, which will be different for desktop, mobile, and tablet devices. The HTML template for desktop type devices are divided into four rows:

  • Name and profile image row
  • Category selection row
  • Category content
  • Social buttons row

Name and profile image row

This portion of the HTML markup contains the name and image of the candidate wrapped by the .row class. The h1 element is used to represent the name and an img element points to the Gravatar profile image URL. The following code shows the HTML markup for this section:

<div ...

Get Responsive Web Design with AngularJS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.