Create a Single HTML5 Resume

An intermediate course on how to build a single HTML5 resume page based on the 960 grid system
4.3 (7 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
125 students enrolled
25% off
Take This Course
  • Lectures 10
  • Length 1 hour
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2013 English

Course Description

The reasons to have an online resume are countless! With one click you can introduce yourself to potential employers, highlight your accomplishments and your leadership experiences, talk about your qualifications, prove you care about the job and you understand the working world. An online presence is easy to share, it makes you look good, it’s limitless, always working for you and its sole purpose is to get you an interview.

What this course will cover:

In this intermediate course you will create a single HTML5 Resume page based on the 960 grid system, a very popular streamline web development workflow used by a lot of developers and designers.

The course begins with an introduction of the 960 grid system, what it means, and how to use the 12 column framework. We will be creating this page together code by code, line by line, controlling typography, styling every element and utilizing the framework. This resume page is using HTML5 elements, HTML lists, CSS pseudo class selectors, and CSS positioning. Some working HTML and CSS experience is required as well as a basic knowledge of Photoshop.

The whole resume layout is based on a detailed layered Photoshop template which I am proving as of the exercise files to follow along. We are going to be measuring spaces, gaps, widths, heights, sampling background colors, and typographical elements.

Total Time: 72.04 minutes

What are the requirements?

  • Basic Photoshop skills
  • Some working HTML and CSS knowledge
  • Use any HTML editor
  • Web browsers: Firefox, IE, Chrome, Safari

What am I going to get from this course?

  • Build a single HTML5 resume page.
  • Learn about the 960 grid system using the 12 column layout.
  • Use a detailed layered Photoshop template.
  • Add HTML5 elements, HTML lists, CSS pseudo class selectors, CSS positioning.
  • Get you practice on your own using similar techniques.

Who is the target audience?

  • All graphic, web, and interaction designers.
  • Anyone with some working HTML/CSS knowledge.
  • Anyone who wants to be introduced and use the 960 grid system.
  • Anyone who wants to create their resume page using coding standards and layout techniques.
  • Anyone who wants to pick up more knowledge using HTML/CSS3.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction
What we are building, technologies we are using, what to follow, and prerequisites for this course.
Section 2: The 960 Grid System
A direct link to the zipped file including the detailed Photoshop template and the social icons.
An introduction of the 960 grid framework and its benefits.
Explaining how the 12 column framework works with its set columns & margins. Also extracting the necessary CSS files to build the foundation of this course.
Section 3: Building the Resume

Build the first HTML element, the Header which includes an image and personal information.

The HTML Section element starts off the Career Objective and Education information.
The HTML Section element continues with the Software Skills. Here we are using HTML lists and pseudo class selectors to target each of the skill set (these are not images).
Last HTML element, the Footer contains the social icons. Here are using absolute positioning to place the images appropriately.
Section 4: Validating
Validate the entire code, check for possible errors and ensure it conforms with the latest HTML & CSS standards.
Section 5: Goodbye
Goodbye and a thank you message!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Elias Sarantopoulos, Lecturer, Designer, Developer, and Photographer

Born in Athens, Greece, Elias migrated to the US where he received his BA and MA degrees. He started his professional career in the mid-90s working for tech startups focusing on web technologies and being a part time faculty in various educational institutions. An instructor and mentor over 20 years of teaching experience Elias has taught both graphic and web design courses in corporations, universities, and colleges.

In 2008 he started, his personal free online training blog teaching subjects on Photoshop, Web Design, Photography, Illustrator, and 3D tutorials which have also been published and shared to various prominent community blogs (Cgtuts+, Design Instruct among others) for all graphic and web designers. His lectures focus on creative examples from start to finish so students practice, troubleshoot and finish a whole project.

He has developed an iOS application; the Hagia Sophia Tour Guide (three different languages) based on one of the architecturally most recognized museums in history. He is an avid amateur photographer collecting materials for his lectures as well as enjoying casual photography.

Elias is currently residing in Istanbul, Turkey teaching at a private university participating in all aspects of visual communication design.

Ready to start learning?
Take This Course