Learn & build a modern responsive website for themeforest

Tariq Ahmad, Web and User interface developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
60 Lessons (9h 6m)
    • 1. 01-Introduction

    • 2. 02-Tools needed to complete this course

    • 3. 03-free education stuffs

    • 4. 04-Choosing the right fonts and colors

    • 5. 05-Wire framing the Layout

    • 6. 06-Working in the Photoshop Grid System

    • 7. 07-Designing the Header Section in PSD

    • 8. 08-Designing the About Section in PSD

    • 9. 09-Designing the Interesting Fact Section in PSD

    • 10. 10-Designing the Services Section in PSD

    • 11. 11-Designing the Video Section in PSD

    • 12. 12-Designing the Portfolio Section in PSD

    • 13. 13-Designing the Team Section in PSD

    • 14. 14-Designing the Blog Section in PSD

    • 15. 15 Designing the Get in Touch Section in PSD

    • 16. 16-Designing the Message Section in PSD

    • 17. 17 Designing the Google Map And Copyright Info

    • 18. 18 Exporting Graphics from PSD

    • 19. 19 Setting intial Files

    • 20. 20 Writing HTML Code For Header Section

    • 21. 23 Writing HTML Code For Choose us Section

    • 22. 22 Writing HTML Code For About us Section

    • 23. 21 Writing HTML Code For Navbar Section

    • 24. 24 Writing HTML Code For Feature Section

    • 25. 25 Writing HTML Code For Services Section

    • 26. 26 Writing HTML Code For Video Section

    • 27. 27 Writing HTML Code For Portfolio Section

    • 28. 28 Writing HTML Code For Team Section

    • 29. 29 Writing HTML Code For News Section

    • 30. 30 Writing HTML Code For Banner Section

    • 31. 31 Writing HTML Code For Get in Touch Section

    • 32. 32 Writing HTML Code For Message Section

    • 33. 33 Writing HTML Code For Map And Copy right Section

    • 34. 34 Commenting the CSS Section

    • 35. 35 Writing General CSS Code

    • 36. 36 Writing CSS Code for the Banner Header Part 1

    • 37. 37 Writing CSS Code for the Banner Header Part 2

    • 38. 38 Writing CSS Code For Navbar Section

    • 39. 39 Writing CSS Code For About Section

    • 40. 40 Writing CSS Code For Features Section

    • 41. 41 Writing CSS Code For Services Section

    • 42. 42 Writing CSS Code For Video Section

    • 43. 43 Writing CSS Code For Portfolio Section Part 1

    • 44. 44 Writing CSS Code For Portfolio Section Part 2

    • 45. 45 Writing CSS Code For Team Section

    • 46. 46 Writing CSS Code For News Section

    • 47. 47 Writing CSS Code For Parallax Bannner Section

    • 48. 48 Writing CSS Code For Get in Touch Section

    • 49. 49 Writing CSS Code For Message Section

    • 50. 50 Writing CSS Code For Map And Copyright Section

    • 51. 51 Writing CSS Code For Scrollup Section

    • 52. 52 Writing CSS Code For BG Slider Section Part 1

    • 53. 53 Writing CSS Code For BG Slider Section Part 2

    • 54. 54 Writing CSS Code For BG Slider Section Part 3

    • 55. 55 Writing CSS Code For Responsive Designing Part 1

    • 56. 56 Writing CSS Code For Responsive Designing Part 2

    • 57. 57 Writing CSS Code For Responsive Designing Part 3

    • 58. 58 Working on Animation Part 1

    • 59. 59 Working on Animation Part 2

    • 60. 60 About Themeforest Marketplace And Conclusion


Project Description

Build a modern flat responsive theme for themeforest

Learn to build your skills to the next level and start earning real money

  • Learn to use wire framing tools, Adobe Photoshop, Bootstrap framework, HTML5, CSS3 and jQuery.
  • Build professional website and earn real money from the web.
  • Make a web developer career online in the marketplaces like themeforest and wrapbootstrap

Course Description

Modern web design approach need a practical knowledge of the tools and features of Adobe Photoshop and Twitter bootstrap. This course, intended for beginners and experienced designers alike, will show you how to use Photoshop to design web pages, custom graphics and more that excite end users and impress clients.

So what you will learn in this course?

  • Right tools Needed to compete in the modern web development environment.
  • A lots of free educational stuffs.
  • Choosing the right fonts And colors.
  • How to wire framing the layout.
  • Designing the complete site in Photoshop.
  • How to make a jQuery based amazing background slider.
  • How to make a static image background in Photoshop as well as in HTML5 and CSS3.
  • How to make animated skills bar in HTML5, CSS3 and jQuery.
  • How to make use of animated hover effects.
  • How to make a team section with the help of owl-carousel jQuery plugin.
  • How to implement a parallax effect inside the website.
  • How to use jQuery for super cool effects like animations, scroll effects and sticky navigation.
  • How to implement a Nivo Lightbox to design a great portfolio section.
  • How to implement snazzy map in your website.
  • How to make use of wow JavaScript plugin and animation in your website.
  • How to upload your site to the top marketplaces like themeforest and wrapbootstrap.

At the end of the course, you will have such a deep understanding of how to make a beautiful with a content rich website in Bootstrap, HTML, CSS and jQuery that you will be able to build any website you can imagine from complete scratch.

So, who is this course for?

This course is perfect for complete beginners: there is absolutely no coding experience required. This course is also perfect for an intermediate level developers Or maybe you're a web designer and want to expand your skill set into HTML5 and CSS3? This course is perfect for you, too!

What are the requirements?

  • Wire framing tool, Adobe Photoshop 1170 Grid System ( there is a lecture on tools you are going to use).
  • A little bit knowledge of HTML and CSS.
  • Any computer will do — Windows, OSX or Linux
  • Passion to learn exciting new skills


What am I going to get from this course?

  • Learn how to plan your website and make use of wire framing tools..
  • Learn how to work inside the grid system by understanding baseline and vertical grids.
  • Learn about the free useful resources present on the web about web designing to move your skills to the next level.
  • .Learn to design pixel-perfect flat designs website with 1170 bootstrap grid system.
  • Learn how to use a twitter bootstrap in a modern web development environment.
  • Learn simple-to-use web design guidelines and tips to make your website outstanding.
  • Learn how to implement advance jQuery based background slider in your website.
  • Learn how to make skill bar jQuery effect in a website.
  • Learn how to implement an advance sticky navigation in your website.
  • Learn how make an awesome hover based portfolio section in a website.
  • Learn how to convert a pixel perfect PSD to a fully functional HTML5, CSS3 and jQuery based modern website.
  • Learn responsive web design by creating a website thats works fine across all devices.
  • Learn how to apply a parallax effect in your website.
  • Learn how to make use of JavaScript plugin and other css plugin to animate your website.
  • Learn how to implement a modern snazzy map in your website.
  • By the end of the course you will be able to build your own good looking website from the very scratch and apply the concepts, ideas and skills learned here to your own projects and start your web development carrier.


What is the target audience?

  • People who want to earn money from marketplaces like themeforest, wrapbootstrap, codegrape, mojotheme etc.
  • Complete beginners who want to learn how to build a professional, beautiful and responsive website.
  • Web designers who want improve their skills to the next level and learn flat web design concept.
  • Web designer who want to learn something new in the modern web design environment.

What am I going to get from this course?

  • Over 61 lectures and 9 hours of content!
  • prepare their own bootstrap theme for the marketplaces to start a profitable business

What is the target audience?

  • Any person who want to earn from these marketplaces and start a new career in theme development can take this course


Student Projects