20 Tips To Get Your HTML Website On Themeforest Accepted

Tips to get your HTML ThemeForest website accepted

Published in

Easy Data

5 min readSep 2, 2020

Submitting your first HTML website on ThemeForest may take a lot of work because you have to follow all guidelines they put. I’ve spent a lot of time uploading my websites on ThemeForest. Till I figured out the right way to prepare the item before submitting it, so all this tips i tried personally and they have worked for me.

So in this article, I will guide you through the most important tips you should follow and do before submitting your item.

These are all the tips which i will go through it with you:

Item name
Spacing and alignment
Typography
Color palette
W3C validation
Indentation
Comments
CSS & JavaScript Table
Use latest versions
Use strict in JavaScript
Variables in JavaScript
Use functions in jQuery
Avoid animations
Documentation
Images placeholders
Free images for commercial use
Import Fonts in one line
Responsive
Include libraries locally
Working links
File submission (Needed Files)

So, let’s get started:

1. Item Name

When choosing a name for your item, The title must be unique, simple, and addresses what you offer, and it should be upper case.

2. Spacing and Alignment

The spaces between sections and blocks must be equal and consistent. You can achieve that by adding equal padding for each section, equal margin between blocks, and above or below headers. Also, the alignment of the titles and paragraphs should be aligned equally and rightly for the eye.

You can check the link below for more info about grids and achieve an adequate spacing and alignment.

https://www.designsystems.com/space-grids-and-layouts/

There is a useful extension for firefox and chrome browsers that measures the distance between the blocks and everything. You can find it in the link below.

https://addons.mozilla.org/en-US/firefox/addon/measure-it/

3. Typography

The size of titles and paragraphs are matters here; use headings for titles “h1, h2, h3”.

4. Color Palette

Choosing a color palette is an essential step in designing your website. You have to choose a palette that is good for the eye and try to avoid using many palettes to keep it simple.

Check out this link to choose a good palette.

https://colorhunt.co/

4. W3C Validation

Having a website with no errors or any HTML markup errors is a thing every web developer should achieve. So before uploading your item, you should run this W3C validation to check for any errors. You can do that by uploading your HTML file in the website below.

https://validator.w3.org/

5. Indentation

Your website should be intended correctly and in the right way. In order to quickly achieve that and take less time, I suggest using a tool named “Beautify,” which is available for brackets editor.

6. Comments

A professional developer knows that having comments in every line to explain his code is an essential step.

7. CSS & JavaScript Table

Create a table of contents of your code in your Style.css and java.js files to reach any section easily.

Here’s how it should look:

/* -----------------------------
Designed and Developed By "Khalid Moataz"
/* -----------------------------*/
OUR CSS INDEX

    01. START OF BASIC INSTALLATION
    02. START OF PRELOADER STYLE
    03. START NAVBAR SECTION
    04. START OF HEAD SECTION

/* ----------------------------------------------------*/

8. Use Latest Versions

Use latest versions of any framework or packages you use specially for jQuery and JavaScript.

9. Use strict in JavaScript

Themeforest prefers that for each javascript file to use the use strict method for all the files.

Here’s how you can use it:

(function($) { "use strict";// Your jQuery code})(jQuery);

10. Variables in Javascript

Use global variables for your javascript code, like the code below.

      var  
      mn =   $(".main-nav"),
      mns = "main-nav-scrolled",
      hdr =  $('head').height(),

11.Use functions in jQuery

For every action in jQuery try to use on function which takes two parameters, the first one indicates the type of the action you want to do for this variable, while the second parameter is calling function() then in between you apply your jQuery code.

Here’s how to do it.

$("#js--aboutsection").on('click', function(){
          $htmlbody.animate({scrollTop:$('#js--about-section').offset().top},1000)
        });

12. Avoid animations

For some reason, ThemeForest doesn’t prefer using animations or animate on scroll libraries. So try to avoid applying any animations.

13. Documentation

Documentation is an HTML file included in your files where you explain each line in your code. It should be a guide for the buyer on how to edit the website and install it. You have to treat the buyer as he doesn’t know anything about coding.

14. Images placeholders

The files you submit shouldn’t include any images. The images will only be available in the live version. But for the files which you will be upload, you will replace each image with a placeholder blank image corresponding to the original size for the customer to replace it.

You can get these place holders image from the website below. All you have to do is replace your image link with this one and change the size to yours.

https://via.placeholder.com/150x150

15. Free images for commercial use

For sure you’ll use images on your website. At this point, you have to use images that are free to be used and don’t have a copyright, or you can buy images for commercial use. But don’t use images you don’t own.

Free image from websites like pexels, unsplash, Burst, The Stocks.

16. Import Fonts in one line

If you are using more than one font on your website, You will have to import all the fonts in one call.

For example, here we import two fonts at a time. These how it will look in your header.

<link href="https://fonts.googleapis.com/css?family=Lobster|Montserrat:900|Poppins:600" rel="stylesheet">

17. Responsive

Your website should be looking good on any screen including laptop, mobile, tablet and all screen resolution.

You can achieve that by creating a new CSS file and import it below the main style.css file and for this new file, adjust all the sections and everything on your website to fit well for every screen.

Here’s an example of what should be in this file:

/*-----Large Screen-----*/
@media only screen and (max-width : 1200px) {}
/*------Medium Screen (Tablet)----*/
@media only screen and (max-width : 992px) {}
/*------Small Tablet-------*/
@media only screen and (max-width:768px){}
/*-------Mobile Screen-----*/
@media only screen and (max-width : 480px) {}

18. Include libraries locally

When importing any libraries like bootstrap, jQuery, or any other libraries, firstly download them in your item directory and import them locally, not by including the library link.

19. Working links

Make sure that all your links are working and leads to something.

20. File submission (Needed Files)

Preparing the files is the last and essential step. You organize your files where you have one big zip file containing two folders, one for the item and one for the documentation.

Conclusion

The most important tip is to keep trying until you get accepted and don’t stop, every one had been through all of this, but in the end they had reached the top. I hope you gained a lot of useful information. If you have any questions don’t hesitate to ask. Good Luck.

Thank you.

References: ThemeForest,web3canvas, tutsplus, Icons8, Envato, sitepoint.