Learn & build a modern responsive website for themeforest

Learn & build a modern theme in bootstrap for themeforest from scratch in this complete HTML5 & CSS3 beginner's course.
4.3 (19 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.
293 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 61
  • Length 9.5 hours
  • Skill Level Beginner 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 9/2015 English

Course Description

Learn and build a modern flat responsive website in Photoshop and bootstrap and start your own theme development business by making website for the themeforest and wrapbootstrap marketplaces.

This course teaches you how to code as you build a professional and nice looking website from scratch, so you never feel like you are in class.

We have bought together all the professional procedures that are accepted for building bootstrap sites into an unique project based course.

Winning the Heart, Mind, and Loyalty of Your Customers

Today, business is not about just taking an order. You have to nurture a win-win relationship and focus on making the customers or clients feel so important and special that they will not only want your product or service, but will recommend others to you

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?

  • 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.

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.

Curriculum

Section 1: Introduction & Course Overview
03:34

In this lecture a brief overview of the course should be highlighted. At the end of the course student will understand what actually the course is all about.

Section 2: Web Design Basics
02:26

In this lecture student will learned about the different tools necessary to complete this course.

03:15

In this lecture student will know about the free educational stuffs that are needed in the modern web design trends.

04:27

In this lecture student will aware from the right fonts and colors to use in the professional website.

Web design quiz
3 questions
Section 3: Wireframing the Layout
14:54

In this lecture student will learned about different wire framing tool across the web to start wire framing their website.

Wireframing quiz
2 questions
Section 4: Working in a Photoshop
12:45

In this lecture grid system will be discussed as it is the backbone of modern flat design website.

12:46

In this lesson we will start designing our background header section in photoshop. At the end student will know how to make a stylish background header in photoshop..

14:48

In this lesson we will make our about us section in a photoshop which includes a nice categories with a skill sets section.

06:14

In this lesson we will work on the interesting facts section of our website in photoshop.

07:46

In this lesson we will design the services section of our website in photoshop.

05:55

In this lesson we will design a video section in photoshop.

06:15

In this lesson we will design our portfolio section in photoshop to showcase your work.

05:44

In this lesson we will work on the team section of our website in photoshop.

11:58

In this lesson we will design the latest news section in photoshop.

12:38

In this lesson we will design the get in touch section in photoshop.

05:37

In this lesson we will design a message section in photoshop.

06:14

In this lesson we will finalize our photoshop conversion by working in a google map and copyright information.

09:34

In this lesson we will export all our graphics from photoshop to an image folder.

Photoshop quiz
5 questions
Section 5: Photoshop to HTML5 Conversion
09:17

In this lesson we will set up our initial files like we will make a folder structure for the CSS, images and javascript..

09:50

In this lesson we will make use of the front end bootstrap framework to start the HTML code for the header section.

06:28

In this lesson we will make use of the front end bootstrap framework to write code for the navbar section.

07:21

In this lesson we will make use of the front end bootstrap framework to write an HTML code for the about us section.

07:12

In this lesson we will make use of the front end bootstrap framework to write an HTML code for the why choose us section.

06:30

In this lesson we will make use of the bootstrap framework to write an HTML code for the feature section.

06:18

In this lesson we will make use of the bootstrap framework to write an HTML code for the services section.

03:15

In this lesson we will make use of the bootstrap framework to write an HTML code for the video section.

08:44

In this lesson we will make use of the bootstrap framework to write an HTML code for the portfolio section.

10:03

In this lesson we will make use of the bootstrap framework to write an HTML code for the team section.

08:08

In this lesson we will make use of the bootstrap framework to write an HTML code for the news section.

04:35

In this lesson we will make use of the bootstrap framework to write an HTML code for the parallax banner section.

10:18

In this lesson we will make use of the bootstrap framework to write an HTML code for the get in touch section.

09:02

In this lesson we will make use of the bootstrap framework to write an HTML code for the message section.

04:36

In this lesson we will make use of the bootstrap framework to write an HTML code for the map and copyright section.

HTML quiz
5 questions
Section 6: Writing a CSS Code For Our Website
05:27

In this lesson we will start commenting the different CSS section use in our website.

12:43

In this lesson we will write a general CSS code of our website like the heading, paragraphs, body font size etc.

13:30

In this lesson we will write a CSS code for the background banner section part 1.

12:53

In this lesson we will write a CSS code for the background banner section part 2.

14:00

In this lesson we will write a CSS code for the navbar section.

Writing CSS Code For the About Us Section
24:38
04:21

In this lesson we will write a CSS code for the feature section.

03:08

In this lesson we will write a CSS code for the services section.

09:40

In this lesson we will write a CSS and jQuery code, along with it we will add an external fancybox plugin to our video section.

13:44

In this lesson we will write a CSS code for the portfolio section.

07:00

In this lesson we will write a CSS code. Along with it, we will add some external nivo lightbox plugin to add some interactivity in the portfolio section.

18:19

In this lesson we will write a CSS code for the team section, along with it we will add owl-carousel external plugin to make some sliding effect in our website.

12:10

In this lesson we will write a CSS code for the latest news section.

06:21

In this lesson we will write a CSS code for the parallax banner section.

05:03

In this lesson we will write a CSS code for the get in touch section.

06:44

In this lesson we will write a CSS code for the message section.

09:47

In this lesson we will learn how to add a snazzy map in our website and also get the google API key for our map.

14:08

In this lesson we will learn how to add a scroll up and scroll down jQuery functionality in our website..

CSS quiz
5 questions
Section 7: Working in a jQuery Background Slider
13:06

In this lesson we will start coding the jQuery based background slider section part 1.

14:55

In this lesson we will start coding the jQuery based background slider section part 2.

04:39

In this lesson we will start coding the jQuery based background slider section part 3.

Section 8: Responsive Web Design with Media Queries
09:22

In this lesson we will write a responsive design code for our website part 1.

10:15

In this lesson we will write a responsive design code for our website part 2.

16:17

In this lesson we will write a responsive design code for our website part 3.

Section 9: Applying Animation To Our Website
11:31

In this lesson we will apply some cool animation to our website part 1.

16:48

In this lesson we will apply some cool animation to our website part 2.

Section 10: Conclusion
08:11

In this lesson we will talk about the different marketplaces including the themeforest and wrapbootstrap that are top marketplaces nowadays and also wind up our course.

Project Files
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Tariq Ahmad, Software Engineer, Theme Developer, Freelancer

Tariq Ahmad is a professional theme developer with expertise in both user interface (UI) and User Experience Design (UXD).

He's deeply involved in web Design, web development, online marketplaces etc. He loves to code in HTML5, CSS3, JavaScript, Ajax, PHP, wordpress, magento, CMS, Admin themes and some other tools. He is a passionate web developer who creates web applications and websites from absolutely scratch

The purpose of teaching here at udemy is to share my expertise and provide high quality courses which can be useful and practical for students.

So come here to this on-line learning platform and avail a big opportunities from my courses and start your own career in on-line business.



Ready to start learning?
Take This Course