HTML CSS Responsive Web design template

This is the first HTML CSS Responsive Web design template assignment for our students who are under going our Online Front end development project guide program.

This assignment is also helpful for aspiring web developers, web designers, front end developers and interface developers.

This is a good start for people who already know HTML, CSS and want to start working as front end developer or interface developer.

HTML CSS Responsive Web design template assignment – Requirements

YOu should have a good understanding of web development. You should be aware of HTML tags, CSS Properties and Responsive web design approach and CSS3 media queries


HTML CSS Responsive Web design template assignment – Instructions

  • Download the attached zip file. It has 4 .jpg files.
  • You have to develop the resume in 2 themes (lights and dark)
  • Each theme has a version for desktop and mobile
  • Open the file in Photoshop or your favorite photo editing software and start building the page

This is how your resume will look. Click the image to enlarge it. The template has been inspired from

HTML CSS Responsive Web design template assignment responsive resume design

HTML CSS Responsive Web design template assignment – hints and tips

  • Start for mobile first but keep in mind the 2 columnar structure that you want in larger screens.
  • We will make use of CSS3 media queries to re organize the layout for larger screen. This will ensure that we are adding more styles for a desktop user which is fine because a desktop user is more like to have a better internet connection speed.
  • Make use of standard semantic html tags to build the page structure.
    I would use an ‘un-ordered list’ for social links on the top
    2 columns in ‘Header’ tag for Personal details i.e. Photo, name, etc.
    ‘Section’ tag for Education, Employment and project details
    ‘Aside’ tag for Programming, designing and Langauge skills
    But feel free to use the tags that looks more semantic to you and makes sense
  • Make sure to test your mark up through Markup Validation Service for html errors before starting the CSS
  • Keep in mind the difference in colors when you switch themes. The theme will work based on a class added to the ‘body’ tag.
  • Make use of Sprites for icons used in social links, arrows in education and employment section
  • Upload your page on a web server to test it using Responsinator or make use of Responsive layout which comes with Firefox web developer extension to test your pages in different screen locally
  • Test your page in Internet Explorer 10, 9 and 8

So start building your first HTML CSS Responsive Web design template which is online resume. Feel free to modify the content and sections as per your requirement. Upload this template on a web server and share the resume as a project with your prospective employer.

Kindly share the post with your friends who want to learn interface development or front end development.