O'Reilly logo

Responsive Web Design with AngularJS by Sandeep Kumar Patel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required