Useful Tutorials to Code One Page Portfolio Website

Have a great portfolio is crucial for web designer, graphic designer, photographer or any creative people to showcase their works and skills. And one page portfolio can do this effectively.

Useful Tutorials to Code One Page Portfolio Website
Let’s take a look here, useful tutorial articles that we have collected to help you create your own one page portfolio website.

jQuery Image Gallery Plugins

Design Tips Articles

Before we start to create a one page portfolio, please read these articles first. Very useful design tips articles that can help you in designing a succesful one page portfolio site.

10 Expert Tips for Designing a One Page Portfolio

Useful Tutorials to Code One Page Portfolio Website

by Joshua Johnson
This article contains several tips and examples to help you create an amazing single page portfolio.

Single-Page Websites: Examples and Good Practices

Useful Tutorials to Code One Page Portfolio Website

by Cameron Chapman
While a lot of general web design best practices apply to single-page sites just as they apply to more complex sites, there are some special considerations, which we’ve included below.

9 Essential Tips For Creating A Single Page Portfolio Website

Useful Tutorials to Code One Page Portfolio Website

by Chris Creed
Below are some important tips that you’ll want to consider when designing single page sites – most of these also apply to all types of web design, but they are particularly relevant with one page sites.

Useful Tutorials

Coding a CSS3 & HTML5 One-Page Website Template

Useful Tutorials to Code One Page Portfolio Website

by Martin Angelov
Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in.

Tutorial Demo

Design & Code Cool Single-Page Portfolio Part2

Useful Tutorials to Code One Page Portfolio Website

by Pedro Hilion
Today we’re going to be creating a single-page portfolio design that can be used to showcase your design work and allow people to get in touch with you.

Tutorial Demo

How To Build Your Own Single Page Portfolio Website

Useful Tutorials to Code One Page Portfolio Website

by Chris Spooner
Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.

Tutorial Demo

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Useful Tutorials to Code One Page Portfolio Website

by Tom Kenny
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere.

Tutorial Demo

jQuery and CSS single page portfolio, a vertical parallax navigation experiment

Useful Tutorials to Code One Page Portfolio Website

by Tutorial Shock
On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS.

Tutorial Demo

Create a Single Page Portfolio from Scratch – Part 2: HTML and CSS

Useful Tutorials to Code One Page Portfolio Website

by Michael Soriano
This part focuses on the HTML and CSS mark up to convert our .psd file to a living web page.

Tutorial Demo

Code a Stylish Portfolio Site Design in HTML & CSS

Useful Tutorials to Code One Page Portfolio Website

by Chris Spooner
This week we’re going to code up the design into a complete working HTML and CSS website and add the finishing touches in the form of super duper jQuery effects.

Tutorial Demo

Premium One Page WordPress Themes

ShapeShifter – One Page, Infinite Possibilities

Useful Tutorials to Code One Page Portfolio Website

by epicera
ShapeShifter is a single-page WordPress template that has been designed to be just about the simplest theme you could possibly use. This theme is lean, mean, and ready for you to install in minutes.

Buy Now Demo

Auzora – One Page Portfolio and Business theme

Useful Tutorials to Code One Page Portfolio Website

by webinpixels
Auzora is One Page Portfolio WordPress Theme. Comes with massive admin features. Are you tired to see a lot of one page wordpress theme use scrollable effect when change the page? Then check the auzora live preview

Buy Now Demo

Locus One Page – WordPress

Useful Tutorials to Code One Page Portfolio Website

by elemis
Features
3 Skins x 3 backgrounds
2 different slider options (3D, Nivo, Cycle)
Thorough Help Documentation (with videos)
jQuery Enchanced
Working contact form with jQuery Form Validation
Portfolio with categories
News carousel

Buy Now Demo

ExcelsiorWP – One Page Portofolio Theme

Useful Tutorials to Code One Page Portfolio Website

by Brankic1979
Excelsior is a clean and professional one page template, perfect for all types of business, companies and personal web sites. This template is tested in all common browsers: Firefox, Chrome, Safari, Opera, IE7 and IE8.

Buy Now Demo

Pixelstudio – An Elegant Scrolling One-page Theme

Useful Tutorials to Code One Page Portfolio Website

by Keliah
Pixelstudio is a simple and elegant one-page theme built on the 960 grid with some nice JQuery powered effects. It is compatible with WordPress 3.0.
The layout is scrolling vertically and is provided with 8 custom color variants + 3 background patterns. This theme also includes a shortcodes and working contact form.

Buy Now Demo

Identity – One Page Blog/Portfolio Theme

Useful Tutorials to Code One Page Portfolio Website

by Dannci
Identity is new pretty WordPress theme for personal or business blog/portfolio. All in “one page”. Professional “One Page” WordPress 3 Theme with smooth scrolling.

Buy Now Demo

Da Vinci Theme – WP One Page Portfolio 12 in 1

Useful Tutorials to Code One Page Portfolio Website

by lidplussdesign
Da Vinci Theme is an One Page Portfolio WordPress Theme, best suited for business and portfolio sites. This theme comes with 12 color variations.

Buy Now Demo

Enjoy the real success with 6002-1 exam online training programs and latest 640-822.Also prepare for next level with quality of 220-701.

10 Comments to “Useful Tutorials to Code One Page Portfolio Website”

Add Comments (+)

  1. Connie says:

    Pixelstudio is available as well as template for GetSimple CMS, and that version is for free, see here:

    http://pixelstudio.getsimplethemes.com/

    • Eko S. says:

      Hi Connie, great!
      Thanks for share the link with us.
      This theme is free only for GetSimple CMS. More about what is GetSimple CMS? here: http://get-simple.info/

    • Keliah says:

      Hi, I’m Keliah, the designer of Pixelstudio for Themeforest.

      GetSimple never contacted me to ask anything, they associated me to their project without any prior consent from me. Hopefully we get that sorted out soon.

  2. TheKoolDots says:

    This is super slick stuff. I’m I correct in assuming that it’s best to use Adobe Flash for this?

    Thanks

    • Eko S. says:

      Hi,

      Yes if you need a great effect, using flash is the best. But your site will need more time to load all effect and not good for SEO reason.
      How do you think?

  3. Repius says:

    Thanks for sharing the tutorial. It’s definitely important to build a portfolio site to put all your works together. This is a website I used to create a portfolio website without any programming knowledge. check out http://www.opresume.com.

  4. very good one page portfolio showcase!

  5. great website, great designs, thanks.

  6. SAP Training says:

    thanx for sharing this images.. as a designer it is helpful to me a lot.. good collections

  7. R Sharma says:

    Great collection, I was looking for this from last few month but I think now I can stop my searching.
    Thanks a lot of. :)

Trackbacks/Pingbacks

  1. Useful Tutorials to Code One Page Portfolio Website | The best Tutorials
  2. Useful Tutorials to Code One Page Portfolio Website | WebDevKungfu
  3. Technologies required for building a portfolio website | Justin's DMT Blog

Leave a Reply

 

Amazingly Beautiful WordPress Themes