Front End Web Development-How to Sell on Themeforest & Earn

Name your premium template for ThemeForest with a unique name and verify availability on Google. Plan a logo and adjust code comments and documentation.

learn how to design a logo for a template and its documentation using Adobe Photoshop CS6, including outsourcing options and basic shapes for a clean logo with a transparent background.

Design a favicon by crafting a square 48-pixel icon featuring the first letter of your template name as a logo, set a background color, and save for the browser tab.

Download and organize project resources, including bootstrap, assets, and icons, to initialize a template and establish a stable structure for a responsive front-end project.

Open the project folder in your editor, add the downloaded resources, and document your work with comments. Create new instance and custom files, and place them in the body section.

Import google fonts (poppins for titles, woolly for body), apply a two-color theme with css variables, and create reusable classes like busy primary and busy secondary for typography and layout.

Learn to markup the hero section using bootstrap containers, creating a home section with id and class attributes, adding an intro, description, and call-to-action button with icons.

Design a hero section using copyright-free stock images, set a full-width background, and center content with flexible layout. Implement hover effects, borders, and subtle animations to elevate the hero.

Explore implementing a typewriter effect using JavaScript and jQuery, including adding a custom script from GitHub, targeting the typed area, looping text, and integrating assets from the project resources.

Develop a responsive header markup using Bootstrap, including a brand, navigation items (home, portfolio, blog, contact), a collapsible menu for mobile, and right-aligned links inside a container.

Develop header styling by configuring a transparent background, applying precise padding and colors, and adding a decorative line using a before pseudo-element with hover transitions.

Develop a scrollspy and fixed on scroll effect by applying a fixed class, highlighting the active nav item as you scroll through sections like home, portfolio, and contact.

Identify the two types of rejections on Themeforest, including hard rejections and design-based feedback, and learn how email guidance reveals improvements to your template for sale.

Design with uniqueness to gain ThemeForest approval. Explore approved themes for inspiration, using Pinterest and existing templates to refine your blog designs.

Master proper commenting to clarify code for other developers and users, ensuring templates are understandable and easily adapted across different back-end contexts and setups.

Remove redundant javascript code to streamline projects, validate terminal files with WTC validator before submission, and check console for 404 errors. Improve readability by ensuring adequate contrast in the design.

Mark demo assets as not included, place JavaScript at the bottom unless top is essential, use dollar-sign placeholders, keep code aligned, and verify author partnerships per ThemeForest guidelines.

Learn to markup the about section using Bootstrap grid, with two-column layouts, padding, headings, and social contact info sections.

Learn how to style the about section with animated title effects, custom colors, a line before the title, and css transitions using pseudo elements and borders.

Design a responsive portfolio grid using Bootstrap, add filter buttons with an active state to sort images by category, and implement portfolio items.

Extend the portfolio section by styling the portfolio filters and margins, and implement hover effects with a scale transform and an active state.

Learn to implement isotope filtering and magnifique popup effects for a portfolio, including setting up filters, class-based items, and activating lightbox for portfolio items.

Markup the blog section by building a responsive blog grid of post cards with images, overlays, and meta such as date and comments, plus titles and descriptions.

Explore styling the blog section by configuring post cards with background colors, typography, borders, padding, and overlay effects, using absolute overlays and color variables to create a cohesive blog list.

Markup the contact section with a bootstrap grid, using a medium breakpoint, and build a validated contact form with form groups, controls, placeholders, and a submit button.

Style the contact section by configuring form inputs and a text area, refining borders, font size (14 px), margins (20 px), padding, and color, plus an uppercase submit button.

Learn to markup and style a fixed footer for a portfolio page, using containers, margins, and absolute positioning, with icons, arrows, and anchor links.

Refine the template to improve responsiveness across devices by adjusting margins, padding, fonts, and icons, using media queries and bootstrap utilities, and slow down animations.

Add a bootstrap-based preloader that covers the full screen, centers content both horizontally and vertically, uses a white background, and fades out after a timed interval.

Create multiple demo styles for a theme by duplicating and renaming templates, then convert between light and dark versions using color variables and theme rules to boost ThemeForest sales.

Master taking screenshots of the Getty template, setting up a bootstrap project, and preparing a display template by cropping and organizing images to create a polished frontend preview.

Create a showcase template for a traditional site, featuring Firestone with a two-column demo layout, light and dark versions, and centered titles that link to a full video.

Upload your template to a live server by using a hosting control panel. Unzip the package in public_html, rename the directory, and verify the theme link for Themeforest submission.

Validate a template with W3C validation to ensure ThemeForest submission readiness, fix invalid code (such as line 70) and re-upload until no errors remain.

Learn how to replace placeholder images in a Themeforest project. Adjust dimensions to 5000x4000, update blog and portfolio visuals, and rename assets to finalize a ready storefront design.

Create a preview image for a Themeforest template using Photoshop, set the exact 590x300 thumbnail size, and design layered graphics and text to showcase a modern, fully responsive template.

Create a thumbnail image for the template by setting a black background, adding the template name and portfolio text with adjusted font sizes and color accents on separate layers.

Write a clear ThemeForest template description by outlining an overview, paragraphs, and line breaks, then list features in an unordered list, ensuring fully responsive and SEO friendly.

Submit your site template to ThemeForest by signing in, uploading assets, and configuring category, features, thumbnail, and documentation. Set pricing for standard and extended licenses and confirm compatibility and responsiveness.