Learn & build a modern responsive website for themeforest
4.3 (23 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.
306 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn & build a modern responsive website for themeforest to your Wishlist.

Add to Wishlist

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 (23 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.
306 students enrolled
Created by Tariq Ahmad
Last updated 1/2016
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 9.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
prepare their own bootstrap theme for the marketplaces to start a profitable business
View Curriculum
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.
Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 61 Lectures Collapse All 61 Lectures 09:17:09
+
Introduction & Course Overview
1 Lecture 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.

Preview 03:34
+
Web Design Basics
3 Lectures 10:08

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

Preview 02:26

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

Preview 03:15

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

Preview 04:27

Web design quiz
3 questions
+
Wireframing the Layout
1 Lecture 14:54

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

Wire framing the Layout
14:54

Wireframing quiz
2 questions
+
Working in a Photoshop
13 Lectures 01:58:14

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

Working in the Photoshop Grid System
12:45

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

Designing the Header Section in PSD
12:46

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

Designing the About Section in PSD
14:48

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

Designing the Interesting Fact Section in PSD
06:14

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

Designing the Services Section in PSD
07:46

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

Designing the Video Section in PSD
05:55

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

Preview 06:15

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

Designing the Team Section in PSD
05:44

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

Designing the Blog Section in PSD
11:58

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

Designing the Get in Touch Section in PSD
12:38

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

Designing the Message Section in PSD
05:37

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

Designing the Google Map And Copyright Info
06:14

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

Exporting Graphics from PSD
09:34

Photoshop quiz
5 questions
+
Photoshop to HTML5 Conversion
15 Lectures 01:51:37

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

19-Setting Intial Files
09:17

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

Writing HTML Code For Header Section
09:50

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

Writing HTML Code For Navbar Section
06:28

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

Writing HTML Code For About Us Section
07:21

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

Writing HTML Code For Choose us Section
07:12

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

Writing HTML Code For Feature Section
06:30

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

Preview 06:18

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

Writing HTML Code For Video Section
03:15

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

Writing HTML Code For Portfolio Section
08:44

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

Writing HTML Code For Team Section
10:03

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

Writing HTML Code For News Section
08:08

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

Writing HTML Code For Banner Section
04:35

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

Writing HTML Code For Get in Touch Section
10:18

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

Writing HTML Code For Message Section
09:02

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

Writing HTML Code For Map And Copy right Section
04:36

HTML quiz
5 questions
+
Writing a CSS Code For Our Website
18 Lectures 03:13:36

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

Commenting the CSS Section
05:27

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

Writing General CSS Code
12:43

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

Writing CSS Code for the Banner Header Part 1
13:30

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

Writing CSS Code for the Banner Header Part 2
12:53

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

Writing CSS Code For Navbar Section
14:00

Writing CSS Code For the About Us Section
24:38

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

Writing CSS Code For Features Section
04:21

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

Writing CSS Code For Services Section
03:08

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.

Writing CSS Code For Video Section
09:40

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

Writing CSS Code For Portfolio Section Part-1
13:44

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.

Writing CSS Code For Portfolio Section Part-2
07:00

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.

Writing CSS Code For Team Section
18:19

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

Writing CSS Code For News Section
12:10

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

Writing CSS Code For Parallax Bannner Section
06:21

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

Writing CSS Code For Get in Touch Section
05:03

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

Writing CSS Code For Message Section
06:44

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.

Writing CSS Code For Map And Copyright Section
09:47

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

Writing CSS Code For Scrollup Section
14:08

CSS quiz
5 questions
+
Working in a jQuery Background Slider
3 Lectures 32:40

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

Writing CSS Code For BG Slider Section Part-1
13:06

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

Writing CSS Code For BG Slider Section Part-2
14:55

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

Writing CSS Code For BG Slider Section Part-3
04:39
+
Responsive Web Design with Media Queries
3 Lectures 35:54

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

Writing CSS Code For Responsive Designing Part-1
09:22

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

Writing CSS Code For Responsive Designing Part-2
10:15

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

Writing CSS Code For Responsive Designing Part-3
16:17
+
Applying Animation To Our Website
2 Lectures 28:19

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

Working on Animation Part-1
11:31

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

Working on Animation Part-2
16:48
+
Conclusion
2 Lectures 08:13

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.

About Themeforest Marketplace And Conclusion
08:11

Project Files
00:02
About the Instructor
Tariq Ahmad
4.3 Average rating
23 Reviews
306 Students
1 Course
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.