Create a Single HTML5 Resume
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.
128 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create a Single HTML5 Resume to your Wishlist.

Add to Wishlist

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.
128 students enrolled
Last updated 1/2013
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1 hour on-demand video
  • 3 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
  • Basic Photoshop skills
  • Some working HTML and CSS knowledge
  • Use any HTML editor
  • Web browsers: Firefox, IE, Chrome, Safari

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

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.
Compare to Other Resume Courses
Curriculum For This Course
10 Lectures
1 Lecture 01:41
What we are building, technologies we are using, what to follow, and prerequisites for this course.
Preview 01:41
The 960 Grid System
3 Lectures 07:15
A direct link to the zipped file including the detailed Photoshop template and the social icons.
Download Exercise Files

An introduction of the 960 grid framework and its benefits.
Preview 01:10

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.
Preview 06:02
Building the Resume
4 Lectures 01:01:14

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

Preview 20:25

The HTML Section element starts off the Career Objective and Education information.
Career Objective & Education

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).
Software Skills

Last HTML element, the Footer contains the social icons. Here are using absolute positioning to place the images appropriately.
The Footer
1 Lecture 02:27
Validate the entire code, check for possible errors and ensure it conforms with the latest HTML & CSS standards.
Validating for HTML & CSS
1 Lecture 00:50
Goodbye and a thank you message!
Preview 00:50
About the Instructor
Elias Sarantopoulos
4.3 Average rating
7 Reviews
128 Students
1 Course
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.